/*
 * Estilo común de los sistemas de El Gran Chef sobre Tabler 1.6.1: la plataforma (CRM, plataforma.asaditos.ar, naranja) y
 * la oficina de producción (produccion.asaditos.ar, violeta). Hilo GRANCHEF | VISTAS UNIFICADAS, dueño 05/10/2026.
 *
 * ORIGINAL: gestion_produccion_app/public/assets/granchef.css. La plataforma lleva una COPIA idéntica en
 * public_html/elgranchef/assets/granchef.css, que no se edita: python herramientas/estilos_comunes.py copiar|verificar.
 *
 * Va después de Tabler (y de compat.css) y antes de la hoja de cada sistema (produccion.css, crm.css), que pone la paleta:
 * --tblr-primary y --tblr-primary-rgb, --barra (barra y menú), --barra-oscura (tema oscuro) y --barra-activo (subrayado).
 * Sin light-dark() ni anidamiento, para no depender de un navegador nuevo. El modo planta no la usa (planta.css).
 */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fuentes/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/barlow-condensed-700.woff2") format("woff2"); }

:root, [data-bs-theme] { --tblr-font-sans-serif: "Barlow", system-ui, sans-serif; }
body { font-size: 15px; }

/* Textos en negro (dueño, 05/10/2026). Tabler escribe el texto en gris oscuro y el secundario (subtítulos, pretítulos,
   encabezados de tabla, ayudas, .text-secondary, .text-muted) en gris medio. Las zonas oscuras (la barra y el menú, con
   data-bs-theme="dark") siguen con texto claro. El ejemplo dentro de un campo vacío (placeholder) queda gris a propósito:
   en negro se confundiría con un valor cargado. */
:root, [data-bs-theme=light] {
  --tblr-body-color: #000; --tblr-emphasis-color: #000;
  --tblr-secondary: #000; --tblr-muted: #000; --tblr-secondary-color: #000;
}
[data-bs-theme=dark] {
  --tblr-body-color: var(--tblr-gray-200); --tblr-emphasis-color: #fff;
  --tblr-secondary: var(--tblr-gray-400); --tblr-muted: var(--tblr-gray-400); --tblr-secondary-color: var(--tblr-gray-300);
}
/* Lo que Tabler pinta con un gris fijo, sin pasar por esas variables */
.footer, .nav, .dropdown-menu, .input-group-text, .list-group-header { color: #000; }
/* Los rellenos «secondary» (una etiqueta, un botón, una barra de gráfico) siguen grises: el negro es para el texto */
.bg-secondary, .text-bg-secondary, .btn-secondary, .border-secondary, .status-secondary { --tblr-secondary: var(--tblr-gray-500); }
/* Una fila apagada (<tr class="text-secondary">: dada de baja, anulada, bloqueada) sigue gris: ahí el gris dice algo */
tr.text-secondary { --tblr-secondary: var(--tblr-gray-500); }

/* Títulos: Barlow Condensed, en negrita y en MAYÚSCULAS (dueño, 05/10/2026). Solo el aspecto: el texto no cambia. */
.page-title, .card-title, .modal-title, .empty-title, .alert-heading, .navbar-brand {
  font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 700; letter-spacing: .01em;
}
.page-title, .card-title, .modal-title, .empty-title { text-transform: uppercase; letter-spacing: .03em; }
.page-title { font-size: 1.75rem; }
.card-title { font-size: 1.15rem; }
/* El ícono delante del título de una tarjeta, separado del texto (las que no usan d-flex gap-2) */
.card-title:not(.d-flex) > .icon:first-child { margin-right: .4rem; vertical-align: -.15em; }
/* Una etiqueta de estado dentro de un título conserva su tamaño y su texto */
.page-title .badge, .card-title .badge, .modal-title .badge {
  font-family: var(--tblr-font-sans-serif); font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; vertical-align: .3em;
}

/* Barra superior y menú en el color del sistema, con el logo en blanco; el menú en negrita (dueño, 05/10/2026) */
.barra-color { background: var(--barra) !important; --tblr-navbar-active-border-color: var(--barra-activo); --tblr-navbar-border-color: rgba(255, 255, 255, .18); }
[data-bs-theme=dark] .barra-color { background: var(--barra-oscura) !important; }
.barra-color .nav-link { color: rgba(255, 255, 255, .86); }
.barra-color .nav-item.active .nav-link, .barra-color .nav-link:hover { color: #fff; }
.menu-secundario { border-top: 1px solid rgba(255, 255, 255, .18); }
.menu-secundario .nav-link { font-weight: 700; }
.menu-secundario .nav-link-icon { margin-right: .25rem; }
.usuario-rol { color: rgba(255, 255, 255, .72); }
/* Botones sobre la barra (Salir): transparentes con borde blanco */
.barra-color .btn-barra { --tblr-btn-color: #fff; --tblr-btn-border-color: rgba(255, 255, 255, .35); --tblr-btn-hover-bg: rgba(255, 255, 255, .12);
  --tblr-btn-hover-color: #fff; --tblr-btn-hover-border-color: rgba(255, 255, 255, .6); background: transparent; }
/* Accesos a los otros entornos: botón lleno con el color del entorno al que lleva, para que resalte en la barra (dueño,
   05/10/2026). Plataforma naranja, producción violeta, planta magenta (docs/diseno_interfaz.md, «Colores por entorno»);
   el tono oscuro de cada uno, para que el texto blanco se lea (4,5:1 o más). */
.btn-entorno-plataforma { --entorno: #c2410c; --entorno-hover: #9a3412; }
.btn-entorno-produccion { --entorno: #6b4cc4; --entorno-hover: #5a3fa8; }
.btn-entorno-planta { --entorno: #a21caf; --entorno-hover: #86198f; }
.barra-color .btn-entorno { --tblr-btn-color: #fff; --tblr-btn-bg: var(--entorno); --tblr-btn-border-color: rgba(255, 255, 255, .7);
  --tblr-btn-hover-color: #fff; --tblr-btn-hover-bg: var(--entorno-hover); --tblr-btn-hover-border-color: #fff;
  --tblr-btn-active-color: #fff; --tblr-btn-active-bg: var(--entorno-hover); --tblr-btn-active-border-color: #fff;
  background-color: var(--tblr-btn-bg); font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.barra-color .btn-entorno:hover, .barra-color .btn-entorno:focus-visible { background-color: var(--tblr-btn-hover-bg); }

/* Ancho de las páginas: el 85 % de la pantalla (dueño, 05/10/2026). En pantallas medianas no baja de 1140 px (lo de
   Tabler), y en la tablet y el teléfono ocupa todo el ancho, como siempre. */
@media (min-width: 1200px) {
  .container-xl, .container-xxl { max-width: max(85vw, 1140px); }
}

/* Encabezado de página en el teléfono: si el título no tiene al menos 12 rem al lado de los botones, los botones bajan a
   otra línea (antes la columna del título quedaba en 20 px y los botones se le encimaban) */
.page-header .row > .col { min-width: min(12rem, 100%); }

/* Ingreso: franja del color del sistema con el logo en blanco, el nombre del sistema en grande y la tarjeta encima */
.ingreso-fondo { min-height: 100vh; background: linear-gradient(180deg, var(--barra) 0, var(--tblr-primary) 340px, var(--tblr-bg-surface-secondary, #f6f8fb) 340px); }
[data-bs-theme=dark] .ingreso-fondo { background: linear-gradient(180deg, var(--barra-oscura) 0, var(--barra) 340px, var(--tblr-bg-surface-secondary, #151f2c) 340px); }
.ingreso-sistema { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 700; font-size: clamp(2.75rem, 11vw, 3.75rem); line-height: 1;
  letter-spacing: .04em; text-transform: uppercase; color: #fff; margin: .6rem 0 .25rem; }
.ingreso-marca { color: rgba(255, 255, 255, .82); font-weight: 500; }

/* Números: cifras tabulares, a la derecha, sin cortar */
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dato-grande { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 700; font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }