/*
 * Humai Meet — theme compartido, alineado al SISTEMA EDITORIAL de home-react
 * (rediseño 2026, fuente de verdad: home-react/src/components/editorial/
 * editorial.module.css + tailwind.config.ts colors.editorial).
 *
 * Regla: TODA UI de Meet (SPA de sala, /ver, backoffice /admin/meet, editor
 * de layouts, páginas de egress) usa estos tokens — no inventar paletas.
 *
 * Tokens canónicos:
 *   --ink        #07060b   fondo (near-black tibio)
 *   --paper      #eee9df   texto principal (crema)
 *   --paper-muted #c9c1b6  texto secundario
 *   --amber      #f4962d   acento primario (CTAs, kickers, hovers)
 *   --violet     #8262a7   acento secundario
 *   --lavender   #bba6cf   acento terciario / gradientes
 * Tipografía: Humai Sans (marca/títulos/botones; ya trae el tracking de
 * marca horneado — NUNCA agregar letter-spacing a la marca), Poppins para
 * cuerpo si está, sans-serif fallback. Kickers/labels: mono uppercase
 * tracking 0.13em color amber.
 * Formas: pastillas radius 999px (nav/botones/tags), cards radius 22px con
 * sombra profunda, bordes rgb(238 233 223 / 16%).
 */

@font-face { font-family: "Humai Sans"; src: url("/static/fonts/humai-sans/HumaiSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Humai Sans"; src: url("/static/fonts/humai-sans/HumaiSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Humai Sans"; src: url("/static/fonts/humai-sans/HumaiSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Humai Sans"; src: url("/static/fonts/humai-sans/HumaiSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Humai Sans"; src: url("/static/fonts/humai-sans/HumaiSans-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
/* Montserrat Bold: la tipografía del contador de las escenas. Servida por
   nosotros y no desde Google Fonts — la misma página la abre el navegador
   headless del egress en el momento de salir al aire, y una fuente que se le
   pide a un tercero puede no llegar justo ahí. Que esté también acá es lo que
   hace que la previa del editor se vea como el aire. */
@font-face { font-family: "Montserrat"; src: url("/static/fonts/montserrat/Montserrat-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink: #07060b;
  --paper: #eee9df;
  --paper-muted: #c9c1b6;
  --amber: #f4962d;
  --violet: #8262a7;
  --lavender: #bba6cf;
  --font-humai: "Humai Sans", Montserrat, sans-serif;
  --font-body: Poppins, "Humai Sans", sans-serif;
  /* PROHIBIDO en live-service (regla de mg 2026-07-24: "no uses mono en
     ningún lugar"). Se deja definido sólo porque este archivo se comparte
     con home-react; NO lo uses acá. Un número que cambia de ancho (timer,
     contador) va con --font-body + `font-variant-numeric: tabular-nums`. */
  --font-mono: "Roboto Mono", ui-monospace, monospace;
  --border-soft: rgb(238 233 223 / 16%);
  --border-strong: rgb(238 233 223 / 32%);
  --card-radius: 22px;
  --card-shadow: 0 28px 100px rgb(0 0 0 / 45%);
}

.meet-page {
  min-height: 100vh;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
}

/* Fondo hero con textura + glow violeta (patrón editorial .hero::before) */
.meet-hero-bg {
  background:
    radial-gradient(circle at 70% 40%, rgb(130 98 167 / 15%), transparent 42%),
    url("/static/textures-asfalt-light.png"),
    var(--ink);
}

.meet-kicker {
  color: var(--amber);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.meet-title {
  font-family: var(--font-humai);
  font-weight: 700;
  letter-spacing: normal; /* Humai Sans trae el tracking de marca horneado */
  line-height: 1.05;
}

.meet-title em {
  background: linear-gradient(105deg, var(--amber), #ffbf68 37%, var(--lavender) 69%, #9c7bc6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}

/* Botones: pastillas (patrón .heroActions a) */
.meet-btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: none;
  color: var(--paper);
  cursor: pointer;
  font-family: var(--font-humai);
  font-size: 0.82rem;
  font-weight: 700;
  transition: 180ms ease;
}
.meet-btn:hover { border-color: var(--amber); color: var(--amber); }
.meet-btn--primary { border-color: var(--amber); background: var(--amber); color: var(--ink); }
.meet-btn--primary:hover { background: #ffbf68; border-color: #ffbf68; color: var(--ink); }
.meet-btn--danger { border-color: #c0392b; color: #e07868; }

/* Cards */
.meet-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
  background: rgb(14 12 20 / 88%);
  box-shadow: var(--card-shadow);
}

/* Pastilla flotante con blur (patrón .navFloating .navLinks) */
.meet-pill {
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgb(7 6 11 / 55%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Links de nav: uppercase chico, hover amber (patrón .navLinks a) */
.meet-navlink {
  color: var(--paper-muted);
  font-family: var(--font-humai);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease;
}
.meet-navlink:hover, .meet-navlink.active { color: var(--amber); }

/* Inputs */
.meet-input, .meet-select, .meet-textarea {
  padding: 10px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgb(238 233 223 / 6%);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.meet-input:focus, .meet-select:focus, .meet-textarea:focus {
  border-color: var(--amber);
  outline: none;
}

/* Tags/estados */
.meet-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.meet-tag--live { border-color: var(--amber); color: var(--amber); }
.meet-tag--ok { border-color: #7dbb7d; color: #9fd49f; }
.meet-tag--err { border-color: #c0392b; color: #e07868; }