/* ══════════════════════════════════════════════════════════════════════
   Asociación Argentina de Odorología Forense — hoja de estilos
   Paleta sobria, institucional. Todos los colores se definen acá arriba:
   si querés cambiar la identidad visual del sitio, tocá solo estas líneas.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --tinta:        #0f2830;
  --tinta-suave:  #3d565e;
  --tenue:        #6e858c;

  --petroleo:     #124b58;
  --petroleo-osc: #0c343d;
  --petroleo-cla: #d9e8ea;

  --bronce:       #9c6b2f;
  --bronce-cla:   #f2e6d5;

  --papel:        #f7f5f1;
  --superficie:   #ffffff;
  --superficie-2: #fbfaf7;
  --borde:        #e3ded5;
  --borde-fuerte: #cfc7ba;

  --exito:        #2f6b4f;
  --alerta:       #8a5a1a;
  --peligro:      #9a3535;

  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  --radio:      4px;
  --radio-g:    8px;
  --ancho:      1120px;
  --ancho-texto: 720px;
  --sombra:     0 1px 2px rgba(15, 40, 48, .06), 0 4px 14px rgba(15, 40, 48, .05);
  --sombra-alta: 0 2px 6px rgba(15, 40, 48, .08), 0 12px 32px rgba(15, 40, 48, .10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta:        #e8eaea;
    --tinta-suave:  #aebcc0;
    --tenue:        #7f9198;

    --petroleo:     #6bb6c6;
    --petroleo-osc: #a8d6e0;
    --petroleo-cla: #16333b;

    --bronce:       #d8a765;
    --bronce-cla:   #33281a;

    --papel:        #0d1a1f;
    --superficie:   #12242a;
    --superficie-2: #162a31;
    --borde:        #223a42;
    --borde-fuerte: #2f4c56;

    --exito:        #6fbf94;
    --alerta:       #d3a45f;
    --peligro:      #e08585;

    --sombra:      0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .28);
    --sombra-alta: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--tinta);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; }

a { color: var(--petroleo); text-decoration-color: color-mix(in srgb, var(--petroleo) 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--petroleo-osc); text-decoration-color: currentColor; }

hr { border: 0; border-top: 1px solid var(--borde); margin: 2rem 0; }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--bronce-cla); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--petroleo);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── estructura ─────────────────────────────────────────────────────── */

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 1.25rem; }
.angosto    { max-width: var(--ancho-texto); }

main { flex: 1 0 auto; padding-bottom: 4rem; }

.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--petroleo); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.saltar:focus { left: .5rem; top: .5rem; }

/* ── encabezado ─────────────────────────────────────────────────────── */

.cabecera {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(6px);
}

.cabecera-fila {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 74px;
}

.marca { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; flex: 0 0 auto; }

.escudo {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  background: var(--petroleo);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: .95rem;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 3px var(--petroleo-cla);
}

.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-nombre { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; }
.marca-sub { font-size: .72rem; color: var(--tenue); letter-spacing: .09em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; flex-wrap: wrap; }
.nav a:not(.boton) {
  padding: .45rem .7rem; border-radius: var(--radio);
  font-size: .93rem; color: var(--tinta-suave); text-decoration: none;
  white-space: nowrap;
}
.nav a:not(.boton):hover { background: var(--superficie-2); color: var(--tinta); }
.nav a.activo { color: var(--petroleo); background: var(--petroleo-cla); font-weight: 500; }
.nav a.boton { text-decoration: none; }

.nav-sep { width: 1px; height: 22px; background: var(--borde); margin: 0 .4rem; }

/* menú desplegable de la cuenta */
.cuenta { position: relative; }
.cuenta > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .5rem .3rem .35rem; border-radius: 999px;
  border: 1px solid var(--borde);
}
.cuenta > summary::-webkit-details-marker { display: none; }
.cuenta > summary:hover { background: var(--superficie-2); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bronce-cla); color: var(--bronce);
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
}
.cuenta-menu {
  position: absolute; right: 0; top: calc(100% + .5rem);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-g); box-shadow: var(--sombra-alta);
  min-width: 230px; padding: .4rem; z-index: 60;
}
.cuenta-menu .encabezado-menu { padding: .6rem .7rem; border-bottom: 1px solid var(--borde); margin-bottom: .3rem; }
.cuenta-menu .encabezado-menu strong { display: block; font-size: .9rem; }
.cuenta-menu .encabezado-menu span { font-size: .78rem; color: var(--tenue); }
.cuenta-menu a {
  display: block; padding: .5rem .7rem; border-radius: var(--radio);
  font-size: .9rem; color: var(--tinta-suave); text-decoration: none;
}
.cuenta-menu a:hover { background: var(--superficie-2); color: var(--tinta); }

/* ── botones ────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .58rem 1.1rem;
  font-family: var(--sans); font-size: .92rem; font-weight: 500; line-height: 1.2;
  border-radius: var(--radio); border: 1px solid transparent;
  background: var(--petroleo); color: #fff;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.boton:hover { background: var(--petroleo-osc); color: #fff; }
.boton:active { transform: translateY(1px); }

.boton.secundario { background: var(--superficie); color: var(--tinta); border-color: var(--borde-fuerte); }
.boton.secundario:hover { background: var(--superficie-2); color: var(--tinta); border-color: var(--tenue); }

.boton.fantasma { background: transparent; color: var(--petroleo); border-color: transparent; }
.boton.fantasma:hover { background: var(--petroleo-cla); }

.boton.peligro { background: transparent; color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 35%, transparent); }
.boton.peligro:hover { background: color-mix(in srgb, var(--peligro) 10%, transparent); color: var(--peligro); }

.boton.chico { padding: .34rem .7rem; font-size: .82rem; }

@media (prefers-color-scheme: dark) {
  .boton { color: var(--papel); }
  .boton:hover { color: var(--papel); }
}

/* ── portada ────────────────────────────────────────────────────────── */

.portada {
  background:
    radial-gradient(1100px 420px at 15% -10%, color-mix(in srgb, var(--petroleo) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--superficie), var(--papel));
  border-bottom: 1px solid var(--borde);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}
.portada .volanta {
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bronce); font-weight: 600; margin-bottom: 1rem;
}
.portada h1 { max-width: 16ch; margin-bottom: 1rem; }
.portada .bajada { font-size: 1.12rem; color: var(--tinta-suave); max-width: 56ch; margin-bottom: 1.8rem; }
.portada .acciones { display: flex; gap: .7rem; flex-wrap: wrap; }

.cifras { display: flex; gap: 2.5rem; margin-top: 2.8rem; flex-wrap: wrap; }
.cifra strong { display: block; font-family: var(--serif); font-size: 1.8rem; color: var(--petroleo); line-height: 1; }
.cifra span { font-size: .82rem; color: var(--tenue); letter-spacing: .04em; }

/* ── secciones y tarjetas ───────────────────────────────────────────── */

.seccion { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.seccion + .seccion { border-top: 1px solid var(--borde); }

.titulo-seccion {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap;
}
.titulo-seccion h2 { margin: 0; }
.titulo-seccion a { font-size: .9rem; }

.grilla { display: grid; gap: 1.25rem; }
.grilla.dos  { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.grilla.tres { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  padding: 1.4rem;
  box-shadow: var(--sombra);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
a.tarjeta { text-decoration: none; color: inherit; display: block; }
a.tarjeta:hover { box-shadow: var(--sombra-alta); border-color: var(--borde-fuerte); transform: translateY(-2px); }

.tarjeta .fecha-item { font-size: .78rem; color: var(--tenue); letter-spacing: .03em; }
.tarjeta h3 { font-size: 1.12rem; margin: .35rem 0 .5rem; }
.tarjeta p { font-size: .93rem; color: var(--tinta-suave); margin: 0; }

/* novedad destacada */
.destacada {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-g); padding: 2rem; box-shadow: var(--sombra);
}
.destacada .marca-destacada {
  display: inline-block; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--bronce); font-weight: 600; margin-bottom: .7rem;
}
.destacada h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
.destacada .ilustracion {
  aspect-ratio: 4 / 3; border-radius: var(--radio);
  background: linear-gradient(140deg, var(--petroleo-cla), color-mix(in srgb, var(--bronce-cla) 70%, var(--petroleo-cla)));
  display: grid; place-items: center; overflow: hidden;
}
.destacada .ilustracion img { width: 100%; height: 100%; object-fit: cover; }
.destacada .ilustracion .glifo { font-family: var(--serif); font-size: 3.4rem; color: var(--petroleo); opacity: .5; }
@media (max-width: 780px) { .destacada { grid-template-columns: 1fr; padding: 1.4rem; gap: 1.4rem; } }

/* ── contenido de texto largo ───────────────────────────────────────── */

.prosa { font-size: 1.03rem; color: var(--tinta); }
.prosa > *:first-child { margin-top: 0; }
.prosa h2 { margin-top: 2.2rem; font-size: 1.5rem; }
.prosa h3 { margin-top: 1.8rem; }
.prosa ul, .prosa ol { padding-left: 1.3rem; margin: 0 0 1.2em; }
.prosa li { margin-bottom: .4em; }
.prosa blockquote {
  margin: 1.4em 0; padding: .2rem 0 .2rem 1.2rem;
  border-left: 3px solid var(--bronce);
  color: var(--tinta-suave); font-style: italic;
}
.prosa blockquote p:last-child { margin-bottom: 0; }
.prosa code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .88em; background: var(--superficie-2);
  border: 1px solid var(--borde); border-radius: 3px; padding: .1em .35em;
}
.prosa pre {
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1rem; overflow-x: auto;
}
.prosa pre code { border: 0; background: none; padding: 0; }
.prosa table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .94rem; }
.prosa th, .prosa td { border: 1px solid var(--borde); padding: .55rem .7rem; text-align: left; }
.prosa th { background: var(--superficie-2); font-weight: 600; }
.prosa img { border-radius: var(--radio); margin: 1.4em 0; }

/* ── encabezado de página interna ───────────────────────────────────── */

.encabezado-pagina {
  padding: clamp(2.2rem, 5vw, 3.4rem) 0 clamp(1.6rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}
.encabezado-pagina .volanta {
  font-size: .74rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--bronce); font-weight: 600; margin-bottom: .7rem;
}
.encabezado-pagina p.bajada { color: var(--tinta-suave); font-size: 1.05rem; max-width: 60ch; margin: 0; }

.miga { font-size: .84rem; color: var(--tenue); margin-bottom: 1rem; }
.miga a { color: var(--tenue); }
.miga a:hover { color: var(--petroleo); }
.miga span { margin: 0 .4rem; opacity: .6; }

/* ── foro ───────────────────────────────────────────────────────────── */

.lista-categorias { display: flex; flex-direction: column; gap: .8rem; }

.categoria-fila {
  display: grid; grid-template-columns: 46px 1fr auto auto;
  gap: 1.1rem; align-items: center;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-g); padding: 1.1rem 1.3rem;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.categoria-fila:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra); }
.categoria-icono {
  width: 46px; height: 46px; border-radius: var(--radio);
  background: var(--petroleo-cla); color: var(--petroleo);
  display: grid; place-items: center; font-size: 1.25rem;
}
.categoria-fila h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.categoria-fila p { margin: 0; font-size: .88rem; color: var(--tinta-suave); }
.categoria-numeros { text-align: right; font-size: .82rem; color: var(--tenue); white-space: nowrap; }
.categoria-numeros strong { color: var(--tinta); font-weight: 600; }
.categoria-ultimo { font-size: .82rem; color: var(--tenue); max-width: 220px; text-align: right; }
.categoria-ultimo strong { display: block; color: var(--tinta-suave); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) {
  .categoria-fila { grid-template-columns: 40px 1fr; }
  .categoria-numeros, .categoria-ultimo { grid-column: 2; text-align: left; max-width: none; }
  .categoria-ultimo strong { white-space: normal; }
}

.lista-temas { border: 1px solid var(--borde); border-radius: var(--radio-g); overflow: hidden; background: var(--superficie); }
.tema-fila {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 1.2rem; align-items: center;
  padding: .95rem 1.25rem; border-bottom: 1px solid var(--borde);
  text-decoration: none; color: inherit;
}
.tema-fila:last-child { border-bottom: 0; }
.tema-fila:hover { background: var(--superficie-2); }
.tema-titulo { font-family: var(--serif); font-size: 1.04rem; font-weight: 600; margin: 0 0 .2rem; }
.tema-meta { font-size: .82rem; color: var(--tenue); }
.tema-numeros { text-align: center; font-size: .8rem; color: var(--tenue); min-width: 62px; }
.tema-numeros strong { display: block; font-size: 1.05rem; color: var(--tinta); font-family: var(--serif); }
@media (max-width: 700px) { .tema-fila { grid-template-columns: 1fr; gap: .35rem; } .tema-numeros { text-align: left; } }

/* mensajes */
.hilo { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.8rem; }

.mensaje {
  display: grid; grid-template-columns: 56px 1fr; gap: 1.1rem;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-g); padding: 1.3rem;
}
.mensaje.apertura { border-color: var(--borde-fuerte); box-shadow: var(--sombra); }
.mensaje.oculto { opacity: .55; border-style: dashed; }
.mensaje-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--petroleo-cla); color: var(--petroleo);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600;
}
.mensaje-cabecera { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .55rem; }
.mensaje-autor { font-weight: 600; font-size: .96rem; }
.mensaje-fecha { font-size: .81rem; color: var(--tenue); }
.mensaje-acciones { margin-left: auto; display: flex; gap: .3rem; }
@media (max-width: 620px) {
  .mensaje { grid-template-columns: 1fr; }
  .mensaje-avatar { width: 40px; height: 40px; font-size: .95rem; }
}

/* ── insignias ──────────────────────────────────────────────────────── */

.insignia {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  padding: .16rem .5rem; border-radius: 999px;
  border: 1px solid var(--borde-fuerte); color: var(--tinta-suave);
  background: var(--superficie-2); white-space: nowrap;
}
.insignia.directivo { color: var(--bronce); border-color: color-mix(in srgb, var(--bronce) 40%, transparent); background: var(--bronce-cla); }
.insignia.miembro   { color: var(--petroleo); border-color: color-mix(in srgb, var(--petroleo) 32%, transparent); background: var(--petroleo-cla); }
.insignia.pendiente { color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 35%, transparent); background: color-mix(in srgb, var(--alerta) 10%, transparent); }
.insignia.cerrado   { color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 30%, transparent); background: color-mix(in srgb, var(--peligro) 8%, transparent); }

/* ── avisos ─────────────────────────────────────────────────────────── */

.aviso {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1rem 1.2rem; border-radius: var(--radio-g);
  border: 1px solid var(--borde-fuerte); background: var(--superficie-2);
  font-size: .93rem; margin-bottom: 1.5rem;
}
.aviso .glifo { font-size: 1.1rem; line-height: 1.4; }
.aviso p { margin: 0; }
.aviso p + p { margin-top: .4rem; }
.aviso.info    { border-color: color-mix(in srgb, var(--petroleo) 30%, transparent); background: var(--petroleo-cla); }
.aviso.atencion{ border-color: color-mix(in srgb, var(--alerta) 35%, transparent); background: color-mix(in srgb, var(--alerta) 9%, transparent); }
.aviso.exito   { border-color: color-mix(in srgb, var(--exito) 35%, transparent); background: color-mix(in srgb, var(--exito) 9%, transparent); }

.vacio { text-align: center; padding: 3.5rem 1.5rem; color: var(--tenue); }
.vacio .glifo { font-size: 2.4rem; opacity: .35; display: block; margin-bottom: .6rem; font-family: var(--serif); }

/* ── formularios ────────────────────────────────────────────────────── */

.campo { margin-bottom: 1.15rem; }
.campo label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .35rem; color: var(--tinta); }
.campo .ayuda { font-size: .82rem; color: var(--tenue); margin-top: .3rem; }

input[type="text"], input[type="email"], input[type="url"], input[type="number"],
select, textarea {
  width: 100%; padding: .6rem .8rem;
  font-family: var(--sans); font-size: .95rem; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--petroleo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--petroleo) 16%, transparent);
}
textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
textarea.grande { min-height: 340px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9rem; }

.casilla { display: flex; align-items: center; gap: .5rem; font-size: .92rem; cursor: pointer; }
.casilla input { width: auto; margin: 0; accent-color: var(--petroleo); }

.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }

.acciones-form { display: flex; gap: .7rem; align-items: center; margin-top: 1.5rem; flex-wrap: wrap; }

.caja-form {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-g); padding: 1.6rem; box-shadow: var(--sombra);
}

.pista-markdown { font-size: .82rem; color: var(--tenue); margin-top: .4rem; }
.pista-markdown code { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 3px; padding: 0 .3em; }

/* ── tablas de administración ───────────────────────────────────────── */

.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio-g); background: var(--superficie); }
table.datos { width: 100%; border-collapse: collapse; font-size: .91rem; }
table.datos th {
  text-align: left; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tenue); font-weight: 600;
  padding: .8rem 1rem; border-bottom: 1px solid var(--borde); background: var(--superficie-2);
  white-space: nowrap;
}
table.datos td { padding: .8rem 1rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
table.datos tr:last-child td { border-bottom: 0; }
table.datos tr:hover td { background: var(--superficie-2); }
table.datos .acciones { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
table.datos select, table.datos input[type="text"], table.datos input[type="number"] { padding: .35rem .5rem; font-size: .86rem; }

.panel-nav { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 2rem; border-bottom: 1px solid var(--borde); padding-bottom: .8rem; }
.panel-nav a { padding: .45rem .85rem; border-radius: var(--radio); font-size: .92rem; color: var(--tinta-suave); text-decoration: none; }
.panel-nav a:hover { background: var(--superficie-2); color: var(--tinta); }
.panel-nav a.activo { background: var(--petroleo); color: #fff; }
@media (prefers-color-scheme: dark) { .panel-nav a.activo { color: var(--papel); } }

.tarjetas-numero { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.tarjeta-numero { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-g); padding: 1.2rem; }
.tarjeta-numero strong { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--petroleo); }
.tarjeta-numero span { font-size: .82rem; color: var(--tenue); letter-spacing: .03em; }

/* ── comisión directiva ─────────────────────────────────────────────── */

.grilla-personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.5rem; }
.persona { text-align: center; }
.persona .retrato {
  width: 104px; height: 104px; border-radius: 50%; margin: 0 auto .9rem;
  background: var(--petroleo-cla); color: var(--petroleo);
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--serif); font-size: 1.9rem; font-weight: 600;
  box-shadow: 0 0 0 1px var(--borde), 0 0 0 6px var(--superficie-2);
}
.persona .retrato img { width: 100%; height: 100%; object-fit: cover; }
.persona h3 { font-size: 1.02rem; margin: 0 0 .15rem; }
.persona .cargo { font-size: .82rem; color: var(--bronce); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.persona .detalle { font-size: .86rem; color: var(--tinta-suave); margin-top: .5rem; }

/* ── paginación ─────────────────────────────────────────────────────── */

.paginacion { display: flex; gap: .5rem; justify-content: center; align-items: center; margin-top: 2.5rem; font-size: .9rem; }
.paginacion .actual { color: var(--tenue); }

/* ── pie ────────────────────────────────────────────────────────────── */

.pie {
  flex-shrink: 0;
  background: var(--petroleo-osc);
  color: color-mix(in srgb, #fff 82%, var(--petroleo));
  padding: 3rem 0 1.6rem;
  margin-top: auto;
}
@media (prefers-color-scheme: dark) {
  .pie { background: #0a161b; color: var(--tinta-suave); border-top: 1px solid var(--borde); }
}
.pie a { color: inherit; text-decoration: none; opacity: .85; }
.pie a:hover { color: inherit; opacity: 1; text-decoration: underline; }
.pie-grilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 720px) { .pie-grilla { grid-template-columns: 1fr; gap: 1.8rem; } }
.pie h4 { color: inherit; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--sans); font-weight: 600; opacity: .65; margin-bottom: .9rem; }
.pie ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; }
.pie .institucional { font-family: var(--serif); font-size: 1.15rem; margin-bottom: .5rem; color: #fff; }
@media (prefers-color-scheme: dark) { .pie .institucional { color: var(--tinta); } }
.pie .descripcion { font-size: .9rem; opacity: .75; max-width: 42ch; }
.pie-abajo {
  margin-top: 2.5rem; padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, #fff 15%, transparent);
  font-size: .84rem; opacity: .7;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ── utilidades ─────────────────────────────────────────────────────── */

.solo-lectores { display: none; }
.tenue { color: var(--tenue); }
.chico { font-size: .86rem; }
.centrado { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 1.5rem; } .mt-3 { margin-top: 2.5rem; }

@media print {
  .cabecera, .pie, .boton, .panel-nav { display: none !important; }
  body { background: #fff; }
}