@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base del layout nuevo. Los tokens (--fondo, --texto, --acento…) los publica partials/tema-empresa. */
@layer base {
    html {
        font-family: var(--fuente);
        -webkit-font-smoothing: antialiased;
    }

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

    [x-cloak] {
        display: none !important;
    }
}

/* Kit de interfaz (skill ui-ctc, specs/layout.md §6). */
@layer components {
    /* Tabla con cabecera fija: la caja es la que se desplaza (en los dos ejes), así el thead queda pegado arriba.
       Alto: el panel que contiene la tabla (encabezado, tabla y paginación) cabe siempre en la pantalla. ctc.js
       calcula --alto-disponible con el espacio que queda bajo el panel; sin JS, lo que queda de la ventana.
       --alto-tabla lo puede bajar en una pantalla (p. ej. dos tablas a la vista), nunca subirlo por encima. */
    .ctc-tabla-caja {
        overflow: auto;
        max-height: min(var(--alto-tabla, 100000px), var(--alto-disponible, calc(100vh - 13rem)));
        overscroll-behavior: contain;
        container-type: inline-size;
    }
    /* Mensaje de tabla vacía (o cualquier contenido de ancho completo dentro de la tabla): queda en la parte visible
       aunque la tabla sea más ancha que la caja. */
    .ctc-vacio {
        position: sticky;
        left: 0;
        width: 100cqw;
    }
    .ctc-tabla {
        min-width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 13px;
        color: var(--texto);
    }
    .ctc-tabla > thead > tr > th {
        position: sticky;
        top: 0;
        z-index: 20;
        background: var(--superficie-2);
        border-bottom: 1px solid var(--borde-fuerte);
        padding: 12px 10px;
        text-align: left;
        white-space: nowrap;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--texto-suave);
    }
    .ctc-tabla > tbody > tr > td {
        border-bottom: 1px solid var(--borde);
        padding: 12px 10px;
        vertical-align: middle;
        font-variant-numeric: tabular-nums;
    }
    .ctc-tabla > tbody > tr:not([data-sin-hover]):hover > td {
        background-color: var(--nav-hover);
    }
    .ctc-tabla > tbody > tr:last-child > td {
        border-bottom: 0;
    }
    /* Columnas fijas a la izquierda (acciones, identificador). El desplazamiento va en style="left:…". */
    .ctc-tabla > * > tr > .ctc-fija {
        position: sticky;
        z-index: 10;
        background-color: var(--superficie);
    }
    .ctc-tabla > thead > tr > th.ctc-fija {
        z-index: 30;
        background-color: var(--superficie-2);
    }
    .ctc-tabla > * > tr > .ctc-fija-ultima {
        box-shadow: 6px 0 6px -6px rgba(15, 23, 42, .14);
    }
    /* Botón o enlace de acción de una fila (solo ícono, con aria-label y title). */
    .ctc-accion {
        @apply flex h-[30px] w-[30px] items-center justify-center rounded-md text-[var(--texto-suave)] hover:bg-[var(--acento-suave)] hover:text-[var(--acento-texto)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)];
    }
}

/* Menú lateral oculto en escritorio (botón del encabezado; se recuerda en localStorage.lateral_oculto). */
@media (min-width: 768px) {
    html[data-lateral-oculto] aside[data-lateral] {
        display: none;
    }
}

/* Impresión: solo el contenido, sin el marco del layout (menú lateral, encabezado y barra de módulos). */
@media print {
    aside[data-lateral], header[data-shell], nav[data-shell], .ctc-no-imprimir {
        display: none !important;
    }
    html, body, main, .h-screen {
        height: auto !important;
        overflow: visible !important;
    }
}