/* dark.css — tema básico.
   Estructura con display:flex (header, header > nav, footer)
   + identidad mínima de color (body) en tono oscuro.
   No rediseña button/input/a/b. Cargado por defecto en el portal index.html.
   Incluye TODAS las utility classes inline. Autosuficiente con 1 solo <link>. */

:root {
  --bg: #0d0d1a;
  --fg: #e6e6f0;
  --muted: #8a8aa0;
  --accent: #ff2e88;
  --accent-2: #7cf6ff;
  --card: #161628;
  --border: #2a2a44;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

header > nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

a { color: var(--accent-2); }
b, strong { color: var(--fg); }

/* ===================== utility classes inline ===================== */

/* ---- bordes ---- */
.border { border: 1px solid var(--border, #444) }
.border-thick { border: 2px solid var(--border, #444) }
.rounded { border-radius: 8px }
.rounded-lg { border-radius: 16px }
.rounded-full { border-radius: 999px }

/* ---- imágenes ---- */
.image-banner {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.image-banner-tall { aspect-ratio: 16 / 9; object-fit: cover; width: 100% }
.image-fit-cover { object-fit: cover }
.image-fit-contain { object-fit: contain }

/* ---- layout ---- */
.flex { display: flex }
.flex-col { display: flex; flex-direction: column }
.flex-wrap { flex-wrap: wrap }
.items-center { align-items: center }
.items-start { align-items: flex-start }
.items-end { align-items: flex-end }
.justify-center { justify-content: center }
.justify-between { justify-content: space-between }
.justify-end { justify-content: flex-end }
.gap-1 { gap: 0.5rem }
.gap-2 { gap: 1rem }
.gap-3 { gap: 1.5rem }
.center { display: flex; align-items: center; justify-content: center }
.stack > * + * { margin-top: 1rem }
.cluster { display: flex; flex-wrap: wrap; gap: 0.5rem }

/* ---- spacing ---- */
.p-1 { padding: 0.5rem }
.p-2 { padding: 1rem }
.p-3 { padding: 1.5rem }
.px-2 { padding-left: 1rem; padding-right: 1rem }
.py-2 { padding-top: 1rem; padding-bottom: 1rem }
.m-0 { margin: 0 }
.mt-1 { margin-top: 0.5rem }
.mt-2 { margin-top: 1rem }
.mt-3 { margin-top: 1.5rem }
.mx-auto { margin-left: auto; margin-right: auto }

/* ---- texto ---- */
.text-center { text-align: center }
.text-right { text-align: right }
.text-sm { font-size: 0.85rem }
.text-lg { font-size: 1.25rem }
.text-xl { font-size: 1.5rem }
.text-muted { color: var(--muted, #888) }
.text-accent { color: var(--accent, #ff2e88) }
.uppercase { text-transform: uppercase }
.bold { font-weight: 700 }

/* ---- caja ---- */
.card {
  background: var(--card, #161628);
  border: 1px solid var(--border, #444);
  border-radius: 12px;
  padding: 1rem;
}
.shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.15) }
.hidden { display: none }
.block { display: block }
.inline { display: inline }
.w-full { width: 100% }
.maxw { max-width: 60ch; margin-left: auto; margin-right: auto }

/* ---- grid ---- */
.grid { display: grid; gap: 1rem }
.grid-2 { grid-template-columns: repeat(2, 1fr) }
.grid-3 { grid-template-columns: repeat(3, 1fr) }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) }

@media (max-width: 600px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr }
}