/*
 * PWA del entrevistador. Tablet apaisada, en una residencia, de pie.
 *
 * Dos decisiones de fondo:
 *  - Objetivos táctiles grandes y contraste alto. Quien la usa está de pie,
 *    a veces con una mano, y la otra persona está esperando.
 *  - Fuentes del sistema: cero peticiones a dominios ajenos y cero dependencia
 *    de que la WiFi de la residencia tenga salida a internet.
 */

:root {
    --magenta: #c00888;
    --navy: #282060;
    --tinta: #1a1a2e;
    --apagado: #5b5b73;
    --borde: #d9d9e3;
    --fondo: #f6f6f9;
    --papel: #ffffff;
    --ok: #1a7f4b;
    --aviso: #b45309;
    --alerta: #b91c1c;
    --radio: 12px;
}

* { box-sizing: border-box; }

body.pwa {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--fondo);
    -webkit-text-size-adjust: 100%;
}

.cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: var(--navy);
    color: #fff;
}

.marca { font-weight: 700; letter-spacing: 0.02em; display: inline-flex; align-items: center; }
.marca .logo { height: 1.6rem; width: auto; display: block; }
.cabecera-derecha { display: flex; align-items: center; gap: 1rem; }
.usuario { font-size: 0.95rem; opacity: 0.85; }

.enlace {
    background: none;
    border: 0;
    color: #fff;
    text-decoration: underline;
    font: inherit;
    cursor: pointer;
    padding: 0.5rem;
}

.contenido { padding: 1.25rem; max-width: 1200px; margin: 0 auto; }

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }

.tarjeta {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.tarjeta-sesion { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tarjeta-sesion .quien { font-size: 1.15rem; font-weight: 600; }
.tarjeta-sesion .detalle { color: var(--apagado); font-size: 0.95rem; }

/* Botones: mínimo 48 px de alto. Se pulsan de pie y con prisa. */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: var(--radio);
    background: var(--magenta);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.boton:disabled { background: var(--borde); color: var(--apagado); cursor: not-allowed; }
.boton.secundario { background: var(--navy); }
.boton.neutro { background: #fff; color: var(--tinta); border: 1px solid var(--borde); }
.boton.peligro { background: var(--alerta); }
.boton.grande { min-height: 64px; font-size: 1.15rem; padding: 1rem 2rem; }

.etiqueta {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.etiqueta.ok { background: #e6f4ec; color: var(--ok); }
.etiqueta.aviso { background: #fdf3e3; color: var(--aviso); }
.etiqueta.alerta { background: #fdeaea; color: var(--alerta); }

/* ── Checklist previo ─────────────────────────────────────────────────── */
.lista-comprobacion { list-style: none; padding: 0; margin: 0; }
.lista-comprobacion li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--borde);
}
.lista-comprobacion li:last-child { border-bottom: 0; }
.lista-comprobacion input[type="checkbox"] { width: 26px; height: 26px; accent-color: var(--magenta); }

/* Vúmetro: descubrir al final que no se grabó bien es perder la sesión. */
.vumetro { height: 28px; background: #ececf2; border-radius: 999px; overflow: hidden; }
.vumetro-nivel { height: 100%; width: 0; background: var(--ok); transition: width 80ms linear; }
.vumetro-nivel.bajo { background: var(--aviso); }
.vumetro-nivel.saturado { background: var(--alerta); }

/* ── Sesión en curso ──────────────────────────────────────────────────── */
.sesion { display: grid; grid-template-columns: 1fr 340px; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .sesion { grid-template-columns: 1fr; } }

.barra-estado {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 1.25rem;
    background: var(--navy);
    color: #fff;
    border-radius: var(--radio);
    margin-bottom: 1rem;
}

.punto-rec {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--alerta); display: inline-block; margin-right: 0.4rem;
}
.grabando .punto-rec { animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.cronometro { font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 700; }

.guion { list-style: none; padding: 0; margin: 0; }
.guion li { padding: 0.5rem 0; display: flex; gap: 0.6rem; }
.guion li.cubierto { color: var(--apagado); text-decoration: line-through; }

.sensible {
    border-left: 4px solid var(--aviso);
    background: #fdf9f0;
    padding: 0.75rem 1rem;
    border-radius: 0 var(--radio) var(--radio) 0;
    margin-top: 0.75rem;
}

.sugerencias { list-style: none; padding: 0; margin: 0; }
.sugerencias li {
    background: #f4f0f8;
    border-left: 4px solid var(--magenta);
    padding: 0.75rem 1rem;
    border-radius: 0 var(--radio) var(--radio) 0;
    margin-bottom: 0.6rem;
}

.controles { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }

.sin-red {
    background: #fdf3e3;
    border: 1px solid #f0d9ae;
    color: var(--aviso);
    padding: 0.75rem 1rem;
    border-radius: var(--radio);
    margin-bottom: 1rem;
}

.pendientes { font-variant-numeric: tabular-nums; }

/* ── Formularios ──────────────────────────────────────────────────────── */
.campo { margin-bottom: 1rem; }
.campo label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.campo input {
    width: 100%;
    min-height: 52px;
    padding: 0.75rem 1rem;
    font: inherit;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #fff;
}
.campo input[inputmode="numeric"] { letter-spacing: 0.5em; font-size: 1.5rem; text-align: center; }
.error { color: var(--alerta); font-size: 0.95rem; margin-top: 0.35rem; }

.acceso { max-width: 420px; margin: 3rem auto; }
.apunte { color: var(--apagado); font-size: 0.9rem; }

/* ── Manual de uso ────────────────────────────────────────────────────── */
.manual { max-width: 820px; margin: 0 auto; }
.manual h2 { color: var(--navy); margin-top: 0; }
.manual h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; color: var(--magenta); }
.manual ul, .manual ol { padding-left: 1.25rem; }
.manual li { margin-bottom: 0.5rem; }
.manual code {
    background: #ececf2; padding: 0.1rem 0.4rem; border-radius: 5px;
    font-size: 0.9em;
}
.manual img.captura {
    display: block; width: 100%; margin: 0.75rem 0 1.25rem;
    border: 1px solid #d9d7e4; border-radius: 10px;
    box-shadow: 0 2px 10px rgba(40, 32, 96, 0.08);
}
.dudas dt { font-weight: 600; margin-top: 1rem; }
.dudas dd { margin: 0.25rem 0 0 0; color: var(--apagado); }

/* ── Fotos: la caja de zapatos y los disparadores ──────────────────────── */
.tira-fotos {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.25rem 0;
    -webkit-overflow-scrolling: touch;
}
.tira-fotos:empty { display: none; }

.tira-fotos img {
    height: 110px;
    width: auto;
    border-radius: 8px;
    border: 1px solid var(--borde);
    /* Una foto de una vida no se recorta para que cuadre la maqueta. */
    object-fit: contain;
    background: #ececf2;
}

.disparador { margin: 0; max-width: 200px; flex: 0 0 auto; }
.disparador figcaption {
    font-size: 0.8rem;
    color: var(--apagado);
    margin-top: 0.25rem;
    line-height: 1.25;
}

/* La que aún no ha subido: se ve, y se ve que le falta algo. */
.foto-en-cola { opacity: 0.55; filter: grayscale(0.6); }

details > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--navy);
    padding: 0.4rem 0;
}

/* ── Guion en dos niveles ──────────────────────────────────────────────── */
.cabecera-guion { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.cabecera-guion h2 { margin: 0; }

.conmutador { display: inline-flex; border: 1px solid #d8d4e2; border-radius: 999px; overflow: hidden; }
.conmutador button {
    border: 0; background: transparent; color: var(--navy);
    padding: 0.45rem 1rem; font-size: 1rem; cursor: pointer; min-height: 44px;
}
.conmutador button.activo { background: var(--magenta); color: #fff; }

/* El corto: pocas líneas y grandes, para leer de reojo. */
.guion-corto { margin: 0.5rem 0 0; padding-left: 1.4rem; font-size: 1.15rem; line-height: 1.5; }
.guion-corto li { padding: 0.35rem 0; }

.guion li label { flex: 1; cursor: pointer; }
.guion li.cubierto label { color: var(--apagado); text-decoration: line-through; }
.repreguntas { list-style: none; margin: 0.35rem 0 0; padding-left: 0.9rem; border-left: 2px solid #e6e2ee; }
.repreguntas li { font-size: 0.95rem; color: var(--apagado); padding: 0.15rem 0; }
.guion li.cubierto .repreguntas { display: none; }

/* Rótulo de tema, en los guiones que salen de un modelo de preguntas. */
.guion li.tema-del-guion {
    list-style: none; margin: 1rem 0 0.25rem; padding: 0;
    font-weight: 700; color: var(--magenta); font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.guion li.tema-del-guion:first-child { margin-top: 0; }

.consejos { margin-top: 0.75rem; }
.consejos summary { cursor: pointer; color: var(--navy); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.consejos ul { margin: 0.25rem 0 0; padding-left: 1.2rem; font-size: 0.95rem; color: var(--apagado); }

/* ── Lo que se va entendiendo (borrador en vivo) ──────────────────────── */
.borrador {
    max-height: 14rem; overflow-y: auto;
    background: #f7f6fa; border-radius: var(--radio);
    padding: 0.75rem 1rem; font-size: 1.05rem; line-height: 1.5;
    white-space: pre-wrap; color: var(--navy);
}
/* Por turnos: quien entrevista, más apagado; lo que importa es lo que cuenta la persona. */
.borrador p { margin: 0 0 0.5rem; }
.borrador p:last-child { margin-bottom: 0; }
.borrador .turno.de-entrevistador, .borrador .turno.de-tercero { color: var(--apagado); }

/* ── Fotos dentro del guion: las de la etapa de hoy ───────────────────── */
.fotos-de-hoy-titulo { margin: 0 0 .25rem; }
.disparador.de-hoy img { border: 2px solid var(--magenta); }
.fotos-en-guion {
    border-left: 4px solid var(--magenta);
    background: #f4f0f8;
    padding: 0.6rem 0.9rem;
    border-radius: 0 var(--radio) var(--radio) 0;
    margin-bottom: 0.75rem;
}
.fotos-en-guion .apunte { margin: 0 0 .4rem; }
.guion-corto li.con-fotos { color: var(--magenta); font-weight: 600; }

/* ── Guion vivo: lo que el guiado dice de cada bloque ─────────────────── */
.guion li.parece-cubierto .bloque-titulo { color: var(--apagado); }
.marca-vivo {
    display: inline-block; margin-left: .4rem; padding: 0 .5rem; border-radius: 999px;
    font-size: .8rem; background: #e8f5e9; color: #1b5e20; vertical-align: middle;
}
.guion li.siguiente { background: #fdf3fa; border-left: 4px solid var(--magenta); padding-left: .6rem; border-radius: 0 var(--radio) var(--radio) 0; }
.repreguntas li.en-vivo { color: var(--magenta); }
.repreguntas li.en-vivo::before { content: "en vivo · "; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.fotos-preguntas { margin-top: .4rem; }

/* ── Agenda del entrevistador ─────────────────────────────────────────── */
.aviso-ok { border-color: var(--ok); background: #f1f8f2; }
.dia-de-agenda h2 { margin: 1.25rem 0 .5rem; font-size: 1.1rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.dia-de-agenda h2.dia-pasado { color: var(--alerta); }
.campo input[type="search"], .campo input[type="datetime-local"] { width: 100%; padding: .75rem; font-size: 1.05rem; border: 1px solid var(--borde); border-radius: var(--radio); min-height: 48px; }
.mover-cita { margin-top: .6rem; border-top: 1px solid var(--borde); padding-top: .5rem; }
.mover-cita summary { cursor: pointer; color: var(--navy); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.form-mover { display: flex; flex-direction: column; gap: .75rem; margin-top: .5rem; }
.atajos { display: flex; gap: .5rem; flex-wrap: wrap; }
.atajo { display: flex; flex-direction: column; align-items: flex-start; min-height: 48px; }
.atajo .apunte { margin: 0; font-size: .8rem; }
.casilla { display: flex; gap: .5rem; align-items: center; cursor: pointer; min-height: 44px; }
.casilla input { width: 24px; height: 24px; accent-color: var(--magenta); }

/* ── Avisos de agenda y calendario ────────────────────────────────────── */
.avisos-agenda { border-color: var(--aviso); border-width: 2px; background: #fdf9f0; }
.avisos-agenda h2 { margin-top: 0; }
.avisos-agenda ul { margin: 0 0 .75rem; padding-left: 1.1rem; line-height: 1.6; }
.vistas-agenda { margin-bottom: 1rem; }
.vistas-agenda a { padding: .45rem 1rem; min-height: 44px; display: inline-flex; align-items: center; color: var(--navy); text-decoration: none; }
.vistas-agenda a.activo { background: var(--magenta); color: #fff; }
.calendario-cabecera { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.rejilla { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rejilla th { font-size: .8rem; color: var(--apagado); padding: .25rem 0; }
.rejilla td { border: 1px solid var(--borde); vertical-align: top; height: 4.2rem; padding: .2rem; overflow: hidden; }
.rejilla.semana td { height: 8rem; }
.rejilla td.fuera { background: #f7f6fa; color: var(--apagado); }
.rejilla td.es-hoy { outline: 2px solid var(--magenta); outline-offset: -2px; }
.rejilla .numero { display: block; font-size: .8rem; color: var(--apagado); }
.cita-mini { display: block; font-size: .78rem; line-height: 1.2; background: #f4f0f8; border-left: 3px solid var(--magenta); border-radius: 0 4px 4px 0; padding: .1rem .25rem; margin-top: .15rem; color: var(--navy); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cita-mini.pasada { border-left-color: var(--alerta); background: #fdf1f1; }

/* ── Tienda y área de cliente ─────────────────────────────────────────── */
.opcion { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem; border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: .5rem; cursor: pointer; }
.opcion input { width: 24px; height: 24px; accent-color: var(--magenta); flex: 0 0 auto; margin-top: .15rem; }
.opcion > span { display: flex; flex-direction: column; gap: .15rem; }
.opcion .precio { font-size: 1.25rem; font-weight: 700; color: var(--magenta); }
.compra details { margin: .5rem 0 1rem; } .compra summary { cursor: pointer; color: var(--navy); min-height: 44px; display: flex; align-items: center; }
.pasos { list-style: none; padding: 0; margin: 0; }
.paso { border: 1px solid var(--borde); border-left: 6px solid var(--borde); border-radius: var(--radio); padding: .25rem 1rem 1rem; margin-bottom: .75rem; background: #fff; }
.paso.toca { border-left-color: var(--magenta); }
.paso.hecho { border-left-color: var(--ok); color: var(--apagado); }
.paso h2 { margin: .75rem 0 .25rem; }
.datos { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: .75rem 0; }
.datos dt { color: var(--apagado); } .datos dd { margin: 0; }
.enlace-copiable { width: 100%; margin-top: .5rem; padding: .6rem; font-family: monospace; font-size: .8rem; border: 1px solid var(--borde); border-radius: var(--radio); }
.lista-simple { margin: 0; padding-left: 1.1rem; line-height: 1.8; }
.boton.peligro { background: var(--alerta); }

/* ── Rogelia pregunta (entrevista sin entrevistador) ──────────────────── */
.rogelia-pregunta { border: 2px solid var(--magenta); background: #fdf3fa; }
.pregunta-actual { font-size: 1.6rem; line-height: 1.35; font-weight: 600; color: var(--navy); margin: .5rem 0 1rem; }
@media (max-width: 600px) { .pregunta-actual { font-size: 1.35rem; } }

.opcion .muestra { font-style: italic; color: var(--navy); font-size: .95rem; }
.campo select { width: 100%; padding: .75rem; font-size: 1.05rem; border: 1px solid var(--borde); border-radius: var(--radio); min-height: 48px; background: #fff; }