/* Mi Asistencia (/asistencia) — la pantalla que el repartidor abre en la calle.
   Vivía en un bloque <style> dentro del .razor, contra lo que manda CLAUDE.md: esos bloques
   no tienen scope —un selector suelto ahí restila los diálogos que la página abre— y el banco
   visual no puede reproducir el componente para compararlo.
   Colores por TOKEN, nunca hex: los prefijos --ic- y --lc- voltean con data-theme y un hex no.
   Esta pantalla se usa al aire libre, donde la legibilidad ya está al límite.

   OJO al redactar aquí: los prefijos van SIN comodín. Escritos con «*» y separados por una
   barra, el asterisco pegado a la barra cerraba este comentario antes de tiempo y el navegador se
   comía la PRIMERA REGLA de la hoja. Medido en el banco, no deducido. Lo vigila
   ComentariosCssCerradosTests. */

/* Header */
    .asis-header__icon-wrap {
        width: 44px; height: 44px; border-radius: 12px;
        background: rgba(var(--lc-accent-rgb),0.15);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }

    /* Skeleton */
    .asis-sk-card {
        background: var(--ic-surface);
        border: 1px solid var(--ic-border, rgba(148,163,184,0.08));
        border-radius: 14px;
        animation: ic-pulse 1.5s ease-in-out infinite;
    }

    /* Tarjeta principal */
    .asis-main-card {
        background: var(--ic-surface);
        border-radius: 16px;
        padding: 1.25rem;
        margin-bottom: 1rem;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .asis-main-card--idle   { border: 2px solid rgba(var(--lc-ok-rgb), 0.2); }
    .asis-main-card--active { border: 2px solid rgba(var(--lc-ok-rgb), 0.45); background: rgba(var(--lc-ok-rgb), 0.03); }

    .asis-checkin-state { display: flex; align-items: center; gap: 14px; }
    .asis-state-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .asis-state-icon--idle   { background: rgba(var(--lc-ok-rgb), 0.1); }
    .asis-state-icon--active { background: rgba(var(--lc-ok-rgb), 0.15); }

    .asis-state__title { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--ic-text); }
    .asis-state__sub   { margin: 3px 0 0; font-size: 0.875rem; color: var(--ic-muted); line-height: 1.35; }

    /* GPS badge */
    .asis-gps-badge {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: 0.8125rem; font-weight: 600; padding: 4px 10px;
        border-radius: 20px; white-space: nowrap; flex-shrink: 0;
    }
    .asis-gps--on     { background: rgba(var(--lc-ok-rgb), 0.15); color: var(--lc-ok); border: 1px solid rgba(var(--lc-ok-rgb), 0.25); }
    .asis-gps--paused { background: rgba(var(--lc-warn-rgb), 0.12); color: var(--lc-warn); border: 1px solid rgba(var(--lc-warn-rgb), 0.22); }
    .asis-gps--off    { background: rgba(var(--lc-neutral-rgb), 0.1); color: var(--lc-neutral); border: 1px solid rgba(var(--lc-neutral-rgb), 0.18); }

    /* Warning */
    .asis-warning-banner {
        display: flex; align-items: flex-start; gap: 8px;
        background: rgba(var(--lc-warn-rgb), 0.08);
        border: 1px solid rgba(var(--lc-warn-rgb), 0.2);
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 0.8125rem;
        color: var(--lc-warn);
        line-height: 1.4;
    }

    /* Botones acción */
    .asis-btn-entrada {
        height: 48px !important;
        border-radius: 12px !important;
        font-weight: 700 !important;
        /* Relleno fijo a propósito: el par verde+verde-casi-negro da ~7:1 en LOS DOS temas.
           Con --lc-ok el relleno se oscurecería en claro y el texto quedaría ilegible. */
        background-color: #22C55E !important;
        color: #052e16 !important;
        width: 100%;
    }
    .asis-btn-salida {
        height: 48px !important;
        border-radius: 12px !important;
        font-weight: 700 !important;
        /* Mismo criterio que el de entrada: relleno fijo, texto blanco, contraste estable. */
        background-color: #EF4444 !important;
        color: white !important;
        width: 100%;
    }

    /* APK Banner */
    .asis-apk-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: var(--ic-surface);
        border: 1px solid rgba(74,222,128,0.15);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }
    .asis-apk-banner__left { display: flex; align-items: center; gap: 12px; }
    .asis-apk-icon {
        width: 40px; height: 40px; border-radius: 12px;
        background: rgba(74,222,128,0.1);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .asis-apk-banner__title { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--ic-text); }
    .asis-apk-banner__sub   { margin: 2px 0 0; font-size: 0.8125rem; color: var(--ic-muted); }
    .asis-apk-btn { border-color: var(--lc-ok) !important; color: var(--lc-ok) !important; border-radius: 10px !important; flex-shrink: 0; }

    /* Historial section */
    .asis-section-card {
        background: var(--ic-surface);
        border: 1px solid var(--ic-border, rgba(148,163,184,0.1));
        border-radius: 14px;
    }
    .asis-section-card__header {
        padding: 14px 16px 12px;
        border-bottom: 1px solid var(--ic-border, rgba(148,163,184,0.08));
    }

    .asis-history-list { display: flex; flex-direction: column; }
    .asis-history-row {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; padding: 11px 16px;
        border-bottom: 1px solid var(--ic-border, rgba(148,163,184,0.06));
    }
    .asis-history-row:last-child { border-bottom: none; }
    .asis-history-row__date { display: flex; flex-direction: column; gap: 2px; }
    .asis-history-row__day   { font-size: 0.9375rem; font-weight: 600; color: var(--ic-text); }
    .asis-history-row__hours { font-size: 0.875rem; color: var(--ic-muted); }
    .asis-history-empty { padding: 1.5rem; text-align: center; font-size: 0.875rem; color: var(--ic-muted); margin: 0; }

    /* .auth-alert / .auth-alert--error NO se redefinen aquí: los define auth-shared.css, que es
       global. Dentro del <style> del .razor la copia era inofensiva por accidente; en una hoja
       global pisaría el alert de TODAS las pantallas. */

    @@keyframes ic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ── Candado de turno ────────────────────────────────────────────────────────────────────────
   «Desliza para iniciar turno» (InicioTurno), la píldora del appbar (ChipTurno), la barra de GPS
   y la hoja «Terminar turno» (AvisosTurno), y el deslizador que comparten (SlideToConfirm). Viven
   aquí porque son la otra mitad de esta pantalla: registran la misma asistencia.

   Nada de lo que acompaña al turno abierto va en el flujo del contenido: el calendario y el mapa
   calculan su alto, y una barra más encima los empujaría. Por eso la píldora va en el appbar y la
   barra de GPS es fija, encima de la barra inferior. */

/* Deslizador. La perilla se mueve con --slc-x (px) y --slc-p (0..1), que escribe
   ic-slide-confirmar.js. El tono entra por una sola variable, --slc-tono. */
.slc {
    --slc-tono: var(--ic-primary);
    --slc-pad: 6px;
    --slc-perilla: 52px;
    position: relative;
    display: flex;
    align-items: center;
    /* border-box explícito: sin él el padding se SUMA al alto (el riel medía 78 y no 66) y la
       perilla flotaba con 12px arriba y abajo. El +2 es el borde. */
    box-sizing: border-box;
    height: calc(var(--slc-perilla) + 2 * var(--slc-pad) + 2px);
    padding: var(--slc-pad);
    border-radius: 999px;
    background: var(--ic-surface-2);
    border: 1px solid var(--ic-border);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    overflow: hidden;
}
/* --slc-sobre-tono: el color del icono SOBRE la perilla. El índigo es el mismo hex en los dos temas
   y lleva texto blanco; el rojo de error NO: en oscuro --lc-err es un salmón claro pensado para
   texto sobre negro, y blanco encima no se lee. Sobre él va el fondo de la página (negro en
   oscuro, blanco en claro), que contrasta en los dos. */
.slc--primario { --slc-tono: var(--ic-primary); --slc-sobre-tono: var(--ic-on-primary); }
.slc--peligro  { --slc-tono: var(--lc-err); --slc-sobre-tono: var(--ic-bg); }

/* La estela: lo recorrido se tiñe del tono, para que el dedo vea cuánto le falta. */
.slc::before {
    content: '';
    position: absolute;
    top: var(--slc-pad);
    bottom: var(--slc-pad);
    left: var(--slc-pad);
    width: calc(var(--slc-perilla) + var(--slc-x, 0px));
    border-radius: 999px;
    background: color-mix(in srgb, var(--slc-tono) 18%, transparent);
    pointer-events: none;
}

.slc__texto {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px 0 calc(var(--slc-perilla) + 2 * var(--slc-pad));
    font-size: 1rem;
    font-weight: 600;
    color: var(--ic-text);
    opacity: calc(1 - var(--slc-p, 0) * 1.6);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slc.is-armado .slc__texto { color: var(--slc-tono); }

.slc__perilla {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--slc-perilla);
    height: var(--slc-perilla);
    min-width: var(--ic-touch-min);
    min-height: var(--ic-touch-min);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--slc-tono);
    color: var(--slc-sobre-tono, var(--ic-on-primary));
    box-shadow: var(--ic-shadow-sm);
    transform: translateX(var(--slc-x, 0px));
    touch-action: none;
    cursor: grab;
}
.slc.is-arrastrando .slc__perilla { cursor: grabbing; }
.slc.is-volviendo .slc__perilla { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.slc.is-volviendo::before { transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.slc.is-armado .slc__perilla { box-shadow: 0 0 0 4px color-mix(in srgb, var(--slc-tono) 30%, transparent); }
.slc__perilla:disabled { cursor: default; }
.slc__perilla:focus-visible { outline: 3px solid color-mix(in srgb, var(--slc-tono) 55%, transparent); outline-offset: 2px; }
.slc[data-estado="bloqueado"]:not(.is-ocupado) { opacity: 0.55; }

.slc__giro {
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: slc-giro 0.8s linear infinite;
}
@keyframes slc-giro { to { transform: rotate(360deg); } }

/* Sólo para lectores de pantalla: «toca otra vez para confirmar». */
.slc__vivo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .slc.is-volviendo .slc__perilla,
    .slc.is-volviendo::before { transition: none; }
    .slc__giro { animation-duration: 2.4s; }
}

/* Pantalla «Iniciar turno»: sustituye al panel entero, sin menú ni barra inferior. */
.turno-inicio {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: max(24px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
    background: var(--ic-bg);
    overflow-y: auto;
}
.turno-inicio__cuerpo,
.turno-inicio__pie {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
.turno-inicio__cuerpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.turno-inicio__fecha {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ic-muted);
}
.turno-inicio__fecha::first-letter { text-transform: uppercase; }
.turno-inicio__saludo {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ic-text);
}
.turno-inicio__negocio {
    margin: 0;
    font-size: 1rem;
    color: var(--ic-muted);
}
.turno-inicio__aviso {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding: 14px 16px;
    border-radius: var(--ic-radius-lg);
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
}
.turno-inicio__aviso p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ic-muted);
}
.turno-inicio__aviso-icono { flex-shrink: 0; color: var(--ic-primary); }
.turno-inicio__error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--ic-radius-md);
    background: color-mix(in srgb, var(--lc-err) 12%, transparent);
    color: var(--lc-err);
    font-size: 0.875rem;
    line-height: 1.4;
}
.turno-inicio__pie {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.turno-inicio__secundarias {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.turno-inicio__enlace,
.turno-hoja__cancelar {
    min-height: var(--ic-touch-min);
    padding: 0 16px;
    border: 0;
    background: none;
    color: var(--ic-muted);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

/* Mientras llega la primera respuesta de mi-turno (sólo si la última vez se pedía turno). */
.turno-carga {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    background: var(--ic-bg);
    color: var(--ic-primary);
}

/* Píldora del appbar: el botón mide el mínimo táctil; lo visible es la píldora de dentro. */
.turno-chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--ic-touch-min);
    padding: 0;
    border: 0;
    background: none;
    color: var(--ic-text);
    font: inherit;
    cursor: pointer;
}
.turno-chip__pildora {
    --turno-chip-tono: var(--lc-ok);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--turno-chip-tono) 40%, transparent);
    background: color-mix(in srgb, var(--turno-chip-tono) 14%, transparent);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.turno-chip--alerta .turno-chip__pildora { --turno-chip-tono: var(--lc-err); }
.turno-chip__punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--turno-chip-tono);
    animation: ic-pulse 2s ease-in-out infinite;
}
@media (max-width: 400px) {
    .turno-chip__etiqueta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .turno-chip__punto { animation: none; }
}

/* Barra de GPS: fija, sobre la barra inferior, sin botón de cerrar. Tarjeta TEÑIDA y no un
   relleno rojo: en oscuro --lc-err es un salmón claro (color de texto), y texto blanco encima no
   se lee. El rojo va en el borde, el título y el botón. */
.turno-gps {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--ic-bottom-nav-height) + 12px);
    z-index: 1250; /* sobre la barra inferior (1200), bajo menús y diálogos */
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
    padding: 10px 10px 10px 14px;
    border-radius: var(--ic-radius-lg);
    border: 1px solid color-mix(in srgb, var(--lc-err) 55%, transparent);
    background: color-mix(in srgb, var(--lc-err) 16%, var(--ic-surface));
    color: var(--ic-text);
    box-shadow: var(--ic-shadow);
}
.turno-gps__icono { flex-shrink: 0; color: var(--lc-err); }
.turno-gps__texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
}
.turno-gps__texto strong { font-size: 0.875rem; color: var(--lc-err); }
.turno-gps__texto span { color: var(--ic-muted); }
.turno-gps__accion {
    flex-shrink: 0;
    min-height: var(--ic-touch-min);
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--lc-err);
    color: var(--ic-bg);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

/* Hoja «Terminar turno». */
.turno-hoja__velo {
    position: fixed;
    inset: 0;
    z-index: var(--ic-z-dialog);
    background: color-mix(in srgb, var(--ic-bg) 65%, transparent);
}
.turno-hoja {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--ic-z-dialog) + 1);
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 560px;
    margin: 0 auto;
    padding: 10px 20px calc(16px + var(--ic-safe-bottom));
    border-radius: 20px 20px 0 0;
    background: var(--ic-surface);
    box-shadow: var(--ic-shadow-up);
}
.turno-hoja__asa {
    align-self: center;
    width: 36px;
    height: 5px;
    border-radius: 999px;
    background: var(--ic-border);
}
.turno-hoja__titulo {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ic-text);
}
.turno-hoja__resumen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
}
.turno-hoja__resumen div {
    padding: 12px 14px;
    border-radius: var(--ic-radius-md);
    background: var(--ic-surface-2);
}
.turno-hoja__resumen dt {
    font-size: 0.8125rem;
    color: var(--ic-muted);
}
.turno-hoja__resumen dd {
    margin: 2px 0 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ic-text);
    font-variant-numeric: tabular-nums;
}
.turno-hoja__nota {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ic-muted);
}