:root { --fondo: #f6f4fa; --super: #fff; --texto: #1d1830; --suave: #6a6280; --borde: #d9cce6; --acento: #58167d; --acento-t: #fff; --ok: #1b7a43; --mal: #b3261e; --aviso: #8a5a00; }
@media (prefers-color-scheme: dark) { :root { --fondo: #17141f; --super: #221e2e; --texto: #ece8f6; --suave: #a59fba; --borde: #3a3450; --acento: #b48be0; --acento-t: #17141f; --ok: #5dd391; --mal: #ff8a80; --aviso: #ffcc66; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.45 system-ui, "Segoe UI", sans-serif; padding: env(safe-area-inset-top) 16px calc(24px + env(safe-area-inset-bottom)); }
#app { max-width: 880px; margin: 0 auto; }
h1 { font-size: 1.3rem; margin: 16px 0 8px; } h2 { font-size: 1.05rem; margin: 18px 0 6px; }
.suave { color: var(--suave); } .ok { color: var(--ok); font-weight: 600; } .error { color: var(--mal); font-weight: 600; } .aviso { color: var(--aviso); font-weight: 600; }
.barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; flex-wrap: wrap; }
.marca { font-weight: 700; color: var(--acento); }
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
button, select, input, textarea { font: inherit; color: var(--texto); background: var(--super); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; }
input, select, textarea { width: 100%; } input[type=checkbox] { width: auto; }
button { cursor: pointer; } button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--acento); outline-offset: 1px; }
button.principal { background: var(--acento); color: var(--acento-t); border-color: var(--acento); font-weight: 700; }
button.peligro { border-color: var(--mal); color: var(--mal); }
button.activa { background: var(--acento); color: var(--acento-t); border-color: var(--acento); }
button:disabled { opacity: .55; cursor: default; }
.tarjeta { background: var(--super); border: 1px solid var(--borde); border-radius: 14px; padding: 14px; margin: 10px 0; }
.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .fila > * { flex: 1 1 140px; } .fila > .fijo { flex: 0 0 auto; }
label { display: block; font-weight: 600; margin: 8px 0 4px; }
.grandes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.grandes button { min-height: 96px; font-size: 1.4rem; font-weight: 800; border-radius: 18px; }
.grandes button.solo { grid-column: 1 / -1; }
.estado { font-size: 1.15rem; font-weight: 700; } .estado.trabajando { color: var(--ok); } .estado.en_pausa { color: var(--aviso); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; } th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { color: var(--suave); font-weight: 600; } .tabla { overflow-x: auto; }
.anulado td { text-decoration: line-through; color: var(--suave); }
.insignia { display: inline-block; border: 1px solid var(--borde); border-radius: 999px; padding: 0 8px; font-size: .8rem; color: var(--suave); margin-left: 6px; }
.codigo-pin { letter-spacing: .3em; text-align: center; font-size: 1.6rem; }
label.inline { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
input[type=time] { min-width: 96px; padding: 6px 8px; }
[hidden] { display: none !important; }
.aviso-caja { border-color: var(--aviso); }
.aviso-caja p { margin: 4px 0; }
.estado-aprobada { color: var(--ok); border-color: var(--ok); } .estado-rechazada { color: var(--mal); border-color: var(--mal); } .estado-pendiente { color: var(--aviso); border-color: var(--aviso); }

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: 10px 0; }
.cal .cab, .cal-mini .cab { text-align: center; color: var(--suave); font-weight: 600; font-size: .8rem; }
.dia { min-height: 74px; background: var(--super); border: 1px solid var(--borde); border-radius: 8px; padding: 3px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.dia.vacio { background: transparent; border-color: transparent; }
.dia.finde { background: color-mix(in srgb, var(--super) 85%, var(--borde)); }
.dia.festivo { border-color: var(--aviso); }
.dia.hoy { outline: 2px solid var(--acento); }
.dia .num { font-weight: 700; font-size: .85rem; }
.nom-festivo { color: var(--aviso); font-size: .65rem; line-height: 1.1; }
.chip { display: inline-block; border-radius: 6px; padding: 1px 5px; font-size: .72rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.chip.neutro { background: var(--super); color: var(--suave); border: 1px solid var(--borde); }
.chip.festivo-leyenda { background: var(--super); color: var(--aviso); border: 1px solid var(--aviso); }
.chip.pendiente, .mini.pendiente { opacity: .7; background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.35) 4px 6px); }
.tipo-vacaciones { background-color: #2e7d6b; } .tipo-baja_medica { background-color: #b3261e; } .tipo-accidente_laboral { background-color: #8e2a6e; }
.tipo-permiso_retribuido { background-color: #2f5fb3; } .tipo-asuntos_propios { background-color: #8a5a00; } .tipo-ausencia_justificada { background-color: #55687a; }
.tipo-ausencia_injustificada { background-color: #444; } .tipo-compensacion_bolsa { background-color: #6a3fb5; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .leyenda .chip { font-size: .8rem; padding: 2px 8px; }
.anio { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mes-mini { padding: 8px; margin: 0; } .cal-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mini { text-align: center; font-size: .68rem; border-radius: 4px; padding: 1px 0; color: var(--texto); }
.mini[class*="tipo-"] { color: #fff; } .mini.festivo { outline: 1px solid var(--aviso); } .mini.hoy { outline: 2px solid var(--acento); }
button.enlace { border: 0; background: none; color: var(--acento); font-weight: 700; padding: 2px 0 6px; text-transform: capitalize; }
.titulo-cal { flex: 1 1 140px; text-align: center; text-transform: capitalize; }
@media (max-width: 560px) { .dia { min-height: 58px; } .chip { font-size: .62rem; padding: 0 3px; } .nom-festivo { display: none; } }