/* =====================================================================
   DC CONTROL 2.2.4 · KIOSCO — JERARQUIA VISUAL CLARO / OSCURO
   Solo presentación. No modifica checadas, PIN, horarios, fotos ni Supabase.
   ===================================================================== */

/* Tema claro por defecto */
.kiosk-fullscreen-1059{
  --kiosk-bg:#eaf1f8;
  --kiosk-bg-2:#dbe7f2;
  --kiosk-surface:#ffffff;
  --kiosk-surface-2:#f4f8fc;
  --kiosk-text:#102a43;
  --kiosk-text-strong:#071f36;
  --kiosk-muted:#60758b;
  --kiosk-line:#c7d6e5;
  --kiosk-primary:#1677df;
  --kiosk-primary-2:#0f63c5;
  --kiosk-success:#0b9f6a;
  --kiosk-danger:#d9475c;
  --kiosk-shadow:0 20px 55px rgba(15,42,70,.16);
  background:
    radial-gradient(circle at 8% 0%,rgba(22,119,223,.13),transparent 34%),
    linear-gradient(145deg,var(--kiosk-bg) 0%,var(--kiosk-bg-2) 100%)!important;
  color:var(--kiosk-text)!important;
}

/* Tema oscuro: sigue el tema general de DC CONTROL */
html.dc-dark .kiosk-fullscreen-1059,
html[data-theme="dark"] .kiosk-fullscreen-1059{
  --kiosk-bg:#071522;
  --kiosk-bg-2:#0b2237;
  --kiosk-surface:#10253a;
  --kiosk-surface-2:#153149;
  --kiosk-text:#eef6ff;
  --kiosk-text-strong:#ffffff;
  --kiosk-muted:#aec0d2;
  --kiosk-line:#31506c;
  --kiosk-primary:#4aa7ff;
  --kiosk-primary-2:#2588ea;
  --kiosk-success:#24c98b;
  --kiosk-danger:#ff6b7d;
  --kiosk-shadow:0 24px 70px rgba(0,0,0,.34);
  background:
    radial-gradient(circle at 8% 0%,rgba(51,135,210,.20),transparent 32%),
    linear-gradient(145deg,var(--kiosk-bg) 0%,var(--kiosk-bg-2) 100%)!important;
}

/* Encabezado: la hora es la primera referencia visual, sin competir con el contenido */
.kiosk-top{
  min-height:88px!important;
  height:auto!important;
  padding:14px 18px!important;
  border-bottom:1px solid var(--kiosk-line)!important;
  color:var(--kiosk-text)!important;
}
.kiosk-top span{color:var(--kiosk-muted)!important;opacity:1!important;font-weight:850!important}
.kiosk-top b{color:var(--kiosk-text-strong)!important}
.kiosk-clock{
  color:var(--kiosk-text-strong)!important;
  font-size:2.05rem!important;
  letter-spacing:-.02em;
  text-shadow:none!important;
}
.kiosk-top button,.kiosk-back{
  min-height:46px!important;
  background:var(--kiosk-surface)!important;
  color:var(--kiosk-text-strong)!important;
  border:1px solid var(--kiosk-line)!important;
  box-shadow:0 5px 16px rgba(15,42,70,.08)!important;
}
html.dc-dark .kiosk-top button,html.dc-dark .kiosk-back,
html[data-theme="dark"] .kiosk-top button,html[data-theme="dark"] .kiosk-back{
  background:var(--kiosk-surface-2)!important;
  box-shadow:none!important;
}

/* Bienvenida */
.kiosk-welcome{padding:32px 10px 20px!important}
.kiosk-welcome h1{color:var(--kiosk-text-strong)!important;font-weight:950!important;letter-spacing:-.03em}
.kiosk-welcome p{color:var(--kiosk-muted)!important;opacity:1!important;font-weight:700}

/* Tarjetas de empleados: color identifica, texto manda */
.kiosk-person-grid{gap:16px!important}
.kiosk-person{
  min-height:250px!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:0 14px 36px rgba(17,44,71,.18)!important;
  transform:none!important;
  isolation:isolate;
}
.kiosk-person:before{background:rgba(255,255,255,.12)!important}
.kiosk-person:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 15%,rgba(0,0,0,.15) 100%);
}
.kiosk-person>*{z-index:1}
.kiosk-person>b{
  color:inherit!important;
  text-shadow:0 1px 2px rgba(0,0,0,.16);
  font-weight:950!important;
  letter-spacing:-.01em;
}
.kiosk-person>span.kiosk-initials2110{
  color:inherit!important;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.18)!important;
}
.kiosk-person-schedule2110,
.kiosk-person-schedule2110 .kiosk-today2110,
.kiosk-person-schedule2110 .kiosk-today2110>b,
.kiosk-person-schedule2110 .kiosk-today2110 span,
.kiosk-person-schedule2110 .kiosk-today2110 strong,
.kiosk-person-schedule2110 .kiosk-days-label2110,
.kiosk-person-schedule2110 .kiosk-day-chip2110,
.kiosk-person-schedule2110 .kiosk-schedule-empty2110{
  color:inherit!important;
}
.kiosk-person-schedule2110 .kiosk-today2110{border-top-color:currentColor!important}
.kiosk-person-schedule2110 .kiosk-today2110{border-top-color:color-mix(in srgb,currentColor 30%,transparent)!important}
.kiosk-person-schedule2110 .kiosk-day-chip2110{
  background:rgba(255,255,255,.14)!important;
  border-color:rgba(255,255,255,.30)!important;
}
.kiosk-person-schedule2110 .kiosk-day-chip2110.today{
  background:#fff!important;
  color:#155da8!important;
  border-color:#fff!important;
}

/* Paleta menos saturada; amarillo usa texto oscuro por contraste */
.kiosk-person.tone-0{background:linear-gradient(135deg,#0c7a72,#13a89b)!important;color:#fff!important}
.kiosk-person.tone-1{background:linear-gradient(135deg,#e7a72e,#f6cf69)!important;color:#172b3f!important}
.kiosk-person.tone-2{background:linear-gradient(135deg,#1d67c8,#2f89ee)!important;color:#fff!important}
.kiosk-person.tone-3{background:linear-gradient(135deg,#6546c7,#8765e8)!important;color:#fff!important}
.kiosk-person.tone-4{background:linear-gradient(135deg,#c83f72,#e45c91)!important;color:#fff!important}
.kiosk-person.tone-5{background:linear-gradient(135deg,#177fa7,#28a6cc)!important;color:#fff!important}

html.dc-dark .kiosk-person.tone-0,html[data-theme="dark"] .kiosk-person.tone-0{background:linear-gradient(135deg,#075f5a,#0b8e84)!important}
html.dc-dark .kiosk-person.tone-1,html[data-theme="dark"] .kiosk-person.tone-1{background:linear-gradient(135deg,#b97816,#d6a62e)!important;color:#fff!important}
html.dc-dark .kiosk-person.tone-2,html[data-theme="dark"] .kiosk-person.tone-2{background:linear-gradient(135deg,#174f9a,#216fc0)!important}
html.dc-dark .kiosk-person.tone-3,html[data-theme="dark"] .kiosk-person.tone-3{background:linear-gradient(135deg,#50349f,#684bbd)!important}
html.dc-dark .kiosk-person.tone-4,html[data-theme="dark"] .kiosk-person.tone-4{background:linear-gradient(135deg,#9f305a,#bd4670)!important}
html.dc-dark .kiosk-person.tone-5,html[data-theme="dark"] .kiosk-person.tone-5{background:linear-gradient(135deg,#116680,#1988a7)!important}

/* Formulario de checada: superficie real, no transparencia sobre azul */
.kiosk-punch-panel{
  max-width:650px!important;
  background:var(--kiosk-surface)!important;
  color:var(--kiosk-text)!important;
  border:1px solid var(--kiosk-line)!important;
  box-shadow:var(--kiosk-shadow)!important;
  backdrop-filter:none!important;
}
.kiosk-person-head>span{
  background:linear-gradient(135deg,var(--kiosk-primary),var(--kiosk-primary-2))!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(20,119,223,.24);
}
.kiosk-person-head h1{color:var(--kiosk-text-strong)!important;font-weight:950!important}
.kiosk-punch-schedule2110,
.kiosk-punch-schedule2110 .kiosk-today2110,
.kiosk-punch-schedule2110 .kiosk-today2110>b,
.kiosk-punch-schedule2110 .kiosk-today2110 span,
.kiosk-punch-schedule2110 .kiosk-today2110 strong,
.kiosk-punch-schedule2110 .kiosk-days-label2110,
.kiosk-punch-schedule2110 .kiosk-day-chip2110,
.kiosk-punch-schedule2110 .kiosk-schedule-empty2110{
  color:var(--kiosk-text)!important;
}
.kiosk-punch-schedule2110 .kiosk-today2110{border-top-color:var(--kiosk-line)!important}
.kiosk-punch-schedule2110 .kiosk-day-chip2110{
  background:var(--kiosk-surface-2)!important;
  border-color:var(--kiosk-line)!important;
}
.kiosk-punch-schedule2110 .kiosk-day-chip2110.today{
  color:#fff!important;
  background:var(--kiosk-primary)!important;
  border-color:var(--kiosk-primary)!important;
}
.kiosk-pin-label{color:var(--kiosk-text-strong)!important}
.kiosk-pin-label input{
  background:var(--kiosk-surface-2)!important;
  color:var(--kiosk-text-strong)!important;
  border:2px solid var(--kiosk-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.kiosk-pin-label input:focus{
  border-color:var(--kiosk-primary)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--kiosk-primary) 18%,transparent)!important;
}
.kiosk-photo-btn{
  color:var(--kiosk-text)!important;
  background:var(--kiosk-surface-2)!important;
  border-color:var(--kiosk-line)!important;
}
.kiosk-photo-name{color:var(--kiosk-muted)!important;opacity:1!important}
.kiosk-punch-button{
  background:linear-gradient(135deg,var(--kiosk-primary),var(--kiosk-primary-2))!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(20,119,223,.22)!important;
}
.kiosk-punch-button:disabled{
  opacity:1!important;
  background:#aebdca!important;
  color:#eef3f7!important;
  box-shadow:none!important;
}
html.dc-dark .kiosk-punch-button:disabled,
html[data-theme="dark"] .kiosk-punch-button:disabled{background:#36526c!important;color:#8fa4b8!important}
.kiosk-error{color:#a3172d!important;background:#fff0f3!important;border-color:#f1a6b2!important}
html.dc-dark .kiosk-error,html[data-theme="dark"] .kiosk-error{color:#ffdce2!important;background:#451d28!important;border-color:#7d3447!important}

/* Confirmacion: un solo foco visual */
.kiosk-success{
  width:min(590px,calc(100% - 40px));
  margin:54px auto!important;
  padding:46px 28px!important;
  border-radius:30px;
  background:var(--kiosk-surface)!important;
  color:var(--kiosk-text)!important;
  border:1px solid var(--kiosk-line)!important;
  box-shadow:var(--kiosk-shadow)!important;
}
.kiosk-success-icon{
  background:var(--kiosk-success)!important;
  color:#fff!important;
  box-shadow:0 12px 30px color-mix(in srgb,var(--kiosk-success) 28%,transparent);
}
.kiosk-success h1{color:var(--kiosk-text-strong)!important;font-weight:950!important}
.kiosk-success h2{color:var(--kiosk-muted)!important;opacity:1!important}
.kiosk-success strong{color:var(--kiosk-text-strong)!important}
.kiosk-success p{color:var(--kiosk-text)!important}
.kiosk-success small{color:var(--kiosk-muted)!important;opacity:1!important}

/* Modal de salida coherente con ambos temas */
.kiosk-exit-lock{background:rgba(4,13,23,.72)!important;backdrop-filter:blur(7px)}
.kiosk-exit-card{
  background:var(--kiosk-surface)!important;
  color:var(--kiosk-text)!important;
  border:1px solid var(--kiosk-line)!important;
  box-shadow:var(--kiosk-shadow)!important;
}
.kiosk-exit-card h2{color:var(--kiosk-text-strong)!important}
.kiosk-exit-card input{background:var(--kiosk-surface-2)!important;color:var(--kiosk-text-strong)!important;border-color:var(--kiosk-line)!important}

/* Pantalla grande / TV */
@media(min-width:1200px){
  .kiosk-person-grid{max-width:1160px!important}
  .kiosk-person{min-height:265px!important}
  .kiosk-welcome h1{font-size:2.45rem!important}
}

/* Tablet / movil */
@media(max-width:900px){
  .kiosk-top{padding:12px 10px!important}
  .kiosk-clock{font-size:1.65rem!important}
  .kiosk-person{min-height:245px!important}
}
@media(max-width:620px){
  .kiosk-fullscreen-1059{padding-left:12px!important;padding-right:12px!important}
  .kiosk-top{gap:10px!important}
  .kiosk-top>div:first-child{display:none!important}
  .kiosk-clock{font-size:1.45rem!important}
  .kiosk-welcome{padding:24px 6px 14px!important}
  .kiosk-welcome h1{font-size:1.8rem!important}
  .kiosk-person-grid{margin-bottom:30px!important}
  .kiosk-punch-panel{margin:18px auto!important;padding:20px!important}
  .kiosk-success{margin:28px auto!important;padding:36px 18px!important}
  .kiosk-success strong{font-size:2.35rem!important}
}