/* ===== ISCOM Asistencia — Portal del empleado (kiosko) =====
 * Pensado primero para teléfono (360–430 px), después tableta y escritorio.
 * Todos los colores salen de tokens.css (misma paleta que la app de RH) y
 * responden al tema claro/oscuro. kiosko.js fija --primario y --secundario
 * por empresa en <html>; aquí sólo se consumen.
 *
 * Únicos colores fijos del portal: texto sobre fondos que NO cambian con el
 * tema (el color primario de la empresa y la cabecera oscura) y el fondo
 * blanco del logo, que se diseña para verse sobre blanco.
 */
:root {
  --sobre-oscuro: #fff;
  --fondo-logo: #fff;
}

html { background: var(--fondo); }
body {
  margin: 0;
  font: var(--tx-m)/var(--interlinea) var(--fuente);
  background: var(--fondo);
  color: var(--texto);
  -webkit-tap-highlight-color: transparent;
}

/* ===== Botón de tema: redondo y con borde en el portal ===== */
.btn-tema { border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); color: var(--texto-suave); }
.btn-tema .icono { width: 20px; height: 20px; }
/* En las pantallas de identificación el botón flota en la esquina; en el
   portal vive dentro de la cabecera, así que el flotante se esconde. */
.tema-flotante {
  position: fixed; z-index: 5;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
}
body:has(#pantallaPortal:not(.oculto)) .tema-flotante { display: none; }

/* ===== Pantalla de identificación (terminal compartida) ===== */
.pin-centro {
  min-height: 100vh; min-height: 100dvh; /* dvh: el botón Entrar sigue a la vista con el teclado abierto */
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.pin-caja {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-xl); box-shadow: var(--sombra-alta);
  padding: 30px 26px; width: 100%; max-width: 420px; text-align: center;
}
.pin-icono {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primario-suave); color: var(--primario-texto);
}
.pin-icono .icono { width: 28px; height: 28px; }
.pin-caja h1 { font-size: var(--tx-xl); margin: 0 0 4px; line-height: 1.25; }
.pin-caja .sub { color: var(--texto-suave); font-size: var(--tx-m); margin-bottom: 20px; }
.pin-caja label { display: block; text-align: left; font-size: var(--tx-s); font-weight: 600; color: var(--texto-suave); margin: 12px 0 4px; }
.pin-caja input {
  width: 100%; font-size: 22px; padding: 12px 14px; min-height: 52px;
  text-align: center; letter-spacing: 2px; font-variant-numeric: tabular-nums;
}
.pin-texto { font-size: var(--tx-m); text-align: left; line-height: 1.55; margin: 0 0 10px; }
.pin-caja .boton-bloque { margin-top: 18px; font-size: var(--tx-l); min-height: 48px; }
.pin-caja .nota { margin: 14px 0 0; }
.pin-error {
  background: var(--error-fondo); color: var(--error);
  border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
  border-radius: var(--radio); padding: 10px 12px; margin-top: 14px; font-size: var(--tx-m); text-align: left;
}

/* ===== Cabecera del portal ===== */
.cabecera {
  background: var(--lateral-fondo); color: var(--sobre-oscuro);
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left));
  min-height: var(--alto-barra);
}
.cabecera img { height: 38px; width: 38px; object-fit: contain; border-radius: var(--radio-s); background: var(--fondo-logo); padding: 2px; flex: none; }
.cabecera .quien { flex: 1; min-width: 0; }
.cabecera .quien .emp { font-size: var(--tx-xs); color: var(--lateral-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecera .quien .nom { font-size: var(--tx-l); font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecera-acciones { display: flex; align-items: center; gap: 8px; flex: none; }
/* Botones «fantasma» sobre la cabecera oscura: sólo un velo del texto lateral */
.cabecera .boton, .cabecera .btn-tema {
  background: var(--lateral-hover); color: var(--sobre-oscuro);
  border-color: color-mix(in srgb, var(--lateral-texto) 35%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .cabecera .boton:hover, .cabecera .btn-tema:hover { background: color-mix(in srgb, var(--lateral-texto) 25%, transparent); }
}

/* ===== Contenido ===== */
.contenido {
  max-width: 980px; margin: 0 auto; min-width: 0;
  padding: clamp(12px, 3vw, 24px) clamp(12px, 3vw, 20px) calc(48px + env(safe-area-inset-bottom));
}


.caja {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-xl); box-shadow: var(--sombra);
  padding: 16px; margin-bottom: 14px;
}
.caja h3 { font-size: var(--tx-l); margin: 0 0 12px; }
.caja .nota { margin: 10px 0 0; }
.caja .nota + .nota { margin-top: 4px; }

/* ===== Formularios: sólo lo particular del portal ===== */
.fila { margin-top: 0; align-items: flex-end; }
.fila + .fila { margin-top: 10px; }
.campo { flex: 1 1 140px; min-width: 0; }
.campo.corto { flex: 0 1 120px; max-width: none; }
.campo.ancho { flex: 1 1 220px; }
.campo.casilla { min-height: var(--alto-toque); }
.campo.casilla input { width: 20px; height: 20px; }

/* ===== Tablas: en el portal la envoltura no lleva marco ni tope de alto ===== */
.tabla-envoltura { border: none; border-radius: 0; max-height: none; background: transparent; }
.tabla-envoltura > table { font-size: var(--tx-m); }
/* El kiosko se lee de pie y a un brazo de distancia: los encabezados van en
   texto normal, no en versalitas de 11 px como en la app de escritorio. */
.tabla-envoltura > table th { background: transparent; position: static; border-bottom: 2px solid var(--borde); font-size: var(--tx-s); text-transform: none; letter-spacing: 0; }
.tabla-envoltura > table td { padding: 9px 10px; vertical-align: middle; }
td .boton { min-height: 34px; padding: 5px 10px; font-size: var(--tx-s); }
/* Folios, fechas y horas no se parten; sólo la columna de nota envuelve */
#tablaMisVac td, #tablaMiTiempo td { white-space: nowrap; }
#tablaMisVac td:nth-child(6), #tablaMiTiempo td:last-child { white-space: normal; min-width: 160px; }

/* ===== Texto y cifras ===== */
.suave { color: var(--texto-suave); font-size: var(--tx-s); }
.positivo { color: var(--ok); }
.negativo { color: var(--error); }
.metricas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 16px; margin: 4px 0 6px;
}
.metrica { min-width: 0; }
.metrica .grande { font-size: var(--tx-xxl); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.metrica .grande.destacado { font-size: 30px; }
/* La nota de una cifra («(0h 25m)», «+1h sin autorizar») va debajo, pequeña:
   dentro del número grande se partía en dos líneas en columnas angostas. */
.metrica .grande .suave { display: block; font-size: var(--tx-xs); font-weight: 500; line-height: 1.3; margin-top: 2px; }
.metrica .e { font-size: var(--tx-xs); color: var(--texto-suave); margin-top: 2px; }
.caja .metricas + .tabla-envoltura { margin-top: 12px; }


/* ===== Diálogo (cambio de contraseña): angosto ===== */
#dlgClave .modal { max-width: 380px; }
.modal .campo { margin-top: 10px; }

/* ===== Tableta (768–1023) ===== */
@media (min-width: 768px) {
  .caja { padding: 18px 20px; }
  .cabecera { padding-left: calc(22px + env(safe-area-inset-left)); padding-right: calc(22px + env(safe-area-inset-right)); }
}

/* ===== Teléfono chico (<480) ===== */
@media (max-width: 479px) {
  .pin-caja { padding: 26px 20px; }
  .cabecera { gap: 10px; }
  .cabecera img { height: 34px; width: 34px; }
  .cabecera .quien .nom { font-size: 16px; }
  .cabecera .boton { padding-left: 10px; padding-right: 10px; }
  .cabecera .boton .etiqueta { display: none; }  /* queda el icono; el title/aria-label lo explica */

  /* Filtro de checadas: fechas en dos columnas, Ver a lo ancho, atajos en dos columnas */
  .fila-filtro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fila-filtro .campo { min-width: 0; }
  .fila-filtro #btnChVer { grid-column: 1 / -1; }
  .fila-filtro .boton.suave { padding-left: 8px; padding-right: 8px; font-size: 14px; white-space: normal; }
  .fila > .boton.primario:not(#btnChVer) { flex: 1 1 100%; }

  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrica .grande { font-size: 22px; }
  .metrica .grande.destacado { font-size: 28px; }

  /* Checadas: una tarjeta por día en vez de siete columnas */
  #tablaChecadas thead { display: none; }
  #tablaChecadas, #tablaChecadas tbody { display: block; }
  #tablaChecadas tr {
    display: grid; grid-template-columns: 1fr 1.55fr 1fr 1fr; gap: 10px 6px; align-items: start;
    padding: 12px; margin-bottom: 8px;
    background: var(--superficie-2); border: 1px solid var(--borde-suave); border-radius: var(--radio-l);
  }
  #tablaChecadas tr:last-child { margin-bottom: 0; }
  #tablaChecadas td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; font-size: var(--tx-s); }
  #tablaChecadas td[data-etiqueta]::before {
    content: attr(data-etiqueta); display: block;
    font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    color: var(--texto-suave); margin-bottom: 2px;
  }
  #tablaChecadas td.c-fecha { grid-row: 1; grid-column: 1 / 3; font-size: var(--tx-m); font-weight: 600; align-self: center; }
  #tablaChecadas td.c-fecha::before { content: none; }
  #tablaChecadas td.c-estado { grid-row: 1; grid-column: 3 / -1; justify-self: end; text-align: right; align-self: center; }
  #tablaChecadas td.c-estado::before { content: none; }
  #tablaChecadas td.c-extra { grid-column: 1 / -1; }
  #tablaChecadas td.c-extra.vacio { display: none; }
  #tablaChecadas td[colspan] { grid-column: 1 / -1; }

}

/* El portal tiene tres pestañas cortas: aquí SÍ caben repartidas por igual y
   con su icono, así que se deshace la regla de teléfono de componentes.css
   (que las desplaza de lado y esconde el icono para las barras de seis). */
@media (max-width: 599px) {
  .pestanas { grid-auto-columns: minmax(0, 1fr); overflow-x: visible; }
  .pestanas button > .icono { display: block; }
}
/* Muy angosto (<400): en las pestañas el icono va encima de la etiqueta */
@media (max-width: 399px) {
  .pestanas button { flex-direction: column; gap: 2px; font-size: var(--tx-xs); padding: 6px 4px; }
  .pestanas button .icono { width: 1.4em; height: 1.4em; }
}


/* ===== Banner «Instalar el portal» (aparece cuando el navegador lo permite) ===== */
.banner-instalar {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio-l);
  box-shadow: var(--sombra-alta); font-size: var(--tx-s); line-height: 1.4;
}
.banner-instalar > .icono { width: 22px; height: 22px; color: var(--primario-texto); flex: none; }
.banner-instalar span { flex: 1; min-width: 0; }
@media (min-width: 640px) { .banner-instalar { left: auto; right: 16px; max-width: 460px; } }

/* Checadas adicionales del día en las columnas de hora (marcas-dia.js): la que no
 * entra al cálculo en gris, la sin pareja en ámbar, la anulada tachada. */
.mc-gris { color: var(--texto-suave, #777); font-weight: 400; }
.mc-otra { font-weight: 400; }
.mc-suelta { color: var(--aviso-texto, #b26a00); font-weight: 700; }
.mc-anulada { color: var(--texto-suave, #777); text-decoration: line-through; font-weight: 400; }
.mc-veces { font-size: .78em; margin-left: 2px; color: var(--texto-suave, #777); font-weight: 600; }
.mc-nota { font-size: .78em; color: var(--texto-suave, #777); font-weight: 400; }