/* ============================================================
 * CSS del módulo "timeclock" para el skin "sky".
 * Este archivo es un SUSTITUTO COMPLETO del CSS normal del
 * módulo cuando el skin activo es "sky" (no una capa de
 * ajustes encima) -- se carga en su lugar, nunca junto a él.
 * Edítalo libremente para dar a este módulo un aspecto
 * específico de este skin (incluye layout/estructura, no solo
 * colores). Ver también: assets/css/base.css (tokens/variables
 * por skin+modo).
 * ============================================================ */

/* ---- Fichajes (timeclock) ---- */

/* .timeclock-hero--compact (estructura, color, responsive): consolidado en
   base.css, un solo sitio para los 3 skins. */

.timeclock-hero__title {
    margin: 0;
}

.timeclock-card {
    background: var(--surface-soft);
    border: 2px solid var(--border);
}

.timeclock-schedule-intro {
    text-align: justify;
    font-size: 0.8rem;
    line-height: 1.4;
}

.timeclock-schedule-current {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 3px;
    background: var(--surface-soft, #f4f7fb);
    border: 1px solid var(--border, #cfd8e6);
}

.timeclock-schedule-current__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-soft, #5f6b7c);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.timeclock-schedule-current__value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text, #1c2536);
}

.timeclock-schedule-total {
    margin: -6px 0 4px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-soft, #5f6b7c);
}

.timeclock-schedule-total--warning {
    color: var(--warning, #b45309);
}

.timeclock-schedule-total:empty {
    display: none;
}

[data-timeclock-schedule-segments] {
    display: grid;
    gap: 6px;
    margin: 2px 0 8px;
}

.timeclock-schedule-segment-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border: 1px solid var(--border, #cfd8e6);
    border-radius: 3px;
    background: var(--surface-soft, #f4f7fb);
}

.timeclock-schedule-segment-row__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-soft, #5f6b7c);
}

.timeclock-schedule-segment-row__time {
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 6px;
    font-size: 0.85rem;
}

.timeclock-schedule-segment-row__remove {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--danger, #c0392b);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
}

.timeclock-schedule-segment-row__remove:hover:not(:disabled) {
    background: var(--danger-soft, rgba(192, 57, 43, 0.12));
}

.timeclock-schedule-segment-row__remove:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.timeclock-schedule-segment-add {
    display: inline-block;
    margin: 0 0 10px;
    padding: 0;
    border: none;
    background: none;
    color: var(--primary, #1d4ed8);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.timeclock-schedule-segment-add:hover {
    text-decoration: underline;
}

.timeclock-punch {
    display: grid;
    gap: 12px;
    justify-items: center;
    text-align: center;
    padding: 0 0 4px;
    /* La tira de tres piezas (Turno + Fichar + Solicitar) mide ~256px de
       ancho; se deja un pelín de margen para que el texto de estado no se
       corte. */
    max-width: 280px;
    margin: 0 auto;
}

.timeclock-kind-select {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 14px;
}

.timeclock-kind-select__options {
    display: flex;
    width: 100%;
    max-width: 420px;
    border: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
    border-radius: 3px;
    overflow: hidden;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent), 0 10px 24px color-mix(in srgb, var(--primary) 18%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--primary) 12%, transparent);
}

.timeclock-kind-select__option {
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    padding: 0 6px;
    border: none;
    background: transparent;
    color: var(--primary-dark);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border-right: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* margin/padding/border-radius se animan también (antes solo
       background/color/box-shadow): el estado activo de Choco cambia estos
       valores para la píldora "despegada" y sin incluirlos en la transición
       saltaban de golpe mientras el color sí se animaba, dando una
       transición descoordinada -- bug real reportado ("un poco fea"). */
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
        margin 0.2s ease, padding 0.2s ease, border-radius 0.2s ease;
}

.timeclock-kind-select__option:last-child {
    border-right: none;
}

.timeclock-kind-select__option--active {
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: #fff !important;
    box-shadow: 0 0 14px color-mix(in srgb, var(--primary) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.timeclock-kind-select__option:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.timeclock-request-open-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto 28px;
}

[data-timeclock-self-request] {
    text-align: center;
}

[data-timeclock-self-request] h4 {
    margin: 0 0 8px;
}

[data-timeclock-self-request] .timeclock-list {
    text-align: left;
}

.timeclock-request-open-row .button {
    width: 100%;
}

.timeclock-request-open-row .button.hold-confirm-button {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    font-size: 0.8rem;
    border-radius: 3px;
}

/* ---- Fila de acción: bento asimétrico — tres piezas de la misma altura,
   cada una con su propio radio de esquina (Turno redondeado solo por fuera
   a la izquierda, Fichar con esquinas normales, Solicitar redondeado solo
   por fuera a la derecha), separadas por un hueco fijo. Sin clip-path: solo
   border-radius y gap, así que nunca hay riesgo de desbordar. ---- */

.timeclock-punch-row-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.timeclock-punch-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    width: auto;
}

.timeclock-side-button {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 124px;
    display: grid;
    gap: 4px;
    align-content: center;
    justify-items: center;
    padding: 6px 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.15s ease, opacity 0.15s ease, box-shadow 0.18s ease;
}

/* Brillo diagonal sutil (glassmorphism) para que el bloque de color plano de
   antes deje de verse "de plástico" y tenga algo de profundidad. */
.timeclock-side-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 45%);
    pointer-events: none;
}

/* La clase genérica .hold-confirm-button (añadida por JS) trae su propio
   tamaño/padding/radio fijos pensados para los botones grandes; aquí se
   sobreescriben explícitamente con más especificidad para que estos botones
   pequeños no "salten" de tamaño en cuanto el JS añade esa clase. */
.timeclock-side-button.hold-confirm-button {
    width: 64px;
    height: 124px;
    padding: 6px 6px;
    border-radius: 3px;
}

.timeclock-side-button--teletrabajo.hold-confirm-button {
    width: auto;
    height: auto;
    padding: 0;
    border: none;
}

.timeclock-side-button--teletrabajo .timeclock-side-button__label {
    font-size: 0.5rem;
}

.timeclock-side-button:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.03);
    filter: brightness(1.1);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.timeclock-side-button:active:not(:disabled) {
    transform: translateY(-1px) scale(0.98);
}

.timeclock-side-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.timeclock-side-button__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 1rem;
    line-height: 1;
}

.timeclock-side-button__label {
    position: relative;
    z-index: 1;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1.1;
}

.timeclock-side-button--schedule {
    background: linear-gradient(160deg, #22b8cf 0%, #0e7490 100%);
}

.timeclock-side-button--schedule.is-holding {
    background: linear-gradient(160deg, #17a2b8 0%, #0b5c74 100%);
}

.timeclock-side-button--request {
    background: linear-gradient(160deg, #a78bfa 0%, #7c3aed 100%);
}

.timeclock-side-button--request.is-holding {
    background: linear-gradient(160deg, #8b5cf6 0%, #6d28d9 100%);
}

/* Dos botones cuadrados, uno debajo del otro, junto a la fila de fichar.
   En móvil el conjunto baja debajo de la fila (ver .timeclock-punch-row-wrap)
   y ahí pasan a ser rectangulares (ancho completo, icono+texto en línea) en
   vez de cuadrados, para aprovechar el ancho en vez de verse dos cuadraditos
   sueltos. */
.timeclock-teletrabajo-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
}

.timeclock-side-button--teletrabajo-day,
.timeclock-side-button--location {
    width: 60px;
    height: 60px;
    flex-direction: column;
    padding: 4px;
    border-radius: 3px;
    gap: 2px;
}

.timeclock-side-button--teletrabajo-day.hold-confirm-button,
.timeclock-side-button--location.hold-confirm-button {
    width: 60px;
    height: 60px;
    padding: 4px;
    border-radius: 3px;
}

.timeclock-side-button--teletrabajo-day .timeclock-side-button__label,
.timeclock-side-button--location .timeclock-side-button__label {
    font-size: 0.52rem;
}

.timeclock-side-button--teletrabajo-day {
    background: linear-gradient(160deg, #fb923c 0%, #c2410c 100%);
}

.timeclock-side-button--teletrabajo-day.is-holding {
    background: linear-gradient(160deg, #f97316 0%, #9a3412 100%);
}

.timeclock-side-button--location {
    background: linear-gradient(160deg, #fb7185 0%, #be123c 100%);
}

.timeclock-side-button--location.is-holding {
    background: linear-gradient(160deg, #f43f5e 0%, #9f1239 100%);
}

@media (max-width: 480px) {
    .timeclock-punch-row-wrap {
        flex-wrap: wrap;
    }

    /* Hay hueco de sobra a lo ancho: se quedan juntos en fila también en
       móvil (nunca uno debajo del otro), solo se ensanchan un poco. */
    .timeclock-teletrabajo-actions {
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }

    .timeclock-side-button--teletrabajo-day,
    .timeclock-side-button--location {
        flex: 1 1 0;
        width: auto;
        height: auto;
        flex-direction: row;
        justify-content: center;
        padding: 10px 14px;
        gap: 8px;
    }

    .timeclock-side-button--teletrabajo-day.hold-confirm-button,
    .timeclock-side-button--location.hold-confirm-button {
        width: auto;
        height: auto;
        padding: 10px 14px;
    }

    .timeclock-side-button--teletrabajo-day .timeclock-side-button__label,
    .timeclock-side-button--location .timeclock-side-button__label {
        font-size: 0.68rem;
    }
}

.timeclock-punch__button {
    position: relative;
    display: grid;
    gap: 6px;
    align-content: center;
    justify-items: center;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 3px;
    background: linear-gradient(160deg, #34d399 0%, #059669 55%, #047857 100%);
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(5, 150, 105, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: timeclock-punch-breathe 2.6s ease-in-out infinite;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.15s ease, box-shadow 0.18s ease, opacity 0.15s ease;
}

/* Brillo diagonal, igual que en los botones laterales, para dar sensación de
   superficie de cristal en vez de un bloque de color plano. */
.timeclock-punch__button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
}

/* Respiración sutil del halo: nada agresivo, solo para que el botón
   principal de fichar se sienta "vivo" en vez de un rectángulo estático. */
@keyframes timeclock-punch-breathe {
    0%, 100% { box-shadow: 0 14px 30px rgba(5, 150, 105, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 14px 34px rgba(5, 150, 105, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}

.timeclock-punch__button.hold-confirm-button {
    width: 112px;
    height: 120px;
    margin: 0;
    border-radius: 3px;
}

.timeclock-punch__button:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.03);
    filter: brightness(1.06);
}

.timeclock-punch__button:active:not(:disabled) {
    transform: translateY(-1px) scale(0.98);
}

.timeclock-punch__button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    animation: none;
}

.timeclock-punch__button[data-timeclock-next-action="OUT"] {
    background: linear-gradient(160deg, #f87171 0%, #dc2626 55%, #b91c1c 100%);
    box-shadow: 0 14px 30px rgba(220, 38, 38, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: timeclock-punch-breathe-red 2.6s ease-in-out infinite;
}

@keyframes timeclock-punch-breathe-red {
    0%, 100% { box-shadow: 0 14px 30px rgba(220, 38, 38, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 14px 34px rgba(220, 38, 38, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}

.timeclock-punch__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 1.2rem;
    line-height: 1;
}

.timeclock-punch__label {
    position: relative;
    z-index: 1;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.timeclock-punch__label--busy {
    font-size: 0.88rem;
}

.timeclock-breaks {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
    width: auto;
    margin: 16px auto 0;
}

.timeclock-break__button {
    position: relative;
    flex: 0 0 auto;
    width: 108px;
    height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    background: linear-gradient(160deg, #fbbf24 0%, #d97706 100%);
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(217, 119, 6, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.15s ease, box-shadow 0.18s ease, opacity 0.15s ease;
}

.timeclock-break__button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 45%);
    pointer-events: none;
}

.timeclock-break__button--active {
    background: linear-gradient(160deg, #ef4444 0%, #b91c1c 100%);
    box-shadow: 0 10px 22px rgba(185, 28, 28, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.timeclock-break__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 1.05rem;
    line-height: 1;
}

.timeclock-break__label {
    position: relative;
    z-index: 1;
}

.timeclock-break__button:last-child {
    background: linear-gradient(160deg, #fb923c 0%, #ea580c 100%);
    box-shadow: 0 10px 22px rgba(234, 88, 12, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.timeclock-break__button.hold-confirm-button {
    width: 108px;
    height: 78px;
    border-radius: 3px;
}

.timeclock-break__button:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.03);
    filter: brightness(1.1);
}

.timeclock-break__button:active:not(:disabled) {
    transform: translateY(-1px) scale(0.98);
}

.timeclock-break__button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.timeclock-break__label {
    font-size: 0.9rem;
    font-weight: 800;
    text-align: center;
}

.timeclock-break__label--busy {
    font-size: 0.72rem;
}

.timeclock-break__label-time {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.9;
}

.timeclock-break-cancel {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 8px auto 0;
}

.timeclock-break-cancel.hold-confirm-button::before {
    transform: scaleX(0);
    transform-origin: left;
}

.timeclock-break-cancel.hold-confirm-button.is-holding::before {
    transform: scaleX(1);
}

.timeclock-break-cancel.hold-confirm-button {
    width: 100%;
    max-width: 420px;
    height: auto;
    min-height: 38px;
    padding: 0 14px;
    border-radius: var(--radius);
    border: 1px solid var(--danger);
}

.timeclock-punch__hint {
    margin: 6px 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-soft);
    text-align: center;
}

.timeclock-punch__hint:empty {
    display: none;
}

.timeclock-punch__state-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 0 auto;
    padding: 6px 18px;
    border-radius: var(--radius);
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.timeclock-punch__state-badge--working {
    background: var(--success-soft);
    border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
    color: var(--success-soft-ink);
    box-shadow: 0 4px 10px rgba(31, 157, 85, 0.16);
}

.timeclock-punch__state-badge--break {
    background: var(--warning-soft);
    border: 1px solid var(--warning-border);
    color: var(--warning-soft-ink);
    box-shadow: 0 4px 10px rgba(217, 140, 31, 0.16);
}

.timeclock-punch__status {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 10px 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary-dark);
    font-weight: 600;
    text-align: center;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 10%, transparent);
}

.timeclock-punch__status:empty {
    display: none;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}

.timeclock-punch__status.status--success {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
    color: var(--success-soft-ink);
    box-shadow: 0 4px 10px rgba(31, 157, 85, 0.14);
}

.timeclock-punch__status.status--error {
    background: var(--danger-soft-tint);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    color: var(--danger-soft-ink);
    box-shadow: 0 4px 10px rgba(192, 57, 43, 0.14);
}

.timeclock-today,
.timeclock-history,
.timeclock-request {
    display: grid;
    gap: 6px;
}

.timeclock-today h4,
.timeclock-history h4,
.timeclock-request h4 {
    margin: 0;
    font-size: 1rem;
}

/* <details> colapsable, plegado por defecto (sin atributo "open") --
   pedido explícito, para que la lista de días sea más compacta en móvil
   sin tener siempre la leyenda completa ocupando sitio. */
.timeclock-legend {
    margin: 2px 0 12px;
    font-size: 0.85rem;
    color: var(--text-muted, #6b7280);
}

.timeclock-legend__summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: var(--text-soft);
    user-select: none;
}

.timeclock-legend__summary::-webkit-details-marker {
    display: none;
}

.timeclock-legend__summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 4px;
    transition: transform 0.15s ease;
}

.timeclock-legend[open] .timeclock-legend__summary::before {
    transform: rotate(90deg);
}

.timeclock-legend__items {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
}

.timeclock-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.timeclock-legend__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-lg);
    background: #6bbf8f;
}

.timeclock-legend__dot--break {
    background: #e3ac66;
}

.timeclock-legend__dot--open {
    background: repeating-linear-gradient(45deg, #6bbf8f, #6bbf8f 3px, #fff 3px, #fff 6px);
}

.timeclock-legend__dot--overtime {
    background: #a389d9;
}

.timeclock-legend__dot--empty {
    background: #e6e9ec;
    border: 1px dashed #b7bcc4;
}

.timeclock-legend__dot--pending-delete {
    background: repeating-linear-gradient(45deg, #e6a5a0, #e6a5a0 3px, #d98c85 3px, #d98c85 6px);
}

/* Avisos de "falta de fichaje" pendientes de revisión -- van aparte de las tarjetas de día
   porque un día sin ningún fichaje, por definición, no tiene tarjeta propia en el Historial. */
.timeclock-missed-clockins {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.timeclock-days {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeclock-day {
    position: relative;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* El total de horas ya no flota sobre la tarjeta (liberaba espacio arriba que no se usaba) --
   ahora va como chip al final de la propia línea de tiempo, en la misma fila. */
.timeclock-daybar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.timeclock-daybar-row > .timeclock-daybar-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.timeclock-day__header {
    /* Antes: justify-content:space-between separaba los elementos en huecos grandes en vez de
       agruparlos compactos y seguidos -- ahora fluyen uno detrás de otro (como texto que hace
       salto de línea) y solo el último grupo de acciones se empuja a la derecha con
       margin-left:auto en .timeclock-day__header-actions, para aprovechar mucha menos altura
       vertical con varios badges/botones a la vez. */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.timeclock-day__badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 2px;
}

/* Badge de incidencia (tardanza/ubicación) revisable con mantener pulsado 2s -- usa
   .hold-confirm-button--rect (misma forma normal de píldora, relleno de izquierda a derecha) en
   vez de la burbuja circular gigante por defecto. El relleno se oscurece (en vez del blanco por
   defecto, ilegible sobre fondo rojo) y al quedar revisado se pone en verde claro -- pulsar 2s
   otra vez sobre el verde lo desmarca y vuelve a rojo. */
.timeclock-day__incident-badge {
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.timeclock-day__incident-badge.hold-confirm-button::before {
    background: rgba(0, 0, 0, 0.28);
}

.timeclock-day__incident-badge--reviewed {
    background: var(--success-soft-strong) !important;
    border-color: color-mix(in srgb, var(--success) 45%, transparent) !important;
    color: var(--success-soft-ink) !important;
}

/* El check va en este <span> envoltorio (sin overflow:hidden), no en el propio botón --
   .hold-confirm-button SÍ tiene overflow:hidden (necesario para recortar el relleno del hold),
   así que un ::after del botón no podría sobresalir de su esquina. */
.timeclock-day__incident-badge-wrap {
    position: relative;
    display: inline-flex;
}

.timeclock-day__incident-badge-wrap--reviewed::after {
    content: '✓';
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    color: var(--success-soft-ink);
    background: none;
    pointer-events: none;
}

.timeclock-day__entries-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 8px;
}

.timeclock-day__entries-row > .timeclock-geo-entry-list {
    min-width: 0;
}

.timeclock-day__edit-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface-soft);
}

.timeclock-day__edit-card-label {
    align-self: center;
    text-align: center;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #6b7280);
}

.timeclock-day__edit-card-button {
    min-height: 20px !important;
    padding: 1px 8px !important;
    font-size: 0.72rem;
    line-height: 1.4;
    border-radius: 3px !important;
}

.timeclock-day__header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-left: auto;
    padding-left: 8px;
}

.timeclock-day__header .button--small,
.timeclock-day__edit-card .button--small {
    min-height: 22px;
    padding: 0 9px;
    font-size: 0.72rem;
    border-radius: 3px;
}

.timeclock-day__header .labor-badge {
    min-height: 22px;
    padding: 0 8px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 3px;
}

.timeclock-history-break-icons {
    display: flex;
    gap: 3px;
    padding-right: 6px;
    margin-right: 2px;
    border-right: 1px solid var(--border);
}

.timeclock-history-break-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface-elevated);
    font-size: 0.85rem;
    cursor: grab;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.timeclock-history-break-icon:hover {
    background: var(--surface-hover);
    border-color: var(--primary, #2f6fed);
    transform: translateY(-1px);
}

.timeclock-history-break-icon:active {
    cursor: grabbing;
    transform: translateY(0);
}

/* Botón único de zoom (lupa) en vez de dos botones +/- separados -- toggle: verde cuando el
   zoom está activo (por defecto), blanco cuando está desactivado (día completo 00:00-24:00). */
.timeclock-history-zoom-button {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface-elevated);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-right: 2px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.timeclock-history-zoom-button:hover {
    border-color: var(--primary, #2f6fed);
}

.timeclock-history-zoom-button--active {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
}

.timeclock-history-zoom-button--active:hover {
    background: var(--success-soft-strong);
    border-color: color-mix(in srgb, var(--success) 55%, transparent);
}

.timeclock-daybar__segment--drop-hover {
    outline: 2px dashed #fff;
    outline-offset: -3px;
}

.timeclock-day__title {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.timeclock-day__weekday {
    color: var(--text-muted, #6b7280);
    font-size: 0.85rem;
    font-weight: 600;
}

.timeclock-day__date-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}

.timeclock-day__date {
    font-weight: 700;
}

.timeclock-day__scheduled {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
}

.timeclock-day__hours {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, #6b7280);
    font-size: 0.9rem;
}

.timeclock-day__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.timeclock-day__edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-elevated);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.timeclock-day__edit-button:hover {
    background: var(--surface-hover);
}

.timeclock-day__stats-inline {
    font-size: 0.76rem;
    color: var(--text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.timeclock-day__hours-value {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--surface-soft);
    color: var(--text);
    transition: background 0.15s ease, color 0.15s ease;
}

.timeclock-day__hours-value--under {
    background: #d9362e;
    color: #fff;
}

.timeclock-day__hours-value--over {
    background: #c99400;
    color: #fff;
}

.timeclock-week {
    display: grid;
    gap: 10px;
}

.timeclock-week__label {
    margin: 4px 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.timeclock-daybar-wrap {
    position: relative;
    /* Espacio arriba y abajo de la barra para que quepan las etiquetas de hora
       (.timeclock-daybar__marker--top/--bottom, pegadas a top:0/bottom:0 del wrap) sin solaparse
       con la propia barra -- lo justo, sin sobrar altura. */
    padding: 14px 0 12px;
}

.timeclock-daybar__markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.timeclock-daybar__segment--resizing {
    opacity: 0.25;
}

.timeclock-daybar__resize-preview {
    position: absolute;
    /* Misma altura y posición vertical que .timeclock-daybar dentro del wrap (14px de padding
       arriba, 26px de alto). */
    top: 14px;
    height: 26px;
    border-radius: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    z-index: 2;
}

.timeclock-daybar__resize-time-label,
.timeclock-daybar__drop-time-label {
    position: absolute;
    top: -18px;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}

.timeclock-daybar__marker {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-soft);
    white-space: nowrap;
    line-height: 1;
}

.timeclock-daybar__marker--top {
    top: 0;
}

.timeclock-daybar__marker--top::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 6px;
    background: var(--border);
}

.timeclock-daybar__marker--bottom {
    bottom: 0;
}

.timeclock-daybar__marker--bottom::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 1px;
    height: 6px;
    background: var(--border);
}

.timeclock-daybar {
    position: relative;
    display: flex;
    width: 100%;
    height: 26px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-soft);
}

.timeclock-daybar__range-time {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    opacity: 0.75;
    pointer-events: none;
}

.timeclock-daybar__range-time--start {
    left: 4px;
}

.timeclock-daybar__range-time--end {
    right: 4px;
}

.timeclock-daybar__segment {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3px;
    background: #6bbf8f;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.timeclock-daybar__resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    touch-action: none;
    /* Zona de agarre más ancha que la línea visible, para que sea fácil pillarla también en
       tramos estrechos o en móvil (táctil). */
    z-index: 1;
}

.timeclock-daybar__resize-handle--start {
    left: -3px;
}

.timeclock-daybar__resize-handle--end {
    right: -3px;
}

.timeclock-daybar__resize-handle:hover,
.timeclock-daybar__resize-handle:active {
    background: rgba(255, 255, 255, 0.5);
}

.timeclock-daybar__segment:last-child {
    border-right: none;
}

.timeclock-daybar__segment--deletable {
    cursor: pointer;
}

/* Indicadores del Historial de fichajes (admin): reloj rojo de tardío/salida anticipada y
   chincheta de incidencia de ubicación -- puramente informativos (no interactivos), no deben
   interferir con el clic/arrastre del propio tramo.
   OJO: .timeclock-daybar tiene overflow:hidden, así que NO pueden ir con top negativo (por
   encima del tramo) -- quedarían recortados y invisibles. Van DENTRO del alto del tramo,
   pegados arriba pero sin salirse, sin quedar "a caballo" del borde izq/dcho como la versión
   anterior (bolita centrada en el propio borde, que se cortaba visualmente a la mitad). */
.timeclock-daybar__indicator-dot {
    position: absolute;
    top: 50%;
    font-size: 1.05rem;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}

.timeclock-daybar__indicator-dot--start {
    left: 2px;
    transform: translateY(-50%);
}

.timeclock-daybar__indicator-dot--end {
    right: 2px;
    transform: translateY(-50%);
}

.timeclock-daybar__indicator-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.05rem;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}

.timeclock-daybar__segment--deletable:hover {
    box-shadow: inset 0 0 0 2px rgba(192, 57, 43, 0.85);
}

.timeclock-daybar__segment--break {
    background: #e3ac66;
}

.timeclock-daybar__segment--break-plain {
    background: repeating-linear-gradient(45deg, #e6e9ec, #e6e9ec 6px, #eef0f2 6px, #eef0f2 12px);
    color: transparent;
}

.timeclock-daybar__segment--open {
    background: repeating-linear-gradient(45deg, #6bbf8f, #6bbf8f 6px, #57a878 6px, #57a878 12px);
}

.timeclock-daybar__segment--overtime {
    background: #a389d9;
}

.timeclock-daybar__segment--overtime.timeclock-daybar__segment--open {
    background: repeating-linear-gradient(45deg, #a389d9, #a389d9 6px, #8f72c9 6px, #8f72c9 12px);
}

.timeclock-daybar__segment--empty {
    background: repeating-linear-gradient(45deg, #e6e9ec, #e6e9ec 6px, #eef0f2 6px, #eef0f2 12px);
    color: transparent;
}

.timeclock-daybar__segment--preview-work {
    background: repeating-linear-gradient(45deg, var(--primary), var(--primary) 6px, var(--primary-dark) 6px, var(--primary-dark) 12px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.timeclock-daybar__segment--preview-overtime {
    background: repeating-linear-gradient(45deg, #a389d9, #a389d9 6px, #8f72c9 6px, #8f72c9 12px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.timeclock-daybar__segment--preview-break {
    background: repeating-linear-gradient(45deg, #c3cbd6, #c3cbd6 6px, #d6dce4 6px, #d6dce4 12px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.timeclock-daybar__segment--pending-delete {
    background: repeating-linear-gradient(45deg, #e6a5a0, #e6a5a0 6px, #d98c85 6px, #d98c85 12px) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Overlay de una solicitud de cambio PENDIENTE encima del timeline del Historial (admin): igual
   que .timeclock-daybar__resize-preview, un contenedor absoluto aparte para no tocar el layout
   flexbox de los tramos reales -- top/height calcados de la barra real (16px padding, 26px alto)
   para que quede perfectamente alineado encima. Los tramos propuestos dentro reutilizan las
   mismas clases --preview-work/--preview-overtime/--preview-break ya definidas arriba, solo que
   aquí se posicionan con left/width en % (en vez de flex) porque conviven con huecos del día
   real que no forman parte de la solicitud. */
.timeclock-daybar__preview-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.timeclock-daybar__preview-overlay > div {
    position: absolute;
    top: 14px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 2px;
    opacity: 0.85;
    /* El contenedor tiene pointer-events:none para no tapar el clic sobre los tramos reales de
       abajo, pero cada tramo propuesto SÍ debe recibir el clic (abre el modal de aprobar/
       rechazar la solicitud). */
    pointer-events: auto;
    cursor: pointer;
}

.timeclock-daybar__segment--flagged {
    box-shadow: inset 0 0 0 2px var(--warning);
}

.timeclock-daybar__segment--flagged::after {
    content: '⚠';
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: 0.7rem;
    line-height: 1;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

.timeclock-daybar__seg-label {
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}


.timeclock-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 4px 0 14px;
    position: relative;
}

.timeclock-admin-geo {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
    gap: 20px;
    align-items: start;
}

.timeclock-admin-geo__days {
    min-width: 0;
}

.timeclock-admin-geo__map-panel {
    position: sticky;
    top: 16px;
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.timeclock-admin-geo__map-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
}

.timeclock-admin-geo__map {
    width: 100%;
    height: 260px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-soft);
}

.timeclock-geo-entry-list {
    /* Dos columnas fijas de fichajes (entrada/salida/pausas), en vez de dejar que floten con
       flex-wrap -- así ocupan un bloque compacto y predecible a la izquierda de la fila, sin
       invadir el ancho de la columna de Edición de al lado. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin: 8px 0 2px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.timeclock-geo-entry {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Ocupa toda su celda del grid de 2 columnas -- así todos los chips miden lo mismo sin
       necesidad de un ancho fijo en px que descuadre en pantallas más estrechas. */
    width: 100%;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface-soft);
    cursor: pointer;
    font-size: 0.72rem;
    text-align: left;
    line-height: 1.3;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.timeclock-geo-entry:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.timeclock-geo-entry:not(:disabled):hover {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--primary) 15%, transparent);
}

.timeclock-geo-entry--active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent);
}

.timeclock-daybar__segment--clickable {
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.timeclock-daybar__segment--clickable:hover {
    filter: brightness(1.08);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.timeclock-geo-entry__icon {
    font-size: 0.85rem;
    line-height: 1;
}

.timeclock-geo-entry__time {
    font-weight: 700;
    white-space: nowrap;
}

.timeclock-geo-entry__type {
    color: var(--text-soft);
    white-space: nowrap;
}

.timeclock-geo-entry__place {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.68rem;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
}

.timeclock-geo-entry__place:not(:empty)::before {
    content: '· ';
}

.timeclock-geo-entry--no-location .timeclock-geo-entry__place {
    display: flex;
    justify-content: flex-end;
}

.timeclock-geo-entry__no-location-icon {
    font-size: 0.75rem;
    opacity: 0.55;
}

@media (max-width: 900px) {
    .timeclock-admin-geo {
        grid-template-columns: 1fr;
    }

    .timeclock-admin-geo__map-panel {
        position: static;
    }
}

.timeclock-timeline__item {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    position: relative;
    padding-bottom: 18px;
}

.timeclock-timeline__item:last-child {
    padding-bottom: 0;
}

.timeclock-timeline__item::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 20px;
    bottom: -2px;
    width: 2px;
    background: var(--border);
}

.timeclock-timeline__item:last-child::before {
    display: none;
}

.timeclock-timeline__dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid var(--success);
    background: var(--surface);
    z-index: 1;
}

.timeclock-timeline__item--out .timeclock-timeline__dot {
    border-color: var(--primary, #2f6fed);
}

.timeclock-timeline__item--pending .timeclock-timeline__dot {
    border-color: var(--muted, #999);
    border-style: dashed;
}

.timeclock-timeline__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.timeclock-timeline__content strong {
    min-width: 70px;
}

.timeclock-timeline__time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.timeclock-today__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.timeclock-today__grid span {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.timeclock-list {
    display: grid;
    gap: 6px;
}

.timeclock-list__row {
    display: grid;
    grid-template-columns: 110px repeat(4, minmax(0, 1fr)) auto 32px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 0.9rem;
}

.timeclock-list__row .button--icon {
    min-height: 28px;
    min-width: 28px;
    padding: 0;
    justify-self: end;
}

.timeclock-list__row--with-action {
    grid-template-columns: 110px repeat(4, minmax(0, 1fr)) auto;
}

.timeclock-list__row--with-action .button--small {
    min-height: 28px;
    padding: 0 10px;
    font-size: 0.78rem;
    justify-self: end;
}

.timeclock-list__date {
    font-weight: 700;
    color: var(--text-soft);
}

/* En móvil, el grid de 6-7 columnas (110px fija + 4 flexibles + acción) no
   cabía en 320-400px de ancho real -- bug real reportado ("el historial
   se desborda por la derecha en móviles"). Se apila en una sola columna,
   cada dato en su propia línea, sin depender de anchos fijos. */
@media (max-width: 720px) {
    .timeclock-list__row,
    .timeclock-list__row--with-action {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .timeclock-list__row .button--icon,
    .timeclock-list__row--with-action .button--small {
        justify-self: start;
        margin-top: 4px;
    }
}

.timeclock-list--requests {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.timeclock-request-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--border-soft, #e5e7eb);
    border-radius: 3px;
    background: var(--surface);
    width: 100%;
}

.timeclock-request-card__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.timeclock-request-card__row--head {
    justify-content: space-between;
}

.timeclock-request-card__type {
    flex: 1 1 auto;
    font-weight: 600;
}

.timeclock-request-card__row--body {
    justify-content: flex-start;
}

.timeclock-request-card__summary {
    flex: 2 1 220px;
}

.timeclock-request-card__breaks {
    flex: 1 1 140px;
    color: var(--text-muted, #6b7280);
}

.timeclock-request-card__notes {
    flex: 1 1 160px;
    color: var(--text-muted, #6b7280);
    font-size: 0.85rem;
    font-style: italic;
}

.timeclock-request-card__row--action {
    justify-content: flex-end;
}

.timeclock-personal-center-modal {
    display: grid;
    gap: 12px;
}

.timeclock-personal-center-modal__add {
    justify-self: stretch;
}

.timeclock-teletrabajo-day-rows {
    display: grid;
    gap: 8px;
}

.timeclock-teletrabajo-day-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.timeclock-teletrabajo-day-row .input {
    flex: 1 1 auto;
}

.timeclock-teletrabajo-day-row__remove {
    flex: 0 0 auto;
}

.timeclock-teletrabajo-day-add {
    justify-self: start;
}

.timeclock-personal-center-cards {
    display: grid;
    gap: 10px;
}

.timeclock-personal-center-card {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.timeclock-personal-center-card--pending {
    border-left-color: #d97706;
}

.timeclock-personal-center-card--approved {
    border-left-color: #16a34a;
}

.timeclock-personal-center-card--rejected {
    border-left-color: #dc2626;
    opacity: 0.8;
}

.timeclock-personal-center-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.timeclock-personal-center-card__name {
    font-weight: 700;
    font-size: 0.9rem;
}

.timeclock-personal-center-card__status {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.timeclock-personal-center-card__address {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-soft);
}

.timeclock-request-form {
    display: grid;
    gap: 10px;
}

.timeclock-request-form__breaks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.timeclock-request-modal.app-modal__body {
    padding: 16px 20px;
}

.timeclock-request-modal .labor-muted {
    margin: 0 0 4px;
    font-size: 0.82rem;
}

.timeclock-request-modal .labor-form__row {
    gap: 8px;
}

.timeclock-request-modal .labor-form__row--double {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.timeclock-request-modal .labor-field {
    gap: 4px;
}

.timeclock-request-modal .labor-field > span {
    font-size: 0.8rem;
}

.timeclock-request-modal .labor-textarea {
    min-height: 56px;
}

.timeclock-request-modal .timeclock-request-notes__textarea {
    min-height: 140px;
}

.timeclock-request-modal .status {
    margin: 0;
}

.timeclock-request-top-status:empty {
    display: none;
    padding: 0;
    border: none;
}

.timeclock-request-top-status {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    font-weight: 700;
}

.timeclock-request-top-status.status--error {
    background: #d9362e;
    color: #fff;
}

.timeclock-request-top-status.status--warning {
    background: #fff1cc;
    color: #7a4a00;
    font-weight: 600;
}

.timeclock-request-dialog .app-modal__footer,
.timeclock-schedule-request-dialog .app-modal__footer {
    display: flex;
    flex-wrap: nowrap;
}

.timeclock-request-dialog .app-modal__footer .button,
.timeclock-schedule-request-dialog .app-modal__footer .button {
    width: auto;
}

.status--warning {
    color: #7a4a00;
    font-weight: 600;
}

.timeclock-request-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 0 22px;
}

.timeclock-request-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.timeclock-request-step-indicator:hover {
    opacity: 0.85;
    transform: scale(1.06);
}

.timeclock-request-step-indicator.is-active,
.timeclock-request-step-indicator.is-done {
    opacity: 1;
}

.timeclock-request-step-indicator.is-active:hover {
    transform: none;
}

.timeclock-request-step-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--muted, #6b7280);
    font-weight: 700;
    font-size: 0.92rem;
    box-shadow: inset 0 0 0 2px transparent;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.timeclock-request-step-indicator.is-active .timeclock-request-step-circle {
    background: var(--primary);
    color: var(--button-primary-ink, #fff);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent);
}

.timeclock-request-step-indicator.is-done .timeclock-request-step-circle {
    background: var(--success, #1f8f5f);
    color: #fff;
}

.timeclock-request-step-line {
    width: 44px;
    height: 2px;
    background: var(--border);
    transition: background 0.2s ease;
}

.timeclock-request-step-line.is-done {
    background: var(--success, #1f8f5f);
}

.timeclock-request-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
}

.timeclock-request-layout__calendar {
    flex: 0 0 auto;
    display: grid;
    gap: 4px;
    margin: 0 auto;
}

.timeclock-request-layout__label {
    font-size: 0.8rem;
    font-weight: 600;
}

.timeclock-request-layout__fields {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius);
    transition: background 0.15s ease;
}


.timeclock-request-layout__notes {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 8px;
}

.timeclock-request-notes__textarea {
    min-height: 140px;
    background: var(--input-bg);
    border-color: var(--border);
}

.timeclock-request-notes__textarea:not(:disabled):not([readonly]) {
    background: var(--input-bg);
    border-color: var(--border);
}

.timeclock-request-layout__calendar[hidden],
.timeclock-request-layout__fields[hidden],
.timeclock-request-layout__notes[hidden] {
    display: none;
}

.timeclock-mini-cal {
    max-width: 260px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 6px 8px;
    background: var(--surface);
}

.timeclock-mini-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.timeclock-mini-cal__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
    text-transform: capitalize;
}

.timeclock-mini-cal__nav {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-elevated);
    width: 20px;
    height: 20px;
    line-height: 1;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text);
}

.timeclock-mini-cal__nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.timeclock-mini-cal__nav:not(:disabled):hover {
    background: var(--surface-hover);
}

.timeclock-mini-cal__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-bottom: 1px;
}

.timeclock-mini-cal__weekdays span {
    text-align: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-soft);
}

.timeclock-mini-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.timeclock-mini-cal__day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--text);
    font-size: 0.62rem;
    cursor: pointer;
}

.timeclock-mini-cal__day-flag {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    color: var(--primary, #2f6fed);
}

.timeclock-mini-cal__day-flag--pending {
    color: #92720f;
}

.timeclock-mini-cal__day--outside {
    visibility: hidden;
    cursor: default;
}

.timeclock-mini-cal__day:not(:disabled):hover {
    background: var(--surface-hover);
}

.timeclock-mini-cal__day:disabled {
    color: var(--text-soft);
    opacity: 0.4;
    cursor: not-allowed;
}

.timeclock-mini-cal__day--today {
    border-color: var(--border-strong);
}

.timeclock-mini-cal__day--no-schedule {
    background: var(--surface-soft);
    border-color: var(--border);
}

.timeclock-mini-cal__day--approved {
    background: #cdeedc;
    border-color: #8fcfab;
}

.timeclock-mini-cal__day--approved-other {
    background: color-mix(in srgb, var(--schedule-request) 30%, var(--surface));
    border-color: color-mix(in srgb, var(--schedule-request) 55%, var(--surface));
}

.timeclock-mini-cal__day--pending {
    background: #fdf6dc;
    border-color: #e6cf7a;
}

.timeclock-mini-cal__day--blocked,
.timeclock-mini-cal__day--mixed {
    background: #f3d9d9;
    border-color: #e0a8a8;
}

.timeclock-mini-cal__day--selected {
    background: #1f9d55;
    border-color: #1f9d55;
    color: #fff;
}

.timeclock-mini-cal__day--selected .timeclock-mini-cal__day-flag {
    color: #fff;
}

.timeclock-mini-cal__day--selected:not(:disabled):hover {
    background: #1a8548;
}

.timeclock-mini-cal__day-number {
    line-height: 1;
}

.timeclock-mini-cal__day-icon {
    font-size: 0.58rem;
    line-height: 1;
}

.timeclock-mini-cal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.58rem;
    color: var(--text-soft);
}

.timeclock-mini-cal__legend span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.timeclock-mini-cal__legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.timeclock-mini-cal__legend-dot--approved {
    background: #cdeedc;
}

.timeclock-mini-cal__legend-dot--pending {
    background: #fdf6dc;
}

.timeclock-mini-cal__legend-dot--no-schedule {
    background: var(--surface-soft);
}

.timeclock-request-break {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    flex: 1 1 calc(50% - 6px);
    min-width: 150px;
}

.timeclock-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.timeclock-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.timeclock-switch__track {
    position: relative;
    width: 38px;
    height: 22px;
    flex: 0 0 auto;
    background: var(--border-strong);
    border-radius: var(--radius-lg);
    transition: background 0.15s ease;
}

.timeclock-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--surface-elevated);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
    transition: transform 0.15s ease;
}

.timeclock-switch input:checked + .timeclock-switch__track {
    background: var(--success, #1f9d55);
}

.timeclock-switch input:checked + .timeclock-switch__track .timeclock-switch__thumb {
    transform: translateX(16px);
}

.timeclock-switch input:focus-visible + .timeclock-switch__track {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.timeclock-switch__icon {
    font-size: 1.1rem;
    line-height: 1;
}

.timeclock-switch__label {
    font-size: 0.82rem;
    white-space: nowrap;
}

.timeclock-switch--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.timeclock-request-break__fields {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

.timeclock-request-break__fields .labor-field {
    min-width: 0;
    flex: 1 1 0;
}

.timeclock-request-break__fields .labor-field span {
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeclock-request-break__fields .input {
    padding: 0 4px;
    min-height: 30px;
}

.timeclock-self-location {
    display: grid;
    gap: 8px;
    margin: 4px 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.timeclock-self-location__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.timeclock-self-location__header h4 {
    margin: 0;
    font-size: 0.95rem;
}

.timeclock-self-map {
    height: 220px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-hover);
    position: relative;
    z-index: 0;
    isolation: isolate;
}

/* Leaflet's own panes/controls default to z-index 1000, the same value used
   by .app-topbar, so with matching z-index the later element in the DOM (the
   map) wins the tie and its panes render above the app's top bar. Pin them
   well below it and let `isolation: isolate` above keep them from escaping
   this container's stacking context at all. */
.timeclock-self-map .leaflet-pane,
.timeclock-self-map .leaflet-top,
.timeclock-self-map .leaflet-bottom,
.timeclock-self-map .leaflet-control {
    z-index: 10;
}

@media (max-width: 720px) {
    .timeclock-punch__button {
        max-width: 100%;
        min-height: 112px;
    }

    .timeclock-request-break {
        flex: 1 1 100%;
    }

    .timeclock-breaks {
        max-width: 100%;
    }

    .timeclock-today__grid {
        grid-template-columns: 1fr;
    }

    .timeclock-list__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

[data-timeclock-incidents-list] h5 {
    margin: 8px 0 4px;
    font-size: 0.82rem;
    color: var(--text-soft);
}
[data-timeclock-incidents-list] h5:first-child {
    margin-top: 0;
}
.timeclock-incident-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    margin-bottom: 4px;
}
.timeclock-incidents-range-note {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
}
.timeclock-incident-row [data-timeclock-day-request] {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Botón "Solicitar cambio" reducido a icono (pedido explícito, igual en
   PC y móvil): cuadrado compacto en vez de un botón de texto ancho --
   la fila de Historial ya lleva bastante texto/badges. */
.timeclock-incident-row__request-icon {
    width: 30px;
    height: 30px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
}
.timeclock-incident-row__icon {
    flex: 0 0 auto;
    font-size: 1.1rem;
}
.timeclock-incident-row__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.timeclock-incident-row__reviewed-check {
    flex: 0 0 auto;
    margin-left: auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--success, #16a34a);
    font-weight: 700;
    font-size: 0.9rem;
}

/* Avisos numerados en las pestañas de abajo (Historial/Solicitudes/Ausencias):
   pegados a la esquina superior derecha del ICONO (no del botón entero),
   funciona igual en fila (escritorio) que en columna (móvil). */
[data-labor-tabs="timeclock"] .labor-tab-icon-wrap {
    position: relative;
    display: inline-flex;
}
[data-labor-tabs="timeclock"] .labor-tab-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    margin-left: 0;
    transform: none;
    flex: none;
    min-width: 16px;
    height: 15px;
    padding: 0 4px;
    font-size: 0.6rem;
    z-index: 1;
}

/* Historial del trabajador: cabecera con el selector de mes. */
.timeclock-history-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.timeclock-history-head h4 { margin: 0; }
.timeclock-history-month { width: auto; min-width: 150px; max-width: 60%; min-height: 32px !important; padding: 2px 8px !important; font-size: .82rem; }