/* Tokens de marca (--brand, --brand-strong, --gold) se inyectan por tenant
   desde templates/base.html, a partir de request.tenant.primary_color /
   secondary_color. Todo lo demás vive aquí. */
:root {
  --brand-strong: color-mix(in srgb, var(--brand) 75%, black);
  --brand-tint: color-mix(in srgb, var(--brand) 12%, white);
  --gold-tint: color-mix(in srgb, var(--gold) 15%, white);

  --ink: #1c1c1c;
  --ink-soft: #4a4a4a;
  --ink-faint: #6e6e6e;
  --paper: #f4f4f3;
  --paper-raised: #ffffff;
  --paper-sunken: #e7e7e5;
  --good: #1c8a5b;
  --good-tint: #e1f2e9;
  --bad: #57575c;
  --bad-tint: #e7e7e5;
  --line: rgba(20, 20, 20, 0.12);
  --line-strong: rgba(20, 20, 20, 0.22);
  --shadow: rgba(20, 20, 20, 0.22);

  /* Tarjeta del evento (`.hero-event`) — estilo "flyer": banner azul de
     marca sólido con texto blanco, como el material de difusión del
     cliente, en vez de la tarjeta clara de antes. */
  --hero-bg: linear-gradient(135deg, var(--brand), var(--brand-strong));
  --hero-ink: #ffffff;
  --hero-ink-soft: rgba(255, 255, 255, 0.82);

  --radius-s: 8px;
  --radius-m: 14px;
  /* Roboto — tipografía institucional de INACAP (confirmada en inacap.cl:
     todo el sitio, cuerpo y títulos, corre en Roboto). Cargada vía Google
     Fonts en templates/base.html; con fallback al stack de sistema si por
     algún motivo no carga. */
  --font-display: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* "Anton" — reemplazo gratuito de "Counterpress-Bold" (kit oficial
     "Semana de la PYME"): esa es una fuente de pago de Adobe Fonts que
     requiere un kit ID que no tenemos, así que se usa el condensado bold
     de Google Fonts más parecido visualmente para los títulos "poster"
     de la campaña. Cargada junto a Roboto en templates/base.html. */
  --font-poster: "Anton", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 70px; /* deja espacio para el navbar fijo + el pie "Powered by AVSI" */
}

a { color: var(--brand); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--paper-raised);
  border-bottom: 1px solid var(--line);
}

.tenant-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
}

.tenant-logo { height: 51px; max-width: 219px; object-fit: contain; display: block; }
.tenant-name { font-weight: 700; font-size: 15px; }

.partner-logo {
  height: 94px;
  max-width: 260px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.header-user { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.header-user a { color: var(--ink-faint); text-decoration: underline; }
.inline-form { display: inline; margin: 0; }
.link-button {
  background: none; border: none; padding: 0; margin: 0; font: inherit;
  color: var(--ink-faint); text-decoration: underline; cursor: pointer;
}
.link-button:hover { color: var(--ink); }

.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 18px 64px;
}

.hero-event {
  background: var(--hero-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 20px 18px;
  margin-bottom: 20px;
  color: var(--hero-ink);
}
.hero-event .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hero-ink-soft); margin: 0; }
.hero-event h1 { font-family: var(--font-poster); font-size: 30px; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; margin: 4px 0 6px; line-height: 1.05; color: var(--hero-ink); }
.campaign-badge { display: block; height: 40px; width: auto; margin: 0 auto 12px; }
.hero-event .when-where { font-size: 12.5px; color: var(--hero-ink-soft); }

/* Checklist estilo flyer ("Charla de IA", "Talleres", ...) — mismo ícono de
   círculo blanco con check en azul de marca que usa el flyer de difusión
   del cliente, apilado en una columna (no en grilla de 2 columnas como el
   flyer) porque esta página corre angosta, pensada para mobile. */
.hero-highlights { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.25); display: flex; flex-direction: column; gap: 10px; }
.hero-highlights li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.35; color: var(--hero-ink); }
.hero-highlights .check-icon { flex-shrink: 0; margin-top: 1px; }
.hero-highlights .check-icon circle { fill: #ffffff; }
.hero-highlights .check-icon path { fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero-logos { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 14px; }
.hero-logos img { height: 32px; max-width: 120px; object-fit: contain; }

/* Logos del pie de página (EventLogo, placement=footer) — a diferencia del
   banner publicitario de sponsor (que sí estira a lo ancho porque son
   afiches horizontales), estos son logos con proporciones muy distintas
   entre sí (horizontales, verticales, cuadrados). Se les da una altura
   fija consistente y `object-fit: contain` en vez de estirar al ancho
   completo, para que ninguno domine la fila por su forma original. */
.event-tagline { text-align: center; font-family: var(--font-poster); font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; font-size: 18px; line-height: 1.3; color: var(--ink); margin: 16px 0 6px; }
.footer-logos { margin: 16px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.footer-logo-card {
  flex: 1 1 160px;
  display: flex; align-items: center; justify-content: center;
  height: 120px;
  padding: 12px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.footer-logo-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hero-rotator { min-height: 64px; }
.hero-slide-title { font-family: var(--font-poster); font-size: 24px; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; margin: 4px 0 6px; line-height: 1.1; color: var(--hero-ink); }

.section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint); margin: 18px 0 8px;
}

form { display: flex; flex-direction: column; gap: 14px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field label { font-size: 12px; color: var(--ink-faint); font-weight: 600; }
.field input, .field select {
  width: 100%; min-width: 0;
  font: inherit; font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
}
.field .errors { color: var(--bad); font-size: 12px; margin: 0; }
.field.has-error input, .field.has-error select { border-color: var(--bad); }

.inline-check { font-size: 12.5px; margin-top: 2px; min-height: 1em; }
.inline-check.is-ok { color: var(--good); }
.inline-check.is-taken { color: var(--bad); }

.consent-row {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.5;
}
.consent-row input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; }

.form-errors {
  background: var(--bad-tint); color: var(--bad);
  border-radius: var(--radius-s); padding: 10px 12px; font-size: 13px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  background: var(--brand); color: #fff;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.btn:hover { background: var(--brand-strong); }
.btn:disabled { background: var(--brand-tint); color: var(--brand); opacity: 0.55; cursor: not-allowed; }
.btn-sm { padding: 7px 12px; font-size: 12.5px; }

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 18px;
  text-align: center;
}

.qr-wrap img {
  width: 220px; height: 220px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  padding: 10px;
  background: #fff;
}

.card.session-card { text-align: left; }

.badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.badge-good { background: var(--good-tint); color: var(--good); }
.badge-full { background: var(--bad-tint); color: var(--bad); }
.badge-level { background: var(--paper-sunken); color: var(--ink-soft); }

.session-status { display: inline-flex; align-items: center; gap: 10px; }
.btn-confirmed { background: var(--good); }
.btn-confirmed:hover { background: var(--good); opacity: 0.88; }
.btn-full, .btn-full:disabled { background: var(--paper-sunken); color: var(--ink-faint); opacity: 1; cursor: not-allowed; }

.muted { color: var(--ink-faint); font-size: 12.5px; }
.muted.is-ok { color: var(--good); }
.muted.is-taken { color: var(--bad); }

.ok-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--good-tint); color: var(--good);
  font-size: 22px; font-weight: 700;
}

.app-navbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; flex-direction: column;
  background: var(--paper-raised);
  border-top: 1px solid var(--line);
  padding: 8px 4px 6px;
  box-shadow: 0 -2px 10px var(--shadow);
}
.app-navbar-links { display: flex; justify-content: space-around; align-items: center; }
.app-navbar a {
  color: var(--ink-faint);
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  padding: 4px 6px;
  border-radius: var(--radius-s);
  flex: 1;
}
/* Pie de marca del proveedor (AVSI) + versión desplegada — se sube en +0.1
   cada vez que se despliega un cambio a producción (APP_VERSION en
   config/settings/base.py, único lugar donde se edita el número). */
.app-navbar-version { margin: 4px 0 0; font-size: 9.5px; color: var(--ink-faint); text-align: center; }
.app-navbar a.is-active { color: var(--brand); background: var(--brand-tint); }