body {
    background-color: #0a0f1c;
    color: #00d4ff;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* header arriba, footer abajo */
    min-height: 100vh;
    text-align: center;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

h1 {
    font-size: 4rem;
    margin: 10px 0;
    color: #00ff88;
}

p {
    font-size: 1.2rem;
    margin: 10px auto 20px; /* centra el bloque con max-width */
    max-width: 600px;
}

a {
    text-decoration: none;
    color: #0a0f1c;
    background-color: #00d4ff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1.2rem;
    transition: background 0.3s;
}

a:hover {
    background-color: #00ff88;
}

img {
    width: 150px;
    max-width: 80%;
    height: auto;
    margin-bottom: 20px;
}

/* Layout superior e inferior */
.topbar { width: 100%; padding: 8px 0; position: sticky; top: 0; z-index: 1000; }
.topbar .container { display: flex; justify-content: flex-end; align-items: center; }

main { width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; }

footer { width: 100%; padding: 12px 0; }

@media (max-width: 768px) {
    h1 {
        font-size: 3rem;
    }
    p {
        font-size: 1rem;
    }
    a {
        font-size: 1rem;
        padding: 8px 16px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2.5rem;
    }
    p {
        font-size: 0.9rem;
    }
    a {
        font-size: 0.9rem;
        padding: 6px 12px;
    }
}

/* ===============================
   Mejora incremental de estilos
   =============================== */

/* Variables base (tema oscuro por defecto) */
:root {
    --bg: #0a0f1c;
    --fg: #e6f7ff;
    --brand: #00d4ff; /* cian */
    --accent: #00ff88; /* verde */
    --muted: #8fb3bf;
    --radius: 8px;
    --container: 960px;
    --heading: var(--accent);
    --link-fg: #0a0f1c;
    --btn-bg: var(--brand);
    --btn-bg-hover: var(--accent);
    /* Superficies diferenciadas */
    --topbar-bg: rgba(230, 247, 255, 0.06);
    --topbar-fg: var(--fg);
    --topbar-border: rgba(230, 247, 255, 0.12);
    --footer-bg: rgba(230, 247, 255, 0.04);
    --footer-fg: var(--fg);
    --footer-border: rgba(230, 247, 255, 0.12);
    /* Controles (select en topbar) */
    --ctrl-bg: rgba(255, 255, 255, 0.06);
    --ctrl-fg: var(--fg);
    --ctrl-border: rgba(230, 247, 255, 0.18);
}

/* Contenedor para limitar ancho del contenido */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

/* Estados de foco accesibles */
a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* Reducir movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Tema claro opcional según preferencia del sistema */
@media (prefers-color-scheme: light) {
    :root {
        --bg: #f6fbff;
        --fg: #0a0f1c;
        --heading: #00c26a;
        --link-fg: #ffffff;
        --btn-bg: #0077b6;
        --btn-bg-hover: #0096c7;
        --topbar-bg: rgba(10, 15, 28, 0.06);
        --topbar-fg: var(--fg);
        --topbar-border: rgba(10, 15, 28, 0.12);
        --footer-bg: rgba(10, 15, 28, 0.04);
        --footer-fg: var(--fg);
        --footer-border: rgba(10, 15, 28, 0.12);
        --ctrl-bg: rgba(10, 15, 28, 0.06);
        --ctrl-fg: var(--fg);
        --ctrl-border: rgba(10, 15, 28, 0.2);
    }
}

/* Preferencia explícita del usuario desde el selector */
[data-theme="dark"] {
    --bg: #0a0f1c;
    --fg: #e6f7ff;
    --heading: #00ff88;
    --link-fg: #0a0f1c;
    --btn-bg: #00d4ff;
    --btn-bg-hover: #00ff88;
    --topbar-bg: rgba(230, 247, 255, 0.06);
    --topbar-fg: var(--fg);
    --topbar-border: rgba(230, 247, 255, 0.12);
    --footer-bg: rgba(230, 247, 255, 0.04);
    --footer-fg: var(--fg);
    --footer-border: rgba(230, 247, 255, 0.12);
}

[data-theme="light"] {
    --bg: #f6fbff;
    --fg: #0a0f1c;
    --heading: #00c26a;
    --link-fg: #ffffff;
    --btn-bg: #0077b6;
    --btn-bg-hover: #0096c7;
    --topbar-bg: rgba(10, 15, 28, 0.06);
    --topbar-fg: var(--fg);
    --topbar-border: rgba(10, 15, 28, 0.12);
    --footer-bg: rgba(10, 15, 28, 0.04);
    --footer-fg: var(--fg);
    --footer-border: rgba(10, 15, 28, 0.12);
    --ctrl-bg: rgba(10, 15, 28, 0.06);
    --ctrl-fg: var(--fg);
    --ctrl-border: rgba(10, 15, 28, 0.2);
}

/* Aplicar variables por encima de estilos previos */
body { background-color: var(--bg) !important; color: var(--fg) !important; }
h1 { color: var(--heading) !important; }
a { color: var(--link-fg) !important; background-color: var(--btn-bg) !important; }
a:hover { background-color: var(--btn-bg-hover) !important; }

/* ===============================
   Header y Footer diferenciados
   =============================== */
.topbar {
    background-color: var(--topbar-bg);
    color: var(--topbar-fg);
    border-bottom: 1px solid var(--topbar-border);
    backdrop-filter: saturate(140%) blur(2px);
}
.topbar .theme-switcher label { color: inherit; }

/* Menú desplegable de tema (Windows-like) */
.topbar .theme-switcher { position: relative; }
.topbar .menu-button {
    background-color: var(--ctrl-bg);
    color: var(--ctrl-fg);
    border: 1px solid var(--ctrl-border);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.topbar .menu-button.icon-only {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.topbar .menu-button.icon-only .icon {
    font-size: 18px;
    line-height: 1;
}
.topbar .menu-button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}
.topbar .menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    background-color: var(--bg);
    color: var(--fg);
    border: 1px solid var(--topbar-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    padding: 6px;
}
.topbar .menu .menu-item {
    width: 100%;
    text-align: left;
    background: transparent;
    color: inherit;
    border: 0;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
}
.topbar .menu .menu-item:hover,
.topbar .menu .menu-item[aria-checked="true"] {
    background-color: var(--ctrl-bg);
}

/* Utilidad para ocultar texto visualmente pero accesible a lectores de pantalla */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* evita reflujo */
    border: 0;
}

/* Opciones del selector (soporte variable según navegador) */
.topbar select#theme-select option {
    background-color: var(--bg);
    color: var(--fg);
}

footer {
    background-color: var(--footer-bg);
    color: var(--footer-fg);
    border-top: 1px solid var(--footer-border);
}