/* ═══════════════════════════════════════════════════════════════════════════
   QUIÉNES CUENTAN · 11 sep 2026
   El bloque que se cuelga del panel del editor y la hoja para pedir.
   Usa las variables de styles.css; no redefine ningún color de la casa.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── En el panel ───────────────────────────────────────────────────────── */
.kc-wrap{ margin:1.4rem 0 .2rem }

.kc-llego{ margin-bottom:1.1rem }
.kc-llego-h{
  font-family:var(--font-display); font-style:italic; font-size:18px;
  color:var(--clay); margin-bottom:.55rem;
}
.kc-card{
  background:var(--linen); border:1px solid #E6DDCC; border-radius:12px;
  padding:14px; margin-bottom:.6rem;
}
.kc-card.kc-off{ opacity:.5 }
.kc-card.kc-ya{ background:#fff }
.kc-quien{ font-size:13.5px; font-weight:500; color:var(--dark); letter-spacing:.01em }
.kc-quien span{ font-weight:300; color:var(--taupe) }
.kc-preg{ font-size:12px; color:var(--taupe); margin-top:.15rem }
.kc-texto{
  font-family:var(--font-display); font-size:17px; line-height:1.45; color:var(--dark);
  margin:.5rem 0 .7rem; white-space:pre-wrap;
}
.kc-estado{ font-size:12.5px; color:var(--taupe); font-style:italic }
.kc-acts{ display:flex; flex-wrap:wrap; gap:7px }
.kc-b{
  font-family:var(--font-body); font-size:13px; color:var(--white); background:var(--clay);
  border:none; border-radius:10px; padding:10px 14px; cursor:pointer; transition:background .25s;
}
.kc-b:hover{ background:#5d5348 }
.kc-b-low{ background:transparent; color:var(--taupe); border:1px solid #E6DDCC }
.kc-b-low:hover{ background:transparent; color:var(--clay); border-color:var(--taupe) }

/* La tarjeta que abre todo. Era un renglón gris al final del panel —la pinta
   de una nota al pie— en la función que desbloquea el libro entero. */
/* 11 sep 2026 · iPhone: el recuadro se leía chico y aguado, y su botón
   competía con «Contar este capítulo». Baja de tono por forma (contorno) y
   sube de contraste: papel sólido, texto de tamaño de lectura adulta. */
.kc-ask{
  background:#FCFAF5; border:1px solid #E1D6C2; border-radius:14px;
  padding:17px 16px; margin-top:1.1rem;
}
.kc-ask-q{ font-family:var(--font-display); font-size:19px; line-height:1.3; color:var(--dark) }
.kc-ask-d{ font-size:14px; color:var(--taupe); margin:.45rem 0 .95rem; line-height:1.55 }
.kc-ask-b{
  width:100%; font-family:var(--font-body); font-size:15px; color:var(--clay);
  background:transparent; border:1px solid var(--clay); border-radius:12px; padding:13px 14px;
  cursor:pointer; transition:background .25s, color .25s;
}
.kc-ask-b:hover{ background:var(--clay); color:var(--white) }
.kc-go-low{ background:transparent; border-radius:var(--kc-r); color:var(--taupe); border:.5px solid var(--sand-light); margin-top:.5rem }
.kc-go-low:hover{ background:transparent; color:var(--clay); border-color:var(--taupe) }

/* ── La hoja para pedir ──────────────────────────────────────────────────
   11 sep 2026 · Vivi: "hay que darle el mismo formato de los renglones siempre
   con sus esquinas redondeadas; todo Kora habla el mismo idioma visual".
   Los valores de abajo NO son nuevos: son exactamente los de la semilla
   (.k2new .k2-field input) — 14px de aire, 12px de esquina, el papel y la línea
   de la casa. Se copian como tokens locales porque los de la semilla viven
   dentro de .k2new y esta hoja se cuelga del body. */
.kc-sheet{
  --kc-papel:#FCFAF5; --kc-linea:#E6DDCC; --kc-r:12px;
}
body.kc-lock{ overflow:hidden }
.kc-sheet{
  position:fixed; inset:0; z-index:9000; display:none;
  background:rgba(44,37,32,.38); backdrop-filter:blur(2px);
  padding:24px; overflow-y:auto;
}
.kc-sheet.on{ display:block }
.kc-sheet-in{
  position:relative; width:100%; max-width:520px; margin:3vh auto 6vh;
  background:var(--white); border-radius:12px; padding:30px 28px 28px;
  box-shadow:0 18px 60px rgba(44,37,32,.22);
}
.kc-x{
  position:absolute; top:10px; right:12px; background:transparent; border:none;
  font-size:19px; line-height:1; color:var(--taupe); cursor:pointer; padding:8px;
}
.kc-t{ font-family:var(--font-display); font-weight:400; font-size:27px; color:var(--dark); line-height:1.2 }
.kc-lede{ font-size:14px; color:var(--taupe); margin-top:.55rem; line-height:1.5 }
.kc-lede-s{ font-size:12.5px; margin-top:.35rem }
.kc-h{
  font-family:var(--font-body); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sand); margin:1.5rem 0 .5rem;
}
.kc-cuenta{ letter-spacing:0; text-transform:none; color:var(--taupe) }
.kc-in{
  width:100%; border:1px solid var(--kc-linea); border-radius:var(--kc-r); background:var(--kc-papel);
  padding:14px; font-family:var(--font-body); font-size:15px; font-weight:300;
  color:var(--dark); outline:none; margin-bottom:.5rem; transition:border-color .2s;
}
.kc-in:focus{ border-color:var(--clay) }

.kc-qs{
  max-height:38vh; overflow-y:auto; border:1px solid var(--kc-linea);
  border-radius:var(--kc-r); padding:14px; background:var(--linen);
}
.kc-cap{
  font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--clay);
  margin:.7rem 0 .35rem;
}
.kc-cap:first-child{ margin-top:0 }
.kc-q{
  display:flex; gap:9px; align-items:flex-start; padding:7px 0; cursor:pointer;
  font-size:14px; color:var(--taupe); line-height:1.4;
}
.kc-q.on{ color:var(--dark) }
.kc-q input{ margin-top:3px; accent-color:var(--clay); flex:0 0 auto }
.kc-nudge{ font-size:12.5px; color:var(--clay); font-style:italic; margin-top:.5rem; min-height:1em }

.kc-msg{
  width:100%; min-height:190px; resize:vertical; margin-top:.9rem;
  border:1px solid var(--kc-linea); border-radius:var(--kc-r); background:var(--kc-papel);
  padding:14px; font-family:var(--font-body); font-size:15px; font-weight:300;
  color:var(--dark); line-height:1.55; outline:none; transition:border-color .2s;
}
.kc-msg:focus{ border-color:var(--clay) }

.kc-go{
  width:100%; margin-top:1.2rem; font-family:var(--font-body); font-size:15px;
  color:var(--white); background:var(--clay); border:none; border-radius:var(--kc-r);
  padding:15px 22px; cursor:pointer; transition:background .3s;
}
.kc-go:hover{ background:#5d5348 }
.kc-go[disabled]{ opacity:.5; cursor:default }

/* 11 sep 2026 · Vivi, desde el iPhone: "el pop-up de «Este libro no lo
   contestas solo» tiene que leerse como pop-up, no como página completa, y con
   más aire entre los textos". En el teléfono la hoja se estiraba a pantalla
   completa con las esquinas cuadradas: eso ya no es un aviso, es otra pantalla
   — y una pantalla nueva se lee como "aquí empieza otra cosa", no como "esto se
   cierra y sigues donde ibas".
   Ahora se apoya abajo, deja ver el editor arriba, redondea sus esquinas y
   respira: es lo mismo que hace una hoja de compartir en iOS, y nadie duda de
   que se cierra. La hoja de PEDIR es larga, así que hasta 90dvh y con su
   propio scroll adentro. */
@media(max-width:560px){
  .kc-sheet{ padding:0 }
  .kc-sheet.on{ display:flex; align-items:flex-end }
  .kc-sheet-in{
    margin:0; width:100%; max-height:90dvh; overflow-y:auto;
    border-radius:20px 20px 0 0; padding:26px 22px 30px;
    box-shadow:0 -10px 40px rgba(44,37,32,.28);
  }
  /* el asa: dice "esto se arrastra y se cierra" sin una palabra */
  .kc-sheet-in::before{
    content:''; display:block; width:38px; height:4px; border-radius:4px;
    background:var(--sand-light); margin:-8px auto 16px;
  }
  .kc-x{ top:6px; right:8px }
  .kc-qs{ max-height:none }
  .kc-t{ font-size:24px; padding-right:26px }
  .kc-lede{ font-size:15px; line-height:1.65; margin-top:.9rem }
  .kc-go{ margin-top:1.4rem }
}

/* ── El preview de la invitación ─────────────────────────────────────────
   Lo que va a ver quien reciba el link, en chiquito y antes de mandarlo.
   Es la misma jerarquía de contar.html —retrato, de quién es el libro, la
   primera línea—, no una maqueta inventada: si cambia allá, cambia aquí. */
.kc-prev{
  display:flex; gap:14px; align-items:center;
  background:var(--kc-papel); border:1px solid var(--kc-linea); border-radius:var(--kc-r);
  padding:14px; margin-top:1.1rem;
  box-shadow:0 12px 32px -24px rgba(44,37,32,.7);
}
.kc-prev-f{
  flex:0 0 auto; width:84px; aspect-ratio:4/5; border-radius:10px; overflow:hidden;
  background:var(--linen);
}
.kc-prev-f img{ width:100%; height:100%; object-fit:cover; display:block }
.kc-prev-sin{ display:flex; align-items:center; justify-content:center; text-align:center;
  border:.5px dashed var(--sand-light) }
.kc-prev-sin span{ font-size:10.5px; color:var(--taupe); line-height:1.3; padding:0 6px }
.kc-prev-tx{ min-width:0 }
.kc-prev-k{
  font-family:var(--font-body); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--taupe); margin-bottom:.3rem;
}
.kc-prev-t{
  font-family:var(--font-display); font-size:18px; line-height:1.22; color:var(--dark);
}
.kc-prev-l{ font-size:11.5px; color:var(--taupe); margin-top:.45rem; letter-spacing:.02em }
.kc-prev-cap{ font-size:12px; color:var(--taupe); margin-top:.5rem; text-align:center }
.kc-prev-cap b{ font-weight:500; color:var(--clay) }

/* ── Las dos clases de pedido ───────────────────────────────────────────── */
.kc-tipos{ display:flex; flex-direction:column; gap:.5rem }
.kc-tipo{
  display:block; border:1px solid var(--kc-linea); border-radius:var(--kc-r); padding:13px 14px;
  cursor:pointer; transition:border-color .2s,background .2s; background:var(--kc-papel);
}
.kc-tipo.on{ border-color:var(--clay); background:var(--linen) }
.kc-tipo input{ display:none }
.kc-tipo b{ display:block; font-family:var(--font-body); font-weight:400; font-size:14.5px; color:var(--dark) }
.kc-tipo span{ display:block; font-size:12.5px; color:var(--taupe); margin-top:.15rem; line-height:1.4 }

/* La foto que mandó quien contó, dentro de su tarjeta. */
.kc-card-f{
  margin:.55rem 0 .1rem; border-radius:7px; overflow:hidden; background:var(--white);
  max-height:230px; display:flex; justify-content:center;
}
.kc-card-f img{ max-width:100%; max-height:230px; object-fit:contain; display:block }

/* ── LA INVITACIÓN DE REGALO (js/kora-regalo.js) ─────────────────────────────
   Comparte la hoja, los renglones y el botón con «Quiénes cuentan» a
   propósito: Vivi, "todo Kora habla el mismo idioma visual", y las dos son la
   misma clase de objeto — una hoja que se abre encima para armar algo que se
   le manda a otra persona. Aquí solo va lo que es suyo. */
#krSheet .kc-prev{ margin-top:1.2rem }
.kc-rels{ display:flex; flex-wrap:wrap; gap:7px }
.kc-rels .pill{
  font-family:var(--font-body); font-size:13.5px; font-weight:300; color:var(--clay);
  background:var(--kc-papel); border:1px solid var(--kc-linea); border-radius:999px;
  padding:.55rem .9rem; cursor:pointer; transition:border-color .2s, background .2s, color .2s;
}
.kc-rels .pill.on{ border-color:var(--clay); background:var(--clay); color:var(--white) }
.kc-foto{
  width:100%; font-family:var(--font-body); font-size:14px; color:var(--clay);
  background:var(--kc-papel); border:1px dashed var(--kc-linea); border-radius:var(--kc-r);
  padding:14px; cursor:pointer; transition:border-color .2s;
}
.kc-foto:hover{ border-color:var(--clay) }
.kc-pie{ font-size:12.5px; color:var(--taupe); text-align:center; margin-top:.9rem; line-height:1.6 }
.kc-pie a{ color:var(--clay); cursor:pointer; border-bottom:.5px solid var(--sand-light) }

/* ── EL PUNTO EN LA PESTAÑA ───────────────────────────────────────────────
   12 sep 2026 · Vivi: "¿checaste que sí le lleguen las respuestas, y dónde le
   aparecen?". Sí llegan, y aparecen en el panel del capítulo de su pregunta —
   que es el sitio correcto: ahí está la pregunta, ahí está lo que ella escribió
   y ahí decide. Lo que faltaba era ENTERARSE: un homenaje tiene treinta
   capítulos y nadie los recorre uno por uno a ver si alguien contestó.
   No es un badge con número: es un punto, del barro de la casa, y se apaga en
   cuanto ella la usa, la suma o la deja. Va DENTRO del renglón (no flotando
   encima) para no tener que tocar el posicionamiento de .chtab, que es una
   tira con scroll y se rompe con poco. */
.chtab.kc-tiene::after{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--clay); margin-left:.45em; vertical-align:.12em;
}

/* ── LA PUERTA AL TABLERO, en la tarjeta del panel ───────────────────────
   Solo aparece cuando ya le pidió a alguien. Y el renglón ya dice el estado
   —"2 de 3 ya contaron"— así que muchas veces ni hay que abrirlo. */
.kc-ask-ya{
  display:block; width:100%; margin-top:.7rem; padding:.35rem 0;
  background:transparent; border:none; cursor:pointer; text-align:left;
  font-family:var(--font-body); font-size:13px; color:var(--taupe);
  transition:color .2s;
}
.kc-ask-ya:hover{ color:var(--clay) }

/* ── QUIÉNES CUENTAN ESTE LIBRO · el tablero ─────────────────────────────
   Fase 3 del blueprint. No es una tabla de administración: es la lista de las
   personas a las que les pediste un favor, y por eso se lee como una lista de
   personas —el nombre manda, el estado va debajo en chiquito— y no como un
   reporte de estados con un nombre al lado. */
.kc-quienes{ margin-top:1.2rem }
.kc-fila{
  border:1px solid var(--kc-linea); border-radius:var(--kc-r);
  background:var(--kc-papel); padding:14px; margin-bottom:.6rem;
}
.kc-fila-n{ font-family:var(--font-display); font-size:19px; line-height:1.25; color:var(--dark) }
.kc-fila-n span{ font-family:var(--font-body); font-size:13px; font-weight:300; color:var(--taupe) }
.kc-fila-e{ font-size:13.5px; color:var(--taupe); margin-top:.25rem; line-height:1.45 }
.kc-fila-e.kc-fr-ok{ color:var(--clay) }
.kc-fila-e.kc-fr-medio{ color:var(--dark) }
.kc-fila-e.kc-fr-off{ font-style:italic; opacity:.65 }
/* El deseo de quien contó. Es el renglón más importante de esta hoja y por eso
   se lee distinto: en cursiva y en barro, como una frase dicha por alguien. */
.kc-fila-q{
  font-family:var(--font-display); font-style:italic; font-size:16px;
  color:var(--clay); margin-top:.45rem; line-height:1.35;
}
.kc-fila-a{ display:flex; flex-wrap:wrap; gap:7px; margin-top:.8rem }


/* ── CUANDO ESTO NO LE TOCABA SABERLO · 13 sep 2026 ──────────────────────────
   La misma tarjeta de siempre, arriba del panel en vez de abajo. Se marca con
   un pelo de la línea de la casa a la izquierda —no con un color ni un icono—
   porque no es una alerta: es el siguiente paso, dicho antes que la caja vacía.
   El renglón de abajo ("…o cuéntalo tú") es el que evita que se sienta un
   veredicto: nadie le está diciendo que no sabe. */
.kc-wrap.kc-arriba{ margin:0 0 1.05rem }
.kc-ask.kc-ask-antes{ border-left:2px solid var(--clay, #72665A); padding-left:.95rem }
.kc-ask-antes .kc-ask-q{ margin-bottom:.3rem }

/* ── LA TIRA · 15 sep 2026 ───────────────────────────────────────────────
   Esto era una tarjeta de cinco renglones y un botón del ancho del panel —unos
   230 px— encima de las preguntas, que son el trabajo, y para una cosa que es
   OPCIONAL. Ahora es un renglón con su botón al lado: ~70 px.
   El pelo de la línea de la casa a la izquierda se queda: sigue marcando que
   esto no es una alerta sino el siguiente paso, dicho antes de la caja vacía.
   Lo que se va es el recuadro entero —fondo, borde y esquinas—, porque una
   tira no es una tarjeta. */
/* 16 sep 2026 · LA TIRA SE PERDÍA. Vivi: "sí me gusta que se abrevió, pero
   ahora se pierde mucho; vamos a ponerle un recuadro y quizá un fondo más
   oscurito". Tenía razón y el error fue mío: al quitarle el recuadro a la
   tarjeta le quité también lo único que la separaba del formulario, así que en
   una ventana que ya es de papel quedó un renglón de texto suelto entre dos
   preguntas — ni tarjeta ni pregunta.
   El recuadro vuelve, pero con la forma de una tira: fondo un tono más oscuro
   que el papel de la ventana, sin borde de caja, y el pelo de la línea de la
   casa a la izquierda, que es lo que sigue diciendo que esto no es una alerta
   sino el siguiente paso. Sigue midiendo lo mismo de alto. */
.kc-ask.kc-tira{
  display:flex; align-items:center; flex-wrap:wrap; gap:.55rem .9rem;
  background:color-mix(in srgb, var(--linen,#F5F0E8) 62%, var(--linen-dark,#EDE6D6) 38%);
  border:0; border-left:2.5px solid var(--clay, #72665A);
  border-radius:0 10px 10px 0; margin:0; padding:.7rem .9rem .7rem 1rem;
}
.kc-tira .kc-ask-b{ background:var(--white,#FDFAF5) }
.kc-tira .kc-ask-q{
  flex:1 1 11rem; min-width:0; margin:0;
  font-family:var(--font-body); font-size:15px; line-height:1.35; color:var(--clay, #72665A);
}
.kc-tira .kc-ask-b{
  width:auto; flex:0 0 auto; font-size:13.5px; padding:8px 13px; border-radius:10px;
}
.kc-tira .kc-ask-ya{ flex:1 1 100%; margin-top:0; padding:0; font-size:12.5px }

/* El pie de la primera pregunta. Vive dentro del `.pq-field`, debajo de su
   caja, porque es ahí donde significa algo: la otra puerta, abierta, justo
   donde se contestaría. */
.kc-tu-pie{
  margin:.4rem 0 0; font-family:var(--font-body); font-size:12.5px; font-weight:300;
  line-height:1.45; color:var(--taupe, #948A7C);
}