/* =====================================================================
   DISEÑO 1 -- el normal (sin interruptor activado). Modo claro.
   Antes vivía mezclado dentro de skins/sky/timeclock.css (y duplicado
   en choco/green), con colores variables por skin -- a petición
   explícita, ahora tiene un ÚNICO aspecto fijo (azul, el de Sky) igual
   en los 3 skins, aquí centralizado.
   ===================================================================== */

/* ------------------------------------------------------------
 * Cabina de fichaje "futurista", igual que en Choco y Vega:
 * al usuario le gustó más esta distribución (HUD circular con reloj
 * centrado, anillo giratorio, rejilla de fondo) que el diseño anterior de
 * Choco ("tarjeta boarding pass" plana), así que se ha portado aquí con la
 * paleta terracota/ámbar de Choco en vez del verde de Vega o el azul de
 * Sky. Fondo oscuro, rejilla, neones y HUD digital para la tarjeta de
 * fichar (.timeclock-card--cockpit:not([data-tc-variant-active])). En modo claro este look queda mal
 * (panel negro con neón incrustado en una interfaz clara) -- ver más abajo
 * la versión "día" para [data-mode='light'], sin neón, con la paleta de
 * marca de Choco (usa solo var(--...), así que no hizo falta recolorear
 * nada a mano ahí).
 * ------------------------------------------------------------ */

/* ===== FICHAJES DEL TRABAJADOR — cabina futurista (solo modo oscuro) =====
   Solo afecta a la tarjeta de fichar de la pestaña Fichajes (.timeclock-card--cockpit:not([data-tc-variant-active])). Fondo oscuro con rejilla,
   neones por tipo de botón, reloj digital en vivo y cristal (glassmorphism). */

/* Linea de escaneo que recorre la tarjeta */

@keyframes tc-scan { to { transform: translateY(460%); } }

/* ---------- HUD: reloj digital ---------- */

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

@keyframes tc-ring { from { transform: translate(-50%, -52%) rotate(0deg); } to { transform: translate(-50%, -52%) rotate(360deg); } }

@keyframes tc-blink { 50% { opacity: .25; } }

/* ---------- Selector Normal / Horas extra / Teletrabajo ---------- */

/* ---------- Botones: cristal oscuro con neon ---------- */

/* Destello diagonal */

@keyframes tc-sheen { 0%, 60% { transform: translateX(0) rotate(20deg); } 100% { transform: translateX(500%) rotate(20deg); } }

@keyframes tc-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

/* Textos e iconos de los botones sobre fondo oscuro */

/* Estado / pistas */

/* Mensaje de "Hoy" y demas bloques: paneles de cristal claro para que se lean */

/* Nombre de la empresa bajo el reloj */

/* ===== HUD mas compacto (modo oscuro) ===== */

/* ===== PRUEBA MOVIL (facil de revertir: borrar este bloque entero) =====
   En Fichajes, en movil: sin cabecera, panel a todo el ancho y fondo a
   juego. Antes solo existía en [data-mode='dark'] -- pedido explícito de
   igualar el modo claro al oscuro en este aspecto ("da mejor sensación el
   skin" que ocupe toda la pantalla), así que las reglas de estructura
   (ancho completo, sin bordes/radios, gap 0) se generalizaron a ambos
   modos; solo los colores concretos (fondo, pestañas) siguen siendo
   distintos entre claro y oscuro, cada uno a juego con su propia paleta. */

@media (max-width: 720px) {
[data-mode='light'] body[data-route='fichajes'][data-tc-tab='fichajes'] { background: oklch(from #eaf4fb l calc(c * var(--tc-nc, 1)) var(--tc-h, h)) !important; }

[data-mode='light'] body[data-route='fichajes'][data-tc-tab='fichajes'] .app-shell {
        width: 100% !important;
        padding: 0 0 24px !important;
    }

/* Antes display:none !important: escondía también el interruptor 1/2 y
       el botón "i" de mensajes que viven dentro de este mismo hero, sin
       forma de "rescatarlos" (un hijo de un padre display:none nunca se
       puede forzar a visible) -- bug real reportado ("en el modo oscuro
       desaparece el selector"). En su lugar se encoge a una franja mínima
       en vez de desaparecer del todo, manteniendo visibles esos controles. */

[data-mode='light'] body[data-route='fichajes'][data-tc-tab='fichajes'] .timeclock-hero--compact {
        padding: 6px 8px !important;
        min-height: 0 !important;
    }

[data-mode='light'] body[data-route='fichajes'][data-tc-tab='fichajes'] .timeclock-hero--compact .timeclock-hero__title,
[data-mode='light'] body[data-route='fichajes'][data-tc-tab='fichajes'] .timeclock-hero--compact .status {
        font-size: 0.72rem !important;
    }

[data-mode='light'] body[data-route='fichajes'][data-tc-tab='fichajes'] .labor-layout,
[data-mode='light'] body[data-route='fichajes'][data-tc-tab='fichajes'] .labor-grid { gap: 0 !important; }

[data-mode='light'] body[data-route='fichajes'][data-tc-tab='fichajes'] .labor-panel--self-main,
[data-mode='light'] body[data-route='fichajes'][data-tc-tab='fichajes'] .labor-panel--self-main .labor-panel__body {
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        animation: none !important;
    }

[data-mode='light'] body[data-route='fichajes'][data-tc-tab='fichajes'] .labor-panel--self-main .labor-panel__body { padding: 0 0 8px !important; }

[data-mode='light'] body[data-route='fichajes'][data-tc-tab='fichajes'] .timeclock-card--cockpit:not([data-tc-variant-active]) { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; margin: 0 !important; }

/* Pestanas superiores (Fichajes / Historial / Solicitudes / Ausencias) a juego */

[data-mode='light'] body[data-route='fichajes'][data-tc-tab='fichajes'] .labor-tabs__nav { padding: 6px 8px !important; background: #ffffff; }

[data-mode='light'] body[data-route='fichajes'][data-tc-tab='fichajes'] .labor-tabs__button {
        background: oklch(from #e1eff9 l c var(--tc-h, h)) !important;
        color: oklch(from #0f2a43 l calc(c * var(--tc-nc, 1)) var(--tc-h, h)) !important;
        border: 1px solid oklch(from #c3ddf0 l c var(--tc-h, h)) !important;
    }

[data-mode='light'] body[data-route='fichajes'][data-tc-tab='fichajes'] .labor-tabs__button--active {
        background: linear-gradient(135deg, oklch(from #184a7d l c var(--tc-h, h)), oklch(from #2563a8 l c var(--tc-h, h))) !important;
        color: #fff !important;
        box-shadow: 0 0 14px color-mix(in srgb, oklch(from #2563a8 l c var(--tc-h, h)) 40%, transparent);
    }
}

/* Movil: las animaciones se mantienen (solo transform/opacity, que van por GPU); se apaga lo que repinta en cada fotograma */

/* ============================================================
 * VERSION "DIA" -- modo claro
 * ------------------------------------------------------------
 * El look "cockpit" (fondo negro, neon) no tiene sentido incrustado
 * en una interfaz clara: aqui en su lugar usamos la paleta de marca
 * de Choco vía variables (#2563a8, #15803d, etc.), con buen
 * contraste, sin degradados de texto ni animaciones de escaneo/pulso --
 * tranquilo y legible, pero conservando la identidad del HUD circular con
 * el reloj y el icono de estado bajo el anillo, igual que en Choco/Vega,
 * para que las acciones (fichar, pausas, solicitudes) se reconozcan igual
 * entre modo claro y oscuro y entre skins.
 * ============================================================ */

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) {
    border: 1px solid oklch(from #c3ddf0 l c var(--tc-h, h)) !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px oklch(from rgb(20 65 110 / 0.12) l c var(--tc-h, h)) !important;
}

[data-mode='light'] .tc-hud {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 27px 12px 25px;
    margin-bottom: 18px;
    text-align: center;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, oklch(from #e1eff9 l c var(--tc-h, h)) 0%, #ffffff 100%);
    border-bottom: 1px solid oklch(from #c3ddf0 l c var(--tc-h, h));
}

[data-mode='light'] .tc-hud__ring {
    position: absolute;
    top: 50%; left: 50%;
    width: min(210px, 70%);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -52%);
    border-radius: 50%;
    border: 1px dashed oklch(from #7fb3dd l c var(--tc-h, h));
    pointer-events: none;
}

[data-mode='light'] .tc-hud__ring::before,
[data-mode='light'] .tc-hud__ring::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

[data-mode='light'] .tc-hud__ring::before { inset: 14px; border: 2px solid transparent; border-top-color: oklch(from #2563a8 l c var(--tc-h, h)); }

[data-mode='light'] .tc-hud__ring::after { inset: 34px; border: 1px solid oklch(from #c3ddf0 l c var(--tc-h, h)); }

[data-mode='light'] .tc-hud__time {
    position: relative;
    font-size: clamp(1.7rem, 5vw, 2.4rem);
    font-weight: 700;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    color: oklch(from #0f2a43 l calc(c * var(--tc-nc, 1)) var(--tc-h, h));
}

[data-mode='light'] .tc-hud__date {
    position: relative;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: oklch(from #4d6a82 l calc(c * var(--tc-nc, 1)) var(--tc-h, h));
}

[data-mode='light'] .tc-hud__company {
    position: relative;
    margin-top: 2px;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: oklch(from #184a7d l c var(--tc-h, h));
}

[data-mode='light'] .tc-hud__company:empty { display: none; }

[data-mode='light'] .tc-hud__state {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 3px 12px;
    border-radius: 999px;
    border: 1px solid oklch(from #7fb3dd l c var(--tc-h, h));
    background: #ffffff;
    color: oklch(from #0f2a43 l calc(c * var(--tc-nc, 1)) var(--tc-h, h));
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

[data-mode='light'] .tc-hud__state i {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #15803d;
}

/* ---------- Selector Normal / Horas extra / Teletrabajo ---------- */

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-kind-select__options {
    background: oklch(from #e1eff9 l c var(--tc-h, h)) !important;
    border: 1px solid oklch(from #c3ddf0 l c var(--tc-h, h)) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-kind-select__option {
    background: transparent !important;
    color: oklch(from #4d6a82 l calc(c * var(--tc-nc, 1)) var(--tc-h, h)) !important;
    border-color: transparent !important;
    font-weight: 600;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-kind-select__option:hover:not(.timeclock-kind-select__option--active) { color: oklch(from #0f2a43 l calc(c * var(--tc-nc, 1)) var(--tc-h, h)) !important; background: oklch(from #d7e9f6 l c var(--tc-h, h)) !important; }

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-kind-select__option--active,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-kind-select__option--active:hover {
    /* No basta con un fondo distinto al ras de sus vecinos: pedido explícito
       de que el activo tenga "background a parte" con el color de marca,
       como un bloque propio despegado de la barra, no fundido dentro de
       ella. margin negativo en vertical + border-radius propio simulan una
       píldora independiente "flotando" por encima del contenedor. */
    margin: -3px 0;
    padding-top: 3px;
    padding-bottom: 3px;
    border-radius: 999px !important;
    background: oklch(from #184a7d l c var(--tc-h, h)) !important;
    border: 1px solid oklch(from #184a7d l c var(--tc-h, h)) !important;
    color: #fff !important;
    font-weight: 800 !important;
    text-shadow: none;
    box-shadow: 0 4px 12px color-mix(in srgb, oklch(from #184a7d l c var(--tc-h, h)) 55%, transparent) !important;
    z-index: 1;
    position: relative;
}

/* ---------- Botones: superficie plana, icono coloreado por acento ---------- */

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button {
    border: 1px solid oklch(from #c3ddf0 l c var(--tc-h, h)) !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    color: oklch(from #0f2a43 l calc(c * var(--tc-nc, 1)) var(--tc-h, h)) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

/* Sin brillo diagonal de cristal en el look "dia": el ::before generico de
   estos botones (base.css / timeclock.css del modulo) es solo decorativo
   EXCEPTO cuando el propio boton tambien es un .hold-confirm-button, donde
   ese mismo ::before es el relleno real de "manten pulsado 2s" -- ocultarlo
   sin distinguir el caso hacia que el progreso nunca se viera. :not() lo
   respeta. */

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button:not(.hold-confirm-button)::before,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button:not(.hold-confirm-button)::before,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button:not(.hold-confirm-button)::before,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button::after,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button::after,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button::after {
    display: none;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button:hover:not(:disabled),
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button:hover:not(:disabled) {
    border-color: oklch(from #7fb3dd l c var(--tc-h, h)) !important;
    background: oklch(from #d7e9f6 l c var(--tc-h, h)) !important;
    transform: translateY(-2px) !important;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button__icon,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__icon {
    color: #fff !important;
    border-radius: 4px;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button--schedule .timeclock-side-button__icon { background: #0f766e !important; }

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button--request .timeclock-side-button__icon { background: #7c3aed !important; }

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button--teletrabajo-day .timeclock-side-button__icon { background: #a15c00 !important; }

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button--location .timeclock-side-button__icon { background: #c0392b !important; }

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__icon { background: #a15c00 !important; }

/* Pedido explícito: los botones "Solicitar X" y las pausas también deben
   llevar un tinte de fondo orientativo (igual criterio que su icono), no
   solo blanco plano -- pero suave, sin igualar la fuerza del neón del modo
   oscuro (10% de mezcla sobre --surface-elevated en vez de color sólido). */

/* inset ... 2px 0 0 simula un filo superior de color sin sumar grosor a la
   caja (pedido explícito: nada de tamaños nuevos) -- da un aire de tarjeta
   de dashboard "seria" en vez del bloque de color plano infantil de antes. */

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button--schedule {
    background: color-mix(in srgb, #0f766e 10%, #ffffff) !important;
    border-color: color-mix(in srgb, #0f766e 30%, oklch(from #c3ddf0 l c var(--tc-h, h))) !important;
    box-shadow: inset 0 2px 0 0 #0f766e !important;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button--request {
    background: color-mix(in srgb, #7c3aed 10%, #ffffff) !important;
    border-color: color-mix(in srgb, #7c3aed 30%, oklch(from #c3ddf0 l c var(--tc-h, h))) !important;
    box-shadow: inset 0 2px 0 0 #7c3aed !important;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button--teletrabajo-day {
    background: color-mix(in srgb, #a15c00 10%, #ffffff) !important;
    border-color: color-mix(in srgb, #a15c00 30%, oklch(from #c3ddf0 l c var(--tc-h, h))) !important;
    box-shadow: inset 0 2px 0 0 #a15c00 !important;
    min-width: 100px !important;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button--location {
    background: color-mix(in srgb, #c0392b 10%, #ffffff) !important;
    border-color: color-mix(in srgb, #c0392b 30%, oklch(from #c3ddf0 l c var(--tc-h, h))) !important;
    box-shadow: inset 0 2px 0 0 #c0392b !important;
    min-width: 100px !important;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button {
    background: color-mix(in srgb, #a15c00 10%, #ffffff) !important;
    border-color: color-mix(in srgb, #a15c00 30%, oklch(from #c3ddf0 l c var(--tc-h, h))) !important;
    box-shadow: inset 0 2px 0 0 #a15c00 !important;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button__label,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__label,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__label-time,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .hold-confirm-button__hold-hint,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button small,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button small {
    color: oklch(from #0f2a43 l calc(c * var(--tc-nc, 1)) var(--tc-h, h)) !important;
    text-shadow: none !important;
}

/* Look "serio" sin tocar tamaños de caja/icono (pedido explícito): mayúsculas
   con tracking + peso alto en vez de texto normal en minúscula, que junto a
   los iconos emoji de color plano se leía como una app infantil. Solo
   tipografía, ningún tamaño ni layout cambia. */

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button__label,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__label {
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    font-weight: 700 !important;
}

/* El botón de fichar tiene fondo sólido --success/--danger (ver más abajo):
   el label heredaba #0f2a43 del bloque genérico de arriba, oscuro sobre
   ese fondo de color -- bug real reportado ("Fichar entrada ... debería el
   texto estar en blanco"). Blanco explícito, no depende de --text. */

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__label {
    color: #fff !important;
    text-shadow: none !important;
    font-size: 1rem !important;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Boton principal de fichar: color solido de marca, sin pulso de neon */

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button {
    background: #15803d !important;
    border-color: #0a7a54 !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(21, 128, 61, .22) !important;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button:hover:not(:disabled) {
    filter: brightness(0.96) !important;
    transform: translateY(-2px) !important;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button[data-timeclock-next-action="OUT"] {
    background: #c0392b !important;
    border-color: #962d21 !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(190, 18, 60, .2) !important;
}

/* --hold-fill-color (base.css) apunta a #0f2a43, pensado para
   superficies neutras -- sobre el fondo de color sólido de este botón
   (--success/--danger) un relleno "texto al 55%" apenas se distinguía del
   propio fondo, dejando solo la línea de borde visible en vez del relleno
   progresivo completo (bug real reportado: "solo sale una raya subiendo").
   Blanco bien opaco aquí sí contrasta contra cualquiera de los dos fondos. */

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button {
    --hold-fill-color: #fff;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button.hold-confirm-button::before {
    /* .38 seguía siendo demasiado sutil sobre el verde/rojo ya saturado del
       botón -- solo se notaba la línea de borde, no el relleno subiendo.
       .7 + z-index explícito para asegurar que quede por encima del propio
       fondo del botón y por debajo del icono/label (que ya llevan z-index
       propio vía .hold-confirm-button__label). */
    background: rgba(255, 255, 255, .7) !important;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__icon {
    color: #fff !important;
    background: rgba(255, 255, 255, .22) !important;
    border-radius: 4px;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button .app-icon,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button .app-icon,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button .app-icon {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button:disabled,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button:disabled { opacity: .5; filter: none; }

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__status,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__hint,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .status { color: oklch(from #4d6a82 l calc(c * var(--tc-nc, 1)) var(--tc-h, h)); }

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .status--error { color: #c0392b; background: transparent; }

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .status--success { color: #15803d !important; background: transparent; }

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-today,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-history,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-request {
    margin-top: 22px;
    border-radius: 4px;
    border: 1px solid oklch(from #c3ddf0 l c var(--tc-h, h)) !important;
    background: oklch(from #e1eff9 l c var(--tc-h, h)) !important;
    color: oklch(from #0f2a43 l calc(c * var(--tc-nc, 1)) var(--tc-h, h));
    box-shadow: none;
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-today h4 { color: oklch(from #184a7d l c var(--tc-h, h)); letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; }

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-today .status,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-today .labor-empty { color: oklch(from #4d6a82 l calc(c * var(--tc-nc, 1)) var(--tc-h, h)); background: transparent; }

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-self-location,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-self-map { border-radius: 4px; }

/* clamp() con dvh (altura real de pantalla, descuenta la barra de
   direcciones del navegador móvil): el HUD escala junto con los botones
   de más abajo para que la pestaña "Fichajes" quepa entera sin scroll en
   cualquier móvil -- pedido explícito ("totalmente ajustado a lo que dé
   el móvil verticalmente"). */
@media (max-width: 720px) {
[data-mode='light'] .tc-hud { padding: clamp(6px, 2dvh, 14px) 8px clamp(4px, 1.6dvh, 12px); }

[data-mode='light'] .tc-hud__ring { width: 88%; }

[data-mode='light'] .tc-hud__time { font-size: clamp(1.6rem, 6.5dvh, 2.4rem); }

[data-mode='light'] .tc-hud__date { letter-spacing: .06em; font-size: .68rem; }

/* Botones sin escalar en móvil heredaban el tamaño fijo de escritorio
   (112x120 / 64x124 / 108x78, ver timeclock.css) -- en pantallas bajas eso
   desbordaba la zona de fichar. clamp() con dvh los encoge junto con el
   HUD para repartir el alto disponible sin cortar contenido. */
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button {
    width: clamp(86px, 15dvh, 112px);
    height: clamp(86px, 15dvh, 112px);
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button {
    width: clamp(52px, 8dvh, 64px);
    height: clamp(78px, 13.5dvh, 110px);
}

[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button {
    width: clamp(84px, 14dvh, 108px);
    height: clamp(58px, 9.5dvh, 74px);
}
}

@media (prefers-reduced-motion: reduce) {
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button,
[data-mode='light'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button { transition: none; }
}