/* =========================================================================
   ATBC Connect — capa de marca Connect
   Se carga DESPUÉS de app.css. No modifica ninguna regla existente: redefine
   las fichas de color, tipografía y forma (en CSS manda la última que se lee)
   y cubre los pocos valores que app.css escribe en duro.

   Verde congreso #0B3B36 · oro sesión #E5C46B · papel #F2EFE6
   Space Grotesk (titulares) + Instrument Sans (interfaz)
   ========================================================================= */

/* Las dos fuentes de la marca, autoalojadas igual que Inter: la ruta es
   relativa a esta hoja, no al dominio, porque cada área cuelga de un prefijo
   distinto. Ambas son OFL, así que servirlas desde aquí es legítimo.

   Hacen falta dos archivos en app/static/ (ver README-fuentes.md):
     space-grotesk-var.woff2     variable, 300-700
     instrument-sans-var.woff2   variable, 400-700

   Mientras no estén, el respaldo son Bricolage y Atkinson, ya autoalojadas:
   la pantalla no se rompe, solo cambia la letra. */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;
  font-display:swap;src:url("../space-grotesk-var.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;
  font-display:swap;src:url("../instrument-sans-var.woff2") format("woff2")}

/* ---------------- Capa semántica · claro ---------------------------- */
:root {
  --paper:      #F2EFE6;
  --surface:    #FFFFFF;
  --surface-2:  #F6F3ED;
  --line:       #E4E0D8;
  --line-soft:  #EDE9E1;
  --ink:        #17181B;
  --ink-2:      #3D3A35;
  --ink-3:      #6E6A63;
  --accent:     #0B3B36;
  --accent-ink: #082A26;
  --accent-wash:#E8EDE9;
  --on-accent:  #F2EFE6;
  --ribbon-bg:  #0B3B36;
  --ribbon-ink: #F2EFE6;
  --moss:       #2E7D6E;
  --moss-wash:  #E4EEEA;
  --amber:      #8A6A16;
  --amber-wash: #FBF3DC;
  --brick:      #9A3B1F;
  --brick-wash: #FBE9E2;

  --cat-1:      #0B3B36;
  --cat-2:      #C79B2E;
  --cat-3:      #1F6F8B;
  --cat-4:      #6E5A9B;
  --cat-5:      #2E7D6E;
  --cat-1-wash: #E8EDE9;
  --cat-2-wash: #FBF3DC;
  --cat-3-wash: #E4EDF1;

  /* Sombras: línea fina teñida de verde, sin halos */
  --shadow:      0 1px 2px rgba(11,59,54,.06), 0 6px 18px rgba(11,59,54,.06);
  --shadow-sm:   0 1px 2px rgba(11,59,54,.06);
  --shadow-lift: 0 2px 4px rgba(11,59,54,.07), 0 12px 28px rgba(11,59,54,.10);

  /* Canto recto: la marca no usa esquinas redondeadas ni píldoras */
  --r: 0px; --r-sm: 0px; --radius: 0px; --radius-sm: 0px;
  --r-pill: 999px;          /* solo chips y avatares */
  --r-firma: 0px;

  /* Tipografía */
  --ui: "Instrument Sans", "Atkinson", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Space Grotesk", "Bricolage", "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --font: var(--ui);
  --mono: "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ed: Georgia, "Iowan Old Style", "Times New Roman", serif;

  /* Fichas heredadas que app.css deja con valor literal */
  --clay: #9A3B1F;
  --mustard: #C79B2E;
  --green-good: #14574F;
  --red-bad: #9A3B1F;
  --blue: #1F6F8B;
  --amber-ui: #C79B2E;

  /* Rampa de secciones: la familia de la marca, no el arcoíris */
  --a-home:#0B3B36; --a-reg:#1F6F8B; --a-subs:#14574F; --a-program:#6E5A9B;
  --a-pres:#2E7D6E; --a-people:#C79B2E; --a-certs:#A8465F; --a-emails:#1F6F8B;
  --a-webinars:#9A3B1F; --a-awards:#C79B2E; --a-surveys:#2E7D6E;

  --focus: 0 0 0 3px rgba(229,196,107,.55);
  --row-hover: #F6F3ED;
  --th-fill: #EFECE4;
}

/* ---------------- Capa semántica · oscuro --------------------------- */
:root[data-theme="dark"] {
  --paper:      #071E1B;
  --surface:    #0B3B36;
  --surface-2:  #0E453F;
  --line:       #175149;
  --line-soft:  #123F3A;
  --ink:        #F2EFE6;
  --ink-2:      rgba(242,239,230,.82);
  --ink-3:      rgba(242,239,230,.58);
  --accent:     #E5C46B;
  --accent-ink: #EBD79B;
  --accent-wash:#14574F;
  --on-accent:  #0B3B36;
  --ribbon-bg:  #051C19;
  --ribbon-ink: #E5C46B;
  --moss:       #7FB8A3;
  --moss-wash:  #14574F;
  --amber:      #E5C46B;
  --amber-wash: #14574F;
  --brick:      #E0A08C;
  --brick-wash: #3A211A;
  --cat-1:      #E5C46B;
  --cat-2:      #7FB8A3;
  --cat-3:      #8FC2D6;
  --cat-1-wash: #14574F;
  --cat-2-wash: #123F3A;
  --cat-3-wash: #17323A;
  --shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.32);
  --shadow-sm:   0 1px 2px rgba(0,0,0,.4);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.4);
  --row-hover:   #0E453F;
  --th-fill:     #0E453F;
  --focus:       0 0 0 3px rgba(229,196,107,.4);
}

/* ---------------- Fondo: papel plano -------------------------------- */
/* app.css pinta dos degradados radiales sobre el fondo; la marca es plana. */
body { background: var(--paper); background-attachment: initial; }

/* ---------------- Tira de plataforma -------------------------------- */
/* Es el elemento que iguala las dos aplicaciones: verde pleno y el activo
   marcado en oro. */
.switchbar { background: #0B3B36; color: rgba(242,239,230,.78); }
.switchbar__org {
  color: #E5C46B; font-family: var(--display); font-weight: 500; letter-spacing: .2em;
}
.switchbar__tab { color: rgba(242,239,230,.78); font-family: var(--display); font-weight: 500; }
.switchbar__tab:hover { color: #F2EFE6; background: rgba(242,239,230,.07); }
.switchbar__tab.is-here { color: #F2EFE6; border-bottom-color: #E5C46B; }
.switchbar__who { color: rgba(242,239,230,.55); }
.switchbar__tema { border-radius: 0; background: rgba(242,239,230,.10); color: rgba(242,239,230,.78); }
.switchbar__tema:hover { background: rgba(242,239,230,.2); color: #F2EFE6; }

/* ---------------- Barra de trabajo ---------------------------------- */
.topbar { background: rgba(242,239,230,.92); }
:root[data-theme="dark"] .topbar { background: rgba(7,30,27,.92); }
.brandmin, .topbar__brand { font-family: var(--display); font-weight: 500; letter-spacing: -.03em; }

/* Pestañas: subrayado en oro, sin cápsula */
.tabs { background: transparent; border: 0; border-radius: 0; }
.tab {
  border-radius: 0 !important; font-family: var(--display); font-weight: 500;
  border-bottom: 2px solid transparent;
}
.tab.is-active {
  background: transparent; color: var(--accent);
  border-bottom-color: #E5C46B; box-shadow: none;
}
.subtab { border-radius: 0 !important; }
.subtab.is-on { border-bottom: 2px solid #E5C46B; }
.subbar__label { font-family: var(--display); font-weight: 500; letter-spacing: .12em; }

/* ---------------- Botones ------------------------------------------- */
/* app.css usa dos degradados verticales en el primario. */
.btn { border-radius: 0 !important; font-family: var(--display); font-weight: 500; }
.btn--primary,
.btn:not(.btn--ghost):not(.btn--danger):not(.btn--sm):not([class*="--"]) {
  background: #0B3B36; border-color: #0B3B36; color: #F2EFE6; box-shadow: none;
}
.btn--primary:hover { background: #082A26; border-color: #082A26; color: #F2EFE6; }
.btn--ghost:hover { background: var(--accent-wash); color: var(--accent); }
.btn--danger { background: var(--surface); color: #9A3B1F; border-color: #E8C4B6; }
:root[data-theme="dark"] .btn--primary,
:root[data-theme="dark"] .btn:not(.btn--ghost):not(.btn--danger) {
  background: #E5C46B; border-color: #E5C46B; color: #0B3B36;
}

/* ---------------- Distintivos, avisos y campos ---------------------- */
.badge { border-radius: 999px; background: var(--accent-wash); color: var(--accent-ink); }
.badge--warn { background: #FBF3DC; color: #8A6A16; }
.badge--bad  { background: #FBE9E2; color: #9A3B1F; }
.badge--ok   { background: #E8EDE9; color: #14574F; }
.badge--muted{ background: #EDE9E1; color: var(--ink-3); }
.chip { background: #EDE9E1; color: var(--ink-2); }
code, .mono { background: #EDE9E1; border-radius: 0; font-family: var(--mono); }

.flash { border-radius: 0; }
.flash--success { background: #E8EDE9; color: #0B3B36; border-color: #C3D3CA; }
.flash--error   { background: #FBE9E2; color: #9A3B1F; border-color: #E8C4B6; }
.flash--info    { background: #FBF3DC; color: #8A6A16; border-color: #EBD79B; }
.notice { background: #FBF3DC; border-color: #EBD79B; color: #8A6A16; border-radius: 0; }

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=date], input[type=datetime-local],
select, textarea { border-radius: 0; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: var(--focus);
}

/* ---------------- Tarjetas, cifras y encabezado de página ----------- */
.card, .q, .ficha, .sesion, .sala, .cuota, .publico, .hoja, .tarjeta { border-radius: 0; }
.card:hover { box-shadow: var(--shadow-sm); }
h1, .titulo, .pagehead h1, h2, h3 { font-family: var(--display); font-weight: 500; }
.count--lg, .publico__n, .cuota__p, .sala__dice, .recibo__total b, .stat__v, .stat__n {
  font-family: var(--display); font-weight: 300; letter-spacing: -.03em;
}
.bar { border-radius: 0; background: var(--accent-wash); }
.bar > span { background: #E5C46B; }

/* Avatares e iniciales: el círculo se conserva, es una foto */
.avatar, .ava { border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink); }

/* ===================================================================
   Segunda pasada de app.css (líneas ~1840-2050)
   Esa capa introduce su propia paleta tropical con nombres nuevos y
   varios valores en duro. Aquí se redefinen esos nombres y se corrigen
   las reglas que no pasan por ficha.
   =================================================================== */

:root {
  --hondo:   #0B3B36;   /* bloques saturados: portadas y tira de plataforma */
  --hondo-2: #14574F;
  --menta:   #E5C46B;   /* el acento sobre fondo oscuro es el oro */
  --ambar:   #C79B2E;
  --coral:   #9A3B1F;
  --cielo:   #1F6F8B;
  --lila:    #6E5A9B;

  /* La esquina grande de esa capa: la marca es de canto recto */
  --r-firma: 0px;

  /* Fondo: papel plano, sin los dos lavados de color */
  --lienzo: var(--paper);
}
:root[data-theme="dark"] {
  --hondo:   #051C19;
  --hondo-2: #0B3B36;
  --menta:   #E5C46B;
  --lienzo:  var(--paper);
}
body { background: var(--paper); background-attachment: initial; }

/* ── Portada de pantalla ───────────────────────────────────────────────
   Se conserva el bloque saturado (es lo que da carácter a cada pantalla),
   en verde de la marca, con el texto en papel y un filete dorado abajo.
   El destello de menta se retira. */
.pagehead {
  border-radius: 0; border: 0; border-bottom: 3px solid #E5C46B;
  background: #0B3B36;
  color: #F2EFE6; box-shadow: none;
}
.pagehead h1 { color: #F2EFE6; letter-spacing: -.035em; }
.pagehead h2, .pagehead h3 { color: #F2EFE6; }
.pagehead .lede, .pagehead p { color: rgba(242,239,230,.78); }
.pagehead a { color: #E5C46B; }
.pagehead .st, .pagehead .chip, .pagehead .badge {
  background: rgba(242,239,230,.14); color: #F2EFE6; border-color: transparent;
}
.pagehead::after { display: none; }

/* ── Cifras: sin tintes pastel, papel y una regla dorada arriba ─────── */
.grid--4 > .card:nth-child(4n+1), .grid--3 > .card:nth-child(3n+1),
.grid--4 > .card:nth-child(4n+2), .grid--3 > .card:nth-child(3n+2),
.grid--4 > .card:nth-child(4n+3), .grid--3 > .card:nth-child(3n+3),
.grid--4 > .card:nth-child(4n+4) {
  background: var(--surface);
}
.grid--4 > .card, .grid--3 > .card {
  border: 1px solid var(--line); border-top: 2px solid #E5C46B; box-shadow: none;
}
.grid--4 > .card .count--lg, .grid--3 > .card .count--lg { color: var(--accent); }
:root[data-theme="dark"] .grid--4 > .card .count--lg,
:root[data-theme="dark"] .grid--3 > .card .count--lg { color: #E5C46B; }
.stat, .stat__n { color: var(--ink); }
.stat { border-radius: 0; border-top: 2px solid #E5C46B; box-shadow: none; }

/* ── Barras: sin degradado; la rueda de cinco, en la familia ─────────── */
.chart__row > i { border-radius: 0; background: var(--accent-wash); height: 9px; }
.chart__row > i::after { border-radius: 0; background: var(--accent); }
.chart__row:nth-child(5n+1) > i::after { background: #0B3B36; }
.chart__row:nth-child(5n+2) > i::after { background: #1F6F8B; }
.chart__row:nth-child(5n+3) > i::after { background: #C79B2E; }
.chart__row:nth-child(5n+4) > i::after { background: #6E5A9B; }
.chart__row:nth-child(5n+5) > i::after { background: #2E7D6E; }
:root[data-theme="dark"] .chart__row:nth-child(5n+1) > i::after { background: #E5C46B; }

/* ── Botones: un solo tratamiento, plano ─────────────────────────────── */
.btn {
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent); box-shadow: none;
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); filter: none; box-shadow: none; }
.btn--ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); box-shadow: none; }
.btn--ghost:hover { background: var(--accent-wash); color: var(--accent); filter: none; }
.btn--danger { background: var(--surface); color: #9A3B1F; border-color: #E8C4B6; }
.btn--danger:hover { background: #FBE9E2; color: #9A3B1F; border-color: #E8C4B6; }

/* ── Rótulos de sección y etiquetas de estado ────────────────────────── */
.section-title { color: var(--accent); }
:root[data-theme="dark"] .section-title { color: #E5C46B; }
.section-title::after { background: #E5C46B; }
.st { border-radius: 999px; }
.st--open, .st--rev-accepted     { background: #E8EDE9; color: #0B3B36; }
.st--draft, .st--rev-new         { background: #E4EDF1; color: #17505F; }
.st--rev-shortlisted, .st--closed{ background: #FBF3DC; color: #8A6A16; }
.st--rev-rejected                { background: #FBE9E2; color: #9A3B1F; }
.chip { background: #EDE9E1; color: var(--ink-2); border: 0; }
:root[data-theme="dark"] .chip { background: #14574F; color: #F2EFE6; }

/* La tira de plataforma toma --hondo, ya redefinido arriba. */