/* ============================================================
   JOHNNYTECH — El Círculo (comunidad beta · FORO)
   Usa los tokens del tema estudio (--accent, --ink, --border...).
   Archivo propio: no pisa nada de otros lotes.
   Tres vistas client-side: índice (categorías) · categoría (hilos) · hilo.
   ============================================================ */

.circ-contador {
  margin-top: 18px;
  font-family: var(--mono, monospace);
  font-size: 12px; letter-spacing: .04em;
  color: var(--muted2, #6b665c);
}
.circ-contador b { color: var(--ink); font-weight: 700; }

/* el atributo [hidden] debe ganarle a display:flex/grid de estos bloques */
[hidden] { display: none !important; }

/* ---------- Membresía founder (V12) ---------- */
.circ-membresia {
  max-width: 520px;
  margin: 26px auto 0;
  padding: 22px 26px;
  background: var(--panel, #fff);
  border: 1px solid var(--border2, var(--border, #dcd7ca));
  border-radius: 14px;
  box-shadow: var(--sombra-1, none);
  text-align: center;
}
.circ-memb-precio {
  font-family: var(--display, inherit);
  font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink, #16150f);
}
.circ-memb-precio span {
  font-family: var(--mono, monospace);
  font-size: 13px; font-weight: 500;
  color: var(--muted2, #6b665c);
}
.circ-memb-botones {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.circ-memb-nota {
  margin: 12px 0 0;
  font-size: 12.5px; line-height: 1.55;
  color: var(--muted, #57534e);
}

/* ---------- Acceso (email → código → apodo) ---------- */
.circ-acceso { max-width: 480px; margin: 40px auto 0; }
.circ-panel {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e8e4dc);
  border-top: 4px solid var(--accent, #4338ca);
  border-radius: 16px;
  padding: 30px 30px 28px;
  box-shadow: var(--sombra-1, 0 10px 30px -22px rgba(22,21,15,.12));
}
.circ-form { display: flex; flex-direction: column; }
.circ-kicker {
  font-family: var(--mono, monospace); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent, #4338ca); font-weight: 700; margin: 0 0 8px;
}
.circ-form h2 {
  font-family: var(--display, sans-serif); font-weight: 700;
  font-size: 24px; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 8px;
}
.circ-ayuda { color: var(--muted, #57534e); font-size: 14.5px; margin: 0 0 18px; line-height: 1.55; }
.circ-form label {
  font-weight: 600; font-size: 13px; color: var(--body, #33312b); margin: 0 0 6px;
}
.circ-form input {
  width: 100%; font-family: var(--sans, sans-serif); font-size: 16px;
  padding: 12px 14px; border: 1px solid var(--border2, #dcd7ca);
  border-radius: 10px; background: #fff; color: var(--ink); margin: 0 0 16px;
}
.circ-form input:focus {
  outline: none; border-color: var(--accent, #4338ca);
  box-shadow: 0 0 0 3px var(--accent-tint, rgba(67,56,202,.08));
}
#cCodigo { font-family: var(--mono, monospace); font-size: 26px; letter-spacing: .35em; text-align: center; }
.circ-form .btn { align-self: stretch; text-align: center; }
.circ-link {
  background: none; border: none; color: var(--muted, #57534e);
  font-family: var(--sans, sans-serif); font-size: 13px; cursor: pointer;
  padding: 10px 0 0; text-align: left; align-self: flex-start;
}
.circ-link:hover { color: var(--accent, #4338ca); text-decoration: underline; }
.circ-beta-aviso {
  background: var(--warm-bg, #f6ecd9); border: 1px solid #e6d3a8;
  color: var(--warm-tx, #8a5a19); border-radius: 10px;
  padding: 12px 14px; font-size: 13px; line-height: 1.5; margin: 0 0 16px;
}
.circ-beta-aviso code {
  font-family: var(--mono, monospace); background: rgba(0,0,0,.05);
  padding: 1px 5px; border-radius: 4px;
}
.circ-msg { font-size: 13.5px; margin: 12px 0 0; min-height: 1px; }
.circ-msg.ok { color: var(--ok-tx, #2f6b3c); }
.circ-msg.err { color: #b91c1c; }

/* ---------- Contenedor del foro ---------- */
.circ-foro { max-width: 760px; margin: 32px auto 0; }

.circ-sesion {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; margin: 0 0 22px;
  background: var(--panel, #fff); border: 1px solid var(--border, #e8e4dc);
  border-radius: 12px; font-size: 14px;
}
.circ-sesion .circ-yo { display: flex; align-items: center; gap: 10px; }
.circ-sesion .circ-apodo { font-family: var(--display, sans-serif); font-weight: 700; color: var(--ink); }
.circ-sesion .circ-pts { color: var(--muted, #57534e); font-family: var(--mono, monospace); font-size: 12px; }
.circ-sesion .circ-salir {
  margin-left: auto; background: none; border: 1px solid var(--border2, #dcd7ca);
  color: var(--muted, #57534e); font-family: var(--sans, sans-serif); font-weight: 600;
  font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.circ-sesion .circ-salir:hover { border-color: #b9b3a2; color: var(--ink); }
.circ-sesion .circ-entrar { margin-left: auto; font-weight: 600; }

/* nivel (badge mono) — Semilla / Operador / Veterano */
.circ-nivel {
  font-family: var(--mono, monospace); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  background: var(--accent-tint, rgba(67,56,202,.08)); color: var(--accent-down, #3730a3);
}
.circ-nivel.veterano { background: var(--ink); color: #f7f5f0; }
.circ-nivel.operador { background: var(--accent, #4338ca); color: #fff; }
.circ-nivel.semilla  { background: var(--panel2, #f0ede4); color: var(--muted, #57534e); }

/* ---------- Migas de pan ---------- */
.circ-migas {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13px; margin: 0 0 18px; color: var(--muted2, #6b665c);
  font-family: var(--sans, sans-serif);
}
.circ-migas a {
  color: var(--accent, #4338ca); font-weight: 600; text-decoration: none; cursor: pointer;
}
.circ-migas a:hover { text-decoration: underline; }
.circ-migas .sep { color: var(--border2, #dcd7ca); }
.circ-migas .actual { color: var(--ink); font-weight: 600; }

/* ============================================================
   VISTA ÍNDICE — las 4 categorías como tarjetas
   ============================================================ */
.circ-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.circ-cat-card {
  display: block; text-align: left; cursor: pointer;
  background: var(--panel, #fff); border: 1px solid var(--border, #e8e4dc);
  border-radius: 14px; padding: 22px 22px 20px;
  box-shadow: var(--sombra-1, 0 10px 30px -22px rgba(22,21,15,.12));
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  font-family: inherit;
}
.circ-cat-card:hover {
  border-color: var(--accent, #4338ca); transform: translateY(-2px);
  box-shadow: 0 16px 34px -24px rgba(22,21,15,.28);
}
.circ-cat-card:focus-visible { outline: 2px solid var(--accent, #4338ca); outline-offset: 3px; }
.circ-cat-card .cat-nombre {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--display, sans-serif); font-weight: 700; font-size: 19px;
  color: var(--ink); margin: 0 0 6px;
}
.circ-cat-card .cat-nombre .flecha {
  margin-left: auto; color: var(--accent, #4338ca); font-size: 16px;
  transition: transform 150ms ease;
}
.circ-cat-card:hover .cat-nombre .flecha { transform: translateX(4px); }
.circ-cat-card .cat-desc { color: var(--muted, #57534e); font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.circ-cat-card .cat-conteo {
  font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .03em;
  color: var(--muted2, #6b665c);
}
.circ-cat-card .cat-conteo b { color: var(--accent-down, #3730a3); font-weight: 700; }

/* ============================================================
   VISTA CATEGORÍA — cabecera + lista de hilos
   ============================================================ */
.circ-cat-cab { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 20px; flex-wrap: wrap; }
.circ-cat-titulo {
  font-family: var(--display, sans-serif); font-weight: 700;
  font-size: clamp(24px, 4vw, 30px); color: var(--ink); margin: 0 0 4px; letter-spacing: -0.01em;
}
.circ-cat-desc { color: var(--muted, #57534e); font-size: 14.5px; margin: 0; line-height: 1.5; }
.circ-abrir-hilo { margin-left: auto; white-space: nowrap; }

/* form abrir hilo nuevo */
.circ-nuevo-hilo {
  display: flex; flex-direction: column;
  background: var(--panel, #fff); border: 1px solid var(--border, #e8e4dc);
  border-top: 3px solid var(--accent, #4338ca);
  border-radius: 14px; padding: 20px 22px; margin: 0 0 22px;
  box-shadow: var(--sombra-1, 0 10px 30px -22px rgba(22,21,15,.12));
}
.circ-nuevo-hilo label { font-weight: 600; font-size: 13px; color: var(--body, #33312b); margin: 12px 0 6px; }
.circ-nuevo-hilo label:first-of-type { margin-top: 4px; }
.circ-nuevo-hilo input, .circ-nuevo-hilo textarea {
  width: 100%; font-family: var(--sans, sans-serif); font-size: 15px; line-height: 1.55;
  padding: 11px 14px; border: 1px solid var(--border2, #dcd7ca); border-radius: 10px;
  background: #fff; color: var(--ink);
}
.circ-nuevo-hilo textarea { resize: vertical; min-height: 96px; }
.circ-nuevo-hilo input:focus, .circ-nuevo-hilo textarea:focus {
  outline: none; border-color: var(--accent, #4338ca);
  box-shadow: 0 0 0 3px var(--accent-tint, rgba(67,56,202,.08));
}
.circ-nuevo-pie { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 12px; flex-wrap: wrap; }
.circ-nuevo-btns { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.circ-nuevo-btns .circ-link { padding: 0; align-self: center; }
.circ-cuenta { font-family: var(--mono, monospace); font-size: 12px; color: var(--muted2, #6b665c); }
.circ-cuenta.pasado { color: #b91c1c; }

/* lista de hilos */
.circ-hilos { display: flex; flex-direction: column; gap: 12px; }
.circ-hilo-row {
  display: block; text-align: left; width: 100%; cursor: pointer;
  background: var(--panel, #fff); border: 1px solid var(--border, #e8e4dc);
  border-radius: 12px; padding: 16px 20px; font-family: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.circ-hilo-row:hover { border-color: var(--accent, #4338ca); box-shadow: 0 12px 28px -24px rgba(22,21,15,.28); }
.circ-hilo-row:focus-visible { outline: 2px solid var(--accent, #4338ca); outline-offset: 3px; }
.circ-hilo-row.fijado { border-left: 3px solid var(--accent, #4338ca); }
.circ-hilo-titulo {
  font-family: var(--display, sans-serif); font-weight: 700; font-size: 16.5px;
  color: var(--ink); margin: 0 0 8px; line-height: 1.35;
  display: flex; align-items: baseline; gap: 8px;
}
.circ-hilo-titulo .pin { flex: none; }
.circ-hilo-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted, #57534e);
}
.circ-hilo-meta .circ-apodo { font-family: var(--display, sans-serif); font-weight: 700; color: var(--ink); font-size: 13px; }
.circ-hilo-meta .metaita { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono, monospace); font-size: 11.5px; color: var(--muted2, #6b665c); }
.circ-hilo-meta time { font-family: var(--mono, monospace); font-size: 11.5px; color: var(--muted2, #6b665c); }
.circ-hilo-meta .punto { color: var(--border2, #dcd7ca); }

/* ============================================================
   VISTA HILO — post original + respuestas + responder
   ============================================================ */
.circ-hilo-og {
  background: var(--panel, #fff); border: 1px solid var(--border, #e8e4dc);
  border-top: 3px solid var(--accent, #4338ca);
  border-radius: 14px; padding: 24px 24px 20px; margin: 0 0 22px;
  box-shadow: var(--sombra-1, 0 10px 30px -22px rgba(22,21,15,.12));
}
.circ-hilo-og .og-titulo {
  font-family: var(--display, sans-serif); font-weight: 700;
  font-size: clamp(22px, 3.6vw, 28px); color: var(--ink); letter-spacing: -0.01em;
  margin: 0 0 12px; line-height: 1.25;
}
.circ-post-cab { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.circ-post-cab .circ-apodo { font-family: var(--display, sans-serif); font-weight: 700; font-size: 15px; color: var(--ink); }
.circ-post-cab time { margin-left: auto; font-family: var(--mono, monospace); font-size: 11.5px; color: var(--muted2, #6b665c); }
.circ-post-texto {
  color: var(--body, #33312b); font-size: 15.5px; line-height: 1.65;
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
}
.circ-post-acc { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border, #e8e4dc); }
.circ-fuego {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--border2, #dcd7ca); color: var(--muted, #57534e);
  font-family: var(--sans, sans-serif); font-weight: 600; font-size: 13px;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.circ-fuego:hover { border-color: #b9b3a2; }
.circ-fuego.on { background: #fff1e6; border-color: #f0c39a; color: #b45309; }

/* respuestas */
.circ-respuestas-cab {
  font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted2, #6b665c); font-weight: 700;
  margin: 0 2px 12px;
}
.circ-respuestas { display: flex; flex-direction: column; gap: 12px; }
.circ-respuesta {
  background: var(--panel, #fff); border: 1px solid var(--border, #e8e4dc);
  border-radius: 12px; padding: 16px 20px;
}
.circ-respuesta-cab { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; flex-wrap: wrap; }
.circ-respuesta-cab .circ-apodo { font-family: var(--display, sans-serif); font-weight: 700; font-size: 14px; color: var(--ink); }
.circ-respuesta-cab time { margin-left: auto; font-family: var(--mono, monospace); font-size: 11px; color: var(--muted2, #6b665c); }
.circ-respuesta-texto {
  color: var(--body, #33312b); font-size: 15px; line-height: 1.6;
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
}

/* responder */
.circ-responder {
  display: flex; flex-direction: column; margin: 22px 0 0;
  background: var(--panel, #fff); border: 1px solid var(--border, #e8e4dc);
  border-radius: 14px; padding: 18px 20px;
  box-shadow: var(--sombra-1, 0 10px 30px -22px rgba(22,21,15,.12));
}
.circ-responder .circ-kicker { margin-bottom: 8px; }
.circ-responder textarea {
  width: 100%; font-family: var(--sans, sans-serif); font-size: 15px; line-height: 1.55;
  padding: 12px 14px; border: 1px solid var(--border2, #dcd7ca); border-radius: 10px;
  background: #fff; color: var(--ink); resize: vertical; min-height: 80px;
}
.circ-responder textarea:focus {
  outline: none; border-color: var(--accent, #4338ca);
  box-shadow: 0 0 0 3px var(--accent-tint, rgba(67,56,202,.08));
}
.circ-responder-guest {
  margin: 22px 0 0; padding: 18px 20px; text-align: center;
  background: var(--panel, #fff); border: 1px dashed var(--border2, #dcd7ca); border-radius: 14px;
}
.circ-responder-guest a { font-weight: 600; }

/* ---------- estados vacíos ---------- */
.circ-vacio {
  text-align: center; padding: 48px 24px; color: var(--muted, #57534e);
  background: var(--panel, #fff); border: 1px dashed var(--border2, #dcd7ca); border-radius: 14px;
}
.circ-vacio strong { color: var(--ink); display: block; font-family: var(--display, sans-serif); font-size: 18px; margin: 0 0 6px; }
.circ-vacio p { margin: 0; }
.circ-vacio p + p { margin-top: 6px; font-size: 14px; }
.circ-vacio-resp { padding: 32px 24px; margin: 0 0 4px; }

.circ-mas-zona { text-align: center; margin: 22px 0 0; }

@media (max-width: 640px) {
  .circ-panel { padding: 24px 20px; }
  .circ-foro { margin-top: 22px; }
  .circ-cats { grid-template-columns: 1fr; }
  .circ-cat-cab { flex-direction: column; }
  .circ-abrir-hilo { margin-left: 0; width: 100%; }
  .circ-hilo-og { padding: 20px 18px; }
}