/* =============================================================================
   clara.css — la disposición de la pantalla de Clara (copia de la maqueta)
   =============================================================================
   Solo layout: colores con los tokens de escala.css y tamaños de letra con sus clases
   (es-titulo-pagina, es-subtitulo, es-nombre, es-detalle, es-seccion…). El sistema visual
   no admite colores, tamaños ni tipografías propios (apps/shared/sistema_visual.test.js). */

.cl-principal { max-width: 1248px; }
.cl-pagina { gap: 28px; }
.cl-charla { max-width: 920px; gap: 20px; }

/* ── iconos y numeritos ── */
.cl-svg { display: block; flex: none; }
.cl-ico-caja { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--es-accion-fondo); color: var(--es-nota); display: inline-flex; align-items: center; justify-content: center; }
.cl-ico-caja--verde { background: var(--es-verde-fondo); color: var(--es-verde); }
.cl-ico-caja--grande { width: 52px; height: 52px; border-radius: 12px; }
.cl-ico-caja--punteada { background: var(--es-fondo); border: 1px dashed var(--es-punteado); }
.cl-ico-rotulo { color: var(--es-rotulo); display: inline-flex; }
.cl-num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--es-verde); color: var(--es-fondo); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.cl-num--suave { background: var(--es-verde-fondo); color: var(--es-verde); width: 40px; height: 40px; }
.cl-num--lleno { width: 40px; height: 40px; }

/* ── saludo ── */
.cl-hola { display: flex; align-items: center; gap: 18px; }
.cl-logo { flex: none; box-sizing: content-box; width: 40px; height: 50px; padding: 7px 12px; border-radius: 16px; background: var(--es-tinta); }
.cl-hola-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cl-como { flex-direction: row; align-items: flex-start; gap: 14px; }
.cl-como-texto, .cl-seccion-texto, .cl-guia-texto, .cl-resp-textos, .cl-aviso-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* ── campo de pregunta ── */
.cl-form { gap: 10px; padding: 20px 24px; }
.cl-fila-campo { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-campo-envuelto { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; }
.cl-campo-envuelto--lupa { gap: 10px; border: 1px solid var(--es-borde); border-radius: 10px; padding: 0 14px; background: var(--es-fondo); }
.cl-campo-envuelto--lupa:focus-within { outline: 2px solid var(--es-foco); outline-offset: 1px; border-color: var(--es-foco); }
.cl-campo-envuelto--lupa .es-input { border: 0; padding-left: 0; padding-right: 0; outline: none; }
.cl-campo-envuelto--lupa .es-input:focus { outline: none; }
.cl-btn-ancho { padding-left: 24px; padding-right: 24px; }
.cl-btn-ico { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }

/* ── chips y secciones del inicio ── */
.cl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cl-pildora { color: var(--es-verde); background: var(--es-verde-fondo); border-color: var(--es-verde-borde); text-align: left; white-space: normal; }
.cl-bloque { display: flex; flex-direction: column; gap: 14px; }
.cl-secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cl-seccion { font: inherit; color: var(--es-tinta); text-align: left; cursor: pointer; background: var(--es-fondo); border: 1px solid var(--es-linea); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-height: var(--es-alto); }
.cl-seccion--activa { border: 2px solid var(--es-verde); padding: 17px 19px; }
.cl-seccion--fila { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.cl-seccion:focus-visible, .cl-frecuente:focus-visible, .cl-guia:focus-visible { outline: 2px solid var(--es-foco); outline-offset: 2px; }
.cl-seccion-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cl-enlace { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--es-verde); }
.cl-frecuentes { gap: 0; }
.cl-frecuentes .es-seccion { padding-bottom: 6px; }
.cl-frecuente { font: inherit; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: var(--es-fondo); color: var(--es-tinta); border: 0; border-top: 1px solid var(--es-sep); padding: 14px 0; min-height: 52px; cursor: pointer; }

/* ── la charla ── */
.cl-burbuja { align-self: flex-end; max-width: 75%; margin: 0; background: var(--es-tinta); color: var(--es-fondo); border-radius: 14px 14px 4px 14px; padding: 12px 16px; line-height: 1.45; overflow-wrap: anywhere; }
.cl-respuesta { gap: 20px; }
.cl-resp-cab, .cl-cab-linea, .cl-seccion-cab-grande { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cl-seccion-cab-grande { flex-direction: row; align-items: center; }
.cl-borde-verde { border: 2px solid var(--es-verde); padding: 21px 23px; }
.cl-resp-titulo { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.cl-resp-cab > .cl-resp-titulo, .cl-seccion-cab-grande > .cl-resp-titulo { flex: 1 1 380px; }   /* el ancho, solo en filas */
.cl-cab-linea { align-items: center; }
.cl-cab-linea > .cl-resp-titulo { flex: 1 1 auto; align-items: center; }
.cl-chips-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cl-paso { display: flex; gap: 20px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--es-sep); }
.cl-paso .es-parrafo { padding-top: 6px; min-width: 0; }
.cl-antes { gap: 6px; }
.cl-antes-lista { margin: 0; padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 4px; }
.cl-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--es-sep); }
.cl-feedback .es-label { margin-right: 6px; }
.cl-btn-marcado[aria-pressed="true"] { color: var(--es-fondo); background: var(--es-tinta); border-color: var(--es-tinta); opacity: 1; }
.cl-aviso { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.cl-aviso .cl-aviso-texto { flex: 1 1 320px; }
.cl-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--es-sep); }
.cl-al-final { margin-left: auto; }
.cl-preparacion { flex-direction: column; align-items: stretch; gap: 16px; padding: 24px; background: var(--es-fondo); }
.cl-guia { font: inherit; color: var(--es-tinta); text-align: left; cursor: pointer; flex-direction: row; align-items: center; gap: 16px; min-height: 72px; padding: 18px 20px; width: 100%; }
.cl-guia .cl-guia-texto { flex: 1 1 auto; }

/* «Buscando la guía…»: tres renglones que respiran (sin movimiento si la persona lo pidió). */
.cl-brillo { display: flex; flex-direction: column; gap: 12px; }
.cl-brillo span { display: block; height: 14px; border-radius: 7px; background: var(--es-accion-fondo); animation: cl-respira 1.4s ease-in-out infinite; }
.cl-brillo span:nth-child(1) { width: 62%; }
.cl-brillo span:nth-child(2) { width: 48%; animation-delay: .2s; }
.cl-brillo span:nth-child(3) { width: 55%; animation-delay: .4s; }
@keyframes cl-respira { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .cl-brillo span, .cl-principal .es-girando { animation: none; }
}

/* ── celular (390 px): una columna, botones a todo el ancho (como la maqueta de celular) ── */
@media (max-width: 600px) {
  .cl-pagina { gap: 20px; }
  .cl-hola { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cl-como-lista, .cl-frecuentes { display: none; }   /* la maqueta de celular no los trae: el inicio va directo a preguntar */
  .cl-form { padding: 16px; }
  .cl-fila-campo .es-btn, .cl-resp-cab .es-btn { width: 100%; justify-content: center; min-height: 48px; }
  .cl-chips .es-pildoras { flex-direction: column; align-items: stretch; }
  .cl-pildora { border-radius: 12px; }
  .cl-secciones { grid-template-columns: 1fr; }
  .cl-burbuja { max-width: 85%; }
  .cl-paso { gap: 12px; padding: 16px 0; }
  .cl-feedback .es-btn { flex: 1 1 40%; justify-content: center; min-height: 48px; }
  .cl-al-final { margin-left: 0; width: 100%; }
}