/* ── Protocolos: el "Player Protocol" de Pedro (23-sep-2026) ─────────────
   Pedro mandó su tablero de Notion como referencia ("quiero que tenga esto
   así"): a la izquierda los no negociables en una tarjeta alta y debajo el
   cierre del día; a la derecha, día y noche apiladas, cada una con Hoy /
   Ayer, la tarjeta de la fecha con la lista y, donde Notion tiene "New
   page", el anillo de esa sección. Con la piel de ATMA: mañana en oro, día
   en turquesa, noche en lila.

   Carga el último; las clases .habito / .marcar-habito / .tilde se quedan
   porque de ellas cuelgan el marcado, la tecla D y el deslizar del teléfono. */

body[data-vista="protocolos"]{ --ambiente:rgba(95,242,214,.08) }

.pr{ max-width:1180px; padding:40px 40px 56px; animation:lx-rise .6s var(--curva-lx) both }
.pr-rotulo{ margin:0; font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--tinta-tenue) }
.pr-cabeza{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:30px }
.pr-h1{ margin:16px 0 0; font-family:var(--display); font-weight:200; font-size:clamp(30px,3.4vw,38px); letter-spacing:-.03em; line-height:1.05; color:var(--tinta) }
.pr-bajada{ margin:8px 0 0; font-size:12.5px; line-height:1.6; color:var(--tinta-media) }
.pr-cifras{ display:flex; gap:28px; align-items:flex-end }
.pr-cifra b{ display:block; font-family:var(--display); font-weight:200; font-size:40px; letter-spacing:-.04em; line-height:1; color:var(--tinta) }
.pr-cifra b i{ font-style:normal; font-size:15px; color:var(--tinta-tenue); margin-left:2px }
.pr-cifra small{ display:block; margin-top:6px; font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--tinta-tenue) }
.pr-cifra.oro b{ color:var(--oro) }

.pr-prioridades{ margin:0 0 22px; padding:16px 20px; border-radius:18px; border:1px solid rgba(var(--c-oro),.2); background:rgba(var(--c-oro),.04) }
.pr-prioridades ul{ margin:8px 0 0; padding-left:18px; color:var(--tinta); font-size:13.5px; line-height:1.8 }

/* ── La rejilla: izquierda angosta, derecha ancha ─────────────────────── */
.pr-rejilla{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.6fr); gap:22px; align-items:start }

.pr-bloque{ --c:var(--c-oro); padding:24px 22px 22px; border-radius:24px; border:1px solid rgba(238,237,245,.08); background:rgba(238,237,245,.02) }
.pr-bloque.dia{ --c:var(--c-turquesa) } .pr-bloque.pm{ --c:var(--c-lila) } .pr-bloque.cierre{ --c:var(--c-menta) }
.pr-bloque + .pr-bloque{ margin-top:22px }

.pr-titulo{ display:flex; align-items:center; gap:12px; margin:0 0 16px; font-family:var(--display); font-weight:300; font-size:24px; letter-spacing:-.02em; color:var(--tinta) }
.pr-icono{ width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:9px; background:rgba(var(--c),.14); box-shadow:inset 0 0 0 1px rgba(var(--c),.3) }
.pr-icono svg{ width:16px; height:16px; stroke:rgb(var(--c)); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }

.pr-barra{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap }
.pr-tabs{ display:inline-flex; gap:4px }
.pr-tabs button{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px !important; border-radius:12px !important; border:0 !important;
  background:transparent !important; box-shadow:none !important; transform:none !important;
  color:var(--tinta-tenue) !important; font-size:13px !important; letter-spacing:normal !important; text-transform:none !important;
}
.pr-tabs button:hover{ color:var(--tinta) !important }
.pr-tabs button.aqui{ background:rgba(238,237,245,.07) !important; color:var(--tinta) !important }
.pr-tabs svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.6 }
.pr-cuenta{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--c),.9) }

.pr-dos{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px }
.pr-fecha{ padding:18px 18px 10px; border-radius:18px; border:1px solid rgba(238,237,245,.08); background:rgba(0,0,0,.18) }
.pr-fecha h4{ margin:0 0 10px; font-family:var(--display); font-weight:400; font-size:17px; color:var(--tinta) }

/* ── Cada hábito: una casilla y su nombre, como en Notion ─────────────── */
.pr .habito.pr-hab{
  grid-template-columns:18px 1fr auto auto; gap:12px; margin:0; padding:8px 6px !important;
  border:0 !important; border-radius:10px !important; background:transparent !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.pr .habito.pr-hab:hover{ background:rgba(238,237,245,.035) !important; transform:none }
.pr .pr-hab .tilde{ width:18px; height:18px; border-radius:5px; border:1px solid rgba(238,237,245,.28); background:transparent; box-shadow:none }
.pr .pr-hab .tilde::after{ width:6px; height:3px; margin-top:-1px; border-left:1.5px solid #10091f; border-bottom:1.5px solid #10091f; border-color:#10091f }
.pr .pr-hab.hecho .tilde{ background:rgb(var(--c)); border-color:rgb(var(--c)); box-shadow:0 0 12px rgba(var(--c),.55) }
.pr .pr-hab .habito-nombre{ font-size:14px; color:var(--tinta); text-decoration:none }
.pr .pr-hab.hecho .habito-nombre{ color:var(--tinta-tenue); text-decoration:none }
.pr .pr-hab .lx-cand{ opacity:0; transition:opacity .2s }
.pr .pr-hab:hover .lx-cand{ opacity:.35 }
.pr .pr-hab.lx-listo{ background:rgba(var(--c),.14) !important }

/* ── El anillo de cada sección (donde Notion pone "New page") ─────────── */
.pr-avance{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:150px; padding:14px; border-radius:18px; border:1px dashed rgba(238,237,245,.1); text-align:center }
.pr-avance small{ font-size:11px; line-height:1.5; color:var(--tinta-tenue) }
.pr-aro{ position:relative; width:110px; aspect-ratio:1 }
.pr-aro svg{ width:100%; height:100%; transform:rotate(-90deg) }
.pr-aro circle{ fill:none; stroke-width:6 }
.pr-aro .pista{ stroke:rgba(238,237,245,.07) }
.pr-aro .valor{ stroke:rgb(var(--c)); stroke-linecap:round; filter:drop-shadow(0 0 8px rgba(var(--c),.7)); transition:stroke-dashoffset 1s var(--curva-lx) }
.pr-aro b{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:200; font-size:28px; letter-spacing:-.04em; color:var(--tinta) }
.pr-aro b i{ font-style:normal; font-size:.4em; color:var(--tinta-tenue); margin:10px 0 0 2px }

/* ── Cierre del día: líneas finas ─────────────────────────────────────── */
.pr-etiqueta{ display:block; margin:14px 0 2px; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--tinta-tenue) }
.pr-etiqueta:first-child{ margin-top:0 }
.pr .pr-linea{
  width:100%; min-height:0; padding:9px 0 !important; border:0 !important; border-bottom:1px solid rgba(238,237,245,.12) !important;
  border-radius:0 !important; background:transparent !important; box-shadow:none !important; resize:none;
  color:var(--tinta); font:300 13.5px/1.5 var(--display);
}
.pr .pr-linea:focus{ border-bottom-color:rgb(var(--c-menta)) !important }
.pr .animo{ display:flex; gap:8px; margin-top:8px; padding:0; background:transparent; border:0; box-shadow:none }
.pr .animo .segmento{
  width:34px; height:34px; display:grid; place-items:center; padding:0; border-radius:50% !important; cursor:pointer;
  border:1px solid rgba(238,237,245,.12) !important; background:transparent !important; box-shadow:none !important;
  color:var(--tinta-media); font:300 13px var(--display); text-transform:none; letter-spacing:0;
}
.pr .animo .segmento input{ position:absolute; opacity:0; width:0; height:0 }
.pr .animo .segmento.puesta{ border-color:transparent !important; background:rgb(var(--c-menta)) !important; color:#07231f; box-shadow:0 0 16px rgba(var(--c-menta),.5) !important }
.pr-guardar{
  margin:20px 0 8px; padding:10px 18px !important; border-radius:99px !important; border:1px solid rgba(var(--c-menta),.4) !important;
  background:transparent !important; box-shadow:none !important; color:var(--tinta) !important;
  font-size:10px !important; letter-spacing:.22em !important; text-transform:uppercase !important;
}
.pr-guardar:hover{ background:rgba(var(--c-menta),.08) !important }

@media (max-width:860px){
  .pr{ padding:22px 18px 40px }
  .pr-cifras{ gap:20px } .pr-cifra b{ font-size:30px }
  .pr-rejilla, .pr-dos{ grid-template-columns:1fr }
  .pr-avance{ min-height:0; flex-direction:row; justify-content:flex-start; text-align:left }
  .pr-aro{ width:78px } .pr-aro b{ font-size:20px }
}
@media (prefers-reduced-motion:reduce){ .pr{ animation:none } }

/* ── Segunda vuelta (23-sep-2026): "Tu día" y el cierre, sin Hoy / Ayer ──
   A la izquierda el checklist del día (lo que el alumno se puso anoche más
   lo que agrega hoy) y el cierre con espacio para escribir; a la derecha la
   mañana, el día y la noche, todos con su anillo. */
.pr-bloque.tudia{ --c:var(--c-violeta) }
.pr-barra .pr-titulo{ margin:0 }
.pr-bloque.cierre .pr-titulo{ margin-bottom:16px }

.td-fila{ display:flex; align-items:center; gap:4px; border-radius:10px }
.td-fila:hover{ background:rgba(238,237,245,.035) }
.pr .td-marcar{
  flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:8px 6px !important; cursor:pointer; text-align:left;
  border:0 !important; border-radius:10px !important; background:transparent !important; box-shadow:none !important; transform:none !important;
  color:var(--tinta) !important; font-size:14px !important; letter-spacing:normal !important; text-transform:none !important;
}
.pr .td-marcar:disabled{ cursor:default }
.td-caja{ position:relative; flex:none; width:18px; height:18px; border-radius:5px; border:1px solid rgba(238,237,245,.28); transition:all .3s }
.td-fila.hecha .td-caja{ background:rgb(var(--c)); border-color:rgb(var(--c)); box-shadow:0 0 12px rgba(var(--c),.55) }
.td-fila.hecha .td-caja::after{ content:''; position:absolute; left:5.5px; top:4.5px; width:5px; height:3px; border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; transform:rotate(-45deg) }
.td-texto{ overflow-wrap:anywhere }
.td-fila.hecha .td-texto{ color:var(--tinta-tenue); text-decoration:line-through; text-decoration-color:rgba(238,237,245,.25) }
.pr .td-quitar{
  flex:none; width:26px; height:26px; padding:0 !important; border:0 !important; border-radius:8px !important;
  background:transparent !important; box-shadow:none !important; color:var(--tinta-tenue) !important; font-size:16px !important;
  opacity:0; transition:opacity .2s; cursor:pointer;
}
.td-fila:hover .td-quitar, .pr .td-quitar:focus-visible{ opacity:1 }
.td-agregar{ display:flex; align-items:center; gap:12px; margin-top:4px; padding:6px; border-top:1px solid rgba(238,237,245,.06) }
.td-agregar i{ font-style:normal; width:18px; text-align:center; color:var(--tinta-tenue) }
.pr .td-agregar input{
  flex:1; padding:6px 0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important;
  color:var(--tinta); font:300 14px var(--display);
}
.td-vacio{ margin:0; padding:6px; font-size:12px; line-height:1.5; color:var(--tinta-tenue) }

/* El cuadro para escribir la reflexión: amplio, como una página. */
.pr .pr-escribir{
  width:100%; min-height:130px; padding:14px 16px !important; resize:vertical;
  border-radius:14px !important; border:1px solid rgba(238,237,245,.1) !important; background:rgba(238,237,245,.03) !important; box-shadow:none !important;
  color:var(--tinta); font:300 14px/1.7 var(--display);
}
.pr .pr-escribir:focus{ border-color:rgba(var(--c-menta),.5) !important }
.pr-pista{ margin:6px 0 0; font-size:11px; line-height:1.5; color:var(--tinta-tenue) }