/* ==========================================================================
   Casa de las Comunidades — hoja de estilos compartida
   La usan:
     - /index.html                        (home, terminal ancha)
     - /call-for-communities/index.html   (convocatoria, terminal angosta)
   Todo el estilo es terminal: fondo verde oscuro, monoespaciado, ventana con
   los tres puntos y acentos tipo ANSI.
   ========================================================================== */

/* Fuente alojada localmente (no Google Fonts): el CSS de Google Fonts le
   sirve a navegadores modernos (incluido Chrome Android) subsets por
   unicode-range que NO cubren dibujo de caja ni bloques (U+2500-259F) —
   los caracteres █ ╔ ╗ ╚ ╝ ═ ║ que arman el banner ASCII, el logo y la
   tabla. Sin esos glifos el navegador hace fallback por-carácter a otra
   fuente con otro ancho, y el "grid" monoespaciado del ASCII art se
   desalinea (se ve amontonado). En Mac no se nota porque cae a Menlo
   (que sí los tiene con ancho compatible); en Android no hay Menlo y el
   fallback final rompe la alineación. El .ttf completo de JetBrains Mono
   sí incluye esos glifos (U+2500-25A1) — por eso se aloja local en vez de
   depender del subsetting automático de Google. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-700.woff2") format("woff2");
}

:root {
  --bg: oklch(0.14 0.014 145);
  --panel: oklch(0.17 0.016 145);
  --panel-bar: oklch(0.21 0.018 145);
  --border: oklch(0.32 0.02 145);
  --fg: oklch(0.90 0.006 90);
  --dim: oklch(0.52 0.02 145);
  --green: oklch(0.75 0.18 142);
  --cyan: oklch(0.78 0.13 200);
  --yellow: oklch(0.82 0.16 95);
  --magenta: oklch(0.72 0.18 340);
  --blue: oklch(0.74 0.15 250);
  --orange: oklch(0.78 0.15 55);
  --white: oklch(0.99 0 0);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
}
/* El UA le pone `font-family: monospace` a <pre>, así que NO hereda
   JetBrains Mono. En Mac `monospace` es Menlo (tiene los glifos de caja y
   no se nota); en Android no los tiene y el ASCII del header y la tabla se
   desborda y se encima. */
pre { font-family: inherit; }
a,
a:visited { color: var(--blue); text-decoration: underline; }

/* --- Página: centra la ventana --- */
.page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}

/* --- Ventana de terminal --- */
.term {
  width: 100%;
  min-width: 0;                     /* deja encogerse al flex item aunque el
                                       contenido ASCII tenga mucho min-content */
  max-width: 780px;                 /* convocatoria (angosta) */
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3);
  overflow: hidden;
}
.term--wide { max-width: 1260px; }  /* home (ancha) */

.term-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--panel-bar);
  border-bottom: 1px solid var(--border);
}
.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.dot.red { background: oklch(0.62 0.19 25); }
.dot.yellow { background: oklch(0.78 0.15 90); }
.dot.green { background: oklch(0.72 0.16 145); }
.term-title {                       /* convocatoria y home */
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--dim);
  margin-right: 33px;
  white-space: nowrap;
  overflow: hidden;
  container: term-title / inline-size;
}
/* El título nunca se parte en líneas: si no cabe completo, se esconde
   "comunidades@clara — " y queda solo el comando; si tampoco cabe el
   comando, se esconde todo. Los umbrales son largos en `ch` (12px de
   JetBrains Mono) — título completo / comando: 37 / 17 en el home,
   53 / 33 en la convocatoria (`.term-title--long`). */
@container term-title (width < 37ch) {
  .term-title-user,
  .term-title-sep { display: none; }
}
@container term-title (width < 17ch) {
  .term-title-cmd { visibility: hidden; }
}
@container term-title (width < 53ch) {
  .term-title--long .term-title-user,
  .term-title--long .term-title-sep { display: none; }
}
@container term-title (width < 33ch) {
  .term-title--long .term-title-cmd { visibility: hidden; }
}

.term-scroll { overflow-x: auto; }

.term-body {
  margin: 0;
  padding: 26px 26px 30px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg);
  white-space: normal;
  width: 100%;
  container-type: inline-size;
}

/* Bloques ASCII (no reflowean). El `pre` vive AQUÍ, no en .term-body: así el
   HTML se puede escribir a mano (una línea por bloque) sin que los saltos de
   línea del propio código se rendericen como líneas en blanco. */
.tl { display: block; white-space: pre; font-size: 1.939cqw; }
.tl-title { text-align: right; font-size: inherit; }
.title-two { display: none; }

/* --- Párrafos y listas que sí reflowean --- */
.tl-flow { display: block; white-space: normal; overflow-wrap: break-word; }
.tl-bullet { padding-left: 2.4em; text-indent: -1.2em; }
.tl-number { padding-left: 3em; text-indent: -1.8em; }

/* --- Prompt final --- */
.prompt-line { font-size: 13.5px; color: var(--dim); }
.prompt-line .sigil { color: var(--green); }
.cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--green);
  margin-left: 2px;
  transform: translateY(2px);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* --- Colores ANSI --- */
.c-green { color: var(--green); }
.c-white { color: var(--white); }
.c-yellow { color: var(--yellow); }
.c-title { color: var(--cyan); font-weight: 700; }
.c-header { color: var(--cyan); font-weight: 700; }
.c-string { color: var(--orange); }
.c-bullet { color: var(--green); }
.c-num { color: var(--yellow); font-weight: 700; }
.c-date { color: var(--yellow); }
.c-email { color: var(--blue); }
.c-warn { color: var(--magenta); font-weight: 700; }

/* ==========================================================================
   HOME
   ========================================================================== */

/* Texto normal: ancho de lectura cómodo aunque la ventana sea ancha. */
.prose { max-width: 76ch; }

/* Ritmo vertical = el de la convocatoria: una línea en blanco (1.55em, el
   line-height de .term-body) entre bloques y dos antes de cada sección y
   después del header. El margen va siempre en el bloque de abajo, así el
   `em` es el de la fuente de cuerpo (no el `cqw` del header o la tabla). */
.term-body--home > * { margin: 0; }
.term-body--home > * + * { margin-top: 1.55em; }
.term-body--home > .section,
.term-body--home > .header + * { margin-top: 3.10em; }

/* Encabezados de sección: --[ ... ]-- */
.section {
  display: block;
  font-size: 1em;
  font-weight: 700;
  color: var(--cyan);
  white-space: normal;
}

/* Header: banner ASCII (izquierda) · logo de Clara (derecha).
   El hueco del medio es automático (space-between); el tamaño de fuente
   está calibrado para que banner + logo quepan con aire a cualquier ancho. */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2ch;
  font-size: 1.3cqw;
  line-height: 1.05;
}
.header-banner,
.header-logo { margin: 0; white-space: pre; }

/* Tabla ASCII de Tech Week (4 columnas, 150 caracteres de ancho). El glifo
   │ de JetBrains Mono mide 1.32em de alto (ascent + descent, medido en
   navegador): con un line-height cerca de 1.32 o mayor se ve una costura
   entre líneas (en 1.3 ya se nota). 1.25 deja ~0.07em de traslape, lo que
   alcanza para que los │ se vean continuos. */
.ascii-table {
  display: block;
  margin: 0;
  font-size: 1.1cqw;
  line-height: 1.25;
  white-space: pre;
}

/* Fallback móvil de Tech Week: se muestra solo cuando la tabla no cabe. */
.days-stacked { display: none; }
/* Dos columnas: fecha alineada a la derecha (ancho fijo = "miércoles 28",
   la más larga) + separador, y el resto (evento, comunidad, redes)
   alineado a la izquierda — las líneas siguientes quedan alineadas solas
   al ser una columna aparte, sin necesitar sangría colgante. */
.day { display: flex; }
.day + .day { margin-top: 1.55em; }
.day-date { flex: 0 0 12ch; text-align: right; }
.day-sep { flex: 0 0 auto; white-space: pre; }
.day-body { flex: 1 1 auto; min-width: 0; }

/* Grid de meses (agenda mensual). */
.months {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 1em 0 1.4em;
}
.month {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  white-space: normal;
}
.month-name { color: var(--cyan); }
.month-status { color: var(--dim); }
.month--taken .month-status { color: var(--fg); }
.month--pending .month-name { color: var(--dim); }
.month--pending .month-status { font-style: italic; }

/* Nota (acceso) y CTA */
.note { color: var(--dim); margin: 1.2em 0; max-width: 76ch; }
.cta { margin-top: 1.4em; max-width: 76ch; }

/* --- Responsive --- */
/* La tabla ASCII solo se muestra a su tamaño completo: en cuanto
   .term-body es más angosto que con `.term--wide` completo (1260px de
   ventana → 1206px de contenido, medido en navegador), se oculta y sale
   la lista apilada. Es container query (no media query) para no depender
   del viewport ni de si hay barra de scroll. */
@container (width < 1206px) {
  .ascii-table { display: none; }
  .days-stacked { display: block; }
}
@media (max-width: 1024px) {
  .months { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .months { grid-template-columns: repeat(2, 1fr); }
}
/* El hueco entre el banner y el logo (space-between) se vuelve muy ancho
   en este rango; agrandar el header reduce ese hueco porque banner+logo
   ocupan más fila. */
@media (max-width: 725px) {
  .header { font-size: 1.42cqw; }
}
@media (max-width: 640px) {
  .page { padding: 24px 12px; }
  .term-body,
  .prompt-line { font-size: 11.5px; }
  .term-body { padding: 16px 16px 22px; }
}
/* Debajo de este ancho el título de una línea del call for communities ya no
   cabe; se cambia a la versión manual de dos líneas (no se encoge la fuente). */
@media (max-width: 420px) {
  .title-one { display: none; }
  .title-two { display: block; }
}