/* =====================================================================
   DISEÑO 1 -- el normal (sin interruptor activado). Modo oscuro.
   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). */

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) {
    --tc-bg: oklch(from #0a1420 l calc(c * var(--tc-nc, 1)) var(--tc-h, h));
    --tc-cyan: oklch(from #5fb3e8 l c var(--tc-h, h));
    --tc-violet: #a78bfa;
    --tc-green: #34d399;
    --tc-orange: oklch(from #5fb3e8 l c var(--tc-h, h));
    --tc-pink: #fb7185;
    --tc-amber: #fbbf24;
    position: relative;
    overflow: hidden;
    border: 1px solid oklch(from rgb(95 179 232 / .35) l c var(--tc-h, h)) !important;
    border-radius: 3px !important;
    color: oklch(from #eaf5fc l calc(c * var(--tc-nc, 1)) var(--tc-h, h));
    background:
        radial-gradient(900px 380px at 12% -10%, oklch(from rgb(95 179 232 / .22) l c var(--tc-h, h)), transparent 60%),
        radial-gradient(700px 360px at 100% 0%, rgba(167, 139, 250, .22), transparent 60%),
        radial-gradient(800px 420px at 50% 120%, rgba(52, 211, 153, .16), transparent 60%),
        linear-gradient(oklch(from rgb(37 99 168 / .07) l c var(--tc-h, h)) 1px, transparent 1px),
        linear-gradient(90deg, oklch(from rgb(37 99 168 / .07) l c var(--tc-h, h)) 1px, transparent 1px),
        var(--tc-bg) !important;
    background-size: auto, auto, auto, 32px 32px, 32px 32px, auto !important;
    box-shadow: 0 0 0 1px oklch(from rgb(95 179 232 / .12) l c var(--tc-h, h)), 0 20px 60px rgba(10, 6, 2, .55), inset 0 0 80px oklch(from rgb(95 179 232 / .05) l c var(--tc-h, h)) !important;
}

/* Linea de escaneo que recorre la tarjeta */

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active])::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -30%;
    height: 30%;
    background: linear-gradient(180deg, transparent, oklch(from rgb(95 179 232 / .10) l c var(--tc-h, h)), transparent);
    animation: tc-scan 6s linear infinite;
    pointer-events: none;
}

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

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) > * { position: relative; z-index: 1; }

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

[data-mode='dark'] .tc-hud {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 22px 12px 18px;
    margin-bottom: 18px;
    text-align: center;
}

[data-mode='dark'] .tc-hud__ring {
    position: absolute;
    top: 50%; left: 50%;
    width: min(270px, 80%);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -52%);
    border-radius: 50%;
    border: 1px dashed oklch(from rgb(95 179 232 / .35) l c var(--tc-h, h));
    box-shadow: 0 0 40px oklch(from rgb(95 179 232 / .12) l c var(--tc-h, h)), inset 0 0 40px oklch(from rgb(95 179 232 / .08) l c var(--tc-h, h));
    animation: tc-spin 40s linear infinite;
    pointer-events: none;
}

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

[data-mode='dark'] .tc-hud__ring::before { inset: 14px; border: 2px solid transparent; border-top-color: var(--tc-cyan); border-right-color: oklch(from rgb(95 179 232 / .25) l c var(--tc-h, h)); filter: drop-shadow(0 0 6px var(--tc-cyan)); animation: tc-spin 7s linear infinite reverse; }

[data-mode='dark'] .tc-hud__ring::after { inset: 34px; border: 1px solid rgba(167, 139, 250, .35); }

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

[data-mode='dark'] .tc-hud__ring { animation-name: tc-ring; }

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

[data-mode='dark'] .tc-hud__time {
    position: relative;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, 'SFMono-Regular', Menlo, monospace;
    font-size: clamp(1.9rem, 5.6vw, 2.9rem);
    font-weight: 800;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    background: linear-gradient(180deg, #ffffff 10%, oklch(from #7cc0ea l c var(--tc-h, h)) 60%, oklch(from #5fb3e8 l c var(--tc-h, h)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 14px oklch(from rgb(95 179 232 / .65) l c var(--tc-h, h)));
}

[data-mode='dark'] .tc-hud__date {
    position: relative;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: oklch(from #a9d4f2 l c var(--tc-h, h));
}

[data-mode='dark'] .tc-hud__state {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 5px 14px;
    border-radius: 3px;
    border: 1px solid rgba(52, 211, 153, .5);
    background: rgba(52, 211, 153, .10);
    color: #a7f3d0;
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    box-shadow: 0 0 16px rgba(52, 211, 153, .25);
}

[data-mode='dark'] .tc-hud__state i {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--tc-green);
    box-shadow: 0 0 10px var(--tc-green);
    animation: tc-blink 1.4s ease-in-out infinite;
}

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

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

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-kind-select__options {
    background: rgba(20, 10, 4, .7) !important;
    border: 1px solid oklch(from rgb(95 179 232 / .4) l c var(--tc-h, h)) !important;
    border-radius: 3px !important;
    box-shadow: 0 0 22px oklch(from rgb(95 179 232 / .18) l c var(--tc-h, h)) !important;
    backdrop-filter: blur(8px);
}

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-kind-select__option {
    background: transparent !important;
    color: oklch(from #bfe0f7 l c var(--tc-h, h)) !important;
    border-color: oklch(from rgb(95 179 232 / .2) l c var(--tc-h, h)) !important;
    font-weight: 700;
    letter-spacing: .04em;
}

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-kind-select__option:hover:not(.timeclock-kind-select__option--active) { color: #fff !important; background: oklch(from rgb(95 179 232 / .12) l c var(--tc-h, h)) !important; }

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-kind-select__option--active,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-kind-select__option--active:hover {
    /* Mismo tratamiento "píldora propia despegada" que en modo claro: no
       basta un fondo distinto al ras de sus vecinos, tiene que leerse como
       un bloque de color de marca independiente. */
    margin: -3px 0;
    padding-top: 3px;
    padding-bottom: 3px;
    border-radius: 999px !important;
    background: linear-gradient(135deg, oklch(from #6fa8dc l c var(--tc-h, h)) 0%, oklch(from #8fbde6 l c var(--tc-h, h)) 100%) !important;
    color: #fff !important;
    text-shadow: none;
    box-shadow: 0 0 14px oklch(from rgb(95 179 232 / .55) l c var(--tc-h, h)), inset 0 1px 0 rgba(255, 255, 255, .15);
    z-index: 1;
    position: relative;
}

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

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button {
    --neon: var(--tc-cyan);
    position: relative;
    overflow: hidden;
    color: oklch(from #f0f8fd l calc(c * var(--tc-nc, 1)) var(--tc-h, h)) !important;
    border: 1px solid color-mix(in srgb, var(--neon) 75%, transparent) !important;
    background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--neon) 34%, transparent), transparent 70%),
        linear-gradient(170deg, rgba(40, 22, 8, .85), rgba(20, 10, 4, .92)) !important;
    box-shadow:
        0 0 18px color-mix(in srgb, var(--neon) 40%, transparent),
        inset 0 0 22px color-mix(in srgb, var(--neon) 18%, transparent) !important;
    backdrop-filter: blur(6px);
    text-shadow: 0 0 10px color-mix(in srgb, var(--neon) 80%, transparent);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button:hover:not(:disabled),
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button:hover:not(:disabled),
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button:hover:not(:disabled) {
    border-color: var(--neon) !important;
    box-shadow:
        0 0 32px color-mix(in srgb, var(--neon) 70%, transparent),
        inset 0 0 30px color-mix(in srgb, var(--neon) 30%, transparent) !important;
    transform: translateY(-2px) !important;
}

/* Destello diagonal */

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button::after,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button::after,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button::after {
    content: '';
    position: absolute;
    top: -60%; left: -60%;
    width: 40%; height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
    transform: translateX(0) rotate(20deg);
    animation: tc-sheen 5.5s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

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

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button--schedule { --neon: var(--tc-cyan); }

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button--request { --neon: var(--tc-violet); }

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button--teletrabajo-day { --neon: var(--tc-orange); }

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button--location { --neon: var(--tc-pink); }

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button { --neon: var(--tc-green); animation: tc-pulse 2.6s ease-in-out infinite; }

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button { --neon: var(--tc-amber); }

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

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

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

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

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button__icon,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__icon,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__icon {
    color: #fff !important;
    background: color-mix(in srgb, var(--neon, oklch(from #5fb3e8 l c var(--tc-h, h))) 22%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--neon, oklch(from #5fb3e8 l c var(--tc-h, h))) 60%, transparent);
    border-radius: 3px;
    box-shadow: 0 0 12px color-mix(in srgb, var(--neon, oklch(from #5fb3e8 l c var(--tc-h, h))) 55%, transparent);
}

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button .app-icon,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button .app-icon,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button .app-icon {
    filter: brightness(0) invert(1) drop-shadow(0 0 5px var(--neon, oklch(from #5fb3e8 l c var(--tc-h, h)))) !important;
    opacity: 1 !important;
}

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button:disabled,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button:disabled { opacity: .45; animation: none; box-shadow: none !important; filter: grayscale(.4); }

/* Estado / pistas */

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__status,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__hint,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .status { color: oklch(from #bfe0f7 l c var(--tc-h, h)); }

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .status--error { color: #fda4af; background: rgba(251, 113, 133, .12); }

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .status--success { color: #a7f3d0 !important; background: rgba(52, 211, 153, .12); }

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

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-today,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-history,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-request {
    margin-top: 22px;
    border-radius: 3px;
    border: 1px solid oklch(from rgb(95 179 232 / .4) l c var(--tc-h, h)) !important;
    background: rgba(255, 246, 237, .95) !important;
    color: oklch(from #0f172a l calc(c * var(--tc-nc, 1)) var(--tc-h, h));
    box-shadow: 0 0 26px oklch(from rgb(95 179 232 / .18) l c var(--tc-h, h)), 0 12px 34px rgba(0, 0, 0, .35);
}

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

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

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

/* 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='dark'] .tc-hud { padding: clamp(6px, 2dvh, 14px) 8px clamp(4px, 1.6dvh, 12px); }

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

[data-mode='dark'] .tc-hud__time { font-size: clamp(1.7rem, 7dvh, 2.9rem); }

[data-mode='dark'] .tc-hud__date { letter-spacing: .2em; font-size: .64rem; }

/* 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='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button {
    width: clamp(86px, 15dvh, 112px);
    height: clamp(86px, 15dvh, 112px);
}

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

[data-mode='dark'] .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='dark'] .timeclock-card--cockpit:not([data-tc-variant-active])::before,
[data-mode='dark'] .tc-hud__ring,
[data-mode='dark'] .tc-hud__ring::before,
[data-mode='dark'] .tc-hud__state i,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button::after,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button::after,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button::after { animation: none !important; }
}

/* Nombre de la empresa bajo el reloj */

[data-mode='dark'] .tc-hud__company {
    position: relative;
    margin-top: 2px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
    background: linear-gradient(90deg, oklch(from #bfe0f7 l c var(--tc-h, h)), #ffffff, #c4b5fd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 10px rgba(167, 139, 250, .55));
}

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

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

[data-mode='dark'] .tc-hud { padding: 27px 10px 25px; margin-bottom: 10px; gap: 1px; }

[data-mode='dark'] .tc-hud__ring { width: min(210px, 70%); }

[data-mode='dark'] .tc-hud__time { font-size: clamp(1.7rem, 5vw, 2.4rem); }

[data-mode='dark'] .tc-hud__date { font-size: .66rem; letter-spacing: .26em; }

[data-mode='dark'] .tc-hud__company { margin-top: 0; font-size: .86rem; letter-spacing: .24em; }

[data-mode='dark'] .tc-hud__state { margin-top: 4px; padding: 3px 12px; font-size: .62rem; }

/* ===== 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='dark'] body[data-route='fichajes'][data-tc-tab='fichajes'] { background: oklch(from #0a1420 l calc(c * var(--tc-nc, 1)) var(--tc-h, h)) !important; }

[data-mode='dark'] 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='dark'] body[data-route='fichajes'][data-tc-tab='fichajes'] .timeclock-hero--compact {
        padding: 6px 8px !important;
        min-height: 0 !important;
    }

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

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

[data-mode='dark'] body[data-route='fichajes'][data-tc-tab='fichajes'] .labor-panel--self-main,
[data-mode='dark'] 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='dark'] body[data-route='fichajes'][data-tc-tab='fichajes'] .labor-panel--self-main .labor-panel__body { padding: 0 0 8px !important; }

[data-mode='dark'] 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='dark'] body[data-route='fichajes'][data-tc-tab='fichajes'] .labor-tabs__nav { padding: 6px 8px !important; background: rgba(20, 10, 4, .96); }

[data-mode='dark'] body[data-route='fichajes'][data-tc-tab='fichajes'] .labor-tabs__button {
        background: oklch(from rgb(95 179 232 / .10) l c var(--tc-h, h)) !important;
        color: oklch(from #bfe0f7 l c var(--tc-h, h)) !important;
        border: 1px solid oklch(from rgb(95 179 232 / .25) l c var(--tc-h, h)) !important;
    }

[data-mode='dark'] body[data-route='fichajes'][data-tc-tab='fichajes'] .labor-tabs__button--active {
        background: linear-gradient(135deg, oklch(from rgb(95 179 232 / .4) l c var(--tc-h, h)), oklch(from rgb(37 99 168 / .4) l c var(--tc-h, h))) !important;
        color: #fff !important;
        box-shadow: 0 0 14px oklch(from rgb(95 179 232 / .4) l c var(--tc-h, h));
    }
}

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

@media (max-width: 900px) {
[data-mode='dark'] .tc-hud__ring::before { filter: none; }

[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-side-button,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-punch__button,
[data-mode='dark'] .timeclock-card--cockpit:not([data-tc-variant-active]) .timeclock-break__button { text-shadow: none; }
}

/* ============================================================
 * 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 (#6fa8dc, #6fc39c, 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.
 * ============================================================ */

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

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

/* 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. */

/* 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. */

/* 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. */

/* El botón de fichar tiene fondo sólido --success/--danger (ver más abajo):
   el label heredaba #e6f1fa 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. */

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

/* --hold-fill-color (base.css) apunta a #e6f1fa, 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. */