/* ==========================================================================
   Gemba — estilos propios. La hoja base (base.css) trae el sistema Liquid
   Glass entero y no se toca: es idéntica en Gastos, Tareas y Rspiro.
   Aquí solo vive lo que esta app añade: el acordeón de paradas, la tríada
   Bien/Mal/N.A., el post-it, los chips de ficha, la biblioteca y el visor.
   ========================================================================== */

.oculto { display: none !important; }

/* La cabecera de Gemba apila título y barra de progreso, así que anula el
   `display: flex` de .cabecera y el contenido compensa su alto real. */
#contenido {
  padding: calc(env(safe-area-inset-top) + 116px) 16px
           calc(var(--barra-tabs-alto) + env(safe-area-inset-bottom) + 34px);
  max-width: 560px; margin: 0 auto;
}
/* Sin barra de progreso la cabecera mide menos: Fichas e Historial suben. */
#contenido.sin-barra { padding-top: calc(env(safe-area-inset-top) + 96px); }

.fondo { background: linear-gradient(160deg, #eef2ff 0%, #fdeef7 45%, #e8f7ff 100%); }
.orbe-1 { background: #a5b4ff; }
.orbe-2 { background: #f3b0e0; }
.orbe-3 { background: #a0e6ff; }

/* ---------- Login ---------- */
.vista-login {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 24px);
}
.login-tarjeta {
  width: 100%; max-width: 380px; padding: 36px 28px; text-align: center; margin: auto;
  opacity: 0;
}
.login-tarjeta.lista { opacity: 1; animation: aparecer 0.32s var(--salida); }
.login-logo {
  width: 88px; height: 88px; border-radius: 22px;
  margin: 0 auto 14px; display: block;
  border: 1px solid rgba(28, 28, 46, 0.07);
  box-shadow: 0 10px 24px -12px rgba(28, 28, 46, 0.28);
}
.login-tarjeta form { display: grid; gap: 14px; text-align: left; }

.pie-version {
  margin: 18px 0 4px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

/* Cabecera con progreso */
.cabecera-gemba { display: block; align-items: stretch;
                   padding: calc(env(safe-area-inset-top) + 12px) 20px 14px; }
.cabecera-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cabecera-gemba h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.cabecera-gemba .fecha { font-size: 15px; color: var(--tinta-suave); }
.contador { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.contador em { font-style: normal; color: var(--tinta-suave); font-weight: 600; }
.barra { height: 7px; border-radius: 999px; background: rgba(28,28,46,0.09); margin-top: 10px; overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 999px;
           background: linear-gradient(90deg, var(--acento), var(--acento-2)); }

/* Parada del acordeón */
.parada { margin-bottom: 12px; overflow: hidden; }
.parada-cab { display: flex; align-items: center; gap: 12px; width: 100%;
              padding: 14px 16px; background: none; border: 0; font: inherit;
              color: inherit; text-align: left; cursor: pointer; min-height: 56px; }
.parada-num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 999px;
              display: grid; place-items: center; font-size: 14px; font-weight: 700;
              background: rgba(91,108,255,0.14); color: var(--acento); }
.parada.hecha .parada-num { background: var(--exito); color: #fff; }
.parada-nombre { flex: 1 1 auto; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.parada-cuenta { font-size: 14px; font-weight: 600; color: var(--tinta-suave);
                 font-variant-numeric: tabular-nums; }
.parada.hecha .parada-cuenta { color: var(--exito); }
.galon { width: 18px; height: 18px; color: var(--tinta-suave); transition: transform .3s var(--muelle); }
.parada.abierta .galon { transform: rotate(180deg); }
.parada-cuerpo { padding: 2px 16px 6px; }

/* Pregunta */
.pregunta { padding: 14px 0; border-top: 1px solid rgba(28,28,46,0.08); }
.pregunta:first-child { border-top: 0; padding-top: 4px; }
.pregunta-texto { font-size: 16px; line-height: 1.35; margin-bottom: 12px; }
.triada { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.opcion { min-height: 46px; border-radius: var(--radio-boton); border: 1px solid rgba(28,28,46,0.10);
          background: rgba(255,255,255,0.5); font: inherit; font-size: 15px; font-weight: 600;
          color: var(--tinta-suave); cursor: pointer;
          transition: transform .3s var(--muelle); }
.opcion:active { transform: scale(0.97); }
.opcion.sel-bien { background: var(--exito); border-color: transparent; color: #fff;
                   box-shadow: 0 8px 18px -10px rgba(52,199,89,0.8); }
.opcion.sel-mal  { background: var(--peligro); border-color: transparent; color: #fff;
                   box-shadow: 0 8px 18px -10px rgba(255,59,48,0.8); }
.opcion.sel-na   { background: rgba(28,28,46,0.14); border-color: transparent; color: var(--tinta); }

/* Chip de ficha */
.fichas-linea { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ficha-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px;
              padding: 0 12px; border-radius: 999px; border: 1px solid rgba(91,108,255,0.22);
              background: rgba(91,108,255,0.10); color: var(--acento);
              font-size: 13px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; }
.ficha-chip svg { width: 14px; height: 14px; }
.ficha-chip.vacia { color: var(--tinta-suave); border-color: rgba(28,28,46,0.12);
                    background: rgba(28,28,46,0.05); }

/* Post-it */
.postit { margin-top: 12px; border-radius: var(--radio-campo); padding: 12px 14px;
          background: linear-gradient(160deg, rgba(255,214,10,0.22), rgba(255,190,10,0.13));
          border: 1px solid rgba(196,150,0,0.28); }
.postit-cab { display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
              font-size: 13px; font-weight: 700; color: #7a5c00; letter-spacing: 0.01em; }
.postit textarea { width: 100%; border: 0; background: transparent; resize: none;
                   font: inherit; font-size: 17px; line-height: 1.35; color: var(--tinta);
                   min-height: 62px; outline: none; }

/* Biblioteca de fichas */
.familia { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
           color: var(--tinta-suave); margin: 20px 6px 8px; }
.ficha-fila { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
              margin-bottom: 8px; min-height: 58px; }
.ficha-icono { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; display: grid;
               place-items: center; background: rgba(91,108,255,0.12); color: var(--acento); }
.ficha-icono.gris { background: rgba(28,28,46,0.07); color: var(--tinta-suave); }
.ficha-icono svg { width: 18px; height: 18px; }
.ficha-datos { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.ficha-cod { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.ficha-desc { font-size: 13px; color: var(--tinta-suave); overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
.pastilla { flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.pastilla.ok { background: rgba(52,199,89,0.16); color: #1c7a35; }
.pastilla.no { background: rgba(28,28,46,0.07); color: var(--tinta-suave); }

/* Historial */
.hallazgo { padding: 13px 16px; margin-bottom: 8px; display: grid; gap: 5px; }
.hallazgo-donde { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
                  letter-spacing: 0.04em; text-transform: uppercase; color: var(--peligro); }
.hallazgo-punto { width: 7px; height: 7px; border-radius: 999px; background: var(--peligro); }
.hallazgo-preg { font-size: 14px; color: var(--tinta-suave); line-height: 1.3; }
.hallazgo-nota { font-size: 16px; line-height: 1.35; }
.recorrido-fila { display: flex; align-items: center; gap: 12px; padding: 15px 16px; margin-bottom: 10px; }
.recorrido-fecha { flex: 1 1 auto; display: grid; gap: 3px; }
.recorrido-fecha strong { font-size: 16px; font-weight: 600; }
.recorrido-fecha small { font-size: 13px; color: var(--tinta-suave); }
.marca { flex: 0 0 auto; text-align: right; display: grid; gap: 2px; }
.marca b { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--peligro); }
.marca small { font-size: 11px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .05em; }

/* Hoja del visor de ficha */
.hoja-ficha { max-height: 88dvh; display: flex; flex-direction: column; }
.hoja-ficha-cab { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.hoja-ficha-cab h2 { margin: 0; }
.hoja-ficha-cab .texto-ayuda { margin-top: 3px; }
.pagina { border-radius: 12px; overflow: hidden; border: 1px solid rgba(28, 28, 46, 0.10);
          background: #fff; box-shadow: 0 8px 20px -14px rgba(28, 28, 46, 0.5);
          margin-bottom: 12px; }
/* La página se trae a 1241 px de ancho y aquí caben 386: se ajusta al hueco y
   el detalle se saca con el pellizco, que es para lo que se dejó el zoom. */
.pagina img { display: block; width: 100%; height: auto; }
.pagina-etiqueta { font-size: 12px; color: var(--tinta-suave); text-align: center; margin-bottom: 16px; }
/* representación esquemática de una FTT */
.ftt { font-size: 6px; line-height: 1.25; color: #1c3f6e; padding-bottom: 10px; }
.ftt-barra { background: #0b5cab; color: #fff; padding: 6px 8px; display: flex;
             justify-content: space-between; font-weight: 700; font-size: 8px; }
.ftt-cuerpo { padding: 8px; }
.ftt-tit { font-size: 11px; font-weight: 700; color: #0b5cab; margin-bottom: 6px; }
.ftt-sec { background: #d9f27a; display: inline-block; padding: 1px 6px; border-radius: 2px;
           font-weight: 700; font-size: 7px; color: #1c3f6e; margin-bottom: 4px; }
.ftt-lineas { display: grid; gap: 3px; margin-bottom: 8px; }
.ftt-lineas i { display: block; height: 3px; border-radius: 2px; background: #cfe0f2; }
.ftt-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.ftt-paso { border: 1px solid #cfe0f2; border-radius: 3px; padding: 4px; display: grid; gap: 3px; }
.ftt-paso b { font-size: 6px; color: #0b5cab; }
.ftt-foto { height: 26px; border-radius: 2px; background: linear-gradient(140deg,#c9d6e5,#e8eef5); }
.ftt-nota { height: 12px; border-radius: 2px; background: #fbf7cf; }
.ftt-epi { display: flex; align-items: flex-end; gap: 7px; margin: 6px 0 8px; }
.ftt-epi > div { display: grid; justify-items: center; gap: 2px; }
.ftt-epi b { font-size: 5px; font-weight: 600; color: #4a6c92; }
.ftt-epi-i { width: 16px; height: 16px; border-radius: 3px;
             background: linear-gradient(140deg,#d3dfec,#eef3f8); }
.ftt-epi-sep { width: 1px; align-self: stretch; border-left: 1px dashed #9fc0dd; }
.ftt-operativa { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 8px; margin-bottom: 8px; }
.ftt-operativa > div { display: grid; gap: 2px; }
.ftt-operativa b { font-size: 5.5px; color: #0b5cab; border-bottom: 1px solid #cfe0f2; padding-bottom: 1px; }
.ftt-operativa i { display: block; height: 2.5px; border-radius: 2px; background: #cfe0f2; }
.ftt-tiempo { font-size: 7px; font-weight: 700; color: #1c3f6e; }
.ftt-pasos { grid-template-columns: repeat(5, 1fr); }
.ftt-colores { display: flex; gap: 4px; margin-top: 4px; }
.ftt-colores span { flex: 1; height: 12px; border-radius: 2px; }

/* Inicio sin recorrido */
.inicio { min-height: calc(100dvh - var(--barra-tabs-alto) - 40px); display: grid;
          align-content: center; justify-items: center; text-align: center; padding: 0 24px; gap: 8px; }
.inicio-icono { width: 92px; height: 92px; border-radius: 30px; display: grid; place-items: center;
                background: linear-gradient(150deg, var(--acento), var(--acento-2));
                color: #fff; box-shadow: 0 22px 44px -20px rgba(91,108,255,0.85); margin-bottom: 18px; }
.inicio-icono svg { width: 44px; height: 44px; }
.inicio p { font-size: 15px; color: var(--tinta-suave); line-height: 1.45; max-width: 30ch; }
.inicio .boton-primario { margin-top: 22px; width: 100%; max-width: 320px; }

/* Una página que no se pudo traer: mejor un hueco con marca que un icono roto */
.pagina-rota { min-height: 120px; display: grid; place-items: center;
               background: rgba(28, 28, 46, 0.05); }
.pagina-rota::after { content: "No se pudo cargar la página";
                      font-size: 13px; color: var(--tinta-suave); }