/* Tipografía y paleta compartidas con la plataforma del congreso.
   Son dos aplicaciones distintas, pero para quien las usa son un solo producto:
   si los verdes no coinciden y la letra cambia al saltar de un área a otra, se
   nota aunque nadie sepa decir por qué. Los valores son los del congreso, que
   es donde vive la mayor parte de la interfaz.

   La fuente se pide relativa a esta hoja, no desde la raíz del dominio: cada
   área cuelga de un prefijo distinto y una ruta absoluta se rompería. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;
  font-display:swap;src:url("../inter-var.woff2") format("woff2")}

/* ATBC Connect — member community platform.
   Palette: rainforest green primary, warm clay accent, same neutral surfaces and
   card/topbar structure as the ATBC 2026 awards app. */
:root {
  --bg: #f3f8f3;
  --surface: #ffffff;
  --ink: #0f1a15;
  --ink-soft: #33433a;
  --muted: #5b6b62;
  --line: #dde7df;
  --primary: #0e7c66;
  --primary-strong: #115e4a;
  --primary-soft: #ecfdf5;
  --clay: #b8622f;
  --mustard: #d99a32;
  --green-good: #166534;
  --red-bad: #b3261e;
  --shadow: 0 1px 3px rgba(16,32,25,.07), 0 8px 24px rgba(16,32,25,.05);
  --radius: 12px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}
a { color: var(--primary); }

/* ---------- Topbar ---------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  max-width: 1180px; margin: 0 auto; padding: 10px 20px; flex-wrap: wrap;
}
.topbar__brand { font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.topbar__brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--primary); display: inline-block; }
.topbar__links { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.topbar__links a { color: var(--ink-soft); text-decoration: none; font-size: 14px; padding: 4px 0; }
.topbar__links a:hover { color: var(--primary); }
.topbar__links a.is-active { color: var(--primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--primary); }
.topbar__user { font-size: 13px; color: var(--muted); }
.topbar__logout { background: var(--primary-soft); color: var(--primary) !important; padding: 6px 12px; border-radius: 8px; font-weight: 500; }

/* ---------- Layout ---------- */
.page { max-width: 1180px; margin: 22px auto; padding: 0 20px 70px; }
.page--narrow { max-width: 760px; }
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 18px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card__body { padding: 18px 20px 20px; }
.card__head { padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card__head h2, .card__head h3 { margin: 0; font-size: 16px; }
h1 { font-size: 24px; margin: 0 0 4px; letter-spacing: -.015em; }
h2 { font-size: 19px; }
.lede { color: var(--muted); margin: 0 0 18px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 12px; }
.section-title h2 { margin: 0; font-size: 17px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.right { text-align: right; }
.stack > * + * { margin-top: 12px; }

/* ---------- Stats ---------- */
.stat { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.stat__n { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.stat__label { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; border: 1px solid transparent; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; text-decoration: none;
  background: var(--primary); color: #fff;
}
.btn:hover { background: var(--primary-strong); }
.btn--ghost { background: var(--surface); color: var(--ink-soft); border-color: var(--line); }
.btn--ghost:hover { background: var(--primary-soft); color: var(--primary); }
.btn--danger { background: var(--red-bad); }
.btn--sm { padding: 5px 11px; font-size: 13px; }
.btn--block { display: block; width: 100%; text-align: center; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Forms ---------- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number],
input[type=date], input[type=datetime-local], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-size: 14px; background: #fff; color: var(--ink);
}
textarea { min-height: 92px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.field { margin-bottom: 14px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); font-weight: 500; }
.check input { width: auto; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { margin-bottom: 0; min-width: 150px; }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.table tr:last-child td { border-bottom: none; }
.table--hover tbody tr:hover { background: var(--primary-soft); }
.table-wrap { overflow-x: auto; }

/* ---------- Badges ---------- */
.badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-strong); letter-spacing: .01em; }
.badge--warn { background: #fdf1dd; color: #8a5a12; }
.badge--bad { background: #fdeceb; color: var(--red-bad); }
.badge--ok { background: #e6f4ea; color: var(--green-good); }
.badge--muted { background: #eef1ef; color: var(--muted); }

/* ---------- Member cards ---------- */
.person { display: flex; gap: 12px; align-items: flex-start; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--primary-soft);
  color: var(--primary-strong); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; overflow: hidden;
}
.avatar--lg { width: 74px; height: 74px; font-size: 24px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.person__name { font-weight: 650; color: var(--ink); text-decoration: none; }
.person__meta { font-size: 13px; color: var(--muted); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chip { font-size: 12px; background: #eef1ef; color: var(--ink-soft); padding: 2px 9px; border-radius: 999px; }

/* ---------- Feed ---------- */
.post { border-bottom: 1px solid var(--line); padding: 16px 20px; }
.post:last-child { border-bottom: none; }
.post__head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.post__title { font-weight: 650; margin: 6px 0 2px; }
.post__body { white-space: pre-wrap; }
.post__foot { margin-top: 9px; font-size: 13px; display: flex; gap: 14px; }

/* ---------- Flash / notices ---------- */
.flash { padding: 11px 15px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; border: 1px solid transparent; }
.flash--success { background: #e6f4ea; color: #14532d; border-color: #bfe3cb; }
.flash--error { background: #fdeceb; color: #7f1d1d; border-color: #f3c8c5; }
.flash--info { background: var(--primary-soft); color: var(--primary-strong); border-color: #c9e2d9; }
.notice { background: #fdf7ec; border: 1px solid #f0dfbd; color: #7a5a17; border-radius: 10px; padding: 11px 14px; font-size: 13.5px; }

/* ---------- Auth pages ---------- */
.auth { max-width: 430px; margin: 7vh auto; }
.auth__brand { text-align: center; margin-bottom: 18px; }
.auth__brand h1 { font-size: 22px; margin: 8px 0 2px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; margin: 16px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Misc ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--ink-soft); font-size: 14px; border-radius: 8px 8px 0 0; }
.tabs a.is-active { background: var(--surface); color: var(--primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--primary); }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.bar { height: 7px; border-radius: 999px; background: var(--primary-soft); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--primary); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: #eef1ef; padding: 1px 6px; border-radius: 6px; }
.empty { text-align: center; color: var(--muted); padding: 34px 20px; font-size: 14px; }


/* ── Tira de cambio entre plataformas ──────────────────────────────────────
   Socios y congreso son dos aplicaciones distintas, pero para el comité son un
   solo producto: una sesión, dos pestañas. La tira va por encima de la barra
   propia de cada una y se ve idéntica en las dos, que es lo que hace que no
   parezcan dos sitios. */
.switchbar { background:#0b2b22; color:#cfe3d9; font-size:13px; }
.switchbar__in { max-width:1180px; margin:0 auto; padding:0 18px;
  display:flex; align-items:center; gap:4px; height:34px; }
.switchbar__org { font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:11px; color:#7fb8a3; margin-right:12px; }
.switchbar__tab { color:#cfe3d9; text-decoration:none; padding:0 14px;
  line-height:34px; border-bottom:2px solid transparent; }
.switchbar__tab:hover { color:#fff; background:rgba(255,255,255,.05); }
.switchbar__tab.is-here { color:#fff; font-weight:600; border-bottom-color:#e6c01f; }
.switchbar__who { margin-left:auto; color:#7fb8a3; font-size:12px; }


/* ── Navegación con el mismo aspecto que el área del congreso ───────────────
   Allí los apartados son pastillas dentro de un grupo con fondo propio; aquí
   eran enlaces de texto con un subrayado. Mismo color y misma letra no bastan
   si la forma de la navegación cambia al saltar de un área a otra: es lo
   primero que mira el ojo y lo que delataba que eran dos aplicaciones.

   Se excluyen el nombre y el botón de salir, que no son apartados y no deben
   entrar en el grupo. */
.topbar { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); }
.topbar__inner { max-width: 1460px; }
.topbar__links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  background: #f4f8f4; border: 1px solid var(--line);
  border-radius: 999px; padding: 3px;
}
.topbar__links > a:not(.topbar__user):not(.topbar__logout) {
  padding: 6px 11px; border-radius: 999px; font-weight: 700; font-size: 12.5px;
  color: var(--ink-soft); white-space: nowrap; box-shadow: none;
  transition: color .13s, background .13s;
}
.topbar__links > a:not(.topbar__user):not(.topbar__logout):hover {
  color: var(--primary); background: rgba(14,124,102,.06);
}
.topbar__links > a.is-active:not(.topbar__user):not(.topbar__logout) {
  background: var(--surface); color: var(--primary); font-weight: 700;
  box-shadow: 0 2px 8px rgba(10,44,32,.07);
}
/* El nombre y la salida viven fuera del grupo, a la derecha. */
.topbar__user, .topbar__logout { margin-left: 6px; }

/* La tira compartida se mide igual en las dos áreas: es el elemento que más se
   compara, porque está en ambas y a la misma altura. */
.switchbar__in { max-width: 1460px; }


/* ── Recuadros, encabezados, botones y campos: el mismo lenguaje ────────────
   Hasta aquí compartían color y letra, pero las FORMAS seguían siendo otras:
   sombras distintas, tarjetas sin borde, botones planos frente a botones con
   degradado, campos con otro radio y sin anillo de foco. Al saltar de un área
   a otra el ojo lo registra aunque nadie sepa nombrarlo.

   Los valores son los del área del congreso, que es donde vive la mayor parte
   de la interfaz. Van al final de la hoja a propósito: así se ve de un vistazo
   qué se ha alineado y se puede quitar entero si algún día divergen. */

/* Fichas de estilo, copiadas de las que EFECTIVAMENTE usa el congreso.
   Ojo: su hoja redefine varias más abajo, así que hay que mirar la última
   de cada una y no la primera — en CSS manda la última que se lee. */
:root {
  --bg: #f7faf8;
  --surface: #fff;
  --ink: #0d1a14;
  --ink-soft: #31423a;
  --muted: #657a6f;
  --line: #e6eee9;
  --primary: #0e7c66;
  --primary-strong: #115e4a;
  --primary-soft: #ecfdf5;
  --shadow: 0 10px 30px rgba(13,43,31,.09);
  --shadow-sm: 0 1px 2px rgba(13,43,31,.05),0 2px 8px rgba(13,43,31,.05);
  --radius: 12px;
  --radius-sm: 8px;
}

/* Tarjetas: borde fino MÁS sombra suave, no sólo sombra. El borde es lo que
   las hace legibles sobre el gris del fondo. */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card__head { padding: 14px 18px; }
.card__body { padding: 16px 18px 18px; }
.card__head h2, .card__head h3 {
  font-size: 15px; font-weight: 800; color: var(--ink);
  letter-spacing: -.005em;
}

/* Encabezados */
h1 { font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
h3 { font-size: 15px; font-weight: 800; }

/* Botones */
.btn {
  border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); gap: 7px;
  transition: background .13s, border-color .13s, color .13s;
}
.btn:not(.btn--ghost):not(.btn--danger) {
  background: linear-gradient(180deg, #159a7e, #0e7c66);
  border-color: var(--primary); color: #fff; box-shadow: var(--shadow-sm);
}
.btn:not(.btn--ghost):not(.btn--danger):hover {
  background: linear-gradient(180deg, #0e7c66, #0b6151);
}
.btn--sm { padding: 5px 10px; font-size: 12px; }

/* Campos, con su anillo de foco: sin él no se ve dónde estás escribiendo. */
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=date], input[type=datetime-local],
select, textarea {
  padding: 9px 12px; border-radius: var(--radius-sm);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14,124,102,.15);
}
textarea { min-height: 90px; line-height: 1.5; }


/* ── Acentos por apartado, como en el área del congreso ────────────────────
   Allí cada módulo tiene su color y su icono; aquí eran ocho enlaces iguales.
   Se reutiliza la misma paleta a propósito: no es decoración, es lo que
   permite reconocer un apartado de un vistazo sin leer el texto. */
[data-nav="home"]   { --accent: #0e7c66; }
[data-nav="dir"]    { --accent: #1d6fb8; }
[data-nav="groups"] { --accent: #8a5cd6; }
[data-nav="events"] { --accent: #0f8ea3; }
[data-nav="jobs"]   { --accent: #c2731a; }
[data-nav="mentor"] { --accent: #b04bb8; }
[data-nav="member"] { --accent: #c8901a; }
[data-nav="admin"]  { --accent: #d1495b; }

.topbar__links > a[data-nav] {
  display: inline-flex; align-items: center; gap: 6px;
}
.nico { width: 15px; height: 15px; flex: none; opacity: .75; }
.topbar__links > a[data-nav]:hover { color: var(--accent); background: transparent; }
.topbar__links > a[data-nav]:hover .nico { opacity: 1; color: var(--accent); }
.topbar__links > a[data-nav].is-active {
  background: color-mix(in srgb, var(--accent) 11%, #fff);
  color: var(--accent);
}
.topbar__links > a[data-nav].is-active .nico { opacity: 1; color: var(--accent); }