/* =============================================================================
   HBA143 — Sistema visual del ERP
   -----------------------------------------------------------------------------
   THESIS: un instrumento de precisión para un negocio cuya moneda cambia cada
   día. Rechaza la plantilla de panel genérico —todo en mayúsculas, todo en peso
   900, azul índigo de librería— donde nada pesa más que nada y la cifra que
   importa no se distingue del adorno.
   OWN-WORLD: acero de cocina (neutrales gris-verde), pizarra de servicio para
   las superficies oscuras, latón como único acento de acción. Una sola familia
   tipográfica del sistema; cifras tabulares alineadas a la derecha. Verde, rojo
   y ámbar existen sólo para decir ingreso, egreso y pendiente.
   STORY: el gerente abre una pantalla y encuentra la cifra sin descifrar nada.
   FIRST VIEWPORT: barra lateral pizarra a la izquierda, contenido sobre acero
   claro, título en tono de voz normal, dinero alineado a la derecha, la acción
   primaria en latón, una sola por pantalla.
   FORM: refinamiento sistémico por tokens sobre el markup existente.
   -----------------------------------------------------------------------------
   Esta hoja se carga DESPUÉS de Tailwind y reajusta sus utilidades sin tocar el
   HTML de las páginas. Por eso usa !important de forma deliberada: es la única
   manera de corregir 1.400 clases repartidas en 24.000 líneas sin reescribirlas.
   ============================================================================= */

:root {
    /* Neutrales: acero de cocina (gris con matiz verde, no azul de plantilla) */
    --hba-n50:  #f4f6f5;
    --hba-n100: #e8ecea;
    --hba-n200: #d5dcd8;
    --hba-n300: #b2beb9;
    --hba-n400: #84968f;
    --hba-n500: #697872;
    --hba-n600: #4f5d57;
    --hba-n700: #3b4844;
    --hba-n800: #28322e;
    --hba-n900: #19211e;
    --hba-n950: #0f1513;

    /* Acento: latón. Acciones primarias, selección y foco. Nada más. */
    --hba-acento-300: #e0b877;
    --hba-acento-400: #d09a4e;
    --hba-acento-500: #b8762e;
    --hba-acento-600: #9a5f1f;
    --hba-acento-700: #7d4d19;

    /* Semánticos del dinero: significado estricto, nunca decoración */
    --hba-ingreso:      #0f7a4a;
    --hba-ingreso-sup:  #e7f5ee;
    --hba-egreso:       #b3261e;
    --hba-egreso-sup:   #fdeceb;
    --hba-pendiente:    #8a5a00;
    --hba-pendiente-sup:#fdf3e0;
    --hba-info:         #1f5f8b;

    /* Variantes para superficies oscuras */
    --hba-ingreso-osc:   #4ade80;
    --hba-egreso-osc:    #fca5a5;
    --hba-pendiente-osc: #fbbf24;

    /* Tipografía del sistema: sin dependencia de red, legible en cualquier
       equipo del restaurante. */
    --hba-fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
    --hba-fuente-cifra: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Escala fija (no fluida): el usuario trabaja siempre al mismo DPI */
    --hba-t-micro: 0.75rem;    /* 12px  — etiquetas, metadatos */
    --hba-t-menor: 0.8125rem;  /* 13px  — texto de apoyo, celdas densas */
    --hba-t-base:  0.875rem;   /* 14px  — cuerpo, formularios, tablas */
    --hba-t-medio: 1rem;       /* 16px  — subtítulos */
    --hba-t-mayor: 1.125rem;   /* 18px  — título de tarjeta */
    --hba-t-titulo:1.375rem;   /* 22px  — título de pantalla */

    --hba-radio: 8px;
    --hba-radio-sm: 6px;
    --hba-sombra: 0 1px 2px rgba(16, 24, 21, .06), 0 4px 12px -4px rgba(16, 24, 21, .10);
    --hba-sombra-alta: 0 2px 4px rgba(16, 24, 21, .08), 0 12px 28px -8px rgba(16, 24, 21, .18);
    --hba-transicion: 160ms cubic-bezier(.2, .8, .3, 1);
}

/* =============================================================================
   1. BASE TIPOGRÁFICA
   ========================================================================== */

html body {
    font-family: var(--hba-fuente) !important;
    font-size: var(--hba-t-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* -----------------------------------------------------------------------------
   Devolver la forma a las palabras.
   El sistema imponía MAYÚSCULAS en 1.413 lugares —menús, títulos, botones,
   encabezados de tabla, mensajes vacíos—. Las mayúsculas borran la silueta de
   la palabra, que es justo lo que el ojo usa para escanear una tabla de gastos.
   El texto ya venía escrito en formato normal en el HTML, así que basta con
   dejar de deformarlo.
   -------------------------------------------------------------------------- */
html .uppercase {
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* El espaciado ancho acompañaba a las mayúsculas; sin ellas sólo separa letras
   que deberían leerse juntas. Se conserva un rastro mínimo en las etiquetas. */
html .tracking-widest,
html .tracking-wider,
html .tracking-\[0\.2em\],
html .tracking-\[0\.15em\],
html .tracking-\[0\.1em\] {
    letter-spacing: 0.01em !important;
}

/* Una sola excepción deliberada: la marca. */
html .hba-marca,
html [class*="tracking-"] .hba-marca {
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
}

/* -----------------------------------------------------------------------------
   Escala legible.
   Había 1.156 usos de texto entre 8 y 10 píxeles en un sistema que se usa ocho
   horas al día. Ninguno baja ahora de 12px.
   -------------------------------------------------------------------------- */
html .text-\[8px\],
html .text-\[9px\]   { font-size: var(--hba-t-micro) !important; line-height: 1.45 !important; }
html .text-\[10px\],
html .text-\[11px\]  { font-size: var(--hba-t-menor) !important; line-height: 1.5 !important; }
html .text-xs        { font-size: var(--hba-t-menor) !important; line-height: 1.55 !important; }
html .text-sm        { font-size: var(--hba-t-base)  !important; line-height: 1.6 !important; }
html .text-base      { font-size: var(--hba-t-medio) !important; line-height: 1.6 !important; }
html .text-lg        { font-size: var(--hba-t-mayor) !important; line-height: 1.45 !important; }
html .text-xl        { font-size: var(--hba-t-titulo)!important; line-height: 1.3 !important; }
html .text-2xl       { font-size: 1.625rem !important; line-height: 1.25 !important; }
html .text-3xl       { font-size: 2rem !important;     line-height: 1.2 !important; }

/* -----------------------------------------------------------------------------
   Peso con jerarquía.
   1.447 elementos venían en peso 900. Cuando todo grita, nada se oye: el peso
   deja de señalar importancia y sólo añade ruido. Los títulos conservan fuerza;
   el texto pequeño baja a semibold, que a 12px se lee mejor que el negro.
   -------------------------------------------------------------------------- */
html .font-black { font-weight: 700 !important; }
html .font-extrabold { font-weight: 700 !important; }
html .text-\[8px\].font-black,
html .text-\[9px\].font-black,
html .text-\[10px\].font-black,
html .text-xs.font-black,
html .text-\[8px\].font-extrabold,
html .text-\[9px\].font-extrabold,
html .text-xs.font-extrabold { font-weight: 600 !important; }

html h1, html h2, html h3 { letter-spacing: -0.011em; }

/* -----------------------------------------------------------------------------
   Cifras.
   El monospace se usaba como disfraz de "técnico" en 305 sitios. Lo que el
   dinero necesita no es aspecto de terminal sino columnas que cuadren: cifras
   tabulares de ancho fijo, para que los decimales caigan alineados.
   -------------------------------------------------------------------------- */
html .font-mono {
    font-family: var(--hba-fuente-cifra) !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1, "cv01" 1 !important;
    letter-spacing: 0 !important;
}

/* Toda cifra dentro de una tabla se alinea y tabula sin pedir permiso */
html table td, html table th { font-variant-numeric: tabular-nums; }

/* =============================================================================
   2. COLOR — neutrales de acero
   Se reasignan los tonos que el markup ya usa, de modo que 2.900 clases
   existentes adoptan la identidad sin editarse una por una.
   ========================================================================== */

html .bg-white       { background-color: #ffffff !important; }
html .bg-slate-50    { background-color: var(--hba-n50)  !important; }
html .bg-slate-100   { background-color: var(--hba-n100) !important; }
html .bg-slate-200   { background-color: var(--hba-n200) !important; }
html .bg-slate-700   { background-color: var(--hba-n700) !important; }
html .bg-slate-800   { background-color: var(--hba-n800) !important; }
html .bg-slate-900   { background-color: var(--hba-n900) !important; }
html .bg-slate-950   { background-color: var(--hba-n950) !important; }

html .text-slate-300 { color: var(--hba-n300) !important; }
html .text-slate-400 { color: var(--hba-n500) !important; } /* subido: 400 sobre
   blanco no llegaba a 4.5:1 y era el color de texto más usado del sistema */
html .text-slate-500 { color: var(--hba-n500) !important; }
html .text-slate-600 { color: var(--hba-n600) !important; }
html .text-slate-700 { color: var(--hba-n700) !important; }
html .text-slate-800 { color: var(--hba-n800) !important; }
html .text-slate-900 { color: var(--hba-n900) !important; }

html .border-slate-100 { border-color: var(--hba-n100) !important; }
html .border-slate-200 { border-color: var(--hba-n200) !important; }
html .border-slate-300 { border-color: var(--hba-n300) !important; }
html .border-slate-700 { border-color: var(--hba-n700) !important; }
html .border-slate-800 { border-color: var(--hba-n800) !important; }
html .border-slate-900 { border-color: var(--hba-n900) !important; }

/* Sobre superficie oscura el texto atenuado necesita más luz */
html .bg-slate-900 .text-slate-400,
html .bg-slate-950 .text-slate-400,
html .bg-slate-900 .text-slate-500,
html .bg-slate-950 .text-slate-500 { color: var(--hba-n400) !important; }
html .bg-slate-900 .text-slate-300,
html .bg-slate-950 .text-slate-300 { color: var(--hba-n300) !important; }

/* =============================================================================
   3. COLOR — acento de latón
   El índigo de plantilla pasa a ser el metal de la cocina. Sólo marca acción
   primaria, selección y foco.
   ========================================================================== */

html .bg-indigo-600, html .bg-indigo-700, html .bg-blue-600 {
    background-color: var(--hba-acento-600) !important;
}
html .hover\:bg-indigo-700:hover, html .hover\:bg-indigo-600:hover, html .hover\:bg-blue-700:hover {
    background-color: var(--hba-acento-700) !important;
}
html .bg-indigo-500  { background-color: var(--hba-acento-500) !important; }
html .bg-indigo-50   { background-color: #f8f1e6 !important; }
html .bg-indigo-950\/40, html .bg-indigo-950\/20 { background-color: rgba(125, 77, 25, .16) !important; }

html .text-indigo-600, html .text-indigo-700 { color: var(--hba-acento-600) !important; }
html .text-indigo-500 { color: var(--hba-acento-500) !important; }
html .text-indigo-400, html .text-indigo-300 { color: var(--hba-acento-400) !important; }

html .border-indigo-500, html .border-indigo-600 { border-color: var(--hba-acento-500) !important; }
html .ring-indigo-500 { --tw-ring-color: var(--hba-acento-500) !important; }

/* En superficie clara el latón necesita el tono oscuro para llegar a 4.5:1 */
html .bg-white .text-indigo-400,
html .bg-slate-50 .text-indigo-400 { color: var(--hba-acento-600) !important; }

/* =============================================================================
   4. COLOR — semántica del dinero
   Verde es ingreso. Rojo es egreso. Ámbar es pendiente. No se usan para otra
   cosa: un color que a veces significa algo deja de significar siempre.
   ========================================================================== */

html .text-emerald-600, html .text-emerald-700, html .text-green-600 { color: var(--hba-ingreso) !important; }
html .text-rose-600, html .text-rose-700, html .text-red-600        { color: var(--hba-egreso) !important; }
html .text-amber-600, html .text-amber-700, html .text-yellow-600   { color: var(--hba-pendiente) !important; }

html .bg-emerald-50, html .bg-green-50 { background-color: var(--hba-ingreso-sup) !important; }
html .bg-rose-50, html .bg-red-50      { background-color: var(--hba-egreso-sup) !important; }
html .bg-amber-50, html .bg-yellow-50  { background-color: var(--hba-pendiente-sup) !important; }

/* Sobre oscuro, los mismos significados con luz suficiente */
html .text-emerald-400, html .text-emerald-300, html .text-green-400 { color: var(--hba-ingreso-osc) !important; }
html .text-rose-400, html .text-rose-300, html .text-red-400         { color: var(--hba-egreso-osc) !important; }
html .text-amber-400, html .text-amber-300, html .text-yellow-400    { color: var(--hba-pendiente-osc) !important; }

html .bg-white .text-emerald-400, html .bg-slate-50 .text-emerald-400 { color: var(--hba-ingreso) !important; }
html .bg-white .text-rose-400,    html .bg-slate-50 .text-rose-400    { color: var(--hba-egreso) !important; }
html .bg-white .text-amber-400,   html .bg-slate-50 .text-amber-400   { color: var(--hba-pendiente) !important; }

/* =============================================================================
   5. COMPONENTES
   ========================================================================== */

/* --- Botones ------------------------------------------------------------- */
html button, html .btn, html a[class*="bg-indigo"], html input[type="submit"] {
    transition: background-color var(--hba-transicion),
                border-color var(--hba-transicion),
                box-shadow var(--hba-transicion),
                transform var(--hba-transicion) !important;
}
html button:active, html a[class*="bg-indigo"]:active { transform: translateY(0.5px); }

html button:disabled,
html button[disabled],
html .disabled\:opacity-50:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
    filter: grayscale(.35);
}

/* Foco visible y consistente: obligatorio para operar con teclado */
html *:focus-visible {
    outline: 2px solid var(--hba-acento-500) !important;
    outline-offset: 2px !important;
    border-radius: var(--hba-radio-sm);
}
html .bg-slate-900 *:focus-visible,
html .bg-slate-950 *:focus-visible { outline-color: var(--hba-acento-400) !important; }

/* --- Formularios --------------------------------------------------------- */
html input[type="text"], html input[type="number"], html input[type="date"],
html input[type="password"], html input[type="search"], html input[type="email"],
html input[type="tel"], html select, html textarea {
    font-family: var(--hba-fuente) !important;
    font-size: var(--hba-t-base) !important;
    transition: border-color var(--hba-transicion), box-shadow var(--hba-transicion) !important;
}
html input:focus, html select:focus, html textarea:focus {
    border-color: var(--hba-acento-500) !important;
    box-shadow: 0 0 0 3px rgba(184, 118, 46, .18) !important;
}
/* Un campo de dinero se lee alineado a la derecha y con cifras tabulares */
html input[type="number"] {
    font-variant-numeric: tabular-nums !important;
    text-align: right;
}
html input::placeholder, html textarea::placeholder {
    color: var(--hba-n500) !important;  /* 4.64:1 — el gris anterior no era legible */
    opacity: 1 !important;
}

/* --- Tablas -------------------------------------------------------------- */
html table { font-size: var(--hba-t-menor); }
html thead th {
    font-weight: 600 !important;
    color: var(--hba-n600) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap;
}
html tbody tr { transition: background-color 120ms linear; }
html tbody tr:hover { background-color: var(--hba-n50) !important; }
html .bg-slate-900 tbody tr:hover,
html .bg-slate-950 tbody tr:hover { background-color: rgba(255,255,255,.04) !important; }

/* En tablet las tablas anchas se cortaban por el borde derecho sin manera de
   llegar a las últimas columnas. Ahora se desplazan dentro de su propia caja,
   nunca arrastrando la página entera. */
html .overflow-x-auto,
html table { max-width: 100%; }
html table { display: table; }
@media (max-width: 1024px) {
    html div:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    html table { min-width: max-content; }
}
html body { overflow-x: hidden; }

/* --- Superficies --------------------------------------------------------- */
html .shadow-sm  { box-shadow: var(--hba-sombra) !important; }
html .shadow, html .shadow-md, html .shadow-lg, html .shadow-xl, html .shadow-2xl {
    box-shadow: var(--hba-sombra-alta) !important;
}
html .rounded-2xl { border-radius: var(--hba-radio) !important; }
html .rounded-xl  { border-radius: var(--hba-radio) !important; }
html .rounded-lg  { border-radius: var(--hba-radio-sm) !important; }

/* --- Barra lateral ------------------------------------------------------- */
/* Los rótulos de sección eran del mismo tamaño y peso que los enlaces, así que
   el menú se leía como una lista plana de 20 elementos iguales. */
html aside .uppercase.text-\[8px\],
html aside .uppercase.text-\[9px\],
html nav .uppercase.text-\[8px\],
html nav .uppercase.text-\[9px\] {
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    font-size: 0.6875rem !important;   /* 11px */
    font-weight: 600 !important;
    color: var(--hba-n400) !important;
}
html aside a, html nav a { transition: background-color var(--hba-transicion), color var(--hba-transicion); }

/* =============================================================================
   6. CORRECCIONES DE COMPOSICIÓN
   Los encabezados de Egresos y Bancos se desbordaban a 1440px y la última
   acción quedaba cortada fuera de la pantalla.
   ========================================================================== */

/* El encabezado declaraba altura fija (h-16 / md:h-20) con las acciones en una
   sola fila. En cuanto el título o los botones necesitaban dos líneas, el
   contenido se salía de esa caja y aparecía recortado por arriba. Pasa a altura
   mínima: crece cuando hace falta y conserva su aire cuando no. */
html header[class*="h-16"],
html header[class*="h-20"] {
    height: auto !important;
    min-height: 4rem;
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
    gap: 1rem;
    flex-wrap: wrap;
    min-width: 0;
}
html header h1, html header h2 { min-width: 0; overflow-wrap: anywhere; }
html header > div { min-width: 0; }
/* Las acciones del encabezado envuelven en vez de empujarse fuera de pantalla */
html header .flex { flex-wrap: wrap; min-width: 0; }

/* -----------------------------------------------------------------------------
   Una sola acción primaria por pantalla.
   El encabezado de Egresos ofrecía cuatro botones llenos —gris, verde y dos de
   acento— compitiendo por la misma atención, y el verde además contradecía la
   regla de que verde significa ingreso. Sólo las acciones de creación conservan
   el latón; el resto pasa a secundario.
   -------------------------------------------------------------------------- */
html header .bg-emerald-600, html header .bg-emerald-700,
html header .bg-slate-700,   html header .bg-slate-800 {
    background-color: #ffffff !important;
    color: var(--hba-n700) !important;
    border: 1px solid var(--hba-n200) !important;
    box-shadow: none !important;
}
html header .bg-emerald-600:hover, html header .bg-emerald-700:hover,
html header .bg-slate-700:hover,   html header .bg-slate-800:hover {
    background-color: var(--hba-n50) !important;
    border-color: var(--hba-n300) !important;
}
html header .bg-emerald-600 svg, html header .bg-slate-700 svg { color: var(--hba-n500) !important; }

/* Las acciones del encabezado no se levantan al pasar el ratón: en una barra
   densa el desplazamiento vertical se lee como un fallo de alineación. */
html header .hover\:-translate-y-0\.5:hover { transform: none !important; }

/* =============================================================================
   7. MOVIMIENTO
   Transmite estado, nunca decora. Y se apaga por completo si el sistema lo pide.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html *, html *::before, html *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   8. IMPRESIÓN
   Comprobantes, recibos de nómina y órdenes se imprimen a diario.
   ========================================================================== */

@media print {
    html aside, html nav.no-print, html .no-print, html button { display: none !important; }
    html body { background: #fff !important; color: #000 !important; font-size: 11pt; }
    html .shadow, html .shadow-sm, html .shadow-lg { box-shadow: none !important; }
    html table { page-break-inside: auto; }
    html tr { page-break-inside: avoid; }
}