:root {
  --color-primario: #9A4A1C;
  --color-primario-oscuro: #7A3814;
  --color-fondo: #FBF8F1;
  --color-texto: #2E1F14;
  --color-borde: #EADFCB;
  --color-exito: #2F6B3A;
  --color-error: #c62828;
  --radio: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--color-fondo);
  color: var(--color-texto);
}

a { color: var(--color-primario-oscuro); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  background: #26211a;
  color: #f1eee7;
  padding: 24px 0;
  flex-shrink: 0;
}

.sidebar .brand {
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0 20px 20px;
  border-bottom: 1px solid #3a332a;
  margin-bottom: 12px;
}

.sidebar nav a {
  display: block;
  padding: 10px 20px;
  color: #d8d3c8;
}

.sidebar nav a:hover,
.sidebar nav a.active {
  background: #3a332a;
  color: #fff;
  text-decoration: none;
}

.main { flex: 1; padding: 24px 32px; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.topbar h1 { margin: 0; font-size: 1.4rem; }

.card {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 20px;
  margin-bottom: 20px;
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.stat { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 18px; }
.stat .valor { font-size: 1.8rem; font-weight: 700; color: var(--color-primario-oscuro); }
.stat .etiqueta { color: #6b6355; font-size: .85rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-borde); font-size: .92rem; }
th { color: #6b6355; font-weight: 600; text-transform: uppercase; font-size: .75rem; }

/* Botones "legacy" (login, 403/404, Categorias): solo los .btn SIN una
   variante de Bootstrap. Antes esta regla aplicaba a todo .btn y pintaba
   con el color primario los btn-outline-*, btn-danger, etc. */
.btn:where(:not([class*="btn-primary"]):not([class*="btn-outline"]):not([class*="btn-success"]):not([class*="btn-danger"]):not([class*="btn-secondary"]):not([class*="btn-warning"]):not([class*="btn-light"]):not([class*="btn-link"])) {
  display: inline-block;
  background: var(--color-primario);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: var(--radio);
  cursor: pointer;
  font-size: .9rem;
}
.btn:where(:not([class*="btn-primary"]):not([class*="btn-outline"]):not([class*="btn-success"]):not([class*="btn-danger"]):not([class*="btn-secondary"]):not([class*="btn-warning"]):not([class*="btn-light"]):not([class*="btn-link"])):hover { background: var(--color-primario-oscuro); }
.btn.btn-secundario { background: #6E5A48; }
.btn.btn-peligro { background: var(--color-error); }
.btn-sm { padding: 5px 10px; font-size: .8rem; }

.form-grupo { margin-bottom: 14px; }
.form-grupo label { display: block; margin-bottom: 5px; font-size: .85rem; color: #52493c; }
.form-grupo input,
.form-grupo select,
.form-grupo textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: .95rem;
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }

.alerta { padding: 12px 16px; border-radius: var(--radio); margin-bottom: 16px; font-size: .9rem; }
.alerta-exito { background: #e6f4e8; color: var(--color-exito); border: 1px solid #b9dfc0; }
.alerta-error { background: #fbe9e7; color: var(--color-error); border: 1px solid #f1b8b1; }

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(242, 183, 5, .18), transparent 55%),
    linear-gradient(160deg, #4E3220, #2A170D);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  padding: 32px;
  border-radius: 14px;
  border-top: 5px solid #F2B705;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.login-card h1 { margin-top: 0; font-size: 1.3rem; text-align: center; }
/* Logo de la marca (Huevos de AKA) arriba del formulario de login. */
.login-logo { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto 16px; }
.login-card .btn { width: 100%; margin-top: 6px; }
.check-linea { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: #52493c; }
/* Recuperar contrasena (2026-10-02): enlace bajo el formulario y texto de ayuda. */
.login-enlace { text-align: center; margin: 16px 0 0; font-size: .85rem; }
.login-enlace a { color: var(--ph-primario); }
.login-ayuda { font-size: .85rem; color: #52493c; margin-bottom: 14px; }
.check-linea input { width: auto; }

/* ============================================================================
 * Fase 1 en adelante: paleta profesional sobre Bootstrap 5.
 * Los estilos de arriba (.card, .btn, .form-grupo, .alerta, .stats, etc.)
 * se mantienen intactos para los modulos que todavia no se migran a Bootstrap
 * (Lotes, Produccion, Ventas, Clientes, Categorias) — no se elimina nada.
 * Todo lo de aqui abajo aplica a las vistas ya migradas (Granjas en
 * adelante) y al layout compartido.
 * ========================================================================= */

:root {
  /* Paleta tomada del logo Huevos B&F (2026-10-01, se mantiene con el logo Huevos de AKA 2026-10-03): cobrizo de la gallina,
     cafe madera del letrero, dorado de las letras, verde de la cinta y
     crema del fondo. */
  --ph-primario:        #9A4A1C; /* cobrizo (plumaje): botones y acentos */
  --ph-primario-oscuro: #7A3814;
  --ph-primario-claro:  #F6E3C4; /* paja */
  --ph-dorado:          #F2B705; /* letras "AKA": item activo del menu */
  --ph-dorado-oscuro:   #B98500;
  --ph-oscuro:          #3A2416; /* madera del letrero: sidebar */
  --ph-oscuro-2:        #4E3220;
  --ph-fondo:           #FBF8F1; /* crema */
  --ph-texto:           #2E1F14;
  --ph-texto-suave:     #6E5A48;
  --ph-borde:           #EADFCB;
  --ph-exito:           #2F6B3A; /* verde de la cinta */
  --ph-peligro:         #C0392B; /* cresta */
  --ph-info:            #2E7D80;

  /* Bootstrap usa estas variables en text-*, bg-*, border-* y links. */
  --bs-primary-rgb:   154, 74, 28;
  --bs-success-rgb:   47, 107, 58;
  --bs-danger-rgb:    192, 57, 43;
  --bs-warning-rgb:   242, 183, 5;
  --bs-secondary-rgb: 110, 90, 72;
  --bs-body-color:    #2E1F14;
  --bs-body-bg:       #FBF8F1;
  --bs-border-color:  #EADFCB;
  --bs-link-color-rgb: 122, 56, 20;
  --bs-link-hover-color-rgb: 154, 74, 28;
  --bs-secondary-color: rgba(110, 90, 72, .9);
}

body {
  background: var(--ph-fondo);
  color: var(--ph-texto);
}

/* --- Botones --------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--ph-primario);
  --bs-btn-border-color: var(--ph-primario);
  --bs-btn-hover-bg: var(--ph-primario-oscuro);
  --bs-btn-hover-border-color: var(--ph-primario-oscuro);
  --bs-btn-active-bg: var(--ph-primario-oscuro);
  --bs-btn-active-border-color: var(--ph-primario-oscuro);
  --bs-btn-focus-shadow-rgb: 154, 74, 28;
  --bs-btn-disabled-bg: var(--ph-primario);
  --bs-btn-disabled-border-color: var(--ph-primario);
}
.btn-outline-primary {
  --bs-btn-color: var(--ph-primario);
  --bs-btn-border-color: var(--ph-primario);
  --bs-btn-hover-bg: var(--ph-primario);
  --bs-btn-hover-border-color: var(--ph-primario);
  --bs-btn-active-bg: var(--ph-primario);
  --bs-btn-active-border-color: var(--ph-primario);
}
.btn-success { --bs-btn-bg: var(--ph-exito); --bs-btn-border-color: var(--ph-exito); --bs-btn-hover-bg: #23532C; --bs-btn-hover-border-color: #23532C; --bs-btn-active-bg: #23532C; }
.btn-outline-success {
  --bs-btn-color: var(--ph-exito);
  --bs-btn-border-color: var(--ph-exito);
  --bs-btn-hover-bg: var(--ph-exito);
  --bs-btn-hover-border-color: var(--ph-exito);
  --bs-btn-active-bg: var(--ph-exito);
}
.btn-outline-secondary {
  --bs-btn-color: var(--ph-texto-suave);
  --bs-btn-border-color: #D6C7AE;
  --bs-btn-hover-bg: var(--ph-primario-claro);
  --bs-btn-hover-color: var(--ph-primario-oscuro);
  --bs-btn-hover-border-color: #D6B98A;
  --bs-btn-active-bg: var(--ph-primario-claro);
  --bs-btn-active-color: var(--ph-primario-oscuro);
  --bs-btn-active-border-color: #D6B98A;
}
.btn-outline-warning {
  --bs-btn-color: var(--ph-dorado-oscuro);
  --bs-btn-border-color: var(--ph-dorado);
  --bs-btn-hover-bg: var(--ph-dorado);
  --bs-btn-hover-color: var(--ph-oscuro);
  --bs-btn-hover-border-color: var(--ph-dorado);
  --bs-btn-active-bg: var(--ph-dorado);
}
.btn-danger  { --bs-btn-bg: var(--ph-peligro); --bs-btn-border-color: var(--ph-peligro); --bs-btn-hover-bg: #9c2e23; --bs-btn-hover-border-color: #9c2e23; }
.btn-outline-danger {
  --bs-btn-color: var(--ph-peligro);
  --bs-btn-border-color: var(--ph-peligro);
  --bs-btn-hover-bg: var(--ph-peligro);
  --bs-btn-hover-border-color: var(--ph-peligro);
  --bs-btn-active-bg: var(--ph-peligro);
}

/* --- Texto / fondos con acento --- */
.text-primary  { color: var(--ph-primario) !important; }
.bg-primary    { background-color: var(--ph-primario) !important; }
.link-primary  { color: var(--ph-primario) !important; }

/* --- Alertas ----------------------------------------------------------- */
.alert-success { color: #1F4A27; background-color: #E8F2E6; border-color: #C5DDC1; }
.alert-warning { color: #6B4A00; background-color: #FDF3D3; border-color: #F5DD8E; }
.alert-danger  { color: #7d241a; background-color: #fbe9e7; border-color: #f1c4bd; }

/* --- Badges -------------------------------------------------------------*/
.badge.text-bg-primary { background-color: var(--ph-primario) !important; }
.badge.text-bg-success { background-color: var(--ph-exito) !important; }
.badge.text-bg-warning { background-color: var(--ph-dorado) !important; color: var(--ph-oscuro) !important; }

/* --- Tablas: cabecera en tono paja suave --------------------------------*/
.table { --bs-table-color: var(--ph-texto); --bs-table-border-color: var(--ph-borde); }
.table-light {
  --bs-table-bg: #F6EEDF;
  --bs-table-color: var(--ph-texto);
  --bs-table-border-color: var(--ph-borde);
}
.table-light th { color: var(--ph-oscuro-2); font-weight: 600; }
.table-secondary { --bs-table-bg: #EFE4D2; --bs-table-color: var(--ph-texto); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(242, 183, 5, .08); }

/* --- Paginacion y checks -------------------------------------------------*/
.pagination {
  --bs-pagination-color: var(--ph-primario);
  --bs-pagination-hover-color: var(--ph-primario-oscuro);
  --bs-pagination-hover-bg: var(--ph-primario-claro);
  --bs-pagination-focus-color: var(--ph-primario-oscuro);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(154, 74, 28, .25);
  --bs-pagination-active-bg: var(--ph-primario);
  --bs-pagination-active-border-color: var(--ph-primario);
}
.form-check-input:checked { background-color: var(--ph-primario); border-color: var(--ph-primario); }
.form-check-input:focus { border-color: var(--ph-primario); box-shadow: 0 0 0 .25rem rgba(154, 74, 28, .25); }

/* --- Formularios --------------------------------------------------------*/
.form-control:focus,
.form-select:focus {
  border-color: var(--ph-primario);
  box-shadow: 0 0 0 .25rem rgba(154, 74, 28, .25);
}
.form-label { color: var(--ph-texto); font-weight: 500; font-size: .88rem; }

/* --- Shell: sidebar + topbar -------------------------------------------*/
.ph-sidebar {
  width: 240px;
  background: linear-gradient(180deg, var(--ph-oscuro-2), var(--ph-oscuro) 40%, #2A170D);
  color: #F3E9D8;
  min-height: 100vh;
}
.ph-sidebar .ph-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ph-dorado);
  padding: .9rem 1.1rem;
  border-bottom: 1px solid rgba(242, 183, 5, .25);
}
.ph-sidebar .ph-brand img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}
.ph-sidebar .ph-brand small {
  display: block;
  font-weight: 400;
  font-size: .68rem;
  color: #D9C7A8;
  letter-spacing: .02em;
}
.ph-sidebar .btn-close { opacity: .9; }
.ph-sidebar .nav-link {
  color: #E3D5BD;
  border-radius: .5rem;
  padding: .55rem .9rem;
  margin: .1rem .6rem;
  font-size: .92rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.ph-sidebar .nav-link i { font-size: 1rem; width: 1.1rem; text-align: center; }
.ph-sidebar .nav-link:hover { background: rgba(242, 183, 5, .12); color: #fff; }
.ph-sidebar .nav-link.active { background: var(--ph-dorado); color: var(--ph-oscuro); font-weight: 600; }
.ph-sidebar .nav-link.disabled {
  color: #8A735B;
  cursor: default;
}
.ph-sidebar .nav-badge {
  font-size: .62rem;
  background: rgba(255,255,255,.12);
  color: #E3D5BD;
  padding: .1rem .4rem;
  border-radius: .4rem;
  margin-left: auto;
}

/* Columna de contenido del layout (`layouts/app.php`, junto al sidebar):
   `min-vw-0` NO existe en Bootstrap — sin esta regla el item flex tomaba
   `min-width: auto` y se estiraba hasta el ancho de la tabla mas ancha,
   desbordando la pantalla en celulares (las tablas `.table-responsive`
   no llegaban a desplazarse dentro de su recuadro). */
.min-vw-0 { min-width: 0; }

.ph-topbar {
  background: #fff;
  border-bottom: 3px solid var(--ph-dorado);
}
.ph-topbar h1 { color: var(--ph-oscuro); font-weight: 600; }

.ph-card {
  background: #fff;
  border: 1px solid var(--ph-borde);
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(58, 36, 22, .05);
}

.ph-stat-icon {
  width: 46px;
  height: 46px;
  border-radius: .65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: var(--ph-primario-claro);
  color: var(--ph-primario-oscuro);
}

/* Los modales de formularios (Registrar venta, Registrar produccion,
   etc.) envuelven modal-header/modal-body/modal-footer en un <form>
   para que el submit incluya todo el contenido — pero Bootstrap espera
   que esos 3 sean hijos DIRECTOS de .modal-content (que es flex
   column): asi es como .modal-body consigue `flex:1 1 auto` +
   `overflow-y:auto` y se encoge para caber en el modal, dejando
   header/footer siempre visibles (`.modal-dialog-scrollable`). Con el
   <form> de por medio ese flex se rompe: modal-body crece a su alto
   natural sin encogerse, y si el contenido es alto (ej. la tabla de
   categorias de Ventas) el modal-footer con los botones Cancelar/
   Guardar queda empujado fuera de la vista, sin scroll que lo alcance
   — bug real reportado por el usuario en el modal de Ventas.
   `display:contents` saca el <form> del arbol de CAJAS (no del DOM):
   sus hijos quedan como hijos directos de .modal-content a efectos de
   layout, el <form> sigue siendo el limite del submit. */
.modal-content > form { display: contents; }

/* Tintes suaves para tarjetas de resumen agrupadas (ej. cubetas por
   categoria en Clasificar) — un color de fondo pastel + su texto en
   version oscura para buen contraste, para diferenciar tarjetas a
   simple vista sin recurrir a bordes/iconos. Compuesto con .ph-card
   para pisar su `background: #fff` sin depender del orden de las
   reglas en el archivo. */
.ph-card.ph-tinte-azul     { background: #E7F0FA; }
.ph-card.ph-tinte-azul     .ph-tinte-texto { color: #2C5C86; }
.ph-card.ph-tinte-verde    { background: #E8F2E6; }
.ph-card.ph-tinte-verde    .ph-tinte-texto { color: var(--ph-exito); }
.ph-card.ph-tinte-dorado   { background: #FDF3D3; }
.ph-card.ph-tinte-dorado   .ph-tinte-texto { color: var(--ph-primario-oscuro); }
.ph-card.ph-tinte-coral    { background: #FBEAE7; }
.ph-card.ph-tinte-coral    .ph-tinte-texto { color: #A6432F; }
.ph-card.ph-tinte-lila     { background: #F1EAF7; }
.ph-card.ph-tinte-lila     .ph-tinte-texto { color: #6A4A8C; }
.ph-card.ph-tinte-turquesa { background: #E6F5F5; }
.ph-card.ph-tinte-turquesa .ph-tinte-texto { color: var(--ph-info); }
.ph-card.ph-tinte-naranja  { background: #FDEEDD; }
.ph-card.ph-tinte-naranja  .ph-tinte-texto { color: var(--ph-primario); }

/* ---------------------------------------------------------------------
   Dashboard por granja (rediseño 2026-09-29/30): una tarjeta por granja
   con cabecera + paneles (indicadores y tablas) en una grilla de 2
   columnas desde xl; en pantallas mas chicas se apilan.
   --------------------------------------------------------------------- */
.ph-dash-granja { overflow: hidden; }
.ph-dash-cabecera {
  background: linear-gradient(90deg, #FDF3D3, #FBF8F1);
  border-bottom: 1px solid var(--ph-borde);
  padding: .9rem 1.25rem;
}
.ph-dash-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: var(--ph-texto-suave);
  background: #fff;
  border: 1px solid var(--ph-borde);
  border-radius: 999px;
  padding: .2rem .7rem;
  white-space: nowrap;
}
.ph-dash-chip strong { color: var(--ph-texto); font-variant-numeric: tabular-nums; }

.ph-panel {
  background: #fff;
  border: 1px solid var(--ph-borde);
  border-radius: .6rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ph-panel-titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--ph-borde);
  font-weight: 600;
  font-size: .9rem;
}
.ph-panel-titulo i { color: var(--ph-primario); }
.ph-panel-titulo .ph-panel-sub {
  margin-left: auto;
  font-weight: 400;
  font-size: .75rem;
  color: var(--ph-texto-suave);
}
.ph-panel-cuerpo { flex: 1 1 auto; padding: .9rem; }
.ph-panel-nota {
  padding: .5rem .9rem;
  font-size: .75rem;
  color: var(--ph-texto-suave);
  border-top: 1px dashed var(--ph-borde);
}

/* Dashboard del superadmin (2026-10-03): los paneles van apilados en dos
   columnas, cada uno con su alto natural (no el 100% de la grilla). */
.ph-dash-superadmin .ph-panel { height: auto; }

/* Indicadores (3 por panel, separados por una linea vertical). */
.ph-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ph-kpi { padding: .1rem .9rem; min-width: 0; }
.ph-kpi:first-child { padding-left: 0; }
.ph-kpi + .ph-kpi { border-left: 1px solid var(--ph-borde); }
.ph-kpi-etiqueta {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ph-texto-suave);
  margin-bottom: .2rem;
}
.ph-kpi-valor {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-kpi-sub {
  font-size: .78rem;
  color: var(--ph-texto-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-top: .1rem;
}
@media (max-width: 575.98px) {
  .ph-kpis { grid-template-columns: 1fr; }
  .ph-kpi { padding-left: 0; }
  .ph-kpi + .ph-kpi { border-left: 0; border-top: 1px solid var(--ph-borde); margin-top: .6rem; padding-top: .6rem; }
}

/* Tablas del dashboard: pegadas al borde del panel, numeros alineados. */
.ph-tabla-dash { margin: 0; font-variant-numeric: tabular-nums; font-size: .875rem; }
.ph-tabla-dash > :not(caption) > * > * { padding: .4rem .6rem; }
.ph-tabla-dash th:first-child, .ph-tabla-dash td:first-child { padding-left: .9rem; }
.ph-tabla-dash th:last-child, .ph-tabla-dash td:last-child { padding-right: .9rem; }
.ph-tabla-dash thead th {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ph-texto-suave);
  background: var(--ph-fondo);
  border-bottom: 1px solid var(--ph-borde);
  white-space: nowrap;
}
.ph-tabla-dash tbody tr:last-child td { border-bottom: 0; }
.ph-tabla-dash tfoot td {
  font-weight: 700;
  background: var(--ph-fondo);
  border-top: 2px solid var(--ph-borde);
  border-bottom: 0;
  white-space: nowrap;
}
.ph-tabla-dash .ph-col-total { background: rgba(242, 183, 5, .10); font-weight: 600; }
/* Encabezados que pueden partirse en 2 lineas (Estado financiero del Dashboard, 6 columnas en media pantalla). */
.ph-tabla-dash.ph-encabezado-2-lineas thead th { white-space: normal; vertical-align: bottom; }
/* Variante angosta (Ventas: "Disponible" y "Carrito" lado a lado, en media pantalla). */
.ph-tabla-compacta > :not(caption) > * > * { padding-left: .35rem; padding-right: .35rem; }
.ph-tabla-compacta th:first-child, .ph-tabla-compacta td:first-child { padding-left: .6rem; }
.ph-tabla-compacta th:last-child, .ph-tabla-compacta td:last-child { padding-right: .6rem; }
/* Tabla con columnas agrupadas (Alimentacion, "Alimento por lote": Bultos | Kg
   por grupo, 2026-10-02): linea al empezar cada grupo, subrayado del titulo del
   grupo y fondo suave en el grupo del medio, para que no se confundan. */
.ph-tabla-grupos .ph-g-ini { border-left: 2px solid #D8C6A6; }
.ph-tabla-grupos thead th.ph-g-titulo { color: var(--ph-oscuro); border-bottom: 2px solid #D8C6A6; }
.ph-tabla-grupos thead th.ph-g-tinte { background: #F3EBDA; }
.ph-tabla-grupos tbody td.ph-g-tinte, .ph-tabla-grupos tfoot td.ph-g-tinte { background: #FBF6EC; }
.ph-texto-peligro { color: var(--ph-peligro) !important; }
.ph-texto-info    { color: var(--ph-info) !important; }

/* Estadisticas (2026-10-01): indicadores, titulos de seccion y graficas. */
.ph-stat-valor { font-size: 1.6rem; font-weight: 700; color: var(--ph-oscuro); font-variant-numeric: tabular-nums; line-height: 1.2; }
.ph-stat-valor small { font-size: .8rem; font-weight: 500; color: var(--ph-texto-suave); }
.ph-tend { display: inline-flex; align-items: center; gap: .15rem; margin-top: .35rem; font-size: .75rem; font-weight: 600; }
.ph-tend i { font-size: 1rem; }
.ph-tend-bien  { color: var(--ph-exito); }
.ph-tend-mal   { color: var(--ph-peligro); }
.ph-tend-igual { color: var(--ph-texto-suave); }
.ph-seccion { display: flex; align-items: center; gap: .55rem; font-size: 1rem; font-weight: 700; color: var(--ph-oscuro); margin: 0 0 .75rem; }
.ph-seccion span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--ph-dorado); color: var(--ph-oscuro); font-size: .85rem;
}
.ph-grafica { position: relative; width: 100%; }
.ph-stat .ph-kpi-sub { white-space: normal; }
details.ph-card > summary { cursor: pointer; color: var(--ph-oscuro); }

/* Comprobante de venta con UN solo tamaño de letra = 1rem, el mismo del aviso
   y los botones de la pagina (2026-10-03, pedido del
   usuario): pisa la regla global de th (mayuscula a .75rem) y las clases de
   tamaño de Bootstrap; los encabezados se distinguen solo por el peso. */
.ph-comprobante,
.ph-comprobante th,
.ph-comprobante td { font-size: 1rem; }
.ph-comprobante th { text-transform: none; }
.ph-comprobante .ph-comprobante-total td { font-weight: 700; color: var(--ph-texto); border-top: 2px solid var(--ph-borde); }
/* Ventas, tarjetas "Disponible del lote" y "Carrito" (2026-10-03, pedido del
   usuario): UN solo tamaño de letra (.875rem, el de las tablas) para titulo,
   encabezados, celdas, campos, botones, etiquetas y notas — pisa .small, .h6,
   form-*-sm y el thead en mayuscula de .ph-tabla-dash. */
.ph-letra-uniforme { font-size: .875rem; }
.ph-letra-uniforme *:not(.bi) { font-size: inherit !important; }
.ph-letra-uniforme h2 { font-weight: 600; }
.ph-letra-uniforme thead th { text-transform: none; letter-spacing: 0; }
/* Con la letra pareja las celdas crecen: menos relleno lateral para que el
   Carrito siga cabiendo en media pantalla a 1200px. */
.ph-letra-uniforme .ph-tabla-compacta > :not(caption) > * > * { padding-left: .25rem; padding-right: .25rem; }
/* Ventana de confirmacion global (p. ej. "Finalizar compra"): titulo al mismo
   tamaño que el mensaje (antes h5 = 1.25rem), 2026-10-03. */
#phConfirmar .modal-title { font-size: 1rem; font-weight: 600; }

/* Impresion (comprobante de venta, 2026-10-01): solo el contenido de la
   pagina, sin menu, barra superior ni avisos. */
@media print {
  .ph-sidebar, .ph-topbar, main > .alert { display: none !important; }
  main { padding: 0 !important; }
  body { background: #fff !important; }
  .ph-comprobante { box-shadow: none !important; border: 0 !important; padding: 0 !important; }
}