/* ==========================================================
   SACHET QUALITY CONTROL — KIOSK STYLES
   Modern industrial tablet UI
   ========================================================== */

/* ── GOOGLE FONT ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── EL ATRIBUTO hidden MANDA ─────────────────────────────────
   El navegador oculta [hidden] con `display: none`, pero esa regla
   viene de su hoja por defecto: cualquier clase nuestra que declare
   `display: flex` o `grid` la gana, y el elemento se ve igual.

   Así estuvo apareciendo el escáner de Mezclas pese a llevar hidden,
   y así se veían botones que el JS creía haber escondido: .sqc-btn es
   inline-flex, de modo que `boton.hidden = true` no hacía nada.

   Una sola regla, en la única hoja que cargan todas las pantallas,
   devuelve a hidden el significado que se le supone. */
[hidden] { display: none !important; }

/* ── DESIGN TOKENS — DARK (default) ─────────────────────── */
:root {
    /* El icono del calendario del navegador es negro: en oscuro hay que
       invertirlo para que se vea. */
    --sqc-cal-invert: 1;
    --sqc-bg: #0a0f1e;
    --sqc-surface: #111827;
    --sqc-surface-2: #1c2538;
    --sqc-surface-3: #243049;
    --sqc-border: rgba(255, 255, 255, 0.08);
    --sqc-accent: #3b82f6;
    --sqc-accent-glow: rgba(59, 130, 246, 0.25);
    --sqc-ok: #22c55e;
    --sqc-ok-bg: rgba(34, 197, 94, 0.12);
    --sqc-ok-glow: rgba(34, 197, 94, 0.3);
    --sqc-fail: #ef4444;
    --sqc-fail-bg: rgba(239, 68, 68, 0.12);
    --sqc-fail-glow: rgba(239, 68, 68, 0.3);
    --sqc-warn: #f59e0b;
    --sqc-warn-bg: rgba(245, 158, 11, 0.12);
    /* Lo que se MARCA en ámbar —un día por liberar en el calendario—: relleno
       y la cifra encima. Más fuerte que `--sqc-warn-bg`, que es el fondo de
       un aviso; esto tiene que verse de un vistazo en una cuadrícula. */
    --sqc-warn-fill: rgba(245, 158, 11, 0.26);
    --sqc-warn-ink: #fcd34d;
    /* Y su pareja verde: un día con todo lo envasado en su bin o su mezcla. */
    --sqc-ok-fill: rgba(34, 197, 94, 0.24);
    --sqc-ok-ink: #86efac;
    --sqc-text: #f1f5f9;
    --sqc-text-muted: #94a3b8;
    --sqc-text-dim: #475569;
    --sqc-radius-sm: 8px;
    --sqc-radius: 14px;
    --sqc-radius-lg: 20px;
    --sqc-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    --sqc-font: 'Inter', system-ui, sans-serif;
    --sqc-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── DESIGN TOKENS — LIGHT THEME ────────────────────────── */
[data-sqc-theme="light"] {
    --sqc-cal-invert: 0;
    --sqc-bg: #f0f4f8;
    --sqc-surface: #ffffff;
    --sqc-surface-2: #f1f5f9;
    --sqc-surface-3: #e2e8f0;
    --sqc-border: rgba(0, 0, 0, 0.09);
    --sqc-accent: #2563eb;
    --sqc-accent-glow: rgba(37, 99, 235, 0.18);
    --sqc-ok: #16a34a;
    --sqc-ok-bg: rgba(22, 163, 74, 0.1);
    --sqc-ok-glow: rgba(22, 163, 74, 0.25);
    --sqc-fail: #dc2626;
    --sqc-fail-bg: rgba(220, 38, 38, 0.08);
    --sqc-fail-glow: rgba(220, 38, 38, 0.22);
    --sqc-warn: #d97706;
    --sqc-warn-bg: rgba(217, 119, 6, 0.1);
    /* En claro, opaco: el #d97706 rebajado sale melocotón, no amarillo. */
    --sqc-warn-fill: #fde68a;
    --sqc-warn-ink: #92400e;
    --sqc-ok-fill: #bbf7d0;
    --sqc-ok-ink: #166534;
    --sqc-text: #0f172a;
    --sqc-text-muted: #475569;
    --sqc-text-dim: #94a3b8;
    --sqc-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

/* ── THEME TRANSITION ────────────────────────────────────── */
#sqc-app,
#sqc-app *:not(svg):not(path):not(circle):not(rect) {
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.25s ease,
        box-shadow 0.3s ease !important;
}

/* ── RESET & BASE ────────────────────────────────────────── */
#sqc-app,
#sqc-app * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    font-family: var(--sqc-font);
}

/* Override WordPress outline-style:solid on focus (confusing for operators) */
#sqc-app button:focus,
#sqc-app input:focus,
#sqc-app select:focus,
#sqc-app textarea:focus,
#sqc-app a:focus,
#sqc-cat-app button:focus,
#sqc-cat-app input:focus,
#sqc-cat-app select:focus,
#sqc-cat-app textarea:focus,
#sqc-cat-app a:focus,
#sqc-records-app button:focus,
#sqc-records-app input:focus,
#sqc-records-app select:focus,
#sqc-records-app textarea:focus,
#sqc-records-app a:focus {
    outline: none !important;
    outline-style: none !important;
}

/* Permitir selección de texto SOLO en los inputs donde de verdad deben escribir */
#sqc-app input[type="text"],
#sqc-app input[type="search"],
#sqc-app input[type="number"],
#sqc-app textarea {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
}

/* La aplicación ocupa la página entera.
 *
 * Antes era una tarjeta de 1400px centrada, con su sombra: en una pantalla
 * ancha quedaba flotando sobre el fondo del tema, con una franja clara a cada
 * lado y otra arriba. Eso se lee como un error de diseño, no como un marco.
 *
 * Lo que se centra es el CONTENIDO —`.sqc-rel-wrap`, `.sqc-mix-wrap`,
 * `.sqc-pdf-inner`…—, no el fondo. Así el color de la aplicación llega a los
 * cuatro bordes y la barra lateral queda pegada a lo que acompaña, que es
 * justo como se veía bien el archivo de PDF: ésa era la única pantalla que ya
 * anulaba este ancho. */
#sqc-app {
    background: var(--sqc-bg);
    min-height: 100dvh;
    color: var(--sqc-text);
    position: relative;
    overflow-x: hidden;
    width: 100%;
    max-width: none;
    margin: 0 !important;
}

/* hide default WP padding that interferes on kiosk pages */
.sqc-app~* {
    display: none !important;
}

/* ── SCREENS ─────────────────────────────────────────────── */
.sqc-screen {
    display: none;
    min-height: 100dvh;
    flex-direction: column;
    animation: sqc-in 0.28s ease both;
}

.sqc-screen--active {
    display: flex;
}

@keyframes sqc-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── GLOBAL NAV ─────────────────────────────────────────── */
/* ==========================================================
   LA CARCASA: BARRA LATERAL + CONTENIDO
   ==========================================================

   Sustituye a la antigua barra horizontal centrada, que ocupaba una franja
   entera de pantalla para siete enlaces y en móvil se partía en dos filas.

   Cómo está montado, que es lo que no se ve al leer las reglas:

   · El sidebar es `position: fixed`. No está en el flujo, así que ninguna
     pantalla tuvo que cambiar su maquetación para hacerle sitio.

   · El desplazamiento del resto lo hace un `padding-left` en el BODY, no un
     contenedor nuevo. Es la única forma de que se corra también la cabecera
     del tema de WordPress; con un wrapper propio, media aplicación habría
     quedado debajo de la barra.

   · Los anchos viven en variables, y el estado contraído sólo cambia una de
     ellas. Por eso «contraer» no necesita recalcular nada más.

   · Las variables de tema (--sqc-*) están declaradas en :root, así que el
     sidebar las tiene aunque esté fuera de #sqc-app. El atributo del tema se
     espeja en <html> desde el arranque de tpl-header.php.
   ========================================================== */

:root {
    --sqc-nav-w: 264px;
    --sqc-nav-w-min: 68px;
    --sqc-nav-actual: var(--sqc-nav-w);
}

html.sqc-nav-plegado {
    --sqc-nav-actual: var(--sqc-nav-w-min);
}

/* El hueco para la barra. La clase la pone PHP sólo en las páginas que
   tienen un shortcode nuestro: en el resto del sitio no se toca nada. */
body.sqc-has-sidebar {
    padding-left: var(--sqc-nav-actual);
    transition: padding-left var(--sqc-transition);
}

/* Un ancho fijo dentro de un body con padding provoca scroll horizontal en
   cuanto la pantalla se estrecha. Esto lo corta de raíz. */
body.sqc-has-sidebar { overflow-x: hidden; }

/* ── El marco del tema, aplanado ─────────────────────────── */

/* Estas pantallas son la aplicación entera, de borde a borde, no un artículo.
   WordPress las envuelve igual en los contenedores de contenido del tema, que
   traen su ancho máximo y su relleno pensados para un texto: de ahí los
   márgenes a los cuatro lados y la cabecera flotando en medio de la página.

   La marca la pone el script de `tpl-header.php` subiendo desde la propia
   aplicación hasta <body>, así que no depende de cómo se llamen los
   contenedores de cada tema —que cambian de uno a otro y entre versiones—.

   Se aplanan sólo las medidas de la caja. El color no se toca: el fondo lo
   pinta la aplicación, y borrarlo aquí destaparía el blanco del navegador
   detrás en cuanto un tema pusiera el suyo en un contenedor intermedio. */
body.sqc-has-sidebar .sqc-marco-tema {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* El hueco de la barra de administración de WordPress sí se respeta: es una
   barra fija que taparía nuestra cabecera. Lo que se quita es el marco del
   tema, no el andamiaje del propio WordPress. */

/* ── Sin acceso ──────────────────────────────────────────── */

/* Lo devuelven las diez pantallas cuando el perfil no alcanza, pero hasta
   ahora sólo estaba definido en catalog.css: en las otras nueve el mensaje
   salía sin formato, pegado al borde y ajeno al tema. */
.sqc-cat-access-denied {
    max-width: 46ch;
    margin: 48px auto;
    padding: 28px 24px;
    border: 1px solid var(--sqc-border);
    border-radius: var(--sqc-radius);
    background: var(--sqc-surface);
    color: var(--sqc-text-muted);
    font-family: var(--sqc-font);
    font-size: .95rem;
    text-align: center;
}

/* ── Saltar al contenido ─────────────────────────────────── */

.sqc-saltar {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1200;
    padding: 10px 16px;
    border-radius: var(--sqc-radius-sm);
    background: var(--sqc-accent);
    color: #fff;
    font-family: var(--sqc-font);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--sqc-transition);
}

.sqc-saltar:focus { transform: translateY(0); }

/* ── La barra ────────────────────────────────────────────── */

.sqc-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    /* El borde derecho cuenta dentro del ancho: si no, la barra mide un
       píxel más que el hueco y el contenido queda justo debajo del filo. */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: var(--sqc-nav-actual);
    height: 100vh;
    height: 100dvh;
    background: var(--sqc-surface);
    border-right: 1px solid var(--sqc-border);
    font-family: var(--sqc-font);
    transition: width var(--sqc-transition), transform var(--sqc-transition);
}

.sqc-sidebar__marca {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 0 16px;
    border-bottom: 1px solid var(--sqc-border);
    flex-shrink: 0;
}

.sqc-sidebar__brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}

.sqc-sidebar__brand-link:hover .sqc-sidebar__nombre {
    color: var(--sqc-accent);
}

.sqc-sidebar__logo {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--sqc-radius-sm);
    /* El icono de la app trae su propio fondo. Dejar el de antes pintaría un
       recuadro dentro de otro recuadro. */
    background: transparent;
    overflow: hidden;
    color: var(--sqc-accent);
}

.sqc-sidebar__logo svg { width: 20px; height: 20px; }

.sqc-sidebar__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sqc-sidebar__nombre {
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--sqc-text);
    white-space: nowrap;
    overflow: hidden;
}

/* El botón de cerrar es sólo del drawer: en escritorio no hay nada que
   cerrar, la barra vive ahí. */
.sqc-sidebar__cerrar {
    display: none;
    margin-left: auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--sqc-radius-sm);
    background: transparent;
    color: var(--sqc-text-muted);
    cursor: pointer;
}

.sqc-sidebar__cerrar svg { width: 20px; height: 20px; }
.sqc-sidebar__cerrar:hover { background: var(--sqc-surface-2); color: var(--sqc-text); }

/* ── Navegación ──────────────────────────────────────────── */

.sqc-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 10px;
}

.sqc-sidebar__grupo {
    margin: 14px 0 6px 10px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sqc-text-dim);
    white-space: nowrap;
}

.sqc-sidebar__nav > .sqc-sidebar__grupo:first-child { margin-top: 0; }

.sqc-nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 0 12px;
    margin-bottom: 2px;
    border-radius: var(--sqc-radius-sm);
    color: var(--sqc-text-muted);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--sqc-transition), color var(--sqc-transition);
}

.sqc-nav__item:hover { background: var(--sqc-surface-2); color: var(--sqc-text); }

.sqc-nav__item:focus-visible {
    outline: 2px solid var(--sqc-accent);
    outline-offset: 2px;
}

/* El activo: discreto, no un botón enorme. La barra de la izquierda es lo
   que se lee de un vistazo cuando el menú está contraído. */
.sqc-nav__item.is-active {
    background: var(--sqc-accent-glow);
    color: var(--sqc-accent);
    position: relative;
}

.sqc-nav__item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--sqc-accent);
}

.sqc-nav__icono {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sqc-nav__txt { overflow: hidden; text-overflow: ellipsis; }

/* ── Contraer ────────────────────────────────────────────── */

.sqc-sidebar__plegar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 20px);
    min-height: 42px;
    margin: 8px 10px 12px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--sqc-radius-sm);
    background: transparent;
    color: var(--sqc-text-dim);
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--sqc-transition), color var(--sqc-transition);
}

.sqc-sidebar__plegar:hover { background: var(--sqc-surface-2); color: var(--sqc-text); }

.sqc-sidebar__plegar svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform var(--sqc-transition);
}

html.sqc-nav-plegado .sqc-sidebar__plegar svg { transform: rotate(180deg); }

/* ── Estado contraído ────────────────────────────────────── */

html.sqc-nav-plegado .sqc-sidebar__nombre,
html.sqc-nav-plegado .sqc-sidebar__grupo,
html.sqc-nav-plegado .sqc-nav__txt {
    display: none;
}

html.sqc-nav-plegado .sqc-sidebar__marca,
html.sqc-nav-plegado .sqc-nav__item,
html.sqc-nav-plegado .sqc-sidebar__plegar {
    justify-content: center;
    padding: 0;
    gap: 0;
}

/* El enlace de la marca lleva `flex: 1` para que el nombre ocupe el ancho
   cuando la barra está desplegada. Contraída, ese mismo `flex: 1` lo estira de
   borde a borde, y entonces el `justify-content: center` de arriba no centra
   nada —el que manda es el del enlace, que alinea al principio—: el logo queda
   pegado al borde izquierdo mientras los iconos de abajo sí quedan centrados,
   porque ésos son hijos directos del contenedor centrado.

   Contraída no hay nombre que alinear, así que el enlace deja de estirarse y
   centra lo suyo. */
html.sqc-nav-plegado .sqc-sidebar__brand-link {
    flex: 0 0 auto;
    justify-content: center;
    gap: 0;
}

html.sqc-nav-plegado .sqc-sidebar__plegar { width: calc(100% - 20px); }

/* Los grupos siguen separando, aunque su título no se lea. */
html.sqc-nav-plegado .sqc-sidebar__grupo {
    display: block;
    height: 1px;
    margin: 10px 12px;
    background: var(--sqc-border);
    text-indent: -9999px;
    overflow: hidden;
}

/* El nombre de la sección, al pasar el ratón por un icono.
 *
 * Es un elemento suelto con posición fija, colocado por el JS, y no un
 * ::after del propio enlace. Con el pseudo-elemento quedaba recortado: la
 * lista necesita `overflow-y: auto` para poder desplazarse cuando la ventana
 * es baja, y en CSS no se puede recortar un eje y dejar el otro libre, así
 * que el globo moría dentro de la caja. */
.sqc-nav-globo {
    position: fixed;
    z-index: 260;
    padding: 7px 11px;
    border-radius: var(--sqc-radius-sm);
    background: var(--sqc-surface-3);
    border: 1px solid var(--sqc-border);
    color: var(--sqc-text);
    font-family: var(--sqc-font);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--sqc-shadow);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--sqc-transition);
}

.sqc-nav-globo.is-on { opacity: 1; }

/* ── Velo y hamburguesa ──────────────────────────────────── */

.sqc-nav-velo {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity var(--sqc-transition);
}

.sqc-nav-velo.is-on { opacity: 1; }

/* La hamburguesa sólo existe cuando la barra se esconde. */
.sqc-nav-abrir {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--sqc-border);
    border-radius: var(--sqc-radius-sm);
    background: var(--sqc-surface-2);
    color: var(--sqc-text);
    cursor: pointer;
    place-items: center;
    flex-shrink: 0;
}

.sqc-nav-abrir svg { width: 22px; height: 22px; }
.sqc-nav-abrir:hover { background: var(--sqc-surface-3); }

/* ── La cabecera en pantalla estrecha ────────────────────── */

/* A 320px no caben la hamburguesa, el título, el reloj, el avatar y el botón
   de tema: el último se salía fuera y provocaba scroll horizontal en toda la
   aplicación. Lo que sobra es el título —se recortaba a media palabra, y a
   medias no dice nada—, no el reloj: sin él, los otros cuatro entran de sobra
   incluso a 320px, y en la planta la hora se mira mientras se registra.

   Aquí había un `.sqc-clock { display: none }` que nunca escondió nada: el
   `display: flex` del reloj se declara más abajo en esta misma hoja y, a
   igual peso, gana el último. Se quita en vez de arreglarlo, porque ahora hay
   sitio. Cuidado con eso al tocar esta zona: una regla que no hace nada no
   avisa. */
@media (max-width: 640px) {
    .sqc-header {
        padding: 8px 12px !important;
        gap: 10px;
    }

    /* En un teléfono el título de la cabecera no cabe. Se recortaba a media
       palabra —«Liberación de pro…»— y un título a medias no dice dónde
       estás: gasta la única línea que hay para no decir nada. Se esconde
       entero, con su subtítulo. En tablet sí cabe y ahí se ve, que es donde
       de verdad se trabaja con la app.

       Va en el contenedor y no en el título: el quiosco enseña y esconde el
       subtítulo desde JavaScript con estilo en línea, y el estilo en línea
       gana a cualquier regla de esta hoja. Escondiendo el contenedor no hay
       manera de que reaparezca. */
    .sqc-header__text { display: none; }

    /* Ese contenedor era además el que empujaba el avatar y el botón de tema
       contra el borde derecho —es el único con flex:1—. Sin él, ese trabajo
       lo hace el propio avatar.

       Con la cabecera delante en el selector, y no `.sqc-user-menu` a secas:
       el margen normal del avatar se declara más abajo en esta misma hoja y,
       a igual peso, gana el último. */
    .sqc-header .sqc-user-menu { margin-left: auto; }
}

/* ── El título que dibuja el tema encima de la pantalla ─── */

/* Es la tercera vez que se dice lo mismo: el menú lo marca y nuestra cabecera
   lo escribe. Antes se escondía sólo en el teléfono, donde además se cortaba a
   la mitad; en el escritorio se dejaba porque «sitúa la página dentro del
   sitio». Ya no: con la aplicación de borde a borde, ese título queda flotando
   en una franja del color del tema por encima de todo, y eso no sitúa nada, se
   lee como que el diseño se rompió.

   Los selectores son los estándar de WordPress y sus bloques, y van colgados
   de body.sqc-has-sidebar para no tocar el resto del sitio. */
body.sqc-has-sidebar .entry-title,
body.sqc-has-sidebar .page-title,
body.sqc-has-sidebar .wp-block-post-title,
body.sqc-has-sidebar .entry-header > h1,
body.sqc-has-sidebar .page-header > h1 {
    display: none;
}

/* ── Tablet y móvil: la barra pasa a ser un cajón ────────── */

@media (max-width: 1024px) {
    /* Sin hueco reservado: el contenido ocupa todo el ancho. */
    body.sqc-has-sidebar { padding-left: 0; }

    .sqc-sidebar {
        --sqc-nav-actual: var(--sqc-nav-w);
        width: var(--sqc-nav-w);
        max-width: 86vw;
        transform: translateX(-100%);
        box-shadow: var(--sqc-shadow);
    }

    .sqc-sidebar.is-abierto { transform: translateX(0); }

    .sqc-sidebar__cerrar { display: grid; }
    .sqc-nav-abrir { display: grid; }

    /* Contraído es una idea de escritorio: en un cajón no tiene sentido. */
    html.sqc-nav-plegado .sqc-sidebar__nombre,
    html.sqc-nav-plegado .sqc-nav__txt { display: block; }

    html.sqc-nav-plegado .sqc-sidebar__grupo {
        height: auto;
        margin: 14px 0 6px 10px;
        background: none;
        text-indent: 0;
    }

    html.sqc-nav-plegado .sqc-sidebar__marca,
    html.sqc-nav-plegado .sqc-nav__item {
        justify-content: flex-start;
        padding: 0 12px;
        gap: 12px;
    }

    html.sqc-nav-plegado .sqc-sidebar__marca { padding: 0 16px; }

    /* En el cajón el nombre vuelve, y con él el enlace a lo ancho. */
    html.sqc-nav-plegado .sqc-sidebar__brand-link {
        flex: 1;
        justify-content: flex-start;
        gap: 12px;
    }

    .sqc-sidebar__plegar { display: none; }
}

/* Con el cajón abierto la página de atrás no se mueve. */
body.sqc-nav-bloqueado { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .sqc-sidebar,
    .sqc-nav-velo,
    body.sqc-has-sidebar { transition: none; }
}

/* ── HEADER ──────────────────────────────────────────────── */
.sqc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    /* Más bajo que antes y sin sombra: la cabecera ya no tiene que sostener
       la navegación, así que deja de competir con el contenido. */
    padding: 10px 24px !important;
    /* Y sin margen, dicho aquí y no dado por supuesto: el tema reparte un
       margen vertical propio (`--wp--style--block-gap`) entre los elementos
       sueltos del contenido de la página, y basta que una plantilla dibuje la
       cabecera fuera de la aplicación para que salga una franja encima y otra
       debajo. La cabecera no lleva margen, cuelgue de donde cuelgue. */
    margin: 0 !important;
    min-height: 60px;
    background: var(--sqc-surface);
    border-bottom: 1px solid var(--sqc-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* En celular y tablet la cabecera se va con la página (Alexis, 04-10-2026).
   Fija se quedaba con la parte de arriba de una pantalla que ya es chica.
   Tablet es lo mismo que para el cajón —hasta 1024 px— y además la tablet
   grande puesta de lado, que pasa de 1024 pero se maneja con el dedo.
   `relative` y no `static`: el menú de la cuenta cuelga de aquí y tiene que
   seguir quedando por encima del contenido. Lo que se pegaba debajo de ella
   —la barra del día en Mezclas, los filtros de Analíticas y Configuración—
   se pega ahora arriba del todo. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .sqc-header { position: relative; }
}

.sqc-logo-mark {
    width: 44px;
    height: 44px;
    color: var(--sqc-accent);
    flex-shrink: 0;
}

.sqc-logo-mark svg {
    width: 100%;
    height: 100%;
}

.sqc-header__text {
    flex: 1;
}

.sqc-header__title {
    font-size: clamp(1rem, 2.4vw, 1.15rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sqc-text);
    margin: 0;
}

.sqc-header__sub {
    font-size: 0.85rem;
    color: var(--sqc-text-muted);
    margin: 2px 0 0 0;
    font-weight: 500;
}

.sqc-btn-back {
    width: 44px;
    height: 44px;
    border-radius: var(--sqc-radius-sm);
    border: 1px solid var(--sqc-border);
    background: var(--sqc-surface-2);
    color: var(--sqc-text);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background var(--sqc-transition), border-color var(--sqc-transition);
}

.sqc-btn-back:hover {
    background: var(--sqc-surface-3);
    border-color: var(--sqc-accent);
}

.sqc-btn-back svg {
    width: 22px;
    height: 22px;
}

/* ── CLOCK ───────────────────────────────────────────────── */
.sqc-clock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--sqc-accent);
    letter-spacing: 0.02em;
    text-align: right;
    line-height: 1.15;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sqc-clock__date {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--sqc-text-muted);
    letter-spacing: 0.04em;
}

.sqc-clock__time {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--sqc-accent);
}

/* ── THEME TOGGLE BUTTON ─────────────────────────────────── */
.sqc-theme-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--sqc-border);
    background: var(--sqc-surface-2);
    color: var(--sqc-accent);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    /* No capture the global transition override for smoother icon swap */
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

.sqc-theme-toggle:hover {
    background: var(--sqc-surface-3);
    border-color: var(--sqc-accent);
    transform: rotate(20deg) scale(1.08);
}

.sqc-theme-toggle:active {
    transform: scale(0.92);
}

/* SVG icons inside the toggle */
.sqc-theme-toggle svg {
    width: 22px;
    height: 22px;
    position: absolute;
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* DARK mode (default): show moon, hide sun */
.sqc-icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.sqc-icon-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.4);
}

/* LIGHT mode: hide moon, show sun */
[data-sqc-theme="light"] .sqc-icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.4);
}

[data-sqc-theme="light"] .sqc-icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ══════════════════════════════════════════════════════════════
   SISTEMA DE BOTONES COMPARTIDO
   ══════════════════════════════════════════════════════════════

   Vive en kiosk.css a propósito: es la ÚNICA hoja que cargan todas
   las pantallas (es la que declara las variables --sqc-*). Cualquier
   componente que se use en más de una pantalla tiene que definirse
   aquí; si se define en el CSS de una pantalla concreta, en las demás
   el elemento se dibuja sin estilo y el navegador no avisa.

   Eso fue exactamente lo que pasó con estos botones: estaban sólo en
   pdf-viewer.css, así que en Mezclas salían con el aspecto por defecto
   del navegador, ajenos al tema claro/oscuro.

   Hay un verificador para que no se repita:  php tools/check-css.php
   ══════════════════════════════════════════════════════════════ */

.sqc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;                 /* objetivo táctil en tablet */
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--sqc-radius-sm);
    background: var(--sqc-surface-2);
    color: var(--sqc-text);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--sqc-transition),
                border-color var(--sqc-transition),
                color var(--sqc-transition),
                box-shadow var(--sqc-transition),
                transform var(--sqc-transition);
}

.sqc-btn:hover:not(:disabled) { border-color: var(--sqc-accent); }
.sqc-btn:active:not(:disabled) { transform: translateY(1px); }

.sqc-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--sqc-accent-glow);
}

.sqc-btn:disabled,
.sqc-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.sqc-btn-primary {
    background: var(--sqc-accent);
    border-color: var(--sqc-accent);
    color: #fff;
}

.sqc-btn-primary:hover:not(:disabled) { filter: brightness(1.12); }

.sqc-btn-secondary {
    background: var(--sqc-surface-2);
    border-color: var(--sqc-border);
    color: var(--sqc-text);
}

.sqc-btn-secondary:hover:not(:disabled) {
    background: var(--sqc-surface-3);
    border-color: var(--sqc-accent);
}

.sqc-btn-outline {
    background: transparent;
    border-color: var(--sqc-accent);
    color: var(--sqc-accent);
}

.sqc-btn-outline:hover:not(:disabled) { background: var(--sqc-accent-glow); }

.sqc-btn-danger {
    background: var(--sqc-fail);
    border-color: var(--sqc-fail);
    color: #fff;
}

.sqc-btn-danger:hover:not(:disabled) { filter: brightness(1.1); }

.sqc-btn-sm {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 0.82rem;
}

.sqc-btn-block { width: 100%; }

/* Alias con doble guion.
   En el plugin conviven dos convenciones: `.sqc-btn-primary` (Mezclas,
   Archivos) y `.sqc-btn--primary` (Quiosco, Mantención). En vez de renombrar
   marcado que ya está en producción, se soportan las dos. Mantención define
   además las suyas propias en maintenance.css, que carga después y prevalece. */

.sqc-btn--primary   { background: var(--sqc-accent); border-color: var(--sqc-accent); color: #fff; }
.sqc-btn--primary:hover:not(:disabled) { filter: brightness(1.12); }

.sqc-btn--secondary { background: var(--sqc-surface-2); border-color: var(--sqc-border); color: var(--sqc-text); }
.sqc-btn--secondary:hover:not(:disabled) { background: var(--sqc-surface-3); border-color: var(--sqc-accent); }

.sqc-btn--ghost     { background: transparent; border-color: transparent; color: var(--sqc-text-muted); }
.sqc-btn--ghost:hover:not(:disabled) { background: var(--sqc-surface-2); color: var(--sqc-text); }

.sqc-btn--danger    { background: var(--sqc-fail); border-color: var(--sqc-fail); color: #fff; }
.sqc-btn--danger:hover:not(:disabled) { filter: brightness(1.1); }

/* ── Botones compactos del menú de usuario ─────────────────────
   Los usa tpl-user-menu.php, que se incluye en la cabecera de TODAS
   las pantallas, así que también tienen que estar aquí. Estaban sólo
   en catalog.css y admin.css: el diálogo de cambio de contraseña se
   veía sin estilo en Quiosco, Mezclas, Analíticas y Archivos.        */

.sqc-cat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: var(--sqc-surface-2);
    color: var(--sqc-text);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--sqc-transition),
                border-color var(--sqc-transition),
                color var(--sqc-transition);
}

.sqc-cat-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.sqc-cat-btn--primary {
    background: var(--sqc-accent);
    border-color: var(--sqc-accent);
    color: #fff;
}

.sqc-cat-btn--primary:hover:not(:disabled) { filter: brightness(1.12); }

.sqc-cat-btn--ghost {
    background: transparent;
    border-color: var(--sqc-border);
    color: var(--sqc-text-muted);
}

.sqc-cat-btn--ghost:hover:not(:disabled) {
    border-color: var(--sqc-accent);
    color: var(--sqc-text);
}

/* ── USER MENU ─────────────────────────────────────────────────────── */
.sqc-user-menu {
    position: relative;
    flex-shrink: 0;
    margin-left: 4px;
}

.sqc-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--sqc-accent);
    background: color-mix(in srgb, var(--sqc-accent) 15%, transparent);
    color: var(--sqc-accent);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    transition: background 0.2s, transform 0.18s, box-shadow 0.18s;
}

.sqc-user-avatar:hover {
    background: color-mix(in srgb, var(--sqc-accent) 25%, transparent);
    transform: scale(1.07);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sqc-accent) 25%, transparent);
}

.sqc-user-avatar__initials {
    pointer-events: none;
    line-height: 1;
}

/* Dropdown panel */
.sqc-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 260px;
    background: var(--sqc-surface);
    border: 1px solid var(--sqc-border);
    border-radius: 12px;
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.25);
    z-index: 9999;
    overflow: hidden;
    transform-origin: top right;
    transform: scale(0.92) translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}

.sqc-user-dropdown.is-open {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: all;
}

/* Header with avatar + name */
.sqc-user-dropdown__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.sqc-user-dropdown__avatar-lg {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--sqc-accent);
    background: color-mix(in srgb, var(--sqc-accent) 15%, transparent);
    color: var(--sqc-accent);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.sqc-user-dropdown__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sqc-user-dropdown__name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--sqc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sqc-user-dropdown__role {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 100px;
    width: fit-content;
}

.sqc-user-dropdown__divider {
    height: 1px;
    background: var(--sqc-border);
    margin: 0;
}

/* Menu items */
.sqc-user-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--sqc-text);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    text-align: left;
}

.sqc-user-dropdown__item:hover {
    background: var(--sqc-surface-2);
}

.sqc-user-dropdown__item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

.sqc-user-dropdown__item--danger {
    color: #ef4444;
}

.sqc-user-dropdown__item--danger svg {
    opacity: 1;
}

/* Toggle Switch UI for dropdown items */
.sqc-toggle-switch {
    width: 32px;
    height: 18px;
    background: var(--sqc-border);
    border-radius: 20px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.sqc-toggle-switch__thumb {
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.sqc-user-dropdown__item[aria-pressed="true"] .sqc-toggle-switch {
    background: var(--sqc-accent);
}

.sqc-user-dropdown__item[aria-pressed="true"] .sqc-toggle-switch__thumb {
    transform: translateX(14px);
}

/* Password change mini-form */
.sqc-user-pwd-form {
    padding: 8px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sqc-user-pwd-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--sqc-border);
    border-radius: 7px;
    background: var(--sqc-surface-2);
    color: var(--sqc-text);
    font-size: 0.88rem;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.sqc-user-pwd-input:focus {
    border-color: var(--sqc-accent);
}

.sqc-user-pwd-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
}

.sqc-user-pwd-msg {
    font-size: 0.82rem;
    margin: 0;
    padding: 6px 10px;
    border-radius: 6px;
    text-align: center;
}

.sqc-user-pwd-msg--ok  { background: #d1fae5; color: #065f46; }
.sqc-user-pwd-msg--err { background: #fee2e2; color: #991b1b; }

/* ── MACHINE SELECTION ─────────────────────────────────────────────── */
.sqc-machine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    padding: 36px 28px !important;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
    align-content: start;
}

.sqc-machine-btn {
    background: var(--sqc-surface);
    border: 2px solid var(--sqc-border);
    border-radius: var(--sqc-radius-lg);
    color: var(--sqc-text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px 20px !important;
    transition: all var(--sqc-transition);
    position: relative;
    overflow: hidden;
}

.sqc-machine-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, var(--sqc-accent-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--sqc-transition);
}

@media (hover: hover) {
    .sqc-machine-btn:hover,
    .sqc-machine-btn:focus-visible {
        border-color: var(--sqc-accent);
        transform: translateY(-3px);
        box-shadow: 0 12px 40px var(--sqc-accent-glow);
        outline: none;
    }

    .sqc-machine-btn:hover::before {
        opacity: 1;
    }
}

.sqc-machine-btn:active {
    transform: translateY(0) scale(0.97);
}

.sqc-machine-btn__icon {
    color: var(--sqc-accent);
    width: 56px;
    height: 56px;
}

.sqc-machine-btn__icon svg {
    width: 100%;
    height: 100%;
}

.sqc-machine-btn__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sqc-text-muted);
}

.sqc-machine-btn__number {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--sqc-text);
    position: relative;
}

.sqc-machine-btn__code {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sqc-accent);
    background: color-mix(in srgb, var(--sqc-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--sqc-accent) 30%, transparent);
    border-radius: 100px;
    padding: 2px 10px !important;
    line-height: 1.6;
    margin-top: -2px;
}

/* ── FORM BODY ───────────────────────────────────────────── */
.sqc-form-body {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 24px 60px !important;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── SECTIONS ────────────────────────────────────────────── */
.sqc-section {
    background: var(--sqc-surface);
    border: 1px solid var(--sqc-border);
    border-radius: var(--sqc-radius);
    padding: 24px !important;
}

.sqc-section__title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sqc-text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.sqc-section__title small {
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sqc-text-dim);
}

.sqc-step {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sqc-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.sqc-step--alert {
    background: var(--sqc-warn);
}

/* ── SAUCE SELECTOR ──────────────────────────────────────── */
.sqc-sauce-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.sqc-sauce-btn {
    background: var(--sqc-surface-2);
    border: 2px solid var(--sqc-border);
    border-radius: var(--sqc-radius);
    color: var(--sqc-text);
    cursor: pointer;
    padding: 18px 14px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    transition: all var(--sqc-transition);
}

@media (hover: hover) {
    .sqc-sauce-btn:hover,
    .sqc-sauce-btn:focus-visible {
        border-color: var(--sqc-accent);
        background: var(--sqc-surface-3);
        outline: none;
    }
}

.sqc-sauce-btn[aria-pressed="true"] {
    border-color: var(--sqc-accent);
    background: rgba(59, 130, 246, 0.15);
    box-shadow: 0 0 0 3px var(--sqc-accent-glow);
}

.sqc-sauce-btn__name {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.sqc-sauce-btn__sub {
    font-size: 0.7rem;
    color: var(--sqc-text-muted);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.sqc-sauce-btn__chars {
    font-size: 0.65rem;
    color: var(--sqc-accent);
    margin-top: 4px;
    font-weight: 600;
}

.sqc-sauce-btn--sachet {
    min-height: 80px;
    min-width: 145px;  /* guaranteed minimum — applies in grid and scroll context */
    padding: 10px 8px !important;
    gap: 4px;
}

.sqc-sauce-btn--sachet .sqc-sauce-btn__name {
    font-size: 0.84rem;
}

/* ── Sachet grid: 2 rows max, scrolls horizontally ───────────────────── */
#sqc-sachet-grid {
    /* Override .sqc-sauce-grid auto-fit */
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: 145px;   /* fixed — cards never stretch regardless of result count */
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;

    /* Nice scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--sqc-border) transparent;
    padding-bottom: 6px;

    /* Snap to columns for smooth touch scroll */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

#sqc-sachet-grid > * {
    scroll-snap-align: start;
}

/* Webkit scrollbar */
#sqc-sachet-grid::-webkit-scrollbar {
    height: 4px;
}
#sqc-sachet-grid::-webkit-scrollbar-track {
    background: transparent;
}
#sqc-sachet-grid::-webkit-scrollbar-thumb {
    background: var(--sqc-border);
    border-radius: 4px;
}

/* Subtle right-fade gradient to hint there's more content */
.sqc-sachet-grid-wrap {
    position: relative;
}
.sqc-sachet-grid-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 6px; /* above scrollbar */
    width: 40px;
    background: linear-gradient(to right, transparent, var(--sqc-bg));
    pointer-events: none;
    border-radius: 0 var(--sqc-radius) var(--sqc-radius) 0;
}

/* Mobile: keep 2 rows, same fixed-width columns as desktop */
@media (max-width: 480px) {
    #sqc-sachet-grid {
        grid-template-rows: repeat(2, auto);
        grid-auto-columns: 145px; /* same as desktop — scroll handles overflow */
    }
}

.sqc-sauce-btn__target {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--sqc-ok);
}

.sqc-sauce-btn__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sqc-text);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.sqc-sauce-btn__img {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    object-fit: cover;
    border: 1.5px solid var(--sqc-border);
}

.sqc-sauce-btn[aria-pressed="true"] .sqc-sauce-btn__img {
    border-color: var(--sqc-accent);
}

.sqc-sauce-btn__sauce {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--sqc-text-dim);
    opacity: .65;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Sauce name shown below sachet name — adapts to dark/light theme */
.sqc-sauce-btn__sublabel {
    font-size: 0.75em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sqc-text-muted); /* theme-aware: dark=light-grey, light=dark-grey */
    line-height: 1.2;
}

/* Weight line — second line below sachet name, subtly distinct */
.sqc-sauce-btn__weight {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--sqc-accent);
    opacity: 0.85;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

/* ── INPUTS ──────────────────────────────────────────────── */
.sqc-input {
    width: 100%;
    background: var(--sqc-surface-2);
    border: 2px solid var(--sqc-border);
    border-radius: var(--sqc-radius-sm);
    color: var(--sqc-text);
    font-size: 1.1rem;
    font-family: var(--sqc-font);
    font-weight: 600;
    padding: 14px 18px !important;
    transition: border-color var(--sqc-transition), box-shadow var(--sqc-transition);
    -webkit-appearance: none;
}

/* La hora y el mes siguen abriendo el selector del navegador desde cualquier
   punto (ver user-menu.js), así que se comportan como un botón y el cursor lo
   dice. La FECHA ya no está en esta lista: dejó de ser un control del sistema
   —se escribe con el teclado numérico y el calendario vive en su icono—, así
   que su cursor es el de un campo de texto, que es lo que es.
   Con ella se fueron las reglas del `::-webkit-calendar-picker-indicator`:
   pintaban un icono que ya no existe. */
#sqc-app input[type="time"],
#sqc-app input[type="month"] {
    cursor: pointer;
}

.sqc-input:focus {
    outline: none;
    border-color: var(--sqc-accent);
    box-shadow: 0 0 0 3px var(--sqc-accent-glow);
}

.sqc-input::placeholder {
    color: var(--sqc-text-dim);
    font-weight: 400;
}

.sqc-input--xl {
    font-size: 1.4rem;
    padding: 18px 20px !important;
    letter-spacing: 0.04em;
}

.sqc-input--error {
    border-color: var(--sqc-fail) !important;
    box-shadow: 0 0 0 3px var(--sqc-fail-glow) !important;
}

.sqc-input--warn {
    border-color: var(--sqc-warn) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
}

/* ── LOTE BUILDER ────────────────────────────────────────── */
.sqc-lote-builder-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: sqc-in 0.25s ease;
}

.sqc-lote-parts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}

.sqc-lote-part {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sqc-lote-part__lbl {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sqc-text-muted);
}

.sqc-prefix-grid {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sqc-prefix-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--sqc-radius-sm);
    border: 2px solid var(--sqc-border);
    background: var(--sqc-surface-2);
    color: var(--sqc-text);
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--sqc-font);
    cursor: pointer;
    transition: all var(--sqc-transition);
}

@media (hover: hover) {
    .sqc-prefix-btn:hover {
        border-color: var(--sqc-accent);
    }
}

.sqc-prefix-btn[aria-pressed="true"] {
    background: var(--sqc-accent);
    border-color: var(--sqc-accent);
    color: #fff;
    box-shadow: 0 4px 12px var(--sqc-accent-glow);
}

/* Ya gastado hoy en esta máquina.
 *
 * Mismo trato que los chips de la hoja del día en la sala de mezclas —y a
 * propósito: es el mismo gesto en las dos salas, y quien mira las dos pantallas
 * no tiene que aprenderlo dos veces. Apagado, borde punteado y una línea
 * encima; no deshabilitado, porque salirse del rango es una decisión que toman
 * y que a veces hay que poder tomar. Lo que faltaba no era impedirlo: era que
 * la pantalla dijera que esa letra ya está impresa en una caja.
 */
.sqc-prefix-btn.is-usado {
    opacity: .45;
    border-style: dashed;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

/* Elegido a pesar de estar gastado: se ve elegido, y se sigue viendo que lo
   estaba. Perder cualquiera de las dos cosas sería mentir. */
.sqc-prefix-btn.is-usado[aria-pressed="true"] {
    opacity: 1;
    text-decoration: none;
}

/* La letra que trae propuesta el origen conectado no lleva estilo propio: es
   simplemente la que está `aria-pressed`. La grilla NO se deshabilita —salirse
   de lo propuesto es una decisión legítima, igual que salirse de las gastadas—
   así que aquí no hay ninguna regla para `:disabled`. */

.sqc-lote-static {
    height: 44px;
    padding: 0 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sqc-surface-3);
    border-radius: var(--sqc-radius-sm);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sqc-text);
}

.sqc-input--center {
    text-align: center;
    height: 44px;
    width: 70px;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 800;
}

.sqc-btn-suffix {
    height: 44px;
    padding: 0 16px !important;
    border-radius: var(--sqc-radius-sm);
    border: 2px solid var(--sqc-border);
    background: var(--sqc-surface-2);
    color: var(--sqc-text-muted);
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--sqc-font);
    cursor: pointer;
    transition: all var(--sqc-transition);
}

@media (hover: hover) {
    .sqc-btn-suffix:hover {
        border-color: var(--sqc-accent);
    }
}

.sqc-btn-suffix[aria-pressed="true"] {
    background: var(--sqc-accent);
    border-color: var(--sqc-accent);
    color: #fff;
    box-shadow: 0 4px 12px var(--sqc-accent-glow);
}

.sqc-lote-preview {
    margin-top: 6px;
    padding: 16px 20px !important;
    background: var(--sqc-surface-2);
    border: 1px dashed var(--sqc-accent);
    border-radius: var(--sqc-radius-sm);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sqc-lote-preview__lbl {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sqc-text-muted);
}

.sqc-lote-preview__val {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--sqc-accent);
    letter-spacing: 0.05em;
}

/* Editable input variant */
.sqc-lote-preview__input {
    background: transparent;
    border: 1.5px dashed transparent;
    border-radius: 6px;
    font-family: var(--sqc-font);
    padding: 4px 10px !important;
    flex: 1;
    min-width: 0;
    cursor: text;
    transition: border-color var(--sqc-transition), background var(--sqc-transition);
}

.sqc-lote-preview__input:hover {
    border-color: var(--sqc-accent-glow);
    background: rgba(59, 130, 246, 0.06);
}

.sqc-lote-preview__input:focus {
    outline: none;
    border-color: var(--sqc-accent);
    background: var(--sqc-surface-3);
    box-shadow: 0 0 0 3px var(--sqc-accent-glow);
}

.sqc-lote-preview__input::placeholder {
    color: var(--sqc-text-dim);
    font-weight: 500;
}

[data-sqc-theme="light"] .sqc-lote-preview {
    background: #e0e7ff;
}

/* Código repetido: el guardado está bloqueado hasta que se arregle.
 *
 * Va en rojo y no en ámbar a propósito: el ámbar de esta pantalla es «revísalo»
 * y esto es «no se puede». Se lee pegado al «Lote a registrar», que es el campo
 * que hay que corregir. */
.sqc-lote-choque {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
    background: var(--sqc-nc-bg, rgba(239, 68, 68, 0.12));
    color: var(--sqc-nc, #ef4444);
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.sqc-lote-hint {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 12px !important;
    border-radius: 6px;
    min-height: 28px;
    transition: all var(--sqc-transition);
}

.sqc-lote-hint--warn {
    background: var(--sqc-warn-bg);
    color: var(--sqc-warn);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.sqc-lote-hint--ok {
    background: var(--sqc-ok-bg);
    color: var(--sqc-ok);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* ── AUTO DATA ───────────────────────────────────────────── */
.sqc-section--info {
    background: var(--sqc-surface-2);
    border-color: transparent;
}

.sqc-auto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.sqc-auto-item {
    background: var(--sqc-surface-3);
    border-radius: var(--sqc-radius-sm);
    padding: 14px 16px !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sqc-auto-item__label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sqc-text-muted);
}

.sqc-auto-item__value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sqc-text);
}

/* ── WEIGHT INPUTS ───────────────────────────────────────── */
.sqc-weights-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

@media (max-width: 620px) {
    .sqc-weights-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sqc-weight-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sqc-weight-target {
    margin-bottom: 16px;
    background: var(--sqc-surface-2);
    border: 1px solid var(--sqc-border);
    border-radius: var(--sqc-radius-sm);
    padding: 12px 18px !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.sqc-weight-target__main {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sqc-weight-target__lbl {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sqc-text-muted);
    font-weight: 700;
}

#sqc-weight-target-value {
    font-size: 1.2rem;
    color: var(--sqc-text);
}

.sqc-weight-target__range {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sqc-ok);
    background: var(--sqc-ok-bg);
    padding: 4px 10px !important;
    border-radius: 6px;
    margin-top: 4px;
}

.sqc-weight-input.is-valid {
    border-color: var(--sqc-ok) !important;
    background: var(--sqc-ok-bg) !important;
    box-shadow: 0 0 0 3px var(--sqc-ok-glow) !important;
}

.sqc-weight-input.is-invalid {
    border-color: var(--sqc-fail) !important;
    background: var(--sqc-fail-bg) !important;
    box-shadow: 0 0 0 3px var(--sqc-fail-glow) !important;
}

.sqc-stat__value--ok {
    color: var(--sqc-ok);
}

.sqc-stat__value--fail {
    color: var(--sqc-fail);
}

.sqc-weight-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--sqc-text-muted);
    text-transform: uppercase;
}

.sqc-weight-input {
    text-align: center;
    font-size: 1.15rem !important;
    padding: 12px 8px !important;
}

.sqc-weight-delta {
    min-height: 16px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--sqc-text-dim);
    text-align: center;
}

.sqc-weight-delta--ok {
    color: var(--sqc-ok);
}

.sqc-weight-delta--fail {
    color: var(--sqc-fail);
}

/* Weight stats bar */
.sqc-weight-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    border-top: 1px solid var(--sqc-border);
    padding-top: 16px;
}

.sqc-stat {
    background: var(--sqc-surface-3);
    border-radius: var(--sqc-radius-sm);
    padding: 12px !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sqc-stat__label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sqc-text-muted);
}

.sqc-stat__value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--sqc-text);
}

.sqc-stat__value--min {
    color: #60a5fa;
}

.sqc-stat__value--max {
    color: #f472b6;
}

.sqc-stat__value--dev-plus {
    color: #f59e0b;
}

.sqc-stat__value--dev-minus {
    color: #ef4444;
}

.sqc-stat__value--dev-ok {
    color: var(--sqc-ok);
}

/* ── VISUAL CHECKS ───────────────────────────────────────── */
.sqc-checks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sqc-check-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--sqc-surface-2);
    border-radius: var(--sqc-radius-sm);
    padding: 14px 16px !important;
    border: 1px solid var(--sqc-border);
    transition: border-color var(--sqc-transition);
}

.sqc-check-row__label {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sqc-text);
}

.sqc-check-row__btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.sqc-visual-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 20px !important;
    border-radius: var(--sqc-radius-sm);
    border: 2px solid var(--sqc-border);
    background: var(--sqc-surface-3);
    color: var(--sqc-text-muted);
    font-family: var(--sqc-font);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all var(--sqc-transition);
    white-space: nowrap;
}

.sqc-visual-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sqc-visual-btn:active {
    transform: scale(0.95);
}

/* OK state */
@media (hover: hover) {
    .sqc-visual-btn--ok:hover {
        border-color: var(--sqc-ok);
        color: var(--sqc-ok);
        background: var(--sqc-ok-bg);
    }
}

.sqc-visual-btn--ok[aria-pressed="true"] {
    border-color: var(--sqc-ok);
    background: var(--sqc-ok-bg);
    color: var(--sqc-ok);
    box-shadow: 0 0 0 3px var(--sqc-ok-glow);
}

/* FAIL state */
@media (hover: hover) {
    .sqc-visual-btn--fail:hover {
        border-color: var(--sqc-fail);
        color: var(--sqc-fail);
        background: var(--sqc-fail-bg);
    }
}

.sqc-visual-btn--fail[aria-pressed="true"] {
    border-color: var(--sqc-fail);
    background: var(--sqc-fail-bg);
    color: var(--sqc-fail);
    box-shadow: 0 0 0 3px var(--sqc-fail-glow);
}

/* Row highlight when has a fail */
.sqc-check-row--fail {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.05);
}

/* ── CORRECTIVE ACTION ───────────────────────────────────── */
.sqc-section--corrective {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.05);
    animation: sqc-in 0.25s ease both;
}

.sqc-section__title--alert {
    color: var(--sqc-warn);
}

.sqc-textarea {
    width: 100%;
    background: var(--sqc-surface-2);
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--sqc-radius-sm);
    color: var(--sqc-text);
    font-family: var(--sqc-font);
    font-size: 1rem;
    font-weight: 500;
    padding: 14px 16px !important;
    resize: vertical;
    min-height: 90px;
    transition: border-color var(--sqc-transition);
}

.sqc-textarea:focus {
    outline: none;
    border-color: var(--sqc-warn);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.sqc-textarea::placeholder {
    color: var(--sqc-text-dim);
}

/* ── CHECK NUM BADGE ──────────────────────────────────────────────── */
.sqc-check-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sqc-accent-glow);
    color: var(--sqc-accent);
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
    border: 1.5px solid var(--sqc-accent);
    margin-right: 4px;
    vertical-align: middle;
}

/* ── NUMBERED CORRECTIVE ROWS ─────────────────────────────────────── */
.sqc-corrective-hint {
    font-size: 0.88rem;
    color: var(--sqc-text-muted);
    margin: 0 0 12px;
}

.sqc-corrective-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sqc-corrective-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sqc-surface-2);
    border: 1.5px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--sqc-radius-sm);
    padding: 10px 14px;
    animation: sqc-in 0.2s ease both;
}

.sqc-corrective-row__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.15);
    color: var(--sqc-warn);
    font-size: 0.85rem;
    font-weight: 800;
    flex-shrink: 0;
    border: 1.5px solid rgba(245, 158, 11, 0.4);
}

.sqc-corrective-row__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sqc-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.sqc-corrective-input {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(245, 158, 11, 0.35);
    border-radius: 0;
    color: var(--sqc-text);
    font-family: var(--sqc-font);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 4px 6px;
    outline: none;
    transition: border-color 0.2s;
    min-width: 0;
}

.sqc-corrective-input:focus {
    border-bottom-color: var(--sqc-warn);
}

.sqc-corrective-input::placeholder {
    color: var(--sqc-text-dim);
    font-style: italic;
}

/* ── SUBMIT ──────────────────────────────────────────────── */
/* ── La lectura de confirmación ──────────────────────────── */

/* Va pegada al botón —sin hueco entre las dos— para que se lean como una sola
   cosa: esto es lo que vas a guardar, y esto lo guarda. Separadas, la tarjeta
   pasa a ser un dato más del formulario y deja de acompañar a la decisión. */
.sqc-resumen {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 18px;
    padding: 12px 16px;
    background: var(--sqc-surface-2);
    border: 1px solid var(--sqc-border);
    border-bottom: 0;
    border-radius: var(--sqc-radius) var(--sqc-radius) 0 0;
}

.sqc-resumen__lbl {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sqc-text-muted);
}

.sqc-resumen__prod {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sqc-text);
}

/* El lote manda: es lo único que cambia en cada registro, y el error que de
   verdad se cuela. En monoespaciada y espaciado porque así se leen los códigos
   —carácter a carácter— y no como una palabra que el ojo adivina. */
.sqc-resumen__lote {
    margin: 2px 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.15;
    color: var(--sqc-accent);
}

/* Sin lote no se va a poder guardar. Vale más decirlo antes de pulsar. */
.sqc-resumen__lote.is-falta {
    font-family: var(--sqc-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--sqc-warn);
}

.sqc-submit-row {
    padding: 8px 0 0 !important;
}

/* Sin hueco y sin esquinas entre las dos cuando la tarjeta está puesta: la
   lectura y el botón se leen como un solo bloque. */
.sqc-resumen:not([hidden]) + .sqc-submit-row {
    padding-top: 0 !important;
}

.sqc-resumen:not([hidden]) + .sqc-submit-row .sqc-btn-submit {
    border-radius: 0 0 var(--sqc-radius) var(--sqc-radius);
}

.sqc-btn-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px !important;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    border: none;
    border-radius: var(--sqc-radius);
    font-family: var(--sqc-font);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all var(--sqc-transition);
    box-shadow: 0 8px 32px var(--sqc-accent-glow);
    position: relative;
    overflow: hidden;
}

.sqc-btn-submit svg {
    width: 24px;
    height: 24px;
}

.sqc-btn-submit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity var(--sqc-transition);
}

.sqc-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(59, 130, 246, 0.45);
}

.sqc-btn-submit:hover::after {
    opacity: 1;
}

.sqc-btn-submit:active {
    transform: translateY(0) scale(0.98);
}

.sqc-btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Loading spinner inside button */
.sqc-btn-submit.--loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── TOAST ───────────────────────────────────────────────── */
.sqc-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--sqc-surface-3);
    color: var(--sqc-text);
    border-radius: var(--sqc-radius);
    padding: 16px 28px !important;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 9999;
    border: 1px solid var(--sqc-border);
    max-width: 90vw;
    text-align: center;
    white-space: pre-line;
}

.sqc-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Toast colors adapt to theme */
.sqc-toast--ok {
    border-color: var(--sqc-ok);
    background: rgba(0, 30, 10, 0.95);
    color: var(--sqc-ok);
}

.sqc-toast--fail {
    border-color: var(--sqc-fail);
    background: rgba(30, 0, 0, 0.95);
    color: var(--sqc-fail);
}

.sqc-toast--warn {
    border-color: var(--sqc-warn);
    background: rgba(30, 20, 0, 0.95);
    color: var(--sqc-warn);
}

[data-sqc-theme="light"] .sqc-toast--ok {
    background: #f0fdf4;
    color: var(--sqc-ok);
}

[data-sqc-theme="light"] .sqc-toast--fail {
    background: #fef2f2;
    color: var(--sqc-fail);
}

[data-sqc-theme="light"] .sqc-toast--warn {
    background: #fffbeb;
    color: var(--sqc-warn);
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 500px) {
    .sqc-machine-grid {
        padding: 20px 14px !important;
        gap: 12px;
    }

    .sqc-machine-btn {
        padding: 22px 12px !important;
    }

    .sqc-machine-btn__number {
        font-size: 2.4rem;
    }

    .sqc-form-body {
        padding: 16px 14px 60px !important;
        gap: 16px;
    }

    .sqc-section {
        padding: 16px !important;
    }

    .sqc-sauce-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sqc-check-row {
        flex-wrap: wrap;
    }

    .sqc-check-row__btns {
        width: 100%;
    }

    .sqc-visual-btn {
        flex: 1;
        justify-content: center;
    }

    .sqc-auto-grid {
        grid-template-columns: 1fr;
    }

    .sqc-weight-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .sqc-header {
        padding: 14px 16px !important;
    }
}

/* ── CAMERA / PHOTO CARDS ──────────────────────────────── */

.sqc-photos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 680px) {
    .sqc-photos-grid {
        grid-template-columns: 1fr;
    }
}

.sqc-photo-card {
    background: var(--sqc-surface-2);
    border: 1.5px solid var(--sqc-border);
    border-radius: var(--sqc-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--sqc-transition);
}

.sqc-photo-card:focus-within {
    border-color: var(--sqc-accent);
}

/* Header */
.sqc-photo-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px !important;
    background: var(--sqc-surface-3);
    border-bottom: 1px solid var(--sqc-border);
}

.sqc-photo-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.sqc-photo-card__icon svg {
    width: 20px;
    height: 20px;
}

.sqc-photo-card__icon--blue {
    background: rgba(59, 130, 246, 0.15);
    color: var(--sqc-accent);
}

.sqc-photo-card__icon--green {
    background: rgba(34, 197, 94, 0.15);
    color: var(--sqc-ok);
}

.sqc-photo-card__info {
    flex: 1;
    min-width: 0;
}

.sqc-photo-card__title {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--sqc-text);
    line-height: 1.2;
}

.sqc-photo-card__sub {
    display: block;
    font-size: 0.72rem;
    color: var(--sqc-text-muted);
    margin-top: 1px;
}

/* Badge — shows upload / done state */
.sqc-photo-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 9px !important;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
}

.sqc-photo-badge--ok {
    background: rgba(34, 197, 94, 0.15);
    color: var(--sqc-ok);
}

.sqc-photo-badge--warn {
    background: rgba(245, 158, 11, 0.15);
    color: var(--sqc-warn);
}

.sqc-photo-badge--fail {
    background: var(--sqc-fail-bg);
    color: var(--sqc-fail);
}

.sqc-photo-badge--loading {
    background: rgba(59, 130, 246, 0.12);
    color: var(--sqc-accent);
    animation: sqc-pulse 1.2s ease infinite;
}

@keyframes sqc-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

/* Camera Workspace and Gallery */
.sqc-workspace {
    width: 100%;
}

.sqc-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
    padding: 14px !important;
}

.sqc-gallery-tile {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--sqc-radius-sm);
    background: var(--sqc-surface-3);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 2px solid var(--sqc-border);
}

.sqc-gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sqc-gallery-tile-del {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    font-size: 14px;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sqc-gallery-add-btn {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--sqc-radius-sm);
    background: var(--sqc-surface-2);
    border: 2px dashed var(--sqc-border);
    color: var(--sqc-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all var(--sqc-transition);
}

.sqc-gallery-add-btn:hover {
    border-color: var(--sqc-accent);
    color: var(--sqc-accent);
    background: rgba(59, 130, 246, 0.05);
}

.sqc-gallery-add-btn svg {
    width: 28px;
    height: 28px;
}

.sqc-gallery-add-btn span {
    font-size: 0.7rem;
    font-weight: 700;
}

/* Active Camera View */
.sqc-camera-area {
    position: relative;
    width: 100%;
    background: #000;
    overflow: hidden;
    aspect-ratio: 4/3;
    border-radius: var(--sqc-radius-md);
}

.sqc-camera-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.sqc-camera-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    z-index: 10;
}

.sqc-camera-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 14px 16px !important;
    border-radius: 10px;
    font-family: var(--sqc-font);
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    border: none;
    transition: all var(--sqc-transition);
}

.sqc-camera-btn svg {
    width: 22px;
    height: 22px;
}

.sqc-camera-btn--capture {
    background: #16a34a;
    color: #fff;
}

.sqc-camera-btn--retake {
    /* mapped to Cancelar */
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    backdrop-filter: blur(4px);
}

/* ── FULLSCREEN MODE FOR OPERATORS (MOBILE/TABLET) ───────── */
@media (max-width: 1024px) {
    .sqc-app--fullscreen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 999999 !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        background: var(--sqc-bg) !important;
        margin: 0 !important;
        max-width: none !important;
        padding-bottom: env(safe-area-inset-bottom, 20px) !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   HISTORIAL DEL TURNO — Read-only records panel
   ══════════════════════════════════════════════════════════════ */

.sqc-history-section {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 28px 40px !important;
}

/* ── Collapsible container ───────────────────────────────────── */
.sqc-history-details {
    background: var(--sqc-surface);
    border: 1px solid var(--sqc-border);
    border-radius: var(--sqc-radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.18);
    transition: box-shadow var(--sqc-transition);
}

.sqc-history-details[open] {
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}

/* ── Summary / toggle bar ────────────────────────────────────── */
.sqc-history-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px !important;
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
    border-radius: var(--sqc-radius-lg);
    transition: background var(--sqc-transition);
    flex-wrap: wrap;
    gap: 10px;
}

.sqc-history-summary::-webkit-details-marker { display: none; }
.sqc-history-summary::marker { display: none; }

.sqc-history-summary:hover {
    background: var(--sqc-surface-2);
}

.sqc-history-details[open] .sqc-history-summary {
    background: var(--sqc-surface-2);
    border-radius: var(--sqc-radius-lg) var(--sqc-radius-lg) 0 0;
    border-bottom: 1px solid var(--sqc-border);
}

.sqc-history-summary__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sqc-history-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.12);
    color: var(--sqc-accent);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background var(--sqc-transition);
}

.sqc-history-icon svg {
    width: 20px;
    height: 20px;
}

.sqc-history-details[open] .sqc-history-icon {
    background: var(--sqc-accent);
    color: #fff;
}

.sqc-history-summary__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sqc-text);
    letter-spacing: -0.01em;
}

/* ── El día que se ve, y sus flechas (06-10-2026) ──────────────
   A la derecha del título, sin competir con él: texto apagado y flechas sin
   relleno, que se encienden al pasar. Del alto de un dedo igual: se tocan con
   guantes. Ver initHistorial() en kiosk.js. */
.sqc-history-dia {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    cursor: default;
}

.sqc-history-dia__txt {
    min-width: 9.5em;
    text-align: center;
    font-size: .86rem;
    font-weight: 600;
    color: var(--sqc-text-muted);
    font-variant-numeric: tabular-nums;
}

.sqc-history-dia__txt::first-letter { text-transform: uppercase; }

.sqc-history-dia__btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--sqc-border);
    border-radius: var(--sqc-radius-sm);
    color: var(--sqc-text-muted);
    font: inherit;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--sqc-transition), color var(--sqc-transition), border-color var(--sqc-transition);
}

.sqc-history-dia__btn:hover:not([aria-disabled="true"]) {
    background: var(--sqc-surface-3, var(--sqc-surface-2));
    border-color: var(--sqc-accent);
    color: var(--sqc-text);
}

.sqc-history-dia__btn[aria-disabled="true"] { opacity: .35; cursor: default; }

@media (pointer: coarse) {
    .sqc-history-dia__btn { width: 46px; height: 46px; }
}

/* Siempre abierto (07-10-2026): el encabezado ya no se toca para plegar, así
   que no se ve como un botón. */
.sqc-history-details.is-fijo .sqc-history-summary { cursor: default; }
.sqc-history-details.is-fijo .sqc-history-summary:hover { background: var(--sqc-surface-2); }

/* La fecha y, pegado debajo, «volver a hoy» cuando se mira otro día. */
.sqc-history-dia__fecha {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1.2;
}
.sqc-history-dia__hoy {
    padding: 0;
    border: 0;
    background: none;
    color: var(--sqc-accent);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.sqc-history-dia__hoy[hidden] { display: none; }

/* Cambiando de día: lo que se veía se queda, atenuado, hasta que llega lo
   nuevo. Así la página no se achica y el encabezado no salta (07-10-2026). */
.sqc-history-body.is-cargando { opacity: .45; transition: opacity .15s; }
.sqc-history-dia__hoy:focus-visible { outline: 2px solid var(--sqc-accent); outline-offset: 2px; border-radius: 3px; }
@media (pointer: coarse) {
    /* Del alto de un dedo, sin despegarse de la fecha. */
    .sqc-history-dia__hoy { min-height: 32px; font-size: .86rem; }
}

/* ── Machine filter chips ─────────────────────────────────── */
.sqc-history-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sqc-history-filters__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sqc-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.sqc-history-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sqc-history-chip {
    padding: 6px 14px;
    border-radius: 100px;
    border: 1.5px solid var(--sqc-border);
    background: var(--sqc-surface-2);
    color: var(--sqc-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--sqc-font);
    cursor: pointer;
    transition: all var(--sqc-transition);
    white-space: nowrap;
}

.sqc-history-chip:hover {
    border-color: var(--sqc-accent);
    color: var(--sqc-text);
    background: var(--sqc-surface-3);
}

.sqc-history-chip.is-active {
    background: var(--sqc-accent);
    color: #fff;
    border-color: var(--sqc-accent);
    box-shadow: 0 2px 8px var(--sqc-accent-glow);
}

.sqc-history-summary__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sqc-history-summary__hint {
    font-size: 0.78rem;
    color: var(--sqc-text-muted);
    font-weight: 500;
}

.sqc-history-chevron {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--sqc-text-muted);
    transition: transform var(--sqc-transition);
    flex-shrink: 0;
}

.sqc-history-chevron svg {
    width: 18px;
    height: 18px;
}

.sqc-history-details[open] .sqc-history-chevron {
    transform: rotate(180deg);
}

/* ── Body area ───────────────────────────────────────────────── */
.sqc-history-body {
    padding: 20px !important;
    animation: sqc-in 0.22s ease both;
}

/* ── State panels (loading / empty) ─────────────────────────── */
.sqc-history-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px !important;
    color: var(--sqc-text-muted);
    font-size: 0.9rem;
    text-align: center;
}



/* ── Table wrap (horizontal scroll on mobile) ────────────────── */
.sqc-history-table-wrap {
    animation: sqc-in 0.2s ease both;
}

.sqc-history-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--sqc-radius-sm);
    border: 1px solid var(--sqc-border);
    scrollbar-width: thin;
    scrollbar-color: var(--sqc-border) transparent;
}

.sqc-history-scroll::-webkit-scrollbar { height: 4px; }
.sqc-history-scroll::-webkit-scrollbar-track { background: transparent; }
.sqc-history-scroll::-webkit-scrollbar-thumb { background: var(--sqc-border); border-radius: 4px; }

/* ── Table ───────────────────────────────────────────────────── */
.sqc-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    white-space: nowrap;
    min-width: 860px;
}

.sqc-history-table thead tr {
    background: var(--sqc-surface-2);
    border-bottom: 1px solid var(--sqc-border);
}

.sqc-history-table th {
    padding: 10px 12px !important;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--sqc-text-muted);
}

.sqc-history-table td {
    padding: 10px 12px !important;
    color: var(--sqc-text);
    border-bottom: 1px solid var(--sqc-border);
    vertical-align: middle;
}

.sqc-history-table tbody tr:last-child td {
    border-bottom: none;
}

.sqc-history-table tbody tr:hover td {
    background: var(--sqc-surface-2);
}

/* ── Cell components ─────────────────────────────────────────── */
.sqc-hist-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sqc-accent);
    font-size: 0.88rem;
}

.sqc-hist-maq {
    font-weight: 700;
    color: var(--sqc-text);
    background: var(--sqc-surface-2);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    border: 1px solid var(--sqc-border);
    display: inline-block;
}

.sqc-hist-sachet {
    color: var(--sqc-text);
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sqc-hist-lote {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.78rem;
    background: var(--sqc-surface-3);
    color: var(--sqc-text);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--sqc-border);
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Status pills */
.sqc-hist-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.sqc-hist-pill--ok {
    background: var(--sqc-ok-bg);
    color: var(--sqc-ok);
    border: 1px solid color-mix(in srgb, var(--sqc-ok) 30%, transparent);
}

.sqc-hist-pill--fail {
    background: var(--sqc-fail-bg);
    color: var(--sqc-fail);
    border: 1px solid color-mix(in srgb, var(--sqc-fail) 30%, transparent);
}

.sqc-hist-pill--na {
    background: var(--sqc-surface-2);
    color: var(--sqc-text-dim);
    border: 1px solid var(--sqc-border);
}

/* Offline pending pill */
.sqc-hist-pill--pending {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
    margin-left: 6px;
    font-size: 0.68rem;
    animation: sqc-pulse-pending 2s ease-in-out infinite;
}

/* Offline pending row */
.sqc-hist-row--offline td {
    border-left: 3px solid #f59e0b;
    background: rgba(245, 158, 11, 0.04) !important;
}

.sqc-hist-row--offline td:first-child {
    border-left-width: 3px;
}

.sqc-hist-row--offline td:not(:first-child) {
    border-left: none;
}

@keyframes sqc-pulse-pending {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ── Mobile responsiveness ───────────────────────────────────── */
@media (max-width: 700px) {
    .sqc-history-section {
        padding: 0 12px 32px !important;
    }

    .sqc-history-summary {
        padding: 14px 16px !important;
    }

    .sqc-history-summary__hint {
        display: none;
    }

    .sqc-history-body {
        padding: 14px !important;
    }
}
/* Toggle Switch para Lote Nuevo */
.sqc-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}
.sqc-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.sqc-switch .sqc-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 20px;
}
.sqc-switch .sqc-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.sqc-switch input:checked + .sqc-slider {
    background-color: var(--sqc-accent, #3b82f6);
}
.sqc-switch input:checked + .sqc-slider:before {
    transform: translateX(16px);
}

/* ══════════════════════════════════════════
   GLOBAL CAMERA MODAL (Full Screen)
══════════════════════════════════════════ */
.sqc-global-cam-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sqc-global-cam-modal--active {
    opacity: 1;
    pointer-events: all;
}

.sqc-global-cam-modal__header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.sqc-global-cam-modal__header h3 {
    color: #fff;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

#sqc-global-cam-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    padding: 10px;
}

.sqc-global-cam-modal__body {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sqc-global-cam-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #111;
}

.sqc-camera-guide {
    position: absolute;
    width: 90vw;
    max-width: 800px;
    aspect-ratio: 4 / 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(255, 255, 255, 0.4);
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 0 0 4000px rgba(0,0,0,0.6); /* darkens outside */
}

.sqc-camera-guide__corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid #fff;
}
.sqc-camera-guide__corner--tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.sqc-camera-guide__corner--tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.sqc-camera-guide__corner--bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.sqc-camera-guide__corner--br { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.sqc-global-cam-modal__footer {
    height: 110px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    position: relative;
}

/* ── Thumbnail strip (inside footer, left side) ── */
.sqc-cam-thumbstrip {
    position: absolute;
    left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.sqc-cam-thumbstrip__slots {
    display: flex;
    gap: 8px;
}

.sqc-cam-thumbstrip__slot {
    width: 56px;
    height: 42px;
    border-radius: 6px;
    border: 2px dashed rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s;
    position: relative;
}

.sqc-cam-thumbstrip__slot--filled {
    border: 2px solid #22c55e;
    background: transparent;
    animation: sqc-thumb-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sqc-cam-thumbstrip__slot--filled img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sqc-cam-thumbstrip__slot--filled::after {
    content: '✓';
    position: absolute;
    bottom: 1px;
    right: 3px;
    font-size: 12px;
    color: #22c55e;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    font-weight: 700;
}

@keyframes sqc-thumb-pop {
    0%   { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

.sqc-cam-thumbstrip__label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.65);
    text-align: center;
    white-space: nowrap;
}

.sqc-global-cam-capture-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: transparent;
    border: 4px solid #fff;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.sqc-global-cam-capture-btn:active {
    transform: scale(0.95);
}

.sqc-global-cam-capture-btn__inner {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s;
}

.sqc-global-cam-capture-btn:active .sqc-global-cam-capture-btn__inner {
    width: 48px;
    height: 48px;
    background: #e2e8f0;
}

/* ── Offline sachet indicator ── */
.sqc-sauce-btn--offline {
    position: relative;
}

.sqc-sauce-btn__offline-tag {
    display: inline-block;
    font-size: 0.6rem;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    padding: 1px 8px;
    border-radius: 20px;
    margin-top: 2px;
    font-weight: 600;
    letter-spacing: 0.3px;
    animation: sqc-offline-pulse 2s ease-in-out infinite;
}

@keyframes sqc-offline-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* ── Camera shutter flash effect ── */
.sqc-cam-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 1;
    z-index: 50;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}

/* ── Landscape layout: footer moves to the right side ── */
@media (orientation: landscape) {
    .sqc-global-cam-modal {
        flex-direction: row;
    }

    .sqc-global-cam-modal__body {
        flex: 1;
        height: 100%;
    }

    .sqc-global-cam-modal__footer {
        height: 100%;
        width: 120px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    .sqc-cam-thumbstrip {
        position: static;
        left: auto;
        flex-direction: column;
        align-items: center;
        margin-bottom: 16px;
    }

    .sqc-cam-thumbstrip__slots {
        flex-direction: column;
        gap: 8px;
    }

    .sqc-cam-thumbstrip__label {
        margin-top: 4px;
    }

    .sqc-global-cam-modal__header {
        z-index: 12;
    }

    .sqc-camera-guide {
        width: auto;
        height: 80vh;
        max-width: none;
        aspect-ratio: 4 / 3;
    }
}

/* ── Controles rechazados por el servidor ──────────────────────────────
   Se conservan en el dispositivo y este aviso es lo único que lo dice. Va
   fijo abajo y no se cierra solo a propósito: un toast de cuatro segundos
   para «faltan tres registros en la hoja de hoy» es como no avisar. */
.sqc-rechazados {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 99998;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border: 2px solid var(--sqc-warn);
    border-radius: var(--sqc-radius, 10px);
    background: var(--sqc-surface);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

.sqc-rechazados[hidden] { display: none; }

.sqc-rechazados__txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-size: .92rem;
    color: var(--sqc-text);
}

.sqc-rechazados__txt strong { color: var(--sqc-warn); }

.sqc-rechazados__acc {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Detalle del rechazo. Va plegado: el operador ve el cartel, y quien tiene que
   decidir qué hacer abre el porqué. Con scroll propio para que tres controles
   con mensajes largos no empujen los botones fuera de la pantalla. */
.sqc-rechazados__det {
    margin-top: 4px;
    font-size: .85rem;
}

.sqc-rechazados__det summary {
    cursor: pointer;
    color: var(--sqc-warn);
    font-weight: 600;
}

.sqc-rechazados__det ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 30vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sqc-rechazados__det li {
    padding: 8px 10px;
    border-left: 3px solid var(--sqc-warn);
    background: var(--sqc-surface-2);
    border-radius: 6px;
    word-break: break-word;
}

.sqc-rechazados__det li strong { display: block; color: var(--sqc-text); }
.sqc-rechazados__det li em { display: block; margin-top: 4px; opacity: .85; }


/* ══════════════════════════════════════════════════════════════════════════
 * EL CAMPO DE FECHA  (ver assets/js/datefield.js)
 *
 * Va en kiosk.css porque lo usan siete pantallas y ésta es la única hoja que
 * cargan todas — la misma regla que ya se pagó una vez con `.sqc-btn`, que
 * vivía sólo en pdf-viewer.css y salía sin formato en Mezclas.
 *
 * Dos controles en una caja:  ┌ 05-09-2026  📅 ┐
 * El texto se escribe; el icono abre el calendario. El icono va DENTRO del
 * marco y en posición absoluta a propósito: así el campo conserva el ancho, el
 * borde y el relleno que le da su propia clase en cada pantalla —.sqc-input,
 * .sqc-maint-input-sm, .sqc-an-filters__input…— y esto no tiene que saber nada
 * de ninguna de ellas.
 * ═══════════════════════════════════════════════════════════════════════════*/

/* Bloque y sin ancho propio: en una columna se estira como se estiraba el
   campo, y en una fila de filtros mide lo que mida el campo. Ponerle un ancho
   aquí sería decidir el diseño de siete pantallas desde un componente. */
.sqc-fecha {
    position: relative;
    display: block;
}

/* Un campo escondido esconde también su icono.
 *
 * Media docena de pantallas enseñan la fecha resuelta —«05-09-2026 · hoy ·
 * corregir»— y guardan el campo con `hidden` hasta que alguien pulsa
 * «corregir». Al envolver el campo, el marco pasó a ser el `<span>`, y ese
 * `hidden` ya no lo alcanzaba: quedaba un 📅 suelto flotando debajo de la
 * caja, sin campo al que pertenecer y pulsable. */
.sqc-fecha:has( > input[hidden] ),
.sqc-fecha[hidden] { display: none; }

/* Hueco para el icono. El `!important` no es capricho: `.sqc-input` declara su
   relleno con `!important`, así que sin esto el texto pasaría por debajo del
   calendario justo cuando la fecha está completa. */
.sqc-fecha .sqc-fecha__input {
    padding-right: 46px !important;
    /* Tabular: los dígitos no bailan al escribir, que es lo que hace que una
       fecha a medio teclear se lea de un vistazo. */
    font-variant-numeric: tabular-nums;
}

.sqc-fecha__btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: var(--sqc-radius-sm);
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    opacity: .75;
    transition: opacity var(--sqc-transition), background var(--sqc-transition);
}

@media (hover: hover) {
    .sqc-fecha__btn:hover { opacity: 1; background: var(--sqc-surface-3); }
}

/* `~` y no `+`: en el campo de hora el AM/PM va entre el texto y el icono. */
.sqc-fecha__input:disabled ~ .sqc-fecha__btn,
.sqc-fecha__input:disabled ~ .sqc-hora__ampm {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}

/* Escrita a medias. No es un error —nadie ha terminado de teclear— así que no
   es rojo: es el aviso de que ahí todavía no hay una fecha, y de que si se
   guarda así el campo va vacío. */
.sqc-fecha__input.is-incompleta {
    border-color: var(--sqc-warn) !important;
    border-style: dashed !important;
}

/* De pie, con guantes: el icono crece hasta el tamaño de un dedo. */
@media (pointer: coarse) {
    .sqc-fecha .sqc-fecha__input { padding-right: 54px !important; }
    .sqc-fecha__btn { width: 46px; height: 46px; font-size: 1.3rem; }
}

/* AM/PM del campo de hora: una pastilla entre la hora y el 🕐. Se toca y
   cambia. Tiene que verse —es la mitad de la hora— sin gritar. */
.sqc-hora__ampm {
    position: absolute;
    top: 50%;
    right: 44px;
    transform: translateY(-50%);
    height: 30px;
    min-width: 40px;
    padding: 0 6px;
    border: 1px solid var(--sqc-border);
    border-radius: var(--sqc-radius-sm);
    background: var(--sqc-surface-2);
    color: var(--sqc-text);
    font-family: var(--sqc-font);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
}
.sqc-hora .sqc-fecha__input { padding-right: 92px !important; }

/* Las dos casillas, encima del marco y donde iba su texto. Se leen como una
   hora de siempre —«07:30»—; la que tiene el cursor se tiñe apenas, y ésa es
   toda la separación. El marco pone el borde y el foco, como cualquier campo. */
.sqc-hora .sqc-hora__input {
    color: transparent !important;
    caret-color: transparent;
    cursor: text;
}
.sqc-hora:focus-within .sqc-hora__input {
    border-color: var(--sqc-accent) !important;
    box-shadow: 0 0 0 3px var(--sqc-accent-glow);
}

.sqc-hora__campos {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
}

.sqc-hora__seg {
    box-sizing: content-box;
    color: var(--sqc-text);
    /* Dos dígitos anchos —«00», «30»— con holgura: en 2.2ch el segundo se
       cortaba. */
    width: 2.7ch;
    margin: 0;
    padding: 2px 3px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    text-align: center;
    font-variant-numeric: tabular-nums;
    outline: none;
    box-shadow: none;
    pointer-events: auto;
    transition: background var(--sqc-transition);
}
.sqc-hora__seg:focus {
    background: color-mix(in srgb, var(--sqc-accent) 16%, transparent);
}
.sqc-hora__seg::placeholder {
    color: var(--sqc-text-dim);
    font-weight: 400;
}
.sqc-hora__seg:disabled { opacity: .6; }

.sqc-hora__dos {
    padding: 0 1px;
    color: var(--sqc-text-muted);
    font-weight: 700;
    pointer-events: none;
}

@media (pointer: coarse) {
    .sqc-hora__ampm { right: 52px; height: 38px; min-width: 46px; font-size: .8rem; }
    .sqc-hora .sqc-fecha__input { padding-right: 106px !important; }
}

/* ── El calendario ─────────────────────────────────────────────────────────
 *
 * Centrado y con fondo propio, no colgado del campo. Estos formularios viven
 * dentro de modales con scroll propio —el del bin, el de nueva formulación—, y
 * un desplegable anclado se recorta contra el borde de la caja o se va con el
 * scroll justo cuando se está mirando.
 *
 * El z-index va por encima del modal más alto del plugin (999999, el de
 * Mantención) y por debajo de los avisos (9999999): un calendario que tapa el
 * aviso de que algo falló es peor que ninguno.
 */
.sqc-cal {
    position: fixed;
    inset: 0;
    z-index: 1000001;
    display: grid;
    place-items: center;
    padding: 16px;
}

.sqc-cal[hidden] { display: none; }

.sqc-cal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.sqc-cal__box {
    position: relative;
    box-sizing: border-box;
    width: min(340px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    padding: 12px;
    background: var(--sqc-surface);
    border: 1px solid var(--sqc-border);
    border-radius: var(--sqc-radius-lg, 16px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    /* Explícita y no heredada: el calendario cuelga de la raíz de la pantalla,
       y una raíz que un día deje de declararla lo dejaría con la tipografía del
       tema de WordPress en medio de la aplicación. */
    font-family: var(--sqc-font);
}

.sqc-cal__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.sqc-cal__nav {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid var(--sqc-border);
    border-radius: var(--sqc-radius-sm);
    background: var(--sqc-surface-2);
    color: var(--sqc-text);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.sqc-cal__nav--sm { width: 32px; height: 32px; font-size: 1rem; }

/* «Septiembre 2026 ▾». Es un botón, y se ve que lo es: es la puerta al salto
   rápido, y si se lee como un rótulo nadie la encuentra — que era exactamente
   el problema del calendario del navegador. */
.sqc-cal__titulo {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--sqc-border);
    border-radius: var(--sqc-radius-sm);
    background: var(--sqc-surface-2);
    color: var(--sqc-text);
    font-family: var(--sqc-font);
    font-size: .98rem;
    font-weight: 700;
    cursor: pointer;
}

.sqc-cal__caret {
    font-size: .7rem;
    color: var(--sqc-text-muted);
    transition: transform var(--sqc-transition);
}

.sqc-cal__box.is-saltando .sqc-cal__caret { transform: rotate(180deg); }

/* Saltando de año no se miran los días: la cuadrícula se va y el panel ocupa
   su sitio. Los dos a la vez medían más que la pantalla de una tablet en
   vertical, y lo que quedaba fuera era el pie con «Hoy» y «Cerrar». */
.sqc-cal__box.is-saltando .sqc-cal__semana,
.sqc-cal__box.is-saltando .sqc-cal__grid { display: none; }

.sqc-cal__box.is-saltando .sqc-cal__salto {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* `minmax(0, 1fr)` y no `1fr`: con el dedo la casilla no baja de 46 px, y `1fr`
   no deja a la columna ser más estrecha que su casilla. En un teléfono de
   375 px eso pedía 334 px donde caben 314, y el domingo se salía por la
   derecha. Ver también el `width` de `.sqc-cal__dia`. */
.sqc-cal__semana,
.sqc-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.sqc-cal__semana {
    margin-bottom: 4px;
}

.sqc-cal__semana span {
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--sqc-text-muted);
}

/* El ancho, el de su columna, dicho: con `aspect-ratio` el alto mínimo se
   convierte también en ancho mínimo, y en un teléfono las casillas se montaban
   unas sobre otras. Así, donde no cabe cuadrada, crece sólo hacia abajo. */
.sqc-cal__dia {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 38px;
    border: 0;
    border-radius: var(--sqc-radius-sm);
    background: transparent;
    color: var(--sqc-text);
    font-family: var(--sqc-font);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
}

@media (hover: hover) {
    .sqc-cal__dia:hover { background: var(--sqc-surface-2); }
}

/* Hoy se marca con un borde, no con relleno: el relleno es «elegido», y dos
   días pintados igual en la misma cuadrícula hacen tocar el equivocado. */
.sqc-cal__dia.is-hoy {
    box-shadow: inset 0 0 0 2px var(--sqc-border);
}

/* Un día que la pantalla marcó (SQCFecha.marcarDias): en Mezclas, los que
   tienen lotes por liberar. Ámbar, que es el «por liberar» de Liberación —el
   mismo hecho no puede salir de dos colores—, y de RELLENO suave: el borde es
   hoy y el relleno lleno es el elegido, así que las tres cosas se combinan sin
   taparse. Va antes de `.is-on` a propósito: elegido y marcado, manda elegido. */
.sqc-cal__dia.is-marca {
    background: var(--sqc-marca-fill, var(--sqc-warn-fill));
    color: var(--sqc-marca-ink, var(--sqc-warn-ink));
    font-weight: 800;
}

/* El VERDE: todo lo envasado ese día tiene su bin o su mezcla (Alexis,
   04-10-2026). Sólo cambia las variables y no la regla: así no compite en
   peso con `.is-on`, y elegido sigue mandando. Si el día además tiene lotes
   por liberar, la pantalla lo manda en ámbar y aquí no llega. */
.sqc-cal__dia.is-marca--ok {
    --sqc-marca-fill: var(--sqc-ok-fill);
    --sqc-marca-ink: var(--sqc-ok-ink);
    --sqc-marca: var(--sqc-ok);
}

@media (hover: hover) {
    .sqc-cal__dia.is-marca:not(.is-on):hover {
        background: color-mix(in srgb, var(--sqc-marca-fill, var(--sqc-warn-fill)), var(--sqc-marca, var(--sqc-warn)) 22%);
    }
}

/* Hoy y marcado: el borde de hoy, en ámbar. En gris no se vería sobre el
   relleno, y hoy es justo el día que más a menudo está por liberar. Elegido
   no: ahí la marca es el punto, y aro más punto sobre el azul es recargar. */
.sqc-cal__dia.is-hoy.is-marca:not(.is-on) {
    box-shadow: inset 0 0 0 2px var(--sqc-marca, var(--sqc-warn));
}

.sqc-cal__dia.is-on {
    background: var(--sqc-accent);
    color: #fff;
}

.sqc-cal__hueco { min-height: 38px; }

/* ── El salto rápido ──────────────────────────────────────────────────────
 * Doce meses y doce años a la vista. Ir a cualquier fecha de la década son dos
 * toques, y cambiar de década uno más. Con la flechita de mes, un vencimiento
 * a dieciocho meses eran dieciocho toques y una elaboración de hace tres años,
 * treinta y seis.
 */
.sqc-cal__salto {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sqc-border);
}

.sqc-cal__salto[hidden] { display: none; }

.sqc-cal__salto-t {
    margin-bottom: 6px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sqc-text-muted);
}

.sqc-cal__salto-t--anios {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sqc-cal__salto-t--mes { margin-top: 12px; }

.sqc-cal__meses,
.sqc-cal__anios {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.sqc-cal__mes,
.sqc-cal__anio {
    min-height: 38px;
    border: 1px solid var(--sqc-border);
    border-radius: var(--sqc-radius-sm);
    background: var(--sqc-surface-2);
    color: var(--sqc-text);
    font-family: var(--sqc-font);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.sqc-cal__mes.is-on,
.sqc-cal__anio.is-on {
    background: var(--sqc-accent);
    border-color: var(--sqc-accent);
    color: #fff;
}

/* El mes y el año con algún día marcado, con el mismo dibujo que los días:
   cambiar de mes no tiene que ser a ciegas, y un segundo dibujo para lo mismo
   obligaría a explicarlo dos veces en la leyenda. */
.sqc-cal__mes.is-marca:not(.is-on),
.sqc-cal__anio.is-marca:not(.is-on) {
    background: var(--sqc-warn-fill);
    color: var(--sqc-warn-ink);
    font-weight: 800;
}

/* Elegido y marcado —día, mes o año—: el relleno es el del elegido, y la marca
   baja a un punto debajo del texto. */
.sqc-cal__dia.is-on.is-marca,
.sqc-cal__mes.is-on.is-marca,
.sqc-cal__anio.is-on.is-marca { position: relative; }
.sqc-cal__dia.is-on.is-marca::after,
.sqc-cal__mes.is-on.is-marca::after,
.sqc-cal__anio.is-on.is-marca::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--sqc-marca, var(--sqc-warn));
    /* El aro blanco lo despega del azul: en claro, ámbar y azul tienen casi
       la misma luz. */
    box-shadow: 0 0 0 1.5px #fff;
}

/* Qué quiere decir la marca: la muestra es el mismo relleno de los días. */
.sqc-cal__leyenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    margin-top: 10px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--sqc-text-muted);
}

.sqc-cal__leyenda-muestra {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--sqc-warn-fill);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sqc-warn) 45%, transparent);
}

.sqc-cal__leyenda-muestra.is-ok {
    background: var(--sqc-ok-fill);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sqc-ok) 45%, transparent);
}

/* Cada entrada, su muestra pegada a su texto. */
.sqc-cal__leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sqc-cal__pie {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--sqc-border);
}

.sqc-cal__accion {
    flex: 1 1 0;
    min-height: 42px;
    border: 1px solid var(--sqc-border);
    border-radius: var(--sqc-radius-sm);
    background: var(--sqc-surface-2);
    color: var(--sqc-text);
    font-family: var(--sqc-font);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

.sqc-cal__accion--cerrar {
    background: var(--sqc-accent);
    border-color: var(--sqc-accent);
    color: #fff;
}

/* ── El reloj (ver datefield.js) ───────────────────────────────────────────
 * Una esfera como la del teléfono. Arriba la hora elegida en grande —sus
 * horas y sus minutos son botones que llevan a esa parte— y AM/PM al lado.
 */
.sqc-reloj__box { width: min(330px, 100%); }

.sqc-reloj__cab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 4px;
}

.sqc-reloj__parte {
    min-width: 72px;
    padding: 2px 8px;
    border: 0;
    border-radius: 12px;
    background: var(--sqc-surface-2);
    color: var(--sqc-text-muted);
    font-family: var(--sqc-font);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.sqc-reloj__parte.is-on {
    background: color-mix(in srgb, var(--sqc-accent) 18%, transparent);
    color: var(--sqc-accent);
}

.sqc-reloj__dos {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--sqc-text-muted);
}

.sqc-reloj__ap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 8px;
}
.sqc-reloj__apb {
    min-width: 46px;
    padding: 4px 8px;
    border: 1px solid var(--sqc-border);
    border-radius: var(--sqc-radius-sm);
    background: var(--sqc-surface-2);
    color: var(--sqc-text-muted);
    font-family: var(--sqc-font);
    font-size: .8rem;
    font-weight: 800;
    cursor: pointer;
}
.sqc-reloj__apb.is-on {
    background: var(--sqc-accent);
    border-color: var(--sqc-accent);
    color: #fff;
}

.sqc-reloj__guia {
    margin: 6px 0 10px;
    text-align: center;
    font-size: .78rem;
    color: var(--sqc-text-muted);
}

/* La esfera. `touch-action: none` para que arrastrar la aguja no mueva la
   página, y sin selección de texto por el mismo motivo. */
.sqc-reloj__esfera {
    position: relative;
    width: min(260px, 72vw);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--sqc-surface-2);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

.sqc-reloj__num {
    position: absolute;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    color: var(--sqc-text);
    font-size: .98rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.sqc-reloj__num.is-on { background: var(--sqc-accent); color: #fff; }

.sqc-reloj__centro {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--sqc-accent);
}

.sqc-reloj__aguja {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 2px;
    height: 40%;
    margin-left: -1px;
    background: var(--sqc-accent);
    transform-origin: 50% 100%;
    pointer-events: none;
}
.sqc-reloj__aguja[hidden] { display: none; }
.sqc-reloj__h,
.sqc-reloj__m { font-variant-numeric: tabular-nums; }

@media (pointer: coarse) {
    .sqc-cal__box { width: min(400px, 100%); padding: 14px; }
    .sqc-cal__dia { min-height: 46px; font-size: 1.05rem; }
    .sqc-cal__hueco { min-height: 46px; }
    .sqc-cal__nav, .sqc-cal__titulo { min-height: 46px; }
    .sqc-cal__nav { width: 46px; height: 46px; }
    .sqc-cal__mes, .sqc-cal__anio { min-height: 44px; }
    .sqc-cal__accion { min-height: 48px; }
}


/* ══════════════════════════════════════════════════════════════════════════
 * LAS NOVEDADES  (ver assets/js/notifications.js)
 *
 * En kiosk.css porque salen en las nueve pantallas y ésta es la única hoja que
 * cargan todas.
 *
 * Y con nombre propio, `sqc-noti`, y no `sqc-toast`: ese nombre ya está cogido
 * DOS VECES en el plugin —el avisito de estado de Mezclas y compañía en esta
 * misma hoja, y la tarjeta de novedad de Registros en admin.css—, y las dos
 * reglas se pisan en la pantalla de Registros, que carga las dos hojas. Un
 * componente que va a salir en todas las pantallas no podía llamarse igual que
 * otras dos cosas.
 * ═══════════════════════════════════════════════════════════════════════════*/

.sqc-noti-pila {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1000000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    /* La pila no intercepta el dedo; cada aviso sí. Sin esto, una columna
       invisible de 360 px se come los clics de la esquina de la pantalla
       aunque no haya ningún aviso. */
    pointer-events: none;
}

.sqc-noti {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--sqc-surface);
    border: 1px solid var(--sqc-border);
    /* La franja de color, a la izquierda y no de fondo: el aviso se lee, no se
       mira, y un fondo entero de color hace ilegible el texto en tema claro. */
    border-left: 4px solid var(--sqc-accent);
    border-radius: var(--sqc-radius-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
    font-family: var(--sqc-font);
    animation: sqc-noti-entra .28s ease;
}

.sqc-noti--espera { border-left-color: var(--sqc-warn); }
.sqc-noti--mal    { border-left-color: var(--sqc-fail); }

.sqc-noti.is-yendose {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity .28s ease, transform .28s ease;
}

@keyframes sqc-noti-entra {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: none; }
}

.sqc-noti__icono {
    flex: 0 0 auto;
    font-size: 1.15rem;
    line-height: 1.3;
}

.sqc-noti__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sqc-noti__titulo {
    font-size: .92rem;
    font-weight: 700;
    color: var(--sqc-text);
    line-height: 1.25;
}

.sqc-noti__detalle {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sqc-noti__linea {
    font-size: .82rem;
    color: var(--sqc-text-muted);
    line-height: 1.35;
    /* Un lote largo parte de línea en vez de estirar el aviso fuera de la
       pantalla. */
    overflow-wrap: anywhere;
}

.sqc-noti__pie {
    margin-top: 2px;
    font-size: .74rem;
    color: var(--sqc-text-dim);
}

.sqc-noti__cerrar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: -2px -4px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--sqc-radius-sm);
    background: transparent;
    color: var(--sqc-text-dim);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

@media (hover: hover) {
    .sqc-noti__cerrar:hover { color: var(--sqc-text); background: var(--sqc-surface-2); }
}

/* De pie y con guantes: el aviso crece y la cruz llega al tamaño de un dedo. */
@media (pointer: coarse) {
    .sqc-noti { padding: 14px 16px; }
    .sqc-noti__titulo { font-size: 1rem; }
    .sqc-noti__linea { font-size: .88rem; }
    .sqc-noti__cerrar { width: 40px; height: 40px; }
}

/* En el teléfono ocupan el ancho y se apilan abajo, que es donde llega el
   pulgar y donde no tapan el formulario. */
@media (max-width: 560px) {
    .sqc-noti-pila {
        right: 8px;
        left: 8px;
        bottom: 8px;
        width: auto;
    }
}