/* ===========================
   Material Design 3 · Tokens
   (ajustá los colores a tu DS)
   =========================== */
:root{
  --md-sys-color-primary:#00AEEF;      /* Primary */
  --md-sys-color-on-primary:#ffffff;

  --md-sys-color-surface:#ffffff;
  --md-sys-color-on-surface:#1b1b1f;
  --md-sys-color-surface-variant:#f2f5f3;
  --md-sys-color-on-surface-variant:#4f5451;

  --md-sys-color-outline:#d6dad7;
  --md-sys-color-outline-variant:#c6cbc7;

  --md-elevation-1:0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);

  --md-sys-shape-corner-xl:20px;
  --container-max:1000px;
}


/* ===========================
   Dark mode
   =========================== */
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-surface: #121412;
    --md-sys-color-on-surface: #e6e9e6;
    --md-sys-color-surface-variant: #1a1d1a;
    --md-sys-color-on-surface-variant: #aab2ac;
    --md-sys-color-outline: #2a312a;
    --md-sys-color-outline-variant: #333c33;
  }
}

/* ===========================
   Base
   =========================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  line-height: 1.6;

  /* Bloquea seleccionar/copiar */
  -webkit-user-select: none;
  user-select: none;
}

a { color: inherit; text-underline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }

/* ===========================
   App Bar (ligero + blur)
   =========================== */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px) saturate(180%);
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid var(--md-sys-color-outline);
}
@media (prefers-color-scheme: dark) {
  .appbar {
    background: rgba(20,20,20,.8);
  }
}

.appbar__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
}

.appbar__inner .title { font-weight: 700; letter-spacing: .2px; }
.appbar__inner .subtitle { opacity: .75; font-size: 13px; }

/* Logo */
.appbar__inner img.logo {
  height: 60px !important;     /* ajustá 20–28px a gusto */
  width: auto !important;
  margin-right: 8px;
  vertical-align: middle;
}

/* ===========================
   Tabs (chips-style M3)
   =========================== */
.tabs {
  display: flex;
  gap: 8px;
  padding: 10px 20px;
  background: transparent; /* sin franja */
  max-width: var(--container-max);
  margin: 0 auto;
  overflow: auto;
}

.tab {
  border: 1px solid var(--md-sys-color-outline);
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.tab:hover { border-color: var(--md-sys-color-outline-variant); }
.tab:focus-visible { outline: 2px solid color-mix(in oklab, var(--md-sys-color-primary) 60%, transparent); outline-offset: 2px; }

.tab[aria-selected="true"] {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-color: var(--md-sys-color-primary);
}

/* ===========================
   Layout & Cards
   =========================== */
.container {
  max-width: var(--container-max);
  margin: 20px auto 0; /* espacio de 20px bajo el header */
  padding: 0 20px 32px;
}

main.container {
  margin-top: 20px;
}


.section { display: none; }
.section[aria-hidden="false"] { display: block; }

.grid { display: grid; gap: 20px; }
@media (min-width: 880px) { .grid.two { grid-template-columns: 1fr 1fr; } }

.card {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-xl);
  padding: 20px;
  box-shadow: var(--md-elevation-1);
}

/* ===========================
   Tipografía
   =========================== */
h1 {
  font-size: clamp(22px, 3vw, 28px);
  margin: 4px 0 12px;
}
h2 {
  font-size: 18px;
  margin: 24px 0 12px;
  color: var(--md-sys-color-primary);
}
h3 { font-size: 16px; margin: 18px 0 10px; }
p, li { font-size: 15px; }
.muted { color: var(--md-sys-color-on-surface-variant); }

/* ===========================
   Footer
   =========================== */
footer {
  margin-top: 40px;
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

/* ===========================
   Accesibilidad mínima
   =========================== */
:focus-visible { scroll-margin-top: 80px; }


/* ===========================
   Footer profesional
   =========================== */
footer {
  margin-top: 60px;
  padding: 30px 20px;
  background: var(--md-sys-color-surface-variant);
  border-top: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
  width: 100%; /* ocupa todo el ancho como el header */
}

.footer-container {
  max-width: var(--container-max); /* mismo ancho que header y main */
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

@media (min-width: 720px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-brand {
  font-weight: 600;
  font-size: 15px;
}

.footer-note {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.4;
}

.footer-right ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-right li {
  font-size: 13px;
}

.footer-right a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

.footer-right a:hover {
  text-decoration: underline;
}

/* ===========================
   Header con logo + botones
   =========================== */

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  background-color: #111; /* ajusta al color de fondo que uses */
}

.logo img {
  max-height: 60px; /* ajusta según lo necesites */
}

.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 15px 0;
}

/* ...existing code... */
.nav-buttons .btn.active {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-bottom: 2px solid var(--md-sys-color-primary);
  font-weight: 600;
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
/* ...existing code... */

.btn {
  padding: 8px 16px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.btn-primary {
  background-color: #0d6efd;
  color: #fff;
}

.btn-secondary {
  background-color: #222;
  color: #fff;
}