/* =====================================================================
   DISEÑO 3 (Gran Hotel 1925 / Art Déco) -- modo dark.
   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.
   ===================================================================== */

/* =====================================================================
   DISEÑO 3 -- "Gran Hotel 1925" (Art Déco, exclusivo del skin Sky, de
   momento). Mismo HTML y misma lógica de siempre: solo cambia el aspecto
   vía .timeclock-card--v3, activada con el interruptor "1"/"2"/"3" (ver
   timeclock.js). Tercera dirección distinta de las dos anteriores (goma
   retro 80s, y antes neón/papel/flat descartados): geometría angular y
   simétrica, negro profundo + dorado envejecido, motivos de abanico y rayos
   grabados, tipografía de época -- pedido explícito: "que me deje
   flipando", "Art Déco". Siempre el mismo aspecto (negro+dorado) en
   claro/oscuro, como una vitrina de museo que no cambia de luz.

   Contraste verificado: dorado sobre negro 8.5:1, texto oscuro sobre dorado
   8:1, blanco sobre burdeos/verde botella 10-11:1 -- todos muy por encima
   del mínimo 4.5:1 (lección de los diseños anteriores, donde el contraste
   se rompió varias veces al "envejecer" colores sin recalcularlo).

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

/* Textura tétrica añadida al fondo (pedido explícito): grietas finas
   irregulares (líneas repetidas a distintos ángulos) + manchas de humedad/
   óxido oscuras, como una vitrina de museo vieja y descuidada -- capas de
   background superpuestas al degradado negro original, sin tocar el resto
   del aspecto (marco dorado, sombras). */
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 {
    position: relative;
    overflow: hidden;
    border-radius: 4px !important;
    border: 2px solid oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) !important;
    background:
        repeating-linear-gradient(115deg, oklch(from rgb(180 165 130 / .22) l c calc(h + var(--tc-dh, 0))) 0px, oklch(from rgb(180 165 130 / .22) l c calc(h + var(--tc-dh, 0))) 1.5px, transparent 1.5px, transparent 70px),
        repeating-linear-gradient(35deg, oklch(from rgb(180 165 130 / .18) l c calc(h + var(--tc-dh, 0))) 0px, oklch(from rgb(180 165 130 / .18) l c calc(h + var(--tc-dh, 0))) 1.5px, transparent 1.5px, transparent 95px),
        repeating-linear-gradient(-50deg, oklch(from rgb(180 165 130 / .16) l c calc(h + var(--tc-dh, 0))) 0px, oklch(from rgb(180 165 130 / .16) l c calc(h + var(--tc-dh, 0))) 1.5px, transparent 1.5px, transparent 115px),
        radial-gradient(180px 120px at 12% 15%, oklch(from rgb(90 60 15 / .55) l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))), transparent 70%),
        radial-gradient(220px 140px at 88% 78%, rgba(70, 45, 10, .5), transparent 70%),
        radial-gradient(150px 100px at 70% 20%, oklch(from rgb(30 20 5 / .6) l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))), transparent 65%),
        linear-gradient(180deg, oklch(from #12100c l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) 0%, #0d0f0e 100%) !important;
    box-shadow:
        inset 0 0 0 5px #0d0f0e,
        inset 0 0 0 6px oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))),
        0 20px 50px rgba(0, 0, 0, .5) !important;
    padding: 26px 22px !important;
    color: oklch(from #f4ead0 l c calc(h + var(--tc-dh, 0)));
}

/* Doble filete dorado (línea fina + gruesa) recorriendo el interior del
   marco -- ver box-shadow de arriba para las líneas; esta capa añade las
   esquinas en zigzag Déco clásicas mediante 4 pseudo-elementos triangulares. */

/* Línea de escaneo dorada recorriendo la tarjeta entera, combinada con el
   marco (mismo pseudo-elemento, el ::before ya no tenía background libre) --
   pedido explícito de tener animación en el Diseño 3, igual en los dos
   modos (código duplicado en 3-light.css y 3-dark.css a propósito, sin
   depender el uno del otro). */
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid oklch(from rgb(201 168 106 / .5) l c calc(h + var(--tc-dh, 0)));
    background: linear-gradient(180deg, transparent, oklch(from rgb(201 168 106 / .35) l c calc(h + var(--tc-dh, 0))), transparent);
    background-size: 100% 30%;
    background-repeat: no-repeat;
    background-position: 0 -30%;
    pointer-events: none;
    animation: tc-scan-v3 6s linear infinite;
}

@keyframes tc-scan-v3 { to { background-position: 0 130%; } }

/* Abanicos Déco en las 4 esquinas: cuartos de círculo concéntricos dorados,
   como los remates ornamentales de un edificio de los años 20. */

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 46px;
    height: 46px;
    background:
        repeating-radial-gradient(circle at 0 0, transparent 0px, transparent 5px, oklch(from rgb(201 168 106 / .55) l c calc(h + var(--tc-dh, 0))) 6px, oklch(from rgb(201 168 106 / .55) l c calc(h + var(--tc-dh, 0))) 7px);
    -webkit-mask: radial-gradient(circle at 0 0, #000 60%, transparent 61%);
    mask: radial-gradient(circle at 0 0, #000 60%, transparent 61%);
    pointer-events: none;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 > * {
    position: relative;
    z-index: 1;
}

/* ---------- Medallón del reloj: rayos geométricos irradiando desde el centro ---------- */

/* background/border-radius/border-bottom explícitos aquí son obligatorios:
   el diseño 1 en claro pone un fondo claro (var(--surface-soft/--surface)) y
   un borde inferior en este mismo .tc-hud -- sin anularlos, ese fondo claro
   tapaba la hora dorada sobre el fondo negro del diseño 3, dejando "un
   cuadrado blanco que no deja leer la hora" (bug real reportado). */

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .tc-hud {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 2px;
    margin: 8px auto 24px;
    padding: 30px 20px 22px;
    background: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .tc-hud__ring {
    position: absolute;
    top: 46%;
    left: 50%;
    width: min(260px, 84%);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        repeating-conic-gradient(oklch(from rgb(201 168 106 / .5) l c calc(h + var(--tc-dh, 0))) 0deg 3deg, transparent 3deg 15deg);
    -webkit-mask: radial-gradient(circle, transparent 46%, #000 47%, #000 96%, transparent 97%);
    mask: radial-gradient(circle, transparent 46%, #000 47%, #000 96%, transparent 97%);
    pointer-events: none;
    animation: none !important;
    animation-name: none !important;
    border: none !important;
    box-shadow: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .tc-hud__time {
    font: 700 clamp(2.2rem, 6.5vw, 2.9rem)/1 Georgia, 'Times New Roman', serif !important;
    letter-spacing: 0.08em;
    color: oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) !important;
    background: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .tc-hud__date {
    margin-top: 8px;
    font: 700 0.66rem/1.4 Georgia, serif !important;
    letter-spacing: 0.34em !important;
    text-transform: uppercase;
    color: oklch(from #f4ead0 l c calc(h + var(--tc-dh, 0))) !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .tc-hud__company {
    margin-top: 2px;
    font: 700 0.62rem/1.4 Georgia, serif !important;
    letter-spacing: 0.24em !important;
    color: oklch(from rgb(244 234 208 / .6) l c calc(h + var(--tc-dh, 0))) !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .tc-hud__state {
    margin-top: 12px;
    padding: 4px 18px !important;
    border-top: 1px solid oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) !important;
    border-bottom: 1px solid oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) !important;
    background: none !important;
    font: 700 0.62rem/1.4 Georgia, serif !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) !important;
}

/* ---------- Selector Normal/Horas extra/Teletrabajo: puerta de ascensor Déco ---------- */

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-kind-select__options {
    display: flex !important;
    background: none !important;
    border: 1px solid oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-kind-select__option {
    flex: 1;
    border-radius: 0 !important;
    border-right: 1px solid oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) !important;
    background: none !important;
    font: 700 0.66rem/2.6 Georgia, serif !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: oklch(from #f4ead0 l c calc(h + var(--tc-dh, 0))) !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-kind-select__option:last-child {
    border-right: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-kind-select__option--active {
    background: oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) !important;
    color: oklch(from #1a1508 l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) !important;
}

/* ---------- Botón de fichar: octógono dorado con rayos grabados ---------- */

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

/* animation:none obligatorio, mismo motivo que diseños 2, 4 y 5. */

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-punch__button {
    position: relative;
    width: 112px !important;
    height: 112px !important;
    border: none !important;
    border-radius: 0 !important;
    animation: none !important;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background:
        repeating-conic-gradient(from 0deg, rgba(0, 0, 0, .12) 0deg 5deg, transparent 5deg 25deg),
        radial-gradient(circle at 50% 50%, oklch(from #dcbd85 l c calc(h + var(--tc-dh, 0))) 0%, oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) 55%, oklch(from #96792f l c calc(h + var(--tc-dh, 0))) 100%) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 0 0 2px oklch(from #7a6021 l c calc(h + var(--tc-dh, 0))) !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-punch__button:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-punch__button[data-timeclock-next-action="OUT"] {
    background:
        repeating-conic-gradient(from 0deg, rgba(0, 0, 0, .18) 0deg 5deg, transparent 5deg 25deg),
        radial-gradient(circle at 50% 50%, #a9525f 0%, #7a2f3b 55%, #4a1a22 100%) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 0 0 2px oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-punch__icon {
    font-size: 1.5rem !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-punch__label {
    font: 700 0.64rem/1.3 Georgia, serif !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: oklch(from #1a1508 l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) !important;
}

/* ---------- Acciones secundarias: paneles verticales con remate en zigzag ---------- */

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button {
    position: relative;
    width: 60px !important;
    height: 100px !important;
    border: 1px solid oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) !important;
    border-radius: 0 !important;
    clip-path: polygon(0% 12%, 50% 0%, 100% 12%, 100% 100%, 0% 100%);
    background: linear-gradient(180deg, oklch(from #1c1912 l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) 0%, oklch(from #12100c l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) 100%) !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button--request {
    background: linear-gradient(180deg, #241419 0%, #170d10 100%) !important;
    border-color: #a9525f !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button:hover {
    filter: brightness(1.3);
    transform: none !important;
    border-color: transparent !important;
    background: linear-gradient(180deg, oklch(from #1c1912 l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) 0%, oklch(from #12100c l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) 100%) !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button--request:hover {
    background: linear-gradient(180deg, #241419 0%, #170d10 100%) !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button__icon {
    font-size: 1.1rem !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button__label {
    font: 700 0.54rem/1.2 Georgia, serif !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-teletrabajo-actions {
    margin-top: 18px !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button--teletrabajo-day {
    border-color: #4f7a5e !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button--teletrabajo-day:hover {
    background: linear-gradient(180deg, #16241c 0%, #0e1712 100%) !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button--location {
    border-color: #a9525f !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button--location:hover {
    background: linear-gradient(180deg, #241419 0%, #170d10 100%) !important;
}

/* ---------- Pausas: rectángulos con doble filete, como paneles de puerta ---------- */

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

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-break__button {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 12px 20px !important;
    border: 1px solid oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, oklch(from #1c1912 l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) 0%, oklch(from #12100c l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) 100%) !important;
    box-shadow: inset 0 0 0 3px #0d0f0e !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-break__button:hover {
    filter: brightness(1.3);
    transform: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-break__icon {
    font-size: 1.05rem !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-break__label {
    font: 700 0.6rem/1.3 Georgia, serif !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-break__label-time {
    color: oklch(from rgb(201 168 106 / .6) l c calc(h + var(--tc-dh, 0))) !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='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-punch__button {
        width: min(23vw, 15.5dvh, 96px) !important;
        height: min(23vw, 15.5dvh, 96px) !important;
    }

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button {
        width: min(12vw, 8.5dvh, 52px) !important;
        height: min(21vw, 14dvh, 86px) !important;
    }

/* Medallón del reloj: 10px 12px 8px se quedaba corto dejando hueco muerto
   por debajo de los botones en móviles altos -- clamp con dvh lo deja
   crecer hasta el tamaño de escritorio (30px 20px 22px) cuando sobra alto. */
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .tc-hud {
        padding: clamp(12px, 3.2dvh, 30px) 14px clamp(8px, 2.4dvh, 22px);
    }
}

/* =====================================================================
   BLINDAJE: propiedades que el Diseño 1 define y este bloque no tocaba
   explícitamente se colaban sin obstáculos (herencia de la cascada, no un
   problema de orden de carga) -- bug real reportado ("cosas del Diseño 1
   se cuelan en el 2/3/4, eso no debería pasar jamás"). Cierra TODOS los
   huecos detectados por comparación exhaustiva contra 1-light.css/1-dark.css.
   ===================================================================== */

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .tc-hud {
    text-align: center;
    margin-bottom: 24px;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .tc-hud__ring::before,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .tc-hud__ring::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .tc-hud__company {
    position: static;
    font-size: inherit;
    text-transform: none !important;
    background: none !important;
    filter: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

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

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .tc-hud__date {
    position: static;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .tc-hud__time {
    position: static;
    font-family: inherit;
    line-height: 1;
    font-variant-numeric: normal;
    filter: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .tc-hud__state {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: none !important;
}

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

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-kind-select__options {
    backdrop-filter: none !important;
    box-shadow: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-kind-select__option {
    border-color: transparent !important;
}

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

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-kind-select__option--active,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .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;
    border-radius: 0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-punch__button,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-break__button {
    position: relative;
    overflow: hidden;
    border-color: transparent !important;
    backdrop-filter: none !important;
    color: oklch(from #f4ead0 l c calc(h + var(--tc-dh, 0))) !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none;
}

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

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-punch__button:not(.hold-confirm-button)::before,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button:not(.hold-confirm-button)::before,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-break__button:not(.hold-confirm-button)::before {
    display: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-punch__button:hover:not(:disabled) {
    box-shadow: none !important;
    border-color: transparent !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-punch__button[data-timeclock-next-action="OUT"] {
    border-color: transparent !important;
    color: oklch(from #f4ead0 l c calc(h + var(--tc-dh, 0))) !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-punch__icon,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button__icon,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-break__icon {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: inherit !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-punch__label {
    text-shadow: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button:hover:not(:disabled) {
    background: linear-gradient(180deg, oklch(from #1c1912 l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) 0%, oklch(from #12100c l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) 100%) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button--request {
    box-shadow: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button--teletrabajo-day {
    background: linear-gradient(180deg, oklch(from #1c1912 l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) 0%, oklch(from #12100c l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) 100%) !important;
    box-shadow: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button--location {
    background: linear-gradient(180deg, oklch(from #1c1912 l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) 0%, oklch(from #12100c l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) 100%) !important;
    box-shadow: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button--schedule .timeclock-side-button__icon,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button--request .timeclock-side-button__icon,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button--teletrabajo-day .timeclock-side-button__icon,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button--location .timeclock-side-button__icon {
    background: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button small,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-break__button small,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .hold-confirm-button__hold-hint {
    color: oklch(from #f4ead0 l c calc(h + var(--tc-dh, 0))) !important;
    text-shadow: none !important;
}

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

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

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-side-button__label,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-break__label {
    text-shadow: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-break__button:hover:not(:disabled) {
    border-color: transparent !important;
    box-shadow: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-break__label-time {
    text-shadow: none !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-today,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-history,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-request {
    margin-top: 0 !important;
    border: 1px solid oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) !important;
    background: oklch(from #1c1912 l calc(c * var(--tc-wc, 1)) calc(h + var(--tc-dh, 0))) !important;
    color: oklch(from #f4ead0 l c calc(h + var(--tc-dh, 0))) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-today h4 {
    color: oklch(from #c9a86a l c calc(h + var(--tc-dh, 0))) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-today .status,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-today .labor-empty {
    color: oklch(from #cbb98f l c calc(h + var(--tc-dh, 0))) !important;
    background: transparent !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-self-location,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-self-map {
    border-radius: 0 !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-punch__status,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .timeclock-punch__hint,
[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .status {
    color: oklch(from #cbb98f l c calc(h + var(--tc-dh, 0))) !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .status--error {
    color: #e07a6e !important;
    background: transparent !important;
}

[data-mode='dark'] .timeclock-card--cockpit.timeclock-card--v3 .status--success {
    color: #9adcb6 !important;
    background: transparent !important;
}