/* Tercer Oído · The World Is Mind Project
   Espacio de reflexión clínica para psicólogos del método Decir sin Romper.
   Hereda la estética de la app hermana (di-lo-que-quieres-decir/app.css) con
   identidad propia discreta: el beige es el acento principal, no el verde. */

:root {
  --green: #1f5a49;
  --green-dark: #174a3c;
  --green-deep: #11352b;
  --beige: #c7a587;
  --beige-dark: #aa8665;
  --beige-deep: #8a6748; /* acento principal de esta app (botones, hilos) */
  --beige-light: #decab6;
  --sand: #f7f4f0;
  --sand-dark: #ede8e2;
  --cream: #fdfcfa;
  --text: #2b2420;
  --text-soft: #6b6058;
  --text-muted: #9a8e84;
}

* { box-sizing: border-box; }

/* El atributo hidden manda SIEMPRE, aunque una clase declare display propio
   (sin esto, .btn[hidden] seguía visible: cazado en la captura del 9 ago). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--cream);
}

h1, h2, h3 {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  color: var(--green-deep);
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

a { color: var(--beige-deep); }
a:hover { color: var(--green-dark); }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Cabecera (primera pantalla · test de los 10 segundos) ---------- */
.cabecera {
  background: var(--green-deep);
  color: var(--cream);
  padding: 1.6rem 1.25rem 1.6rem;
  text-align: center;
  border-bottom: 4px solid var(--beige);
}
.cabecera-eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--beige-light);
  margin: 0 0 0.7rem;
}
.cabecera-logo {
  /* El símbolo va en verdes TWIM: sobre la cabecera oscura necesita su
     disco crema para leerse. Discreto, el primer viewport no lo paga. */
  display: block;
  width: 48px;
  height: 48px;
  padding: 7px;
  background: var(--cream);
  border-radius: 50%;
  margin: 0 auto 0.4rem;
}
.cabecera-titulo {
  color: var(--cream);
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  margin-bottom: 0.15rem;
}
.cabecera-porque {
  margin: 0 0 0.9rem;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--beige-light);
}
.cabecera-quees {
  max-width: 34rem;
  margin: 0 auto 0.3rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sand);
}
.cabecera-manana {
  max-width: 34rem;
  margin: 0 auto 0.65rem;
  font-size: 0.98rem;
  color: var(--beige-light);
}
.cabecera-orientacion {
  max-width: 34rem;
  margin: 0 auto 0.65rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--cream);
  border-top: 1px solid rgba(199, 165, 135, 0.45);
  border-bottom: 1px solid rgba(199, 165, 135, 0.45);
  padding: 0.45rem 0.6rem;
}
.plus-cabecera {
  max-width: 36rem;
  margin: 0 auto 0.65rem;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--sand);
}
.plus-cabecera strong { color: var(--beige-light); font-weight: 600; }
.aviso-privacidad {
  display: inline-block;
  max-width: 30rem;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
  color: var(--green-deep);
  background: var(--cream);
  border: 1px solid var(--beige);
  border-radius: 1.4rem;
  padding: 0.7rem 1.3rem;
  margin: 0 0 0.6rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}
.firma-cabecera {
  margin: 0.2rem auto 0.5rem;
  font-size: 0.92rem;
  color: var(--beige-light);
}
.firma-cabecera strong { color: var(--cream); }
.cabecera-encuadre {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  color: rgba(253, 252, 250, 0.75);
}
.cabecera-beta {
  display: inline-block;
  margin: 0.7rem auto 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--beige-light);
  border: 1px solid rgba(199, 165, 135, 0.6);
  border-radius: 1rem;
  padding: 0.25rem 0.9rem;
}

/* ---------- Indicador de fases ---------- */
.pasos-indicador { padding: 1rem 1rem 0; }
.pasos-indicador ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1rem;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 44rem;
  font-size: 0.84rem;
  color: var(--text-muted);
}
.pasos-indicador li { display: flex; align-items: center; gap: 0.35rem; }
.pasos-indicador li span {
  display: inline-flex;
  width: 1.35rem; height: 1.35rem;
  align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--beige);
  font-size: 0.75rem;
}
.pasos-indicador li.activo { color: var(--green-deep); font-weight: 600; }
.pasos-indicador li.activo span {
  background: var(--beige-deep);
  border-color: var(--beige-deep);
  color: var(--cream);
}

/* ---------- Fases ---------- */
main { max-width: 44rem; margin: 0 auto; padding: 1.2rem 1.25rem 2rem; }
.paso { padding: 1rem 0 1.4rem; }
.paso-ayuda { color: var(--text-soft); font-size: 0.97rem; margin: 0.3rem 0 0.9rem; }
textarea, input[type="text"] {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--sand-dark);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  resize: vertical;
}
textarea:focus, input[type="text"]:focus {
  outline: 2px solid var(--beige-dark);
  outline-offset: 1px;
  border-color: var(--beige-dark);
}
.campo { margin: 0.9rem 0; }
.contador-relato {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.35rem 0 0;
  text-align: right;
}
.contador-relato.pasado { color: #8f3b2c; font-weight: 600; }

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
}
.btn-principal {
  background: var(--beige-deep);
  color: var(--cream);
}
.btn-principal:hover { background: var(--green-dark); }
.btn-principal:disabled { background: var(--beige-light); color: var(--text-soft); cursor: not-allowed; }
.btn-secundario {
  background: var(--sand);
  color: var(--green-deep);
  border-color: var(--sand-dark);
}
.btn-secundario:hover { background: var(--sand-dark); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.1rem; align-items: center; }
.enlace-discreto {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.error-campo { color: #8f3b2c; font-size: 0.92rem; margin: 0.5rem 0 0; }

/* Entradas del relato (escribir · dictar · PDF), las tres al mismo rango */
.entradas-relato {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 0.6rem 0 0.2rem;
}
.btn-dictar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
.btn-dictar.grabando {
  background: var(--beige-light);
  border-color: var(--beige-dark);
  color: var(--green-deep);
}
.btn-secundario:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.nota-pdf { font-size: 0.85rem; color: var(--text-soft); margin: 0.4rem 0 0; }

/* Píldora del informe de una reflexión anterior (continuidad) */
.pildora-anterior {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0 0;
  padding: 0.35rem 0.9rem;
  background: var(--sand);
  border: 1px solid var(--beige);
  border-radius: 1.2rem;
  font-size: 0.88rem;
  color: var(--green-deep);
}
.pildora-quitar {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--beige-deep);
  text-decoration: underline;
  cursor: pointer;
}
.pildora-quitar:hover { color: var(--green-dark); }
.btn-microfono {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--green-deep);
  background: var(--sand);
  border: 1px solid var(--sand-dark);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  margin-top: 0.5rem;
  cursor: pointer;
}
.btn-microfono.grabando {
  background: var(--beige-light);
  border-color: var(--beige-dark);
  color: var(--green-deep);
}

/* Pauta de anonimización */
.pauta-anonimizar {
  background: var(--sand);
  border: 1px solid var(--beige);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 1.1rem 0 0;
}
.pauta-anonimizar h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.pauta-anonimizar p { font-size: 0.93rem; color: var(--text-soft); margin: 0 0 0.7rem; }
.pauta-anonimizar label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.93rem;
  color: var(--text);
  cursor: pointer;
}
.pauta-anonimizar input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1.05rem; height: 1.05rem;
  accent-color: var(--beige-deep);
  flex: 0 0 auto;
}

.condiciones-uso {
  margin-top: 0.8rem;
  border-top: 1px dashed var(--beige);
  padding-top: 0.6rem;
}
.condiciones-uso summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--beige-deep);
  font-weight: 600;
}
.condiciones-uso ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--text-soft);
}
.condiciones-uso li { margin: 0.4rem 0; }

/* Cargando y errores de la lectura */
.cargando { color: var(--text-soft); font-style: italic; padding: 0.6rem 0; }
.error-lectura {
  background: var(--sand);
  border: 1px solid var(--sand-dark);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin: 0.8rem 0;
}

/* Derivación sobria (riesgo agudo) */
.derivacion-aviso {
  background: var(--green-deep);
  color: var(--cream);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  margin: 1rem 0;
}
.derivacion-aviso p { margin: 0; }

/* ---------- Las lentes ---------- */
.lente {
  background: #fff;
  border: 1px solid var(--sand-dark);
  border-left: 4px solid var(--beige);
  border-radius: 10px;
  padding: 1.1rem 1.2rem 1.2rem;
  margin: 0 0 1rem;
}
.lente-etiqueta {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--beige-deep);
  margin: 0 0 0.25rem;
}
.lente h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.lente-hipotesis { margin: 0 0 0.8rem; }
.lente-sub {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.8rem 0 0.2rem;
}
.lente-cuerpo { margin: 0; color: var(--text); }
.lente-pregunta {
  margin: 0.2rem 0 0;
  font-style: italic;
  color: var(--green-deep);
}
.lente-final { border-left-color: var(--green-dark); }
.aviso-omision {
  font-size: 0.9rem;
  color: var(--text-soft);
  border-top: 1px dashed var(--sand-dark);
  padding-top: 0.7rem;
  margin-top: 0.9rem;
}
.lectura-pie {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin: 1.2rem 0 0;
}

/* ---------- El cierre ---------- */
.preguntas-supervision {
  margin: 0.4rem 0 0.9rem;
  padding-left: 1.2rem;
}
.preguntas-supervision li { margin: 0.45rem 0; }
.cierre-hecho {
  background: var(--sand);
  border: 1px solid var(--beige);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 1rem 0;
}
.informe-zona {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--beige);
}
.informe-zona h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }

/* ---------- Transparencia y pie ---------- */
.transparencia {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.25rem 1.5rem;
}
.transparencia h2 { font-size: 1.3rem; }
.transparencia ul { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--text-soft); font-size: 0.95rem; }
.transparencia li { margin: 0.5rem 0; }
.otras-orientaciones {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 1rem;
}
.pie {
  background: var(--sand);
  border-top: 1px solid var(--sand-dark);
  text-align: center;
  padding: 1.4rem 1.25rem 1.8rem;
  font-size: 0.9rem;
  color: var(--text-soft);
}
.pie p { margin: 0.4rem 0; }

@media (max-width: 480px) {
  .cabecera { padding: 1.3rem 1rem 1.3rem; }
  .cabecera-eyebrow { font-size: 0.72rem; margin-bottom: 0.5rem; }
  .btn { width: 100%; }
  .acciones .enlace-discreto { width: auto; }
}

/* ---------- Informe de continuidad imprimible ----------
   Se rellena solo al pulsar el botón y se vacía al cerrar el diálogo.
   Mismo patrón que el informe de la app hermana (di-lo-que-quieres-decir). */
#informe-print { display: none; }

@media print {
  .cabecera, .pie, .pasos-indicador, .acciones { display: none; }
  body.imprimiendo-informe > *:not(#informe-print) { display: none !important; }
  body.imprimiendo-informe #informe-print { display: block !important; }
  #informe-print {
    font-family: "DM Sans", system-ui, sans-serif;
    color: #2b2420;
    max-width: 640pt;
    margin: 0 auto;
  }
  #informe-print .inf-marca { font-size: 8.5pt; letter-spacing: 0.16em; color: #8a6748; margin: 0 0 6pt; }
  #informe-print .inf-titulo { font-family: "DM Serif Display", Georgia, serif; color: #11352b; font-size: 24pt; font-weight: 400; margin: 0 0 2pt; }
  #informe-print .inf-meta { color: #6b6058; font-size: 10pt; margin: 0 0 14pt; }
  #informe-print .inf-seccion { font-family: "DM Serif Display", Georgia, serif; color: #11352b; font-size: 14pt; font-weight: 400; margin: 14pt 0 5pt; }
  #informe-print .inf-relato { white-space: pre-wrap; border-left: 2pt solid #c7a587; padding: 6pt 10pt; font-size: 10.5pt; line-height: 1.55; margin: 0; }
  #informe-print .inf-cuerpo { font-size: 10.5pt; line-height: 1.55; margin: 0 0 6pt; }
  #informe-print .inf-lente { margin: 0 0 10pt; page-break-inside: avoid; }
  #informe-print .inf-lente-tipo { font-size: 8.5pt; letter-spacing: 0.12em; text-transform: uppercase; color: #1f5a49; border: 0.75pt solid #1f5a49; border-radius: 10pt; display: inline-block; padding: 1pt 8pt; margin: 0 0 4pt; }
  #informe-print .inf-sub { font-size: 8pt; letter-spacing: 0.1em; text-transform: uppercase; color: #9a8e84; margin: 6pt 0 1pt; }
  #informe-print .inf-pregunta { font-style: italic; color: #11352b; font-size: 10.5pt; margin: 0; }
  #informe-print .inf-lista { margin: 0; padding-left: 14pt; font-size: 10.5pt; line-height: 1.7; }
  #informe-print .inf-pie { margin-top: 18pt; padding-top: 8pt; border-top: 0.75pt solid #ded5ca; color: #6b6058; font-size: 8.5pt; line-height: 1.5; }
}