/* ---------------- Asistencia: calendario de turnos, rotaciones, privacidad del rostro e indicadores ----------------
   docs/asistencia.md. Solo tokens de la casa: cielo azul + pastel, colores sólidos, sin degradados.
   Prefijo at-. */

.at-paraque { color: var(--color-text-muted); margin: .25rem 0 .75rem; max-width: 80ch; line-height: 1.5; }
.at-pestanas { width: fit-content; max-width: 100%; }
.at-seccion h2 { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.at-vacio { display: flex; gap: .9rem; align-items: center; }
.at-vacio .icono-color { flex: none; }

/* Los colores de los horarios: pastel sólido con su tinta. El 0 es el General. */
.at-c0 { background: var(--sec-org-bg); color: var(--color-text); }
.at-c1 { background: var(--sec-mi-bg); color: var(--sec-mi); }
.at-c2 { background: var(--color-success-bg); color: var(--color-success-tinta); }
.at-c3 { background: var(--nota); color: var(--nota-tinta); }
.at-c4 { background: var(--sec-plataforma-bg); color: var(--color-revision-tinta); }
.at-c5 { background: var(--sec-rrhh-bg); color: var(--color-warning-tinta); }
.at-c6 { background: var(--sec-supervision-bg); color: var(--sec-supervision); }
.at-c7 { background: var(--color-danger-bg); color: var(--color-danger-tinta); }
.at-libre { background: var(--color-surface-2); color: var(--color-text-soft); border: 1px dashed var(--color-border-strong); }

.at-chip {
  display: inline-flex;
  align-items: center;
  padding: .15rem .6rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
}
.at-marca { font-size: .8rem; color: var(--color-text-muted); white-space: nowrap; }

/* ---- Controles del calendario ---- */
.at-controles { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; margin-bottom: .75rem; }
.at-navegar { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.at-rango { margin-left: .35rem; }
.at-opcion small { flex: 1 1 160px; }
.at-filtro { min-width: 220px; flex: 1 1 220px; max-width: 320px; }
.at-buscar { max-width: 240px; }
.at-leyenda { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-bottom: .6rem; }
.at-varios { display: flex; gap: .5rem; align-items: center; font-size: .9rem; color: var(--color-text-muted); margin: .25rem 0; }

/* ---- La cuadrícula ---- */
.at-cal-card { padding-left: .5rem; padding-right: .5rem; }
.at-cal-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.at-cal { border-collapse: separate; border-spacing: 3px; min-width: 100%; }
.at-cal thead th { font-size: .78rem; font-weight: 700; color: var(--color-text-muted); text-align: center; padding: .25rem .1rem; border-radius: 8px; }
.at-cal thead th.at-hoy { background: var(--color-primary-light); color: var(--color-primary); }
.at-cal thead th.at-feriado { color: var(--color-warning-tinta); }
.at-cal thead th.at-pasado { opacity: .7; }
.at-dia-nombre { display: block; font-weight: 600; }
.at-dia-num { display: block; font-size: 1rem; color: var(--color-text); }
.at-cal th.at-cal-persona {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-surface);
  text-align: left;
  min-width: 160px;
  max-width: 210px;
  padding: .3rem .5rem .3rem .25rem;
  font-size: .88rem;
  line-height: 1.25;
}
.at-cal th.at-cal-persona small { display: block; color: var(--color-text-soft); font-weight: 500; font-size: .75rem; margin-top: .1rem; }
.at-cal td { padding: 0; vertical-align: top; }
.at-celda {
  width: 100%;
  min-width: 78px;
  min-height: 54px;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: .3rem .4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-align: left;
  font: inherit;
  font-size: .76rem;
  line-height: 1.2;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.at-celda:hover:not(:disabled) { box-shadow: var(--elev-1); }
.at-celda:active:not(:disabled) { transform: scale(.97); }
.at-celda:disabled { cursor: default; opacity: .72; }
.at-celda-nombre { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.at-celda-horas { font-variant-numeric: tabular-nums; }
.at-celda-extra { font-size: .7rem; font-weight: 600; }
.at-celda.at-ajuste { border: 2px solid currentColor; }
.at-celda.at-elegida { box-shadow: 0 0 0 3px var(--color-primary); }
.at-cal-mes .at-celda { min-width: 60px; min-height: 48px; font-size: .7rem; }
.at-cal-mes .at-celda-extra { display: none; }

/* ---- El panel para ajustar días ---- */
.at-panel {
  position: sticky;
  bottom: calc(.75rem + env(safe-area-inset-bottom));
  z-index: 5;
  max-width: 680px;
  margin-top: .75rem;
  box-shadow: var(--elev-3);
}
.at-panel-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.at-panel-cabecera h2 { font-size: 1.05rem; margin: 0 0 .4rem; text-transform: none; }
.at-panel-ahora { margin: 0 0 .6rem; color: var(--color-text-muted); }
.at-opciones { border: none; padding: 0; margin: 0 0 .6rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.at-opciones legend { font-weight: 700; margin-bottom: .35rem; padding: 0; }
.at-opcion { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.at-opcion small { color: var(--color-text-soft); }

/* ---- Rotaciones ---- */
.at-rotaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; }
.at-rotacion header { display: flex; align-items: center; gap: .5rem; justify-content: space-between; }
.at-rotacion h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.at-inactiva { opacity: .75; }
.at-editor h3 { margin-top: 0; }
.at-plantillas { align-items: center; margin-bottom: .75rem; }
.at-plantilla-horario { max-width: 220px; }
.at-pasos { list-style: none; padding: 0; margin: 0 0 .5rem; display: flex; flex-direction: column; gap: .4rem; }
.at-paso { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.at-paso select { flex: 1 1 180px; max-width: 280px; }
.at-paso-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-primary-light); color: var(--color-primary);
  font-weight: 700; font-size: .8rem; flex: none;
}
.at-paso-dias { width: 76px; }
.at-tira { display: flex; flex-wrap: wrap; gap: 3px; margin: .25rem 0 .6rem; }
.at-tira-dia {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.at-tira-chica .at-tira-dia { width: 22px; height: 22px; font-size: .65rem; }
.at-asignar-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 .9rem; }
.at-personas { list-style: none; padding: 0; margin: 0 0 .75rem; max-height: 420px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.at-personas li { padding: .45rem .7rem; border-bottom: 1px solid var(--color-border); }
.at-personas li:last-child { border-bottom: none; }
.at-personas label { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; }
.at-personas small { display: block; }

/* ---- Importar ---- */
.at-pasos-importar { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .75rem; line-height: 1.45; }
.at-importar td { vertical-align: top; }
.at-fila-error td { background: var(--color-danger-bg); }
.at-estado { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.at-ok { background: var(--color-success-bg); color: var(--color-success-tinta); }
.at-mal { background: transparent; color: var(--color-danger-tinta); padding-left: 0; white-space: normal; }

/* ---- Consentimiento del rostro y privacidad ---- */
.at-consentimiento {
  background: var(--sec-mi-bg);
  border-radius: var(--radius-sm);
  padding: .8rem .9rem;
  margin-bottom: .9rem;
  text-align: left;
}
.at-consentimiento-titulo { display: flex; align-items: center; gap: .45rem; font-weight: 700; margin: 0 0 .5rem; }
.at-consentimiento-texto {
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  padding: .7rem .8rem;
  font-size: .88rem;
  line-height: 1.5;
  margin-bottom: .6rem;
}
.modal-box .at-consentimiento-texto { max-height: 60vh; }
.at-consentimiento-acepto { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; cursor: pointer; margin-bottom: .35rem; }
.at-consentimiento-acepto input { width: 20px; height: 20px; flex: none; margin-top: .1rem; }
.at-legal { max-width: 80ch; }
.at-privacidad { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .9rem; align-items: start; }
.at-privacidad h2, .at-seccion-card h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; }
.at-texto-consentimiento { font-size: .9rem; line-height: 1.5; resize: vertical; }
.at-numero { width: 96px; }
.at-lista { list-style: none; margin: 0 0 .75rem; padding: 0; }
.at-lista li { padding: .5rem 0; border-bottom: 1px solid var(--color-border); }
.at-lista li:last-child { border-bottom: none; }
.at-lista small { display: block; }
.at-aceptacion { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; justify-content: space-between; }
.at-aceptacion > span:first-child { flex: 1 1 260px; }

/* ---- Indicadores ---- */
.at-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; }
.at-kpis .kpi-card { display: flex; flex-direction: column; gap: .25rem; }
.at-kpis .kpi-etiqueta { margin: 0; font-size: .85rem; }
.at-kpi-explica { margin: .35rem 0 0; font-size: .8rem; color: var(--color-text-muted); line-height: 1.4; }
.at-comparacion { display: block; font-size: .8rem; font-weight: 700; margin-top: .1rem; }
.at-tono-bueno { color: var(--color-success-tinta); }
.at-tono-malo { color: var(--color-danger-tinta); }
.at-tono-neutro { color: var(--color-text-soft); font-weight: 600; }
.at-h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; margin-bottom: .2rem; }
.at-tabla-ind { min-width: 820px; }  /* en el teléfono se desliza dentro de su tarjeta */
.at-tabla-ind td { vertical-align: top; }
.at-ind-doble { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .9rem; align-items: start; }
.at-tendencia { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.at-mes { display: block; font-weight: 700; margin-bottom: .15rem; }
.at-mes::first-letter { text-transform: uppercase; }
.at-barra-fila { display: grid; grid-template-columns: 92px 1fr 64px; gap: .5rem; align-items: center; font-size: .8rem; }
.at-barra-etiqueta { color: var(--color-text-muted); }
.at-barra { height: 12px; border-radius: 999px; background: var(--color-surface-2); overflow: hidden; border: 1px solid var(--color-border); }
.at-barra-relleno { display: block; height: 100%; border-radius: 999px; }
.at-barra-buena { background: var(--color-success); }
.at-barra-mala { background: var(--color-warning); }
.at-barra-valor { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- Teléfono ---- */
@media (max-width: 640px) {
  .at-buscar, .at-filtro { max-width: none; flex: 1 1 100%; }
  .at-cal th.at-cal-persona { min-width: 112px; max-width: 128px; font-size: .8rem; }
  .at-celda { min-width: 70px; }
  .at-panel { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); max-height: 72vh; overflow-y: auto; margin: 0; }
  .at-rotaciones { grid-template-columns: 1fr; }
  /* Cada paso en dos renglones: el horario a lo ancho; debajo, los días y quitar. */
  .at-paso select { flex: 1 1 calc(100% - 40px); max-width: none; }
  .at-paso-dias { margin-left: 34px; }
  .at-privacidad { grid-template-columns: 1fr; }
}