/* Asistencia: el kiosco sin conexión y la bandeja «Para revisar» (as-*). Colores de los tokens del
   tema (cielo azul y pastel, sólidos), nada de degradados. El resto del kiosco vive en app.css. */

/* ---- Kiosco sin conexión ---- */

/* La banda bajo la cabecera: siempre a la vista mientras falte internet o queden marcas por subir. */
.kiosco-sin-conexion { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; padding: .7rem 1.5rem; background: var(--color-warning-bg); color: var(--color-text); border-bottom: 2px solid var(--color-warning); font-size: 1.05rem; }
.kiosco-sin-conexion strong { font-family: var(--font-titulo); font-size: 1.2rem; }
.kiosco-sin-conexion span { color: var(--color-text-soft); }
.kiosco-sin-conexion.subiendo { background: var(--color-info-bg); border-bottom-color: var(--color-info); }
.kiosco-chip-sin-conexion { display: inline-block; padding: .2rem .7rem; border-radius: 999px; background: var(--color-warning-bg); border: 1px solid var(--color-warning); color: var(--color-warning-tinta); font-weight: 700; font-size: .95rem; }
.kiosco-pie-problema { flex: 0 1 auto !important; color: var(--color-danger-tinta); font-weight: 600; }

@media (max-width: 640px) {
  .kiosco-sin-conexion { padding: .6rem 1rem; font-size: .95rem; }
  .kiosco-sin-conexion strong { font-size: 1.05rem; }
}

/* ---- Configuración → Kioscos: la conexión de cada tableta ---- */

.as-conexion { display: flex; flex-direction: column; gap: .1rem; }
.as-conexion small { color: var(--color-text-soft); }
.as-conexion-ok { color: var(--color-success-tinta); font-weight: 600; }
.as-conexion-sin { color: var(--color-warning-tinta); font-weight: 700; }
.as-conexion-nunca { color: var(--color-text-soft); }

/* ---- Para revisar: las fotos lado a lado ---- */

.as-vacio { margin: .25rem 0 0; padding: 1rem 1.25rem; border-radius: 16px; background: var(--color-success-bg); color: var(--color-success-tinta); font-weight: 600; }
.as-revisiones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 1rem; margin-top: .75rem; }
.as-revision { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: 20px; background: var(--color-surface); box-shadow: var(--elev-1, none); }
.as-revision-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.as-revision-cabeza small { flex-basis: 100%; }
.as-revision-tipo { padding: .15rem .65rem; border-radius: 999px; background: var(--color-warning-bg); color: var(--color-warning-tinta); font-weight: 700; font-size: .85rem; }
.as-revision-tipo.imposible { background: var(--color-danger-bg); color: var(--color-danger-tinta); }
.as-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.as-foto { margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.as-foto img, .as-foto-vacia { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--color-info-bg); }
.as-foto-vacia { display: flex; align-items: center; justify-content: center; padding: .5rem; text-align: center; color: var(--color-text-soft); font-size: .85rem; }
.as-foto figcaption { font-size: .85rem; color: var(--color-text-soft); text-align: center; }
.as-revision-detalle { margin: 0; }
.as-revision-botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.as-excepciones { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.as-excepciones li { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .55rem .8rem; border-radius: 14px; background: var(--color-bg); }

@media (max-width: 480px) {
  .as-revision-botones .btn { flex: 1 1 100%; }
}

/* ---- Prueba de vida en el kiosco: la barrita del reto, lo que conviene corregir y el modo calibración ---- */

/* La barrita se llena mientras la persona hace lo que se le pide (sólida, sin degradado). */
.kiosco-reto-barra { width: 100%; max-width: 360px; height: 14px; border-radius: 999px; background: var(--color-surface-2); border: 1px solid var(--color-border); overflow: hidden; }
.kiosco-reto-barra > span { display: block; height: 100%; background: var(--color-primary); border-radius: 999px; transition: width .2s ease-out; }
.kiosco-reto-tiempo { margin: 0; font-weight: 700; color: var(--color-text-soft); font-variant-numeric: tabular-nums; }
.kiosco-reto-pista { margin: 0; padding: .35rem .8rem; border-radius: 999px; background: var(--color-warning-bg); border: 1px solid var(--color-warning); color: var(--color-warning-tinta); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .kiosco-reto-barra > span { transition: none; } }

/* Modo calibración: el aviso arriba (nadie piensa que está marcando) y el código en el pie. */
.kiosco-calibrando { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .7rem 1.5rem; background: var(--color-info-bg); border-bottom: 2px solid var(--color-info); }
.kiosco-calibrando strong { font-family: var(--font-titulo); font-size: 1.15rem; }
.kiosco-calibrando span { flex: 1 1 320px; color: var(--color-text-soft); }
.kiosco-calibrar-codigo { display: inline-flex !important; flex: 0 1 auto !important; align-items: center; gap: .4rem; }
.kiosco-calibrar-codigo .form-control { width: 13rem; letter-spacing: .12em; text-transform: uppercase; }

.kc-panel { align-items: stretch; justify-content: flex-start; text-align: left; gap: .6rem; }
.kc-titulo { margin: 0; font-size: 1.3rem; }
.kc-para { margin: 0; color: var(--color-text-soft); font-size: .92rem; }
.kc-medidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.kc-medida { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .65rem; border-radius: var(--radius-sm); background: var(--color-surface-2); border: 1px solid var(--color-border); }
.kc-medida strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.kc-medida small { color: var(--color-text-soft); line-height: 1.3; }
.kc-medida.bien { background: var(--color-success-bg); border-color: var(--color-success); }
.kc-medida.mal { background: var(--color-warning-bg); border-color: var(--color-warning); }
.kc-etiqueta { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-soft); }
.kc-botones { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.kc-botones .kc-etiqueta, .kc-botones small { flex-basis: 100%; }
.kc-en-curso { display: flex; flex-direction: column; gap: .35rem; padding: .6rem .8rem; border-radius: var(--radius-sm); border: 2px solid var(--color-primary); }
.kc-resultados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; max-height: 40vh; overflow: auto; }
.kc-resultados li { padding: .45rem .7rem; border-radius: var(--radius-sm); border-left: 4px solid var(--color-border); background: var(--color-surface-2); }
.kc-resultados li.bien { border-left-color: var(--color-success); }
.kc-resultados li.mal { border-left-color: var(--color-danger); }
.kc-resultados small { display: block; color: var(--color-text-soft); line-height: 1.35; margin-top: .15rem; }

/* ---- Configuración → «Prueba de vida: calibración» ---- */
.cv-estadisticas { margin: .25rem 0 1rem; padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--color-primary-light); }
.cv-motivos { margin: .5rem 0 0; padding-left: 1.1rem; }
.cv-motivos li { margin: .15rem 0; }
.cv-motivos small { color: var(--color-text-soft); }
.cv-etiqueta { display: block; font-weight: 600; margin-bottom: .35rem; }
.cv-perfiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; max-width: 720px; }
.cv-perfil { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .8rem; border-radius: var(--radius-sm); border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.cv-perfil small { color: var(--color-text-soft); line-height: 1.3; }
.cv-perfil.activo { border-color: var(--color-primary); background: var(--color-primary-light); }
.cv-perfil:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.cv-avanzado { margin-top: .5rem; }
.cv-avanzado summary { cursor: pointer; font-weight: 600; }
.cv-valores { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem 1.25rem; margin-top: .75rem; }
.cv-valor { display: flex; flex-direction: column; gap: .25rem; }
.cv-valor input[type="range"] { width: 100%; }
.as-calibrar-codigo { display: inline-block; margin-top: .2rem; color: var(--color-text-soft); }

@media (max-width: 640px) {
  .cv-perfiles { grid-template-columns: 1fr; }
  .kiosco-calibrando { padding: .6rem 1rem; }
}