/*
 * Hoja de estilos propia para las vistas fuera del panel de Filament
 * (login general, dashboard de módulos, selección admin/usuario, etc.).
 *
 * Decisión técnica: no se usa el pipeline de Vite/Tailwind para estas
 * vistas (evita depender de Node.js dentro de Docker; Filament ya trae
 * sus propios assets compilados y no lo necesita). Ver README.
 */

:root {
    /* Paleta CEMIX (sección 12): se mantienen los mismos nombres de
       variable que ya usaba toda esta hoja (evita tocar cada regla una
       por una), pero los valores pasan a la paleta nueva del enunciado. */
    --cemix-azul-marino: #303f2d; /* Gris verdoso/Cemix — color dominante */
    --cemix-azul-marino-oscuro: #212b1f; /* variante oscura para hover/footer */
    --cemix-teal: #148296; /* Turquesa */
    --cemix-teal-claro: #1c9fb6; /* variante clara para hover */
    --cemix-verde-lima: #d2dc64; /* Verde lima */
    --cemix-verde-lima-claro: #dde58a;
    --cemix-celeste-claro: #cfe6ea; /* tinte claro de Turquesa (fondos/badges) */
    --cemix-verde-claro: #f5f6de; /* tinte claro de Verde lima (panel de impresión) */
    --cemix-fondo: #f4f4f4; /* Gris fondo claro */
    --cemix-texto: #1f2937;
    --cemix-borde: #e2e8f0;
    /* Colores adicionales de la paleta, sin variante "clara" propia: se
       usan tal cual donde hace falta (gráfica de Molienda, badges de rol). */
    --cemix-azul-kiosco: #0a3c6e;
    --cemix-azul-kiosco-oscuro: #082c50; /* extremo del degradado del sidebar */
    --cemix-purpura: #643c96;
    --cemix-verde-sidebar: var(--cemix-azul-kiosco); /* fondo del sidebar (docs/cemix-ui.html) */
    --cemix-verde-lima-ink: #4b5417; /* texto sobre fondo verde lima (contraste) */
    --cemix-verde-lima-deep: #b7c23e; /* sombra/hover del botón primario verde lima */
    --cemix-radio: 10px;
    --cemix-radio-sm: 7px;
    --cemix-sombra: 0 1px 2px rgba(10, 60, 110, .06), 0 8px 24px -12px rgba(10, 60, 110, .12);
    --cemix-texto-sub: #63705f;
}

* {
    box-sizing: border-box;
}

/* Evita que Edge/Chrome "auto-oscurezcan" el lienzo sin estilo (franja azul
   del efecto de rebote/overscroll en Windows) cuando el usuario tiene el
   modo oscuro forzado del navegador activado: la página ya define sus
   propios colores, así que se le indica que no la reinterprete. */
html {
    color-scheme: light;
    background: var(--cemix-verde-lima);
}

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

a {
    color: var(--cemix-teal);
    text-decoration: none;
}

a:hover {
    color: var(--cemix-teal-claro);
}

/* --- Pantalla de login: tarjeta "vidrio" sobre foto de planta --- */

.cemix-login-page {
    position: fixed;
    inset: 0; /* fija al viewport exacto en píxeles, sin depender de cálculos de vh que dejaban ver una franja del html de fondo */
    overscroll-behavior-y: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--cemix-azul-marino-oscuro);
    border-bottom: 4px solid var(--cemix-verde-lima); /* línea delgada al pie del login, mismo verde que el botón */
}

.cemix-login-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 55%;
    filter: saturate(0.92) contrast(1.02);
}

.cemix-login-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(33, 43, 31, 0.88) 0%, rgba(33, 43, 31, 0.72) 24%, rgba(33, 43, 31, 0.25) 48%, rgba(33, 43, 31, 0.05) 64%, rgba(33, 43, 31, 0.12) 100%),
        linear-gradient(to top, rgba(33, 43, 31, 0.5) 0%, rgba(33, 43, 31, 0) 30%);
}

.cemix-login-content {
    position: relative;
    z-index: 5;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

@keyframes cemix-login-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.cemix-login-card {
    position: relative;
    z-index: 5;
    width: 360px;
    max-width: 100%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    padding: 26px 30px;
    opacity: 0;
    animation: cemix-login-fade-up 0.6s ease-out 0.15s forwards;
}

.cemix-login-logos {
    display: block;
    width: 100%;
    max-width: 260px;
    margin: 0 auto 22px;
}

.cemix-login-field {
    margin-bottom: 16px;
}

.cemix-login-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 7px;
    color: #f5f5f0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.cemix-login-field input {
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    color: #1a1a1a;
    font-family: inherit;
    font-size: 0.9rem;
    padding: 11px 13px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cemix-login-field input::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

.cemix-login-field input:hover,
.cemix-login-field input:focus {
    border-color: var(--cemix-teal);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 130, 150, 0.25);
}

.cemix-login-field--email input {
    border-color: var(--cemix-teal);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 130, 150, 0.18);
}

.cemix-login-field--email input:hover,
.cemix-login-field--email input:focus {
    box-shadow: 0 0 0 5px rgba(20, 130, 150, 0.32);
}

.cemix-login-submit {
    width: 100%;
    background: var(--cemix-verde-lima);
    color: var(--cemix-azul-marino-oscuro);
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    padding: 13px;
    cursor: pointer;
    margin-top: 6px;
    transition: filter 0.15s ease, transform 0.1s ease;
}

.cemix-login-submit:hover {
    filter: brightness(0.92);
}

.cemix-login-submit:active {
    transform: scale(0.99);
}

.cemix-login-forgot {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.cemix-login-forgot:hover {
    color: var(--cemix-verde-lima-claro);
}

.cemix-login-alert {
    margin-bottom: 14px;
    font-size: 0.8rem;
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
}

.cemix-login-alert--error {
    background: rgba(254, 226, 226, 0.92);
    color: #991b1b;
}

.cemix-login-alert--info {
    background: rgba(207, 230, 234, 0.92);
    color: var(--cemix-azul-marino-oscuro);
}

.cemix-login-field input:focus-visible,
.cemix-login-submit:focus-visible,
.cemix-login-forgot:focus-visible {
    outline: 2px solid var(--cemix-teal);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .cemix-login-content {
        padding: 20px 16px;
    }

    .cemix-login-card {
        width: 100%;
        padding: 24px 22px;
        border-radius: 14px;
    }

    .cemix-login-logos {
        max-width: 220px;
    }
}

@media (max-height: 700px) {
    .cemix-login-page {
        min-height: 600px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cemix-login-card {
        animation: none;
        opacity: 1;
    }
}

.cemix-field {
    margin-bottom: 1.1rem;
}

.cemix-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--cemix-texto);
}

/* Aclaracion gris junto al texto del label (p.ej. "Teléfono (+502)") — peso
   normal (no 600 como el label) para que se note que es informativo, no
   parte del nombre del campo. */
.cemix-field__hint {
    font-weight: 400;
    color: var(--cemix-texto-sub);
}

.cemix-field input,
.cemix-field select,
.cemix-field textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--cemix-borde);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
}

.cemix-field input:focus,
.cemix-field select:focus,
.cemix-field textarea:focus {
    outline: none;
    border-color: var(--cemix-teal);
    box-shadow: 0 0 0 3px rgba(25, 132, 159, 0.15);
}

.cemix-field input:disabled,
.cemix-field select:disabled,
.cemix-field textarea:disabled {
    background: var(--cemix-fondo);
    color: var(--cemix-texto-sub);
    cursor: not-allowed;
}

.cemix-field-error {
    color: #b91c1c;
    font-size: 0.8rem;
    margin-top: 0.3rem;
}

.cemix-alert {
    background: #fee2e2;
    color: #991b1b;
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    font-size: 0.85rem;
    margin-bottom: 1.1rem;
}

.cemix-alert--info {
    background: var(--cemix-celeste-claro);
    color: var(--cemix-azul-marino-oscuro);
}

/* Formulario en columnas por grupo de informacion (p.ej. Molienda >
   Ingresar datos): 3 columnas en escritorio, se apilan en pantallas angostas. */
.cemix-form-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.cemix-form-group {
    border: 1px solid var(--cemix-borde);
    border-radius: 10px;
    padding: 1.1rem 1.1rem 0.25rem;
    margin: 0;
    min-width: 0;
    background: #fff;
    box-shadow: var(--cemix-sombra);
}

/* Titulo del grupo centrado dentro de la tarjeta (float: el legend deja de
   "cortar" el borde del fieldset), en verde (tono oscuro del verde lima para
   que se lea sobre blanco) con subrayado verde lima de acento. */
.cemix-form-group legend {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    color: #5a6610;
}

.cemix-form-group legend + * {
    clear: both;
}

.cemix-form-group legend::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin: 0.3rem auto 0;
    border-radius: 3px;
    background: var(--cemix-verde-lima);
}

@media (max-width: 960px) {
    .cemix-form-columns {
        grid-template-columns: 1fr;
    }
}

/* Modo prueba de Molienda (ver App\Support\GrindingTestMode). */
.cemix-alert--test {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}

.cemix-test-banner {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}

.cemix-test-badge {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
    border-radius: 999px;
    padding: 0 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 0.3rem;
}

.cemix-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.65rem 1rem;
    background: var(--cemix-azul-marino);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cemix-btn:hover {
    background: var(--cemix-azul-marino-oscuro);
}

.cemix-btn--secondary {
    background: var(--cemix-teal);
}

.cemix-btn--secondary:hover {
    background: var(--cemix-teal-claro);
}

.cemix-btn--outline {
    background: transparent;
    color: var(--cemix-azul-marino);
    border: 1px solid var(--cemix-azul-marino);
}

.cemix-btn--outline:hover {
    background: var(--cemix-celeste-claro);
}

/* Variantes puntuales usadas por el shell tipo docs/cemix-ui.html (Inicio,
   toolbars): ancho automático en vez del 100% que usan los formularios de
   captura, y el CTA verde lima de marca. */
.cemix-btn--primary {
    background: var(--cemix-verde-lima);
    color: var(--cemix-verde-lima-ink);
    box-shadow: 0 2px 0 var(--cemix-verde-lima-deep);
}

.cemix-btn--primary:hover {
    background: var(--cemix-verde-lima-claro);
}

/* Boton secundario "gris" de los formularios de Filament ("Crear y crear
   otro", "Cancelar"): fondo blanco, borde gris, texto oscuro. */
.cemix-btn--gray {
    background: #fff;
    color: var(--cemix-texto);
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.cemix-btn--gray:hover {
    background: #f9fafb;
}

/* "Cancelar" de los formularios de crear: rojo, igual que en Filament
   (ver App\Filament\Concerns\CemixFormActionColors). */
.cemix-btn--danger {
    background: #dc2626;
    color: #fff;
}

a.cemix-btn--danger:hover,
.cemix-btn--danger:hover {
    background: #b91c1c;
    color: #fff;
}

/* Acciones por fila con icono (Editar / Deshabilitar / Habilitar), iguales
   a las de las tablas de Filament (EditAction + toggleActive en
   UsersTable/ProductsTable): enlace sin fondo, icono + texto, color segun
   la accion. */
.cemix-row-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.cemix-row-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.cemix-row-action svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

.cemix-row-action:hover {
    text-decoration: underline;
}

a.cemix-row-action--edit,
a.cemix-row-action--edit:hover {
    color: var(--cemix-azul-kiosco);
}

.cemix-row-action--danger {
    color: #dc2626;
}

.cemix-row-action--success {
    color: #16a34a;
}

.cemix-btn--auto {
    width: auto;
    padding-inline: 1.1rem;
}

.cemix-btn--sm {
    width: auto;
    padding: 6px 12px;
    font-size: 12.5px;
}

/* --- Layout general (sidebar lateral + topbar + contenido) ---
   Replica el shell de docs/cemix-ui.html: sidebar azul kiosco fijo,
   persistente en toda la app (no solo Inicio), topbar blanco con
   breadcrumb + chip de usuario, contenido centrado con page-head. --- */

.cemix-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.cemix-sidebar {
    flex: 0 0 208px;
    width: 208px;
    background: linear-gradient(180deg, var(--cemix-azul-kiosco) 0%, var(--cemix-azul-kiosco-oscuro) 100%);
    color: #eaf0f6;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.cemix-sidebar__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    text-decoration: none;
}

.cemix-sidebar__brand-logo {
    height: 30px;
    width: auto;
    flex-shrink: 0;
}

.cemix-sidebar__brand-sub {
    font-size: 10.5px;
    color: #afc3d8;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.cemix-sidebar__nav {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    flex: 1;
}

.cemix-sidebar__navlabel {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #7fa0be;
    padding: 14px 10px 6px;
    font-weight: 700;
}

.cemix-sidebar__navsub {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cemix-sidebar__link {
    display: flex;
    align-items: center;
    gap: 11px;
    width: auto;
    padding: 10px 12px;
    border-radius: 8px;
    color: #d7e4ef;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    position: relative;
    transition: background .15s ease, color .15s ease;
}

/* Modulo bajo el cursor, al hacer click, con su menu abierto o el de la
   pagina actual: verde lima de marca (mismo par de colores que
   .cemix-btn--primary); los demas se quedan sobre el azul del sidebar. */
.cemix-sidebar__link:hover,
.cemix-sidebar__link:active,
.cemix-sidebar__link--active,
.cemix-sidebar__popup-trigger:has(+ .cemix-sidebar__popup-panel:not([hidden])) {
    background: var(--cemix-verde-lima);
    color: var(--cemix-verde-lima-ink);
}

/* Inicio: aunque sea la pagina actual se queda con el tinte suave de antes;
   solo se pone verde lima bajo el cursor o al hacer click. */
.cemix-sidebar__link--home.cemix-sidebar__link--active:not(:hover):not(:active) {
    background: rgba(210, 220, 100, .14);
    color: #fff;
}

.cemix-sidebar__link--active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 6px;
    bottom: 6px;
    width: 4px;
    background: var(--cemix-verde-lima);
    border-radius: 0 4px 4px 0;
}

.cemix-sidebar__navsub .cemix-sidebar__link--active::before {
    left: -15px;
}

.cemix-sidebar__link--child {
    font-size: 13px;
    padding: 8px 12px;
    font-weight: 500;
}

/* Las opciones desplegadas de un modulo no van en verde lima (eso queda
   para el modulo en si): conservan el estilo suave de antes. */
.cemix-sidebar__link--child:hover,
.cemix-sidebar__link--child:active {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.cemix-sidebar__link--child.cemix-sidebar__link--active {
    background: rgba(210, 220, 100, .14);
    color: #fff;
}

.cemix-sidebar__icon {
    width: 18px;
    text-align: center;
    font-size: 15px;
    opacity: .9;
}

/* --- Menu de un modulo del sidebar (ADMIN_GENERAL: Laboratorio, Molienda)
   colapsado por defecto: usa el mismo estilo de .cemix-sidebar__navsub
   (integrado en la lista, empuja el resto hacia abajo al abrirse) pero
   arranca oculto y solo se despliega al hacer click en el trigger (ver
   script en components/layout.blade.php). --- */

.cemix-sidebar__popup-trigger {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

/* El atributo HTML "hidden" no gana por si solo contra el "display: flex"
   de .cemix-sidebar__navsub (misma especificidad, esa regla aparece antes):
   se fuerza explicito para que el menu arranque colapsado. */
.cemix-sidebar__popup-panel[hidden] {
    display: none;
}

.cemix-sidebar__foot {
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 11.5px;
    color: #7fa0be;
}

.cemix-shell__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .cemix-shell {
        flex-direction: column;
    }

    .cemix-sidebar {
        position: static;
        height: auto;
        width: 100%;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
    }

    .cemix-sidebar__brand {
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, .08);
    }

    .cemix-sidebar__nav {
        flex-direction: row;
        align-items: center;
    }

    .cemix-sidebar__navlabel,
    .cemix-sidebar__foot {
        display: none;
    }

    .cemix-sidebar__navsub {
        flex-direction: row;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }

    .cemix-sidebar__link {
        white-space: nowrap;
    }
}

.cemix-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 28px;
    background: #fff;
    border-bottom: 1px solid var(--cemix-borde);
    position: sticky;
    top: 0;
    z-index: 5;
}

.cemix-topbar__crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--cemix-texto-sub);
    font-weight: 600;
}

.cemix-topbar__crumb a {
    color: var(--cemix-teal);
}

.cemix-topbar__brand-logo {
    height: 22px;
    width: auto;
    flex-shrink: 0;
}

.cemix-topbar__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
}

.cemix-main {
    padding: 28px 32px 60px;
    max-width: 1360px;
    width: 100%;
    margin: 0 auto;
}

.cemix-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cemix-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--cemix-teal);
    margin-bottom: 6px;
}

.cemix-eyebrow__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cemix-verde-lima);
}

/* --- Menú desplegable de usuario (avatar/iniciales + perfil + salir) --- */

.cemix-user-menu {
    position: relative;
}

.cemix-user-menu__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cemix-texto);
    font-size: 0.9rem;
    padding: 4px;
    border-radius: 999px;
}

.cemix-user-menu__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cemix-verde-lima);
}

/* Iniciales (sin foto): mismo verde lima + texto oscuro que
   .cemix-btn--primary — en blanco no se leeria sobre el verde claro. */
.cemix-user-menu__avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--cemix-verde-lima-ink);
}

.cemix-user-menu__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
}

.cemix-user-menu__name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cemix-texto);
}

.cemix-user-menu__role {
    font-size: 11px;
    color: var(--cemix-texto-sub);
}

.cemix-user-menu__caret {
    color: var(--cemix-texto-sub);
    font-size: 11px;
    margin-left: 2px;
}

.cemix-user-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    background: #fff;
    color: #1f2937;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    min-width: 170px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 20;
}

/* El atributo HTML "hidden" no gana por sí solo contra el "display: flex"
   de arriba (ambas son reglas de autor con la misma especificidad, y esta
   clase aparece después): se fuerza explícito para que el menú arranque
   colapsado y solo se abra al hacer clic (ver <x-user-menu>). */
.cemix-user-menu__panel[hidden] {
    display: none;
}

.cemix-user-menu__panel a,
.cemix-user-menu__panel button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.65rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: #1f2937;
}

.cemix-user-menu__panel a:hover,
.cemix-user-menu__panel button:hover {
    background: #f4f4f4;
}

.cemix-page-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--cemix-texto);
    margin: 0;
}

.cemix-page-subtitle {
    color: var(--cemix-texto-sub);
    margin: 4px 0 0;
    font-size: 13.5px;
}

.cemix-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cemix-teal);
}

/* "Volver al panel principal" (layout.blade.php y el topbar de Filament en
   AdminPanelProvider): mismo verde que el boton primario (--cemix-verde-lima,
   ver .cemix-btn--primary), en vez del teal generico de los demas
   back-links. La flecha es un SVG (no una entidad &larr; — un glifo de
   texto no se puede agrandar sin desalinearse del baseline) para poder
   duplicar su ancho y centrarla con el texto de forma exacta via flexbox. */
/* "a." al frente (no solo ".cemix-back-link--home"): este link ahora vive
   dentro de .cemix-topbar__crumb (layout.blade.php), que ya trae su propia
   regla ".cemix-topbar__crumb a { color: teal }" con la misma especificidad
   que una clase sola — sin el tag aqui, esa regla le ganaba y el link se
   veia teal/azul en vez de verde. */
a.cemix-back-link--home {
    color: var(--cemix-verde-lima);
    /* Ahora vive dentro de .cemix-topbar__crumb (un flex row), no en el
       flujo normal del contenido — el margin-bottom de la clase base era
       para separarlo del texto de abajo cuando estaba ahi, aqui solo
       desalinearia verticalmente el resto de la fila. */
    margin-bottom: 0;
}

/* El "a:hover" generico de arriba pone teal — mas especifico (tag + clase +
   pseudo-clase vs. tag + pseudo-clase) para ganarle, con el mismo
   verde-lima pero en su variante "deep" (la que ya usa .cemix-btn--primary
   para su sombra/hover) en vez de un verde distinto. */
a.cemix-back-link--home:hover {
    color: var(--cemix-verde-lima-deep);
}

.cemix-back-link--home .cemix-back-link__arrow {
    width: 1.6em;
    height: 1.6em;
    display: block;
    flex-shrink: 0;
}

/* --- Tarjetas de módulos --- */

.cemix-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

.cemix-molienda-chart__cards {
    margin-top: 1.5rem;
}

.cemix-molienda-history {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.cemix-molienda-history label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cemix-texto-sub);
}

.cemix-molienda-history select {
    padding: 6px 10px;
    max-width: 260px;
    border: 1px solid var(--cemix-borde);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
}

.cemix-molienda-history select:focus {
    outline: none;
    border-color: var(--cemix-teal);
    box-shadow: 0 0 0 3px rgba(25, 132, 159, .15);
}

/* Grafica + tarjetas de avance lado a lado (usado en Inicio), en vez de
   apiladas una debajo de la otra; se acomoda hacia abajo en pantallas
   angostas gracias a flex-wrap. */
.cemix-molienda-chart--horizontal {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.cemix-molienda-chart--horizontal .cemix-molienda-chart__canvas {
    flex: 1 1 420px;
}

.cemix-molienda-chart--horizontal .cemix-molienda-chart__cards {
    flex: 1 1 440px;
    margin-top: 0;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-content: start;
}

.cemix-module-card {
    display: block;
    background: #fff;
    border: 1px solid var(--cemix-borde);
    border-radius: var(--cemix-radio);
    box-shadow: var(--cemix-sombra);
    padding: 1.5rem;
    text-align: left;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cemix-module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .02), 0 16px 32px -14px rgba(10, 60, 110, .22);
    border-color: transparent;
}

.cemix-module-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--cemix-celeste-claro);
    color: var(--cemix-azul-kiosco);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    font-size: 1.3rem;
}

.cemix-module-card__title {
    font-weight: 700;
    color: var(--cemix-texto);
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.cemix-module-card__desc {
    color: #64748b;
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
}

/* --- Selección ADMINISTRADOR / USUARIO --- */

.cemix-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 640px;
    margin: 0 auto;
}

.cemix-choice-card {
    background: #fff;
    border: 2px solid var(--cemix-borde);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--cemix-azul-marino);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cemix-choice-card:hover {
    border-color: var(--cemix-teal);
    background: var(--cemix-celeste-claro);
}

/* --- Tablas de solo lectura (vistas "registro") --- */

.cemix-table-wrap {
    background: #fff;
    border: 1px solid var(--cemix-borde);
    border-radius: var(--cemix-radio);
    box-shadow: var(--cemix-sombra);
    /* Tablas con muchas columnas (Laboratorio: 21) no caben en pantalla —
       overflow-x permite desplazarse en vez de recortar columnas. La barra
       que se ve es la espejo pegada al fondo de la ventana (.cemix-hscroll,
       ver public/js/cemix-hscroll.js), no la nativa de esta caja. */
    overflow-x: auto;
    overflow-y: hidden;
}

/* Variante sin marco para tablas que ya viven dentro de un .cemix-panel
   (Inicio → Laboratorio). */
.cemix-table-wrap--flush {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Barra de scroll horizontal "espejo" de las tablas anchas (la crea
   public/js/cemix-hscroll.js justo debajo de cada .cemix-table-wrap y de
   cada tabla de Filament). Mismo patron que .lab-capture-hscroll de la
   captura de Laboratorio: sin esto la barra nativa queda al final de todas
   las filas y hay que bajar hasta el fondo de la pagina para alcanzarla;
   con "sticky; bottom: 0" queda pegada abajo de la ventana mientras la
   tabla esta a la vista. */
.cemix-hscroll {
    position: sticky;
    bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    height: 16px;
    margin-top: 2px;
    background: #fff;
    border: 1px solid var(--cemix-borde);
    border-radius: 8px;
    z-index: 5;
}

.cemix-hscroll__inner {
    height: 1px;
}

/* Se oculta la barra nativa de la tabla para que quede una sola visible:
   la espejo. El desplazamiento sigue funcionando igual (trackpad,
   Shift + rueda, arrastrando la barra espejo). */
.cemix-hscroll-target {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cemix-hscroll-target::-webkit-scrollbar {
    display: none;
}

.cemix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.cemix-table th {
    text-align: left;
    padding: 11px 18px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--cemix-texto-sub);
    font-weight: 700;
    background: #fafaf8;
    border-bottom: 1px solid var(--cemix-borde);
    white-space: nowrap;
}

.cemix-table td {
    padding: 13px 18px;
    border-top: none;
    border-bottom: 1px solid #efefea;
    vertical-align: middle;
}

.cemix-table tr:last-child td {
    border-bottom: none;
}

.cemix-table tr:hover td {
    background: #fbfbf6;
}

.cemix-badge {
    display: inline-flex;
    align-items: center;
    background: var(--cemix-celeste-claro);
    color: var(--cemix-azul-marino-oscuro);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    margin: 0.1rem;
}

.cemix-print-panel {
    background: var(--cemix-verde-claro);
    border: 1px solid var(--cemix-borde);
    border-radius: var(--cemix-radio);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.cemix-print-panel__columns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    align-items: center;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.cemix-print-panel__columns label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 400;
}

.cemix-print-panel__columns input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--cemix-verde-lima-deep);
}

.cemix-print-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.cemix-print-panel__actions input[type="email"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cemix-borde);
    border-radius: 8px;
    font-size: 0.9rem;
}

.cemix-print-panel__hint {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
}

/* --- Paginacion (markup Bootstrap 5 de Laravel, sin Tailwind) --- */

.pagination {
    display: flex;
    list-style: none;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.pagination .page-link {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--cemix-borde);
    border-radius: 6px;
    color: var(--cemix-azul-marino);
    background: #fff;
    font-size: 0.85rem;
}

.pagination .page-item.active .page-link {
    background: var(--cemix-azul-marino);
    border-color: var(--cemix-azul-marino);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: #cbd5e1;
}

.cemix-empty {
    color: #64748b;
    font-size: 0.9rem;
    padding: 1.5rem;
    text-align: center;
}

/* --- Inicio (docs/cemix-ui.html): tarjetas de estadística + panel con
   toolbar propio (título/acción arriba de una tabla), independiente de
   .cemix-table-wrap que usan las tablas simples de otros módulos. --- */

.cemix-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cemix-cell-link {
    color: var(--cemix-azul-kiosco);
    font-weight: 700;
    text-decoration: none;
}

.cemix-cell-link:hover {
    text-decoration: underline;
}

.cemix-cell-sub {
    color: var(--cemix-texto-sub);
    font-size: 12px;
}

.cemix-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--cemix-verde-lima-deep);
}

.cemix-thumb {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: var(--cemix-fondo);
    border: 1px solid var(--cemix-borde);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--cemix-texto-sub);
}

.cemix-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.cemix-stat-card {
    background: #fff;
    border: 1px solid var(--cemix-borde);
    border-radius: var(--cemix-radio);
    padding: 18px;
    box-shadow: var(--cemix-sombra);
}

.cemix-stat-card__label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cemix-texto-sub);
    font-weight: 700;
}

.cemix-stat-card__value {
    font-size: 24px;
    font-weight: 800;
    margin-top: 8px;
}

.cemix-stat-card__sub {
    font-size: 12px;
    color: var(--cemix-texto-sub);
    margin-top: 4px;
}

.cemix-stat-card__bar {
    height: 6px;
    border-radius: 99px;
    background: var(--cemix-fondo);
    margin-top: 10px;
    overflow: hidden;
}

.cemix-stat-card__bar-fill {
    height: 100%;
    background: var(--cemix-verde-lima);
    border-radius: 99px;
}

.cemix-panel {
    background: #fff;
    border: 1px solid var(--cemix-borde);
    border-radius: var(--cemix-radio);
    box-shadow: var(--cemix-sombra);
    overflow: hidden;
    /* "clip" en vez de "hidden" donde se soporta: recorta igual, pero no
       rompe el "sticky" de la barra espejo de la tabla de adentro. */
    overflow: clip;
}

.cemix-panel__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--cemix-borde);
    flex-wrap: wrap;
}

.cemix-panel__title {
    font-weight: 800;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cemix-panel__desc {
    font-size: 12px;
    color: var(--cemix-texto-sub);
}

/* --- Molienda: contenedor de la gráfica (Chart.js vendorizado, ver
   x-molienda.target-chart) y tarjetas de avance por turno (docs/cemix-ui.html
   "chart-wrap" / "goal-grid"). --- */

.cemix-chart-wrap {
    background: #fff;
    border: 1px solid var(--cemix-borde);
    border-radius: var(--cemix-radio);
    box-shadow: var(--cemix-sombra);
    padding: 22px 22px 10px;
    margin-bottom: 18px;
}

/* Grafica "Meta vs. avance por turno, dia y operador": 18 categorias (6
   dias x 3 turnos) no caben en pantallas angostas, asi que la grafica
   scrollea horizontalmente dentro de un contenedor de ancho minimo fijo
   (mismo patron que docs/molienda-preview.html). */
.cemix-molienda-chart__scroll {
    overflow-x: auto;
}

.cemix-molienda-chart__inner {
    min-width: 980px;
    height: 320px;
}

.cemix-molienda-chart__legend {
    display: flex;
    gap: 18px;
    margin-top: 8px;
    padding-bottom: 12px;
    font-size: 12.5px;
    color: var(--cemix-texto-sub);
}

.cemix-molienda-chart__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cemix-molienda-chart__swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.cemix-goal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.cemix-goal-card {
    background: #fff;
    border: 1px solid var(--cemix-borde);
    border-radius: var(--cemix-radio);
    box-shadow: var(--cemix-sombra);
    padding: 18px 20px;
    /* Franja verde lima arriba (antes el acento era turquesa). */
    border-top: 4px solid var(--cemix-verde-lima);
}

/* Verde oscuro de marca (el mismo texto de .cemix-btn--primary): el verde
   lima puro como texto sobre blanco casi no se lee. */
.cemix-goal-card__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--cemix-verde-lima-ink);
}

.cemix-goal-card__value {
    font-size: 20px;
    font-weight: 800;
    margin-top: 7px;
    white-space: nowrap;
}

.cemix-goal-card__missing {
    font-size: 12.5px;
    color: var(--cemix-texto-sub);
    margin-top: 6px;
    white-space: nowrap;
}

/* --- Molienda: grafica + tarjetas de avance sin scroll (Inicio,
   Reporteria y dashboard de Molienda). La altura de la grafica se adapta al
   alto de la ventana: 100vh menos lo que ocupa el resto de la pantalla
   (encabezado, fila de historial/leyenda y tarjetas), entre 220px y 380px. */

/* Pantallas con la grafica de Molienda: menos aire arriba para subir el
   titulo, la grafica y las tarjetas. */
.cemix-main:has(.cemix-molienda-chart) {
    padding-top: 4px;
}

.cemix-main:has(.cemix-molienda-chart) .cemix-page-head {
    margin-bottom: 8px;
}

.cemix-molienda-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 10px;
}

.cemix-molienda-toolbar .cemix-molienda-history {
    margin-bottom: 0;
}

.cemix-molienda-toolbar .cemix-molienda-chart__legend {
    margin: 0 0 0 auto;
    padding: 0;
}

.cemix-molienda-chart .cemix-chart-wrap {
    padding: 14px 16px 6px;
    margin-bottom: 0;
}

.cemix-molienda-chart .cemix-molienda-chart__inner {
    height: clamp(220px, calc(100vh - var(--cemix-chart-offset, 400px)), 460px);
}

/* Reporteria > Molienda: el panel "Descargar PDF" va arriba de la grafica,
   en una sola fila (botones + aclaracion) para ahorrar alto. */
.cemix-print-panel--inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.6rem 1rem;
    margin-bottom: 12px;
}

.cemix-print-panel--inline .cemix-print-panel__hint {
    margin: 0;
}

.cemix-main:has(.cemix-print-panel) .cemix-molienda-chart__inner {
    --cemix-chart-offset: 470px;
}

.cemix-molienda-chart.cemix-molienda-chart--horizontal {
    row-gap: 12px;
}

.cemix-molienda-chart--horizontal .cemix-molienda-chart__cards {
    margin-top: 0;
}

.cemix-molienda-chart .cemix-molienda-chart__cards {
    margin-top: 12px;
    margin-bottom: 0;
    gap: 12px;
}

.cemix-molienda-chart .cemix-goal-card {
    padding: 10px 16px 11px;
}

.cemix-molienda-chart .cemix-goal-card__value {
    font-size: 18px;
    margin-top: 3px;
}

.cemix-molienda-chart .cemix-goal-card__missing {
    margin-top: 2px;
}

.cemix-test-banner + .cemix-molienda-toolbar {
    margin-top: -2px;
}

@media (max-width: 980px) {
    .cemix-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Reportería (docs/cemix-ui.html): sub-pestañas Productos/Proveedores/
   Laboratorio/Molienda (según el alcance real de la cuenta), filtros de
   fecha y tarjeta de proveedor con su tabla de placas anidada. --- */

.cemix-subtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--cemix-borde);
    border-radius: 9px;
    padding: 4px;
    width: fit-content;
}

.cemix-subtab {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cemix-texto-sub);
    text-decoration: none;
}

.cemix-subtab:hover {
    color: var(--cemix-texto);
}

.cemix-subtab--active {
    background: var(--cemix-azul-kiosco);
    color: #fff;
}

.cemix-date-filters {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.cemix-date-filters .cemix-field {
    min-width: 170px;
    margin-bottom: 0;
}

.cemix-prov-card {
    background: #fff;
    border: 1px solid var(--cemix-borde);
    border-radius: var(--cemix-radio);
    box-shadow: var(--cemix-sombra);
    padding: 16px 18px;
    margin-bottom: 14px;
}

.cemix-prov-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cemix-prov-card h4 {
    margin: 6px 0 8px;
    font-size: 15px;
}

.cemix-prov-card__meta {
    font-size: 12.5px;
    color: var(--cemix-texto-sub);
    line-height: 1.7;
    margin-bottom: 12px;
}

.cemix-prov-card__meta b {
    color: var(--cemix-texto);
}

/* --- Sidebar: iconos de contacto rápido (WhatsApp/correo) bajo "Ayuda". --- */

.cemix-sidebar__contact {
    display: flex;
    gap: 8px;
    padding: 8px 20px 4px;
}

.cemix-sidebar__contact-link {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    border: 1px solid rgba(255, 255, 255, .12);
}

.cemix-sidebar__contact-link:hover {
    transform: translateY(-2px);
}

.cemix-sidebar__contact-link--wa {
    background: rgba(210, 220, 100, .16);
    color: var(--cemix-verde-lima);
}

.cemix-sidebar__contact-link--wa:hover {
    background: var(--cemix-verde-lima);
    color: var(--cemix-verde-lima-ink);
    box-shadow: 0 4px 10px -2px rgba(210, 220, 100, .5);
}

.cemix-sidebar__contact-link--mail {
    background: rgba(20, 130, 150, .18);
    color: #7fdce8;
}

.cemix-sidebar__contact-link--mail:hover {
    background: var(--cemix-teal);
    color: #fff;
    box-shadow: 0 4px 10px -2px rgba(20, 130, 150, .5);
}

/* --- Soporte técnico (docs/cemix-ui.html): tarjetas de contacto + formulario de correo. --- */

.cemix-support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.cemix-support-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--cemix-borde);
    border-radius: var(--cemix-radio);
    box-shadow: var(--cemix-sombra);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    position: relative;
}

.cemix-support-card:not(.cemix-support-card--static):hover {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .02), 0 16px 32px -14px rgba(10, 60, 110, .22);
}

.cemix-support-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cemix-support-card__icon--wa {
    background: var(--cemix-verde-lima);
    color: var(--cemix-verde-lima-ink);
}

.cemix-support-card__icon--mail {
    background: rgba(20, 130, 150, .12);
    color: var(--cemix-teal);
}

.cemix-support-card__icon--hours {
    background: rgba(100, 60, 150, .1);
    color: var(--cemix-purpura);
    font-size: 19px;
}

.cemix-support-card__title {
    font-weight: 800;
    font-size: 14px;
}

.cemix-support-card__desc {
    font-size: 12px;
    color: var(--cemix-texto-sub);
    margin-top: 2px;
}

.cemix-support-card__value {
    font-size: 13px;
    font-weight: 700;
    margin-top: 6px;
    color: var(--cemix-azul-kiosco);
}

.cemix-support-card__arrow {
    position: absolute;
    top: 14px;
    right: 14px;
    color: var(--cemix-texto-sub);
    font-size: 14px;
    opacity: .6;
}

.cemix-contact-panel {
    display: grid;
    grid-template-columns: minmax(0, 280px) 1fr;
    margin-top: 22px;
    background: #fff;
    border: 1px solid var(--cemix-borde);
    border-radius: var(--cemix-radio);
    box-shadow: var(--cemix-sombra);
    overflow: hidden;
}

.cemix-contact-panel__intro {
    background: linear-gradient(160deg, var(--cemix-azul-kiosco) 0%, var(--cemix-azul-kiosco-oscuro) 100%);
    color: #fff;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cemix-contact-panel__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.cemix-contact-panel__title {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
}

.cemix-contact-panel__desc {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    margin: 0;
}

.cemix-contact-panel__meta {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .85);
}

.cemix-contact-panel__meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cemix-contact-panel__form {
    padding: 32px 36px;
}

.cemix-contact-panel__form .cemix-alert {
    margin-bottom: 18px;
}

@media (max-width: 720px) {
    .cemix-support-grid {
        grid-template-columns: 1fr;
    }

    .cemix-contact-panel {
        grid-template-columns: 1fr;
    }

    .cemix-contact-panel__form {
        padding: 24px 20px;
    }

    .cemix-goal-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Filament (AdminPanelProvider carga este archivo vía render hook):
   mismo topbar blanco solido que .cemix-topbar (docs/cemix-ui.html), en vez
   del fondo transparente que dejaba el "← Volver / logo / avatar" flotando
   sobre el fondo gris de la pagina. --- */

.fi-topbar,
.fi-topbar-ctn {
    background: #fff !important;
    box-shadow: none !important;
    border: none !important;
}

.fi-topbar-ctn {
    border-bottom: 1px solid var(--cemix-borde) !important;
}

/* --- Filament chrome (docs/cemix-ui.html, seccion "Usuarios/Proveedores/
   Productos"): pase visual sobre las paginas nativas del panel (tabla,
   badges, botones, inputs, paginacion) usando solo las clases propias del
   framework. Nunca se tocan Resources/Tables/Schemas (PHP) para lograr
   esto — todo el ajuste vive aqui, en CSS. --- */

.fi-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    background: var(--cemix-fondo) !important;
}

.fi-ta-ctn {
    border-radius: var(--cemix-radio) !important;
    box-shadow: var(--cemix-sombra) !important;
}

.fi-ta-table thead th {
    background: #fafaf8 !important;
    position: sticky !important;
    top: 0;
    z-index: 1;
}

/* Usuarios (itadmin) no pagina (Table::paginated(false), lista completa
   hacia abajo), asi que la barra horizontal nativa queda al fondo de todas
   las filas. Antes se acotaba la altura a 65vh, pero con el encabezado y
   los filtros arriba la barra igual quedaba fuera de la pantalla. Ahora la
   tabla crece normal y el scroll horizontal lo da la barra espejo pegada
   al fondo de la ventana (.cemix-hscroll, public/js/cemix-hscroll.js). */
.fi-ta-content-ctn {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* "overflow: hidden" convierte al contenedor en el ancestro de scroll de
   la barra espejo y "position: sticky" deja de pegarse a la ventana;
   "clip" recorta igual (esquinas redondeadas) sin ese efecto. */
.fi-ta-ctn:not(.fi-ta-ctn-with-header) {
    overflow: clip !important;
}

.fi-ta-header-cell,
.fi-ta-header-cell-label {
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: .4px;
    color: var(--cemix-texto-sub) !important;
    font-weight: 700 !important;
}

.fi-ta-row:hover > .fi-ta-cell {
    background: #fbfbf6 !important;
}

.fi-badge {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
}

.fi-btn {
    border-radius: 8px !important;
    font-weight: 700 !important;
}

.fi-pagination-item-btn[aria-current="page"] {
    background: var(--cemix-azul-kiosco) !important;
    border-color: var(--cemix-azul-kiosco) !important;
}

.fi-input-wrp {
    border-radius: 8px !important;
}

.fi-input-wrp.fi-ring-2 {
    --tw-ring-color: rgba(20, 130, 150, .35) !important;
    border-color: var(--cemix-teal) !important;
}

.fi-section {
    border-radius: var(--cemix-radio) !important;
    box-shadow: var(--cemix-sombra) !important;
}

/* Header de las paginas de recurso (Usuarios/Proveedores/Productos/
   Laboratorio/Molienda para roles admin, ver ModuleNavigation): mismo
   tamano/peso que .cemix-page-title. El renglon "eyebrow" en si (identico
   al de Inicio/Reporteria, con el punto verde lima) se inyecta como HTML
   real via renderHook en AdminPanelProvider — no como CSS ::before — para
   que se vea exactamente igual, no una aproximacion. */
.fi-header-heading {
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -.3px;
    color: var(--cemix-texto) !important;
}

.fi-page-header-main-ctn .cemix-eyebrow {
    margin: 0 0 6px;
}

/* Botones "solidos" con color primary (Crear, Guardar, etc.): en
   docs/cemix-ui.html el CTA principal es verde lima con texto oscuro, no el
   azul kiosco de 'primary' (ese se reserva para el sidebar/chrome, ver
   AdminPanelProvider). Se detecta "solido" por la presencia de una clase
   fi-bg-color-*, para no repintar el boton de grupo de acciones en bloque
   (que no lleva fondo propio). */
.fi-btn.fi-color-primary[class*="fi-bg-color-"] {
    background-color: var(--cemix-verde-lima) !important;
    border-color: var(--cemix-verde-lima-deep) !important;
    color: var(--cemix-verde-lima-ink) !important;
}

.fi-btn.fi-color-primary[class*="fi-bg-color-"]:hover {
    background-color: var(--cemix-verde-lima-claro) !important;
    color: var(--cemix-verde-lima-ink) !important;
}

/* --- Laboratorio: Programa de producción (buscador con autocompletado +
   tabla de productos agregados) y Captura de datos (tabla unica tipo
   Excel), ver docs/modulo-laboratorio-completo.html (prototipo acordado
   con la Ing. de Laboratorio) y README > Decisiones tecnicas. --- */

.lab-autocomplete {
    position: relative;
}

.lab-autocomplete-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--cemix-borde);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    max-height: 260px;
    overflow-y: auto;
    z-index: 20;
    display: none;
}

.lab-autocomplete-list.is-open {
    display: block;
}

.lab-autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--cemix-borde);
    font-size: 0.85rem;
}

.lab-autocomplete-item:last-child {
    border-bottom: none;
}

.lab-autocomplete-item:hover {
    background: var(--cemix-fondo);
}

.lab-autocomplete-empty {
    padding: 14px;
    text-align: center;
    color: var(--cemix-texto-sub);
    font-size: 0.85rem;
}

.lab-selected-products {
    border: 1px solid var(--cemix-borde);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.2rem;
}

.lab-selected-products table {
    width: 100%;
    border-collapse: collapse;
}

.lab-selected-products th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--cemix-texto-sub);
    padding: 8px 12px;
    background: var(--cemix-fondo);
    border-bottom: 1px solid var(--cemix-borde);
}

.lab-selected-products td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--cemix-borde);
    font-size: 0.85rem;
    vertical-align: middle;
}

.lab-selected-products tr:last-child td {
    border-bottom: none;
}

.lab-selected-products input[type="number"] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--cemix-borde);
    border-radius: 6px;
    font-size: 0.85rem;
}

/* N.° de batch vacio al intentar "Generar filas" (program-create.blade.php). */
.lab-selected-products input.is-invalid {
    border-color: #dc2626;
    background: #fef2f2;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .2);
}

.lab-batch-error {
    color: #dc2626;
    font-size: 0.85rem;
    font-weight: 600;
    margin: -0.6rem 0 1rem;
}

.lab-remove-btn {
    border: none;
    background: transparent;
    color: var(--cemix-texto-sub);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1;
}

.lab-remove-btn:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.lab-capture-wrap {
    overflow-x: auto;
    border: 1px solid var(--cemix-borde);
    border-radius: 10px;
    background: #fff;
    /* El scroll horizontal lo sigue haciendo esta caja (sincronizada por JS
       con .lab-capture-hscroll de abajo), pero se oculta su barra nativa
       para que quede una sola barra visible: la espejo, que es la que se
       ajusta sola pegada al fondo del viewport. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.lab-capture-wrap::-webkit-scrollbar {
    display: none;
}

/* Barra de scroll horizontal "espejo" (seccion nueva): con una tabla larga,
   la barra nativa de .lab-capture-wrap queda al final de todas las filas y
   hay que bajar hasta el fondo de la pagina para alcanzarla. Esta barra se
   sincroniza por JS con el scroll real de la tabla (ver capture.blade.php)
   y con "position: sticky; bottom: 0" se queda pegada abajo del viewport
   mientras la tabla esta a la vista, sin importar cuanto hayas bajado. */
.lab-capture-hscroll {
    position: sticky;
    bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    height: 16px;
    margin-top: 2px;
    background: #fff;
    border: 1px solid var(--cemix-borde);
    border-radius: 8px;
    z-index: 5;
}

.lab-capture-hscroll__inner {
    height: 1px;
}

.lab-capture-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.lab-capture-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #FAFBFC;
    padding: 8px 9px;
    text-align: left;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--cemix-texto-sub);
    border-bottom: 2px solid var(--cemix-borde);
    border-right: 1px solid var(--cemix-borde);
    white-space: nowrap;
}

.lab-capture-table tbody td {
    border-bottom: 1px solid var(--cemix-borde);
    border-right: 1px solid var(--cemix-borde);
    padding: 0;
}

.lab-capture-table td.is-readonly {
    background: var(--cemix-celeste-claro);
}

.lab-capture-table input,
.lab-capture-table select {
    width: 100%;
    min-width: 86px;
    border: none;
    background: transparent;
    padding: 8px 9px;
    font-size: 0.78rem;
    font-family: inherit;
    color: var(--cemix-texto);
}

.lab-capture-table input:disabled {
    color: var(--cemix-azul-kiosco);
    font-weight: 700;
    cursor: not-allowed;
    background: transparent;
}

.lab-capture-table input:focus,
.lab-capture-table select:focus {
    outline: 2px solid var(--cemix-azul-kiosco);
    outline-offset: -2px;
    background: #fff;
    position: relative;
    z-index: 1;
}

.lab-capture-table input.is-ok,
.lab-capture-table select.is-ok {
    background: #E9F7EE !important;
}

.lab-capture-table input.is-err,
.lab-capture-table select.is-err {
    background: #FCEAE8 !important;
    color: #b91c1c;
    font-weight: 700;
}

/* Captura de Laboratorio: boton "Eliminar seleccionados" arriba de la
   tabla y columna de casillas para palomear filas. */
.lab-capture-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

/* Panel "Ingresar otro producto" (buscador + N.° de batch). */
.lab-add-product {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    padding: 1rem 1.25rem;
    margin-bottom: .75rem;
    background: var(--cemix-verde-claro);
    border: 1px solid var(--cemix-borde);
    border-radius: var(--cemix-radio);
}

.lab-add-product[hidden] {
    display: none;
}

.lab-add-product__hint {
    flex-basis: 100%;
    margin: 0;
    font-size: .8rem;
    color: var(--cemix-texto-sub);
}

/* Campo de la captura que quedo vacio al intentar guardar o salir. */
.lab-capture-table input.is-empty,
.lab-capture-table select.is-empty {
    background: #FCEAE8 !important;
    outline: 2px solid #DC2626;
    outline-offset: -2px;
}

.lab-capture-toolbar .cemix-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.lab-capture-table .lab-select-cell {
    width: 40px;
    text-align: center;
    padding: 8px 9px;
}

.lab-capture-table .lab-select-cell input[type="checkbox"] {
    width: 16px;
    min-width: 0;
    height: 16px;
    padding: 0;
    cursor: pointer;
    accent-color: var(--cemix-azul-kiosco);
}

.lab-row-num {
    font-weight: 800;
    text-align: center;
    background: var(--cemix-fondo);
    color: var(--cemix-texto-sub);
    min-width: 40px;
    padding: 8px 6px;
}

.lab-status-pill {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 12px;
    white-space: nowrap;
    display: inline-block;
}

.lab-status-pill.pendiente {
    background: var(--cemix-fondo);
    color: var(--cemix-texto-sub);
}

.lab-status-pill.aprobado {
    background: #E6F4EA;
    color: #1E8449;
}

.lab-status-pill.rechazado {
    background: #FADBD8;
    color: #b91c1c;
}

.lab-batch-summary {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--cemix-fondo);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 1.2rem;
}

.lab-batch-summary .item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lab-batch-summary .lbl {
    font-size: 0.68rem;
    color: var(--cemix-texto-sub);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
}

.lab-batch-summary .val {
    font-size: 0.85rem;
    font-weight: 700;
}

/* "Editado por XX" bajo el boton Editar de Ver registros (Molienda y
   Laboratorio): el registro lo edito alguien distinto de su creador
   (ADMIN_GENERAL), ver App\Models\Concerns\TracksOwnerEdits. */
.cemix-edited-by {
    margin-top: 4px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--cemix-texto-sub);
    white-space: nowrap;
}