/* Portal de clientas: módulos y piezas. Se suma a web.css (mismos colores que los documentos). */
.saludo{ margin-bottom:8px; }
.progreso{ margin-top:22px; max-width:520px; }
.barra-avance{ height:10px; background:#fff; border-radius:999px; overflow:hidden; }
.barra-avance span{ display:block; height:100%; background:var(--lima); border-radius:999px; transition:width .3s; }
.progreso small{ display:block; margin-top:6px; color:var(--suave); font-size:13.5px; }

.accesos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; }
.acceso{ display:flex; gap:16px; align-items:center; background:#fff; border-radius:16px; padding:20px 22px; text-decoration:none; color:var(--texto);
  border:1px solid transparent; transition:border-color .2s; }
.acceso:hover{ border-color:var(--lima); }
.acceso .icono{ width:46px; height:46px; border-radius:12px; background:var(--lima-palido); color:var(--verde); display:grid; place-items:center; flex:none; }
.acceso b{ display:block; color:var(--verde); font-weight:500; }
.acceso small{ color:var(--suave); font-size:13.5px; }
.acceso.inactivo{ opacity:.55; pointer-events:none; }

.seccion-titulo{ margin:44px 0 16px; }
.modulo{ background:#fff; border-radius:16px; margin-top:16px; overflow:hidden; }
.modulo > summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:56px 1fr auto; gap:16px; align-items:center; padding:20px 22px; }
.modulo > summary::-webkit-details-marker{ display:none; }
.modulo .numero{ width:56px; height:56px; border-radius:14px; color:#fff; display:grid; place-items:center; font-weight:600; font-size:17px; }
.modulo h3{ font-weight:600; font-size:19px; color:var(--verde); line-height:1.3; }
.modulo h3 small{ display:block; font-weight:300; font-size:14px; color:var(--suave); margin-top:2px; }
.modulo .marca{ font-size:12.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--suave); white-space:nowrap; }
.modulo.cerrado > summary{ cursor:default; }
.modulo.cerrado .numero{ opacity:.45; }
.modulo .lema{ padding:0 22px 6px; color:var(--suave); font-family:'Lora',serif; font-style:italic; }
.piezas{ padding:6px 22px 18px; }

.pieza{ border-top:1px solid var(--linea); padding:16px 0; }
.pieza-cabeza{ display:grid; grid-template-columns:44px 1fr auto; gap:14px; align-items:center; }
.pieza .tipo{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--chip); border:1px solid var(--sep); color:var(--verde); }
.pieza .tipo.hipnosis{ background:#EEE9F5; border-color:#D9CFE9; color:#6B5590; }
.pieza .tipo.practica{ background:#EEF3DF; border-color:#D7E2B4; color:#5E7A11; }
.pieza .tipo.sos{ background:#F6E9E2; border-color:#E8D0C4; color:#8A5A44; }
.pieza b{ color:var(--verde); font-weight:500; display:block; line-height:1.35; }
.pieza .meta{ font-size:13px; color:var(--suave); }
.pieza .desc{ font-size:14.5px; color:var(--suave); margin:8px 0 0 58px; }
.pieza .hecho{ display:inline-block; background:var(--lima-palido); color:var(--verde); border-radius:999px; padding:2px 10px; font-size:12px; font-weight:500; margin-left:6px; }
.reproductor{ margin:14px 0 0 58px; }
.reproductor audio{ width:100%; }
.marco-video{ position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden; background:#000; }
.marco-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.aviso{ background:var(--chip); border:1px solid var(--sep); border-left:4px solid #6B5590; border-radius:10px; padding:14px 16px; font-size:14.5px; margin-bottom:12px; }
.aviso b{ display:inline; }

.semana-actual{ background:var(--verde); color:#E8EFEE; border-radius:16px; padding:24px 26px; margin-top:32px; }
.semana-actual .kicker{ color:var(--lima); }
.semana-actual .kicker::before{ background:var(--lima); }
.semana-actual h2{ color:#fff; font-weight:500; margin-bottom:6px; }
.semana-actual h2 em{ color:var(--lima); }
.semana-actual p{ color:#C9D8D6; }
.semana-actual .pieza{ border-color:rgba(255,255,255,.14); }
.semana-actual .pieza b{ color:#fff; }
.semana-actual .pieza .meta,.semana-actual .pieza .desc{ color:#B7CBC8; }
.semana-actual .boton.claro{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.semana-actual .boton:not(.claro){ background:var(--lima); color:var(--verde); }
.semana-actual .aviso{ color:var(--texto); }
.semana-actual .aviso b{ color:var(--verde); }
.semana-actual .error{ color:#FFB4A6; }
.semana-actual .ayuda{ color:#B7CBC8; }

/* Invitación a escribir el punto de partida o el testimonio */
.invitacion{ display:block; margin-top:20px; background:var(--lima-palido); border-radius:16px; padding:18px 22px; text-decoration:none; color:var(--verde); }
.invitacion b{ display:block; font-weight:600; font-size:17px; margin-top:4px; }
.invitacion:hover{ background:#DDE0AE; }

/* Formularios de la clienta */
.formulario form{ padding-top:4px; }
.pregunta{ margin-top:16px; }
.pregunta span{ display:block; font-weight:500; color:var(--verde); line-height:1.45; }
.compartir{ border:0; margin-top:22px; padding:14px 16px; background:var(--chip); border-radius:12px; }
.compartir legend{ font-weight:500; color:var(--verde); padding:0; display:contents; }
.compartir legend + .check{ margin-top:10px; }
.compartir .check{ margin-top:10px; }
.check small{ color:var(--suave); font-size:13px; }
.estado-guardado{ margin-top:12px; min-height:1.2em; }

/* Muro de las compañeras */
.publicacion{ margin-top:14px; padding:22px 24px; }
.publicacion header{ display:flex; gap:12px; align-items:center; margin-bottom:6px; }
.publicacion .inicial{ width:40px; height:40px; border-radius:50%; background:var(--verde); color:var(--lima); display:grid; place-items:center; font-weight:600; flex:none; }
.publicacion b{ display:block; color:var(--verde); font-weight:500; }
.publicacion small{ color:var(--suave); font-size:13px; }
.pregunta-muro{ margin-top:12px; font-size:13.5px; color:var(--suave); }
.respuesta-muro{ font-family:'Lora',serif; font-style:italic; font-size:16.5px; color:var(--texto); white-space:pre-wrap; }

.pie{ margin-top:48px; text-align:center; font-size:13.5px; color:var(--suave); }

@media (max-width:640px){
  .accesos{ grid-template-columns:1fr; }
  .modulo > summary{ grid-template-columns:48px 1fr; padding:16px; }
  .modulo .numero{ width:48px; height:48px; font-size:15px; }
  .modulo .marca{ grid-column:2; }
  .piezas{ padding:4px 16px 14px; } .modulo .lema{ padding:0 16px 6px; }
  .pieza-cabeza{ grid-template-columns:40px 1fr; }
  .pieza-cabeza > .boton,.pieza-cabeza > .botones{ grid-column:2; justify-self:start; }
  .pieza .desc,.reproductor{ margin-left:0; }
}