/* =====================================================================
   DISEÑO 2 (Terminal 80s) -- modo light.
   Solo este diseño y este modo: se puede editar sin afectar al otro
   modo ni a los demás diseños alternativos de Fichajes.

   Contenido idéntico a 2-dark.css a petición explícita: el aspecto oscuro
   es el que vale para los dos modos. Si algún día se quiere volver a
   diferenciar basta con editar este archivo sin tocar el otro.
   ===================================================================== */

/* =====================================================================
   DISEÑO 2 -- "Terminal 80s" (exclusivo del skin Sky, de momento). Mismo
   HTML y misma lógica de siempre: solo cambia el aspecto vía
   .timeclock-card--v2, activada con el interruptor "1"/"2" (ver
   timeclock.js). Tras varios intentos descartados (neón/cyberpunk, papel
   recortado, flat tiles homogéneo) el usuario pidió expresamente "algo
   retro, que no escatime en diseño". Concepto: un aparato electrónico físico
   de los 80 (reloj despertador/calculadora de sobremesa) -- carcasa de
   plástico beige con bisel y tornillos decorativos en las esquinas, pantalla
   LCD HUNDIDA con dígitos de 7 segmentos (incluyendo los segmentos apagados
   visibles en gris tenue, como una pantalla LCD real), botones de goma
   gruesos que se "hunden" al pulsar, selector de tipo de fichaje como
   interruptor deslizante de 3 posiciones sobre una guía metálica. Siempre el
   mismo aspecto "objeto físico" en claro/oscuro (cambia el tono de plástico,
   no el concepto).

   Especificidad: todas las reglas usan
   [data-mode] .timeclock-card--cockpit.timeclock-card--v2, más específico
   que [data-mode] .timeclock-card--cockpit del diseño 1. */

/* Dentro del hero "Fichajes", en el flujo normal, justo a la izquierda del
   botón "i" de mensajes -- margin-left:auto la agrupa con él en el extremo
   derecho de la cabecera sin desplazar el resto. */

.timeclock-layout-switch {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    margin-left: auto;
    margin-right: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
}

.timeclock-layout-switch__option {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: #fff;
    font-weight: 700;
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.timeclock-layout-switch__option--active {
    background: var(--primary);
    color: #fff;
}

/* ---------- Carcasa: "tapiz" envejecido con trama de tela tenue ----------
   Diseño 2 pedido explícitamente IGUAL en claro y oscuro (el oscuro es el
   aspecto que vale para ambos) -- por eso el selector no distingue modo. */

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 {
    position: relative;
    border-radius: 22px !important;
    border: none !important;
    background:
        repeating-linear-gradient(45deg, rgba(0, 0, 0, .1) 0px, rgba(0, 0, 0, .1) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, .08) 0px, rgba(0, 0, 0, .08) 1px, transparent 1px, transparent 3px),
        radial-gradient(180px 120px at 15% 10%, rgba(0, 0, 0, .22), transparent 60%),
        radial-gradient(220px 140px at 85% 90%, rgba(0, 0, 0, .2), transparent 60%),
        linear-gradient(180deg, oklch(from #3d392f l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) 0%, oklch(from #29261e l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) 100%) !important;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .06),
        inset 0 -6px 10px rgba(0, 0, 0, .45),
        0 10px 22px rgba(0, 0, 0, .45) !important;
    padding: 22px 18px !important;
}

/* Tornillos en acabado metal plateado real: degradado gris con reflejo
   especular arriba-izquierda, aro más oscuro alrededor, y una ranura recta
   (Phillips simplificada de una sola línea) grabada encima.

   animation: none es OBLIGATORIO aquí: el diseño 1 en dark pone una
   animación de "línea de escaneo" (tc-scan, ver más arriba) en este mismo
   pseudo-elemento ::before de .timeclock-card--cockpit -- mi selector, al
   ser más específico, sustituye content/position/background, pero CSS
   resuelve cada propiedad por separado en la cascada: si yo no toco
   `animation`, la regla del diseño 1 (menos específica) la sigue aplicando
   igualmente, y el "tornillo" heredaba el desplazamiento vertical infinito
   de esa animación -- bug real reportado ("el tornillo se va bajando como
   si estuviera loco"). */

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2::before,
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2::after {
    content: '';
    position: absolute;
    animation: none !important;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    top: 14px;
    background:
        linear-gradient(90deg, transparent 46%, rgba(40, 40, 45, .55) 48%, rgba(40, 40, 45, .55) 52%, transparent 54%),
        radial-gradient(circle at 32% 28%, #f4f6f8 0%, #cfd3d8 32%, #9a9fa6 62%, #6b6f75 100%);
    box-shadow:
        inset 0 0 0 1px rgba(30, 30, 32, .5),
        0 1px 2px rgba(0, 0, 0, .4);
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2::before {
    left: 14px;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2::after {
    right: 14px;
}

/* Ranura de tornillo (línea diagonal encima del círculo) */

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .tc-hud::after {
    content: '';
}

/* ---------- Pantalla LCD hundida ---------- */

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .tc-hud {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 2px;
    margin: 22px 0 18px;
    margin-bottom: 18px;
    padding: 22px 16px 18px;
    border-radius: 8px;
    border-bottom: none;
    text-align: center;
    background: #5c6b52;
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, .45),
        inset 0 -1px 0 rgba(255, 255, 255, .15),
        0 1px 0 rgba(255, 255, 255, .35);
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .tc-hud__ring {
    display: none;
}

/* Dígitos "de 7 segmentos": fuente monoespaciada gruesa con un "8888"
   fantasma detrás en gris tenue simulando los segmentos apagados de una
   pantalla LCD real, y los dígitos reales encima en verde oscuro saturado
   (como tinta LCD sobre fondo verde oliva, sin brillo ni neón). */

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .tc-hud__time {
    position: static;
    display: inline-block;
    font: 700 clamp(2.3rem, 6.5vw, 3rem)/1 'Courier New', Courier, monospace !important;
    letter-spacing: 0.06em;
    font-variant-numeric: normal;
    color: #cdeab8 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    text-shadow: none !important;
    filter: none !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .tc-hud__date {
    position: static;
    margin-top: 8px;
    font: 700 0.68rem/1.4 'Courier New', Courier, monospace !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: #a9caa0 !important;
    text-shadow: none !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .tc-hud__company {
    position: static;
    margin-top: 2px;
    font: 700 0.62rem/1.4 'Courier New', Courier, monospace !important;
    letter-spacing: 0.1em !important;
    text-transform: none !important;
    color: #7fa072 !important;
    background: none !important;
    filter: none !important;
    text-shadow: none !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .tc-hud__state {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding: 3px 12px !important;
    border-radius: 2px;
    border: 1px solid #a9caa0 !important;
    background: none !important;
    font: 700 0.6rem/1.4 'Courier New', Courier, monospace !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a9caa0 !important;
    box-shadow: none !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .tc-hud__state i {
    display: none;
}

/* ---------- Selector Normal/Horas extra/Teletrabajo: interruptor deslizante
   de 3 posiciones sobre guía metálica ---------- */

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-kind-select__options {
    display: flex !important;
    background: oklch(from #2b2924 l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 4px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35) !important;
    backdrop-filter: none !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-kind-select__option {
    flex: 1;
    border-radius: 999px !important;
    border-color: transparent !important;
    background: none !important;
    font: 700 0.66rem/2.2 'Courier New', Courier, monospace !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: oklch(from #f4ecd8 l c calc(h + var(--tc-dh, 0))) !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-kind-select__option--active {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: static !important;
    z-index: auto !important;
    border: none !important;
    background: linear-gradient(180deg, oklch(from #f4ecd8 l c calc(h + var(--tc-dh, 0))) 0%, oklch(from #d8cba8 l c calc(h + var(--tc-dh, 0))) 100%) !important;
    color: oklch(from #4a3d1f l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .3) !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-kind-select__option--active:hover {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: static !important;
    z-index: auto !important;
    border: none !important;
    background: linear-gradient(180deg, oklch(from #f4ecd8 l c calc(h + var(--tc-dh, 0))) 0%, oklch(from #d8cba8 l c calc(h + var(--tc-dh, 0))) 100%) !important;
    color: oklch(from #4a3d1f l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .3) !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-kind-select__option:hover:not(.timeclock-kind-select__option--active) {
    color: oklch(from #f4ecd8 l c calc(h + var(--tc-dh, 0))) !important;
    background: none !important;
}

/* Mensajes de estado (avisos de fichar/pausar): color fijo, igual en los dos
   modos -- el Diseño 1 sí distingue rojo/verde claro vs oscuro y se colaba
   aquí sin este override explícito. */
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .status {
    color: #bfe0f7 !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .status--error {
    color: #fda4af !important;
    background: transparent !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .status--success {
    color: #a7f3d0 !important;
    background: transparent !important;
}

/* ---------- Botones de goma gruesos: caras superiores más claras, sombra
   interior dura, "se hunden" al pulsar, textura de rayado desgastado ---------- */

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-punch-row {
    gap: 22px !important;
    align-items: center !important;
    margin-top: 20px;
}

/* Rayado desgastado, tipo goma vieja con marcas de uso, encima de cada
   botón físico (fichar, laterales, pausas) -- pedido explícito de envejecer
   también los propios botones, no solo la carcasa. */

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-punch__button::before,
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button::before,
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-break__button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        repeating-linear-gradient(115deg, rgba(0, 0, 0, .05) 0px, rgba(0, 0, 0, .05) 1px, transparent 1px, transparent 4px),
        radial-gradient(60% 50% at 30% 20%, rgba(255, 255, 255, .12), transparent 70%);
    pointer-events: none;
}

/* animation:none obligatorio: el diseño 1 en dark pone tc-pulse en este
   mismo botón, sin anularla se filtraba (bug real reportado, mismo patrón
   ya visto con los diseños 4 y 5). */

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-punch__button {
    position: relative;
    overflow: hidden;
    width: 108px !important;
    height: 108px !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: 50% !important;
    animation: none !important;
    backdrop-filter: none !important;
    color: oklch(from #f4ecd8 l c calc(h + var(--tc-dh, 0))) !important;
    text-shadow: none !important;
    background: linear-gradient(180deg, #4e6e46 0%, #5a8051 100%) !important;
    box-shadow:
        0 6px 0 #415e3a,
        0 8px 10px rgba(0, 0, 0, .35),
        inset 0 2px 3px rgba(255, 255, 255, .3) !important;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-punch__button:active {
    transform: translateY(4px) !important;
    box-shadow:
        0 2px 0 #415e3a,
        0 3px 5px rgba(0, 0, 0, .3),
        inset 0 2px 3px rgba(255, 255, 255, .3) !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-punch__button[data-timeclock-next-action="OUT"] {
    background: linear-gradient(180deg, #a15347 0%, #a3564a 100%) !important;
    border-color: transparent !important;
    color: oklch(from #f4ecd8 l c calc(h + var(--tc-dh, 0))) !important;
    box-shadow:
        0 6px 0 #743c33,
        0 8px 10px rgba(0, 0, 0, .35),
        inset 0 2px 3px rgba(255, 255, 255, .3) !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-punch__button[data-timeclock-next-action="OUT"]:active {
    box-shadow:
        0 2px 0 #743c33,
        0 3px 5px rgba(0, 0, 0, .3),
        inset 0 2px 3px rgba(255, 255, 255, .3) !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-punch__icon {
    font-size: 1.5rem !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: inherit !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-punch__label {
    font: 700 0.66rem/1.3 'Courier New', Courier, monospace !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: oklch(from #f4ecd8 l c calc(h + var(--tc-dh, 0))) !important;
    text-shadow: none !important;
}

/* Botones laterales: mismo criterio de goma, tamaño menor, marrón/ámbar */

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button {
    position: relative;
    overflow: hidden;
    width: 66px !important;
    height: 92px !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: 12px !important;
    animation: none !important;
    backdrop-filter: none !important;
    color: oklch(from #f4ecd8 l c calc(h + var(--tc-dh, 0))) !important;
    text-shadow: none !important;
    background: linear-gradient(180deg, oklch(from #806534 l c calc(h + var(--tc-dh, 0))) 0%, oklch(from #a1803c l c calc(h + var(--tc-dh, 0))) 100%) !important;
    box-shadow:
        0 5px 0 oklch(from #725a26 l c calc(h + var(--tc-dh, 0))),
        0 6px 8px rgba(0, 0, 0, .3),
        inset 0 2px 3px rgba(255, 255, 255, .3) !important;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* --schedule sin regla propia se quedaba con el color base del genérico de
   arriba, pero el Diseño 1 (.timeclock-side-button--schedule, sin --v2) le
   ganaba en algunos casos por especificidad/orden -- bug real reportado
   ("claro y oscuro distintos" pese a que el Diseño 2 ya estaba fusionado).
   Repetir aquí el mismo color, explícito para este modificador, cierra el
   hueco. */
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button--schedule {
    background: linear-gradient(180deg, oklch(from #806534 l c calc(h + var(--tc-dh, 0))) 0%, oklch(from #a1803c l c calc(h + var(--tc-dh, 0))) 100%) !important;
    border-color: transparent !important;
    box-shadow:
        0 5px 0 oklch(from #725a26 l c calc(h + var(--tc-dh, 0))),
        0 6px 8px rgba(0, 0, 0, .3),
        inset 0 2px 3px rgba(255, 255, 255, .3) !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button--request {
    background: linear-gradient(180deg, #6b5d97 0%, #796d99 100%) !important;
    border-color: transparent !important;
    box-shadow:
        0 5px 0 #50486b,
        0 6px 8px rgba(0, 0, 0, .3),
        inset 0 2px 3px rgba(255, 255, 255, .3) !important;
}

/* El :hover del diseño 1 pone un fondo claro (var(--surface-hover)) que
   sobre estos tonos apagados de goma vieja se veía como un flash blanco muy
   feo -- bug real reportado. En su lugar, un oscurecido leve (como si la
   goma se hundiera un poco al posar el cursor, sin cambiar de color). */

/* background-color:transparent (intento anterior) dejaba ver el fondo real
   de la tarjeta por detrás del gradiente del botón en vez de solo oscurecer
   su propio color -- en claro esa tarjeta es el tapiz beige, así que el
   hover "se fundía" con él (bug real reportado). filter solo, sin tocar
   ninguna propiedad de fondo, es lo único que oscurece el gradiente propio
   del botón sin arriesgarse a dejarlo transparente. */

/* El diseño 1 en claro pone background: var(--surface-hover) !important en
   este mismo :hover -- como yo no tocaba `background` (solo filter/border),
   esa regla (menos específica pero con la propiedad sin anular) seguía
   pintando un gris claro plano ENCIMA del degradado de color del botón, y
   con el texto blanco fijo encima quedaba ilegible -- bug real reportado
   ("no se ven las letras"). Hay que repetir aquí el mismo `background` (el
   gradiente real de cada botón) para anular ese override, ya que `filter`
   no sustituye una propiedad `background` ya aplicada por otra regla. */

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button:hover:not(:disabled) {
    border-color: transparent !important;
    background: linear-gradient(180deg, oklch(from #806534 l c calc(h + var(--tc-dh, 0))) 0%, oklch(from #a1803c l c calc(h + var(--tc-dh, 0))) 100%) !important;
    filter: brightness(0.92);
    transform: translateY(-1px) !important;
    box-shadow: none !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button--request:hover:not(:disabled) {
    background: linear-gradient(180deg, #6b5d97 0%, #796d99 100%) !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button--teletrabajo-day:hover:not(:disabled) {
    background: linear-gradient(180deg, #4e6e46 0%, #5a8051 100%) !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button--location:hover:not(:disabled) {
    background: linear-gradient(180deg, #a15347 0%, #a3564a 100%) !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-punch__button:hover:not(:disabled) {
    border-color: transparent !important;
    background: linear-gradient(180deg, #4e6e46 0%, #5a8051 100%) !important;
    filter: brightness(0.92);
    transform: translateY(-1px) !important;
    box-shadow: none !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-punch__button[data-timeclock-next-action="OUT"]:hover:not(:disabled) {
    background: linear-gradient(180deg, #a15347 0%, #a3564a 100%) !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button:active {
    transform: translateY(3px) !important;
    filter: none;
    box-shadow:
        0 2px 0 oklch(from #725a26 l c calc(h + var(--tc-dh, 0))),
        0 3px 4px rgba(0, 0, 0, .3),
        inset 0 2px 3px rgba(255, 255, 255, .3) !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button--request:active {
    box-shadow:
        0 2px 0 #50486b,
        0 3px 4px rgba(0, 0, 0, .3),
        inset 0 2px 3px rgba(255, 255, 255, .3) !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button__icon {
    font-size: 1.15rem !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: inherit !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button__label {
    font: 700 0.56rem/1.2 'Courier New', Courier, monospace !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: oklch(from #f4ecd8 l c calc(h + var(--tc-dh, 0))) !important;
    text-shadow: none !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-teletrabajo-actions {
    margin-top: 16px !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button--teletrabajo-day {
    background: linear-gradient(180deg, #4e6e46 0%, #5a8051 100%) !important;
    border-color: transparent !important;
    box-shadow:
        0 5px 0 #415e3a,
        0 6px 8px rgba(0, 0, 0, .3),
        inset 0 2px 3px rgba(255, 255, 255, .3) !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button--location {
    background: linear-gradient(180deg, #a15347 0%, #a3564a 100%) !important;
    border-color: transparent !important;
    box-shadow:
        0 5px 0 #743c33,
        0 6px 8px rgba(0, 0, 0, .3),
        inset 0 2px 3px rgba(255, 255, 255, .3) !important;
}

/* ---------- Pausas: interruptores tipo palanca pequeños ---------- */

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-breaks {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-break__button {
    position: relative;
    overflow: hidden;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 10px 16px !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: 8px !important;
    animation: none !important;
    backdrop-filter: none !important;
    color: oklch(from #f4ecd8 l c calc(h + var(--tc-dh, 0))) !important;
    text-shadow: none !important;
    background: linear-gradient(180deg, oklch(from #5c584c l c calc(h + var(--tc-dh, 0))) 0%, oklch(from #423f36 l c calc(h + var(--tc-dh, 0))) 100%) !important;
    box-shadow:
        0 4px 0 oklch(from #262420 l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))),
        0 5px 6px rgba(0, 0, 0, .4),
        inset 0 2px 3px rgba(255, 255, 255, .1) !important;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* background repetido aquí (mismo motivo que .timeclock-punch__button:hover
   más abajo) -- el diseño 1 en claro pone background: var(--surface-hover)
   !important en este mismo :hover, que sin este override pintaba un gris
   claro plano encima dejando el texto blanco ilegible. */

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-break__button:hover:not(:disabled) {
    background: linear-gradient(180deg, oklch(from #5c584c l c calc(h + var(--tc-dh, 0))) 0%, oklch(from #423f36 l c calc(h + var(--tc-dh, 0))) 100%) !important;
    filter: brightness(0.92);
    transform: translateY(-1px) !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-break__button:active {
    transform: translateY(3px) !important;
    filter: none;
    box-shadow:
        0 1px 0 oklch(from #625c48 l c calc(h + var(--tc-dh, 0))),
        0 2px 3px rgba(0, 0, 0, .25),
        inset 0 2px 3px rgba(255, 255, 255, .3) !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-break__icon {
    font-size: 1.05rem !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: inherit !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-break__label {
    font: 700 0.6rem/1.3 'Courier New', Courier, monospace !important;
    letter-spacing: normal;
    text-transform: uppercase;
    color: oklch(from #f4ecd8 l c calc(h + var(--tc-dh, 0))) !important;
    text-shadow: none !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-break__label-time {
    color: oklch(from rgb(244 236 216 / .7) l c calc(h + var(--tc-dh, 0))) !important;
    text-shadow: none !important;
}

/* vw (ancho de viewport, NO dvh): dvh se calcula sobre el 100% de la
   pantalla sin saber cuánto ya ocupó el header encima, así que aunque el
   header reste espacio real (ver el flex-column de base.css), el botón
   no se enteraba y seguía queriendo su tamaño del dvh completo,
   sobresaliendo y quedando cortado por el overflow:hidden -- bug real
   reportado ("los botones de abajo se cortan"). vw no depende del header
   y dentro de un contenedor flex con min-height:0 el tamaño real se
   deriva del espacio que REALMENTE queda tras repartir el alto. */
@media (max-width: 720px) {
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-punch__button {
        width: min(22vw, 15dvh, 92px) !important;
        height: min(22vw, 15dvh, 92px) !important;
    }

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button {
        width: min(14vw, 9dvh, 56px) !important;
        height: min(20vw, 14dvh, 78px) !important;
    }

/* Pantalla LCD con más margen respirable en vertical (antes 8px 10px 6px,
   demasiado apretada frente al hueco que dejaba libre por debajo) -- clamp
   con dvh la deja crecer hasta el tamaño de escritorio si sobra alto. */
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .tc-hud {
        padding: clamp(10px, 3dvh, 22px) 10px clamp(6px, 2dvh, 14px);
    }
}

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

/* El diseño 1 en dark pone un destello diagonal animado (tc-sheen) en el
   ::after de estos 3 botones -- el diseño 2 nunca declaraba nada para ese
   pseudo-elemento, así que esa animación se colaba sin obstáculos en modo
   oscuro (bug real reportado: "el claro no lleva animación" -- en realidad
   era el oscuro el que tenía una animación ajena que no debía estar ahí). */

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-punch__button::after,
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button::after,
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-break__button::after {
    content: none !important;
    animation: none !important;
}

/* Paneles de "Hoy"/Historial/Solicitudes: el Diseño 1 los pinta con un azul
   claro que variaba entre modos -- sin cobertura propia aquí se colaban tal
   cual, rompiendo el aspecto "objeto físico beige" del Diseño 2 y siendo
   distintos entre claro y oscuro. */
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-today,
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-history,
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-request {
    margin-top: 0 !important;
    border: 1px solid #c3ddf0 !important;
    background: #e1eff9 !important;
    color: #0f2a43 !important;
    box-shadow: none !important;
    border-radius: 4px !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-today h4 {
    color: #184a7d !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    font-size: 1rem !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-today .status,
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-today .labor-empty {
    color: #4d6a82 !important;
    background: transparent !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-self-location,
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-self-map {
    border-radius: 4px !important;
}

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-punch__status,
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-punch__hint {
    color: #4d6a82 !important;
}

/* small/app-icon/hold-hint: el Diseño 1 les pone glow neón (solo en oscuro)
   o texto azul (solo en claro) -- sin cobertura aquí se colaban ambos casos,
   distintos entre sí. */
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .hold-confirm-button__hold-hint,
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button small,
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-break__button small {
    color: oklch(from #f4ecd8 l c calc(h + var(--tc-dh, 0))) !important;
    text-shadow: none !important;
}

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

[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-side-button:disabled,
[data-mode='light'] .timeclock-card--cockpit.timeclock-card--v2 .timeclock-break__button:disabled {
    opacity: .5 !important;
    filter: none !important;
    animation: none !important;
    box-shadow: none !important;
}