/*
 * Estilos del cuadernillo · versión pantalla
 *
 * Copiados de los bloques <style> del maquetado del Volumen 1 (Mes 1, con las piezas que añaden
 * Preliminares y Mes 2: .suena, mapa de ramas, ciclo, formato de acuerdo, lista en círculos).
 * Se quitaron las reglas de impresión de hoja fija (tamaño carta, alto fijo, saltos de página).
 * Cambios para pantalla: .hoja tiene ancho máximo de 17.5 cm y ocupa el 100 % en pantallas angostas;
 * los campos para escribir (.campo) imitan los renglones del libro.
 */

:root{
  --tinta:#2E2A26; --papel:#FDFBF7;
  --ambar:#C08327; --ambar-suave:#FBF1DE;
  --salvia:#6F8F74; --salvia-suave:#EDF3EC;
  --terracota:#B0644A; --terracota-suave:#F8EAE4;
  --gris:#8C867E;
  --renglon:29px;
  --linea-renglon:#BFD2BF;
}
*{box-sizing:border-box}
body{margin:0;background:#E8E4DC;color:var(--tinta);
  font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  font-size:15.5px;line-height:1.62}
.hoja p,.hoja li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* ── la hoja: página sobre fondo gris claro ── */
.hoja{background:var(--papel);width:100%;max-width:17.5cm;margin:26px auto;padding:2.2cm 2.1cm 2.4cm;
  box-shadow:0 2px 18px rgba(0,0,0,.13);position:relative;overflow-wrap:break-word}
.folio{position:absolute;bottom:1.1cm;right:2.1cm;font-size:12px;color:var(--gris);letter-spacing:.06em}
.hoja.sin-folio .folio{visibility:hidden}
.hoja svg{max-width:100%;height:auto}
.hoja table{max-width:100%}

.mes-eyebrow{letter-spacing:.28em;text-transform:uppercase;font-size:11.5px;
  color:var(--terracota);text-align:center;margin-bottom:6px}
.mes-titulo{font-size:31px;line-height:1.15;text-align:center;margin:0 0 4px;font-weight:600}
.mes-sub{text-align:center;color:var(--gris);font-style:italic;margin:0 0 26px}
.filete{width:64px;height:2px;background:var(--ambar);margin:22px auto;border-radius:2px}

.caja-practica{border:1px solid #E4D8BE;background:var(--ambar-suave);
  border-radius:3px;padding:20px 22px 18px;margin:8px 0 24px}
.caja-practica h3{margin:0 0 10px;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ambar);text-align:left}
.caja-practica p{margin:0 0 9px}
.caja-practica p:last-child{margin-bottom:0}
.tresvoces{display:flex;gap:10px;margin:14px 0 4px}
.voz{flex:1;text-align:center;border:1px solid #E4D8BE;border-radius:3px;padding:9px 6px;background:#fff}
.voz b{display:block;font-size:19px;color:var(--ambar);line-height:1.2}
.voz span{font-size:12.5px;color:var(--gris)}

.nota{border-left:3px solid var(--terracota);padding:2px 0 2px 14px;margin:20px 0;
  color:#5B534B;font-size:14.5px}
.nota b{color:var(--terracota)}

.oracion{background:var(--ambar-suave);border-radius:3px;padding:22px 26px;margin:16px 0;
  border-left:4px solid var(--ambar)}
.oracion p{margin:0 0 11px}
.oracion p:last-child{margin-bottom:0}
.oracion .amen{text-align:center !important;font-weight:600;color:var(--ambar);letter-spacing:.08em}

.dia-cab{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--tinta);
  padding-bottom:8px;margin-bottom:6px}
.dia-num{font-size:38px;font-weight:600;line-height:1;letter-spacing:-.02em}
.dia-tema{font-size:17px;flex:1;text-align:left}
.fecha{font-size:12.5px;color:var(--gris);white-space:nowrap}
.fecha i{display:inline-block;border-bottom:1px dotted var(--gris);width:74px;margin-left:6px;height:12px}
.cinta{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--terracota);
  margin:0 0 8px;text-align:left}

h4.sec{font-size:12px;letter-spacing:.17em;text-transform:uppercase;margin:22px 0 7px;
  display:flex;align-items:center;gap:9px}
h4.sec::after{content:"";flex:1;height:1px;background:#DFD8CC}
h4.sec .pip{width:8px;height:8px;border-radius:50%;background:var(--ambar);flex:none}
h4.sec.esc .pip{background:var(--salvia)}
h4.sec.sim .pip{background:var(--terracota)}

.frase{border-top:1px solid var(--ambar);border-bottom:1px solid var(--ambar);
  padding:14px 4px;margin:18px 0;font-size:19px;line-height:1.42;
  text-align:center !important;font-style:italic}

.afirmacion{position:relative;background:var(--ambar-suave);border-radius:3px;
  padding:20px 24px 18px 30px;margin:10px 0 6px;border-left:4px solid var(--ambar)}
.afirmacion p{margin:0;font-size:17px;line-height:1.55}
.afirmacion .comillas{position:absolute;left:10px;top:2px;font-size:34px;color:var(--ambar);
  opacity:.35;line-height:1}
.repite{font-size:13px;color:var(--gris);margin:8px 0 0;font-style:italic;text-align:left}

.metafora{background:#F4F1EA;border:1px dashed #CFC6B8;border-radius:3px;
  padding:15px 18px;margin:14px 0}
.metafora p{margin:0 0 9px}
.metafora p:last-child{margin-bottom:0}

.suena{background:#fff;border:1px solid #E4D8BE;border-radius:3px;padding:14px 18px;margin:14px 0}
.suena .et{display:block;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ambar);margin-bottom:6px;text-align:left}
.suena p{margin:0 0 5px;font-style:italic;font-size:15px}
.suena p:last-child{margin-bottom:0}

.escribe{background:var(--salvia-suave);border:1px solid #DCE7DB;border-radius:3px;
  padding:16px 18px 14px;margin:12px 0}
.escribe .rotulo{font-size:13.5px;color:#4E6B53;margin:0 0 10px;text-align:left}
.lin{border-bottom:1px solid var(--linea-renglon);height:var(--renglon)}
.lin.corta{width:62%}
.dos-col{display:flex;gap:14px}
.tres-col{display:flex;gap:12px}
.dos-col>div,.tres-col>div{flex:1;min-width:0}
.cabcol{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#4E6B53;
  margin:0 0 8px;text-align:left}

.simbolo{display:flex;gap:18px;align-items:center;background:var(--terracota-suave);
  border-radius:3px;padding:14px 18px;margin:16px 0}
.simbolo .txt{font-size:13.5px;color:#7A4634}
.simbolo .txt b{display:block;font-size:15px;margin-bottom:3px;color:var(--terracota)}
.sello{text-align:center;margin:18px 0 6px}
.sello .pie{font-size:13.5px;color:#7A4634;font-style:italic;text-align:center !important}

.marco{border:1px solid #E6D6C9;border-left:3px solid var(--terracota);border-radius:3px;
  padding:11px 14px 10px;margin:16px 0;background:#FCF7F4}
.marco .et{display:block;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--terracota);margin-bottom:3px;text-align:left}
.marco p{margin:0;font-size:14.6px;line-height:1.55}
.lejos{font-size:14px;color:#5B534B;border-top:1px dotted #CFC6B8;padding-top:12px;margin-top:20px}
.lejos b{color:var(--tinta)}

.mandala-hoja{text-align:center}
.mandala-hoja h2{font-size:22px;margin:0 0 2px}
.mandala-hoja .sub{color:var(--gris);font-style:italic;margin:0 0 18px;font-size:14.5px}
.palabra{margin:18px auto 0;max-width:70%}
.palabra .rot{font-size:13.5px;color:var(--gris);margin-bottom:8px}
.pie-nota{margin-top:30px;font-size:12.5px;color:var(--gris);text-align:center;font-style:italic}

.anexo h2{font-size:22px;margin:0 0 4px}
.anexo .sub{color:var(--gris);font-style:italic;margin:0 0 20px}
.anexo .item{margin-bottom:18px}
.anexo .item .ref{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--terracota);margin:0 0 4px;text-align:left}
.devocional p{font-size:13.4px;line-height:1.5;margin:0 0 11px;padding-left:15px;
  border-left:2px solid #EBD9B4}
.devocional p.amen{border-left:0;padding-left:0;text-align:center !important;
  font-weight:600;color:var(--ambar);letter-spacing:.1em;font-size:14px;margin-top:16px}
.instruccion{font-size:13.5px;color:#5B534B;font-style:italic;margin:0 0 18px}

/* ── organizador: mapa de cinco ramas (Anexo A) ── */
.mapa{margin:14px 0}
.mapa-centro{position:relative;display:grid;grid-template-columns:1fr 136px 1fr;
  grid-template-areas:"r1 nodo r2" "r3 nodo r4";gap:12px 14px;margin-bottom:12px}
.mapa .conect{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.mapa .rama{position:relative;z-index:1;background:var(--salvia-suave);border:1px solid #DCE7DB;
  border-left:3px solid var(--terracota);border-radius:3px;padding:9px 12px 7px;--renglon:24px}
.mapa .rama .et{display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--terracota);margin-bottom:2px;text-align:left}
.mapa .rama .pista{font-size:12.4px;color:#4E6B53;margin:0 0 3px;text-align:left;font-style:italic}
.mapa .rama .lin{height:24px}
.mapa .r1{grid-area:r1}.mapa .r2{grid-area:r2}.mapa .r3{grid-area:r3}.mapa .r4{grid-area:r4}
.mapa .nodo{grid-area:nodo;align-self:center;justify-self:center;position:relative;z-index:1;
  width:126px;height:126px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:14px;font-style:italic;font-size:14px;line-height:1.28;background:var(--papel);
  border:1.6px dashed var(--terracota);outline:1.6px dashed var(--terracota);outline-offset:5px}
/* ── organizador: ciclo ── */
.ciclo{text-align:center;margin:10px 0 4px}
.ciclo svg{max-width:100%;height:auto}
/* ── organizador: formato de acuerdo (Anexo C) ── */
.acuerdo{border:1.5px solid #CFC6B8;border-radius:4px;padding:14px 18px 8px;background:#fff;margin:14px 0;--renglon:23px}
.acuerdo-cab{border-bottom:2px solid var(--tinta);padding-bottom:6px;margin-bottom:10px}
.acuerdo-cab b{display:block;font-size:16px}
.acuerdo-cab span{font-size:11.5px;color:var(--gris);font-style:italic}
.acuerdo .fila{display:flex;gap:10px;margin-bottom:7px}
.acuerdo .num{flex:none;width:22px;height:22px;border-radius:50%;background:var(--ambar);color:#fff;
  font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:3px}
.acuerdo .fila>div{flex:1;min-width:0}
.acuerdo .et{font-size:12.5px;color:#4E6B53;margin:0 0 1px;text-align:left}
.acuerdo .lin{height:23px}
.acuerdo .firmas{display:flex;gap:14px;margin-top:6px}
.acuerdo .firmas>div{flex:1;min-width:0}
/* ── lista numerada en círculos ── */
ol.diez{counter-reset:d;list-style:none;padding:0;margin:12px 0}
ol.diez li{counter-increment:d;position:relative;padding-left:34px;margin-bottom:8px;text-align:left}
ol.diez li::before{content:counter(d);position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:50%;
  background:var(--ambar);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}

/* ═════════════ campos para escribir: parecen los renglones del libro ═════════════ */

.hoja .campo{
  display:block;width:100%;margin:0;border:0;border-radius:0;
  font:inherit;font-size:16px;color:var(--tinta); /* 16 px: evita que la tableta haga zoom al escribir */
  -webkit-appearance:none;appearance:none;
  caret-color:var(--salvia);
}
/* varios renglones: líneas dibujadas que acompañan al texto */
.hoja textarea.campo{
  resize:none;overflow:hidden;
  padding:0 4px;
  line-height:var(--renglon);
  min-height:calc(var(--lineas, 3) * var(--renglon));
  background-color:transparent;
  background-image:repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--renglon) - 1px),
    var(--linea-renglon) calc(var(--renglon) - 1px), var(--linea-renglon) var(--renglon));
  background-attachment:local;
}
.hoja textarea.campo-celda{min-height:var(--renglon)}
/* un renglón corto (como .lin.corta) */
.hoja input.campo-linea{
  width:62%;height:var(--renglon);line-height:calc(var(--renglon) - 1px);padding:0 4px;
  background:transparent;border-bottom:1px solid var(--linea-renglon);
}
.hoja td .campo, .hoja th .campo{width:100%}

.hoja .campo:hover{background-color:rgba(255,255,255,.45)}
.hoja .campo:focus{outline:none;background-color:rgba(255,255,255,.75)}
.hoja .campo:focus-visible{outline:2px solid var(--ambar);outline-offset:3px;border-radius:2px}
.hoja .campo[readonly]{cursor:default;color:#4A443E}
.hoja .campo[readonly]:hover,.hoja .campo[readonly]:focus{background-color:transparent}
.hoja .campo::placeholder{color:#9AA79A;font-style:italic}
.hoja .campo::selection{background:#DCE7DB}

/* casillas bajo un dibujo (p. ej. las cuatro fases de la ola en d016) */
.hoja .casillas-svg{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:6px 14px;margin-top:8px}
.hoja .casillas-svg .cabcol{margin:0 0 2px}
.hoja .casillas-svg .campo{width:100%}

/* ═════════════ pantallas angostas (tablet vertical, teléfono) ═════════════ */

@media (max-width: 760px){
  .hoja{max-width:100%;margin:14px auto;padding:1.4cm 1.2cm 1.8cm}
  .folio{bottom:.7cm;right:1.2cm}
}
@media (max-width: 560px){
  body{font-size:15px}
  .hoja{margin:10px 0;padding:28px 18px 46px;box-shadow:0 1px 8px rgba(0,0,0,.12)}
  .folio{bottom:16px;right:18px}
  .mes-titulo{font-size:26px}
  .dia-cab{flex-wrap:wrap;gap:8px 12px}
  .dia-num{font-size:32px}
  .dia-tema{flex-basis:60%}
  .dos-col,.tres-col,.tresvoces,.acuerdo .firmas{flex-direction:column;gap:10px}
  .simbolo{flex-direction:column;align-items:flex-start}
  .palabra{max-width:100%}
  .hoja input.campo-linea{width:100%}
  .mapa-centro{grid-template-columns:1fr;grid-template-areas:"nodo" "r1" "r2" "r3" "r4"}
  .mapa .conect{display:none}
  .oracion{padding:18px 18px}
  .afirmacion{padding:18px 16px 16px 26px}
}