/* ============================================
   Tema personalizado para CartaNatal.de
   Solo modo oscuro | Azul, Rosa, Lila como acentos
   Sin azul en header ni footer
   ============================================ */

/* Variables base: forzamos slate (oscuro) como único tema */
:root,
[data-md-color-scheme="slate"] {
    /* Colores primarios (se usan poco, los dejamos pero no en header/footer) */
    --md-primary-fg-color: #1e1b4b;        /* fondo oscuro lavanda para header (no azul) */
    --md-primary-fg-color--light: #4C1D95; /* lila profundo */
    --md-primary-fg-color--dark: #0f0a1a;  /* casi negro */
    
    /* Colores de acento (rosa y lila) - estos sí se ven */
    --md-accent-fg-color: #F472B6;         /* rosa pastel */
    --md-accent-fg-color--light: #F9A8D4;
    --md-accent-fg-color--dark: #EC4899;
    
    /* Texto y fondos generales */
    --md-default-fg-color: #e2e8f0;
    --md-default-fg-color--light: #C084FC; /* lila para textos secundarios */
    --md-default-fg-color--lighter: #a0aec0;
    /*--md-default-bg-color: #0f172a;/*        /* fondo general oscuro (azul profundo neutro) */
    --md-default-bg-color: #0b1120; /* un poco más claro que #0f172a, pero sigue siendo oscuro */

    /* Colores para header y footer (los modificamos abajo) */
    --md-header-bg: #0f0f1a;               /* casi negro */
    --md-footer-bg: #0a0a12;               /* más oscuro aún */
}
/* Forzar texto blanco en todos los botones principales */
.btn-hero,
.coffee-btn,
.btn-carta,
.btn-secondary,
.md-footer__link,
.md-typeset .btn-hero,
.md-typeset .coffee-btn,
.md-typeset .btn-carta {
    color: #ffffff !important;
}

/* Si usas el botón de "Apúntame a la lista" u otros, también */
.signup-form .btn-carta {
    color: #ffffff !important;
}
/* ------------------------------------------------------------
   HEADER (barra de navegación) - Sin azul, solo tonos oscuros
   ------------------------------------------------------------ */
.md-header {
    background: var(--md-header-bg);
    border-bottom: 2px solid var(--md-accent-fg-color); /* línea rosa sutil */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Enlaces del header (logo, título, tabs) */
.md-header__topic,
.md-tabs__link,
.md-header__button.md-icon {
    color: var(--md-default-fg-color);
    transition: color 0.2s;
}
.md-header__button.md-icon:hover,
.md-tabs__link:hover {
    color: var(--md-accent-fg-color);
}

/* Tabs (si usas navegación por pestañas) */
.md-tabs {
    background-color: var(--md-primary-fg-color);
    border-bottom: 1px solid var(--md-accent-fg-color--dark);
}

/* ------------------------------------------------------------
   FOOTER (pie de página) - Sin azul, fondo oscuro neutro
   ------------------------------------------------------------ */
.md-footer {
    background-color: var(--md-footer-bg);
}
.md-footer-meta {
    background-color: var(--md-footer-bg);
    border-top: 1px solid var(--md-accent-fg-color--dark);
}
.md-footer-copyright,
.md-footer__link {
    color: var(--md-default-fg-color--light);
}
.md-footer__link:hover {
    color: var(--md-accent-fg-color);
}

/* ------------------------------------------------------------
   ESTILOS GENERALES (admonitions, enlaces, etc.)
   ------------------------------------------------------------ */
.md-typeset a {
    color: var(--md-accent-fg-color);
}
.md-typeset a:hover {
    color: var(--md-accent-fg-color--light);
}
.md-typeset .admonition,
.md-typeset details {
    border-left-color: var(--md-accent-fg-color);
}
.md-typeset .admonition-title,
.md-typeset summary {
    background-color: rgba(244, 114, 182, 0.1);
}

/* Resaltar la página activa en la navegación lateral (izquierda) */
.md-nav__link--active {
    color: var(--md-accent-fg-color) !important;
    font-weight: bold;
    border-right: 2px solid var(--md-accent-fg-color);
}

/* Resaltar la página activa en las pestañas superiores (tabs) */
.md-tabs__link--active {
    color: var(--md-accent-fg-color) !important;
    border-bottom: 2px solid var(--md-accent-fg-color);
}

/* También para el enlace activo en el header (pestañas móviles) */
.md-tabs__item--active .md-tabs__link {
    color: var(--md-accent-fg-color);
}

/* Mejorar contraste del contenido principal sin aclarar demasiado */
.md-main {
    background-color: rgba(15, 23, 42, 0.95); /* ligeramente más claro que el fondo total */
}

/* Opcional: cambiar el color del texto de las cabeceras para que no sea tan oscuro */
.md-typeset h1, .md-typeset h2 {
    color: var(--md-accent-fg-color--light);
}
.prev-next-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.1);
}
.prev-next-nav a {
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    background-color: var(--md-primary-fg-color);
    color: var(--md-primary-bg-color);
    border-radius: 4px;
}
.prev-next-nav a:hover {
    background-color: var(--md-accent-fg-color);
}