/**
 * marduk-deaj.css — Sistema de marca DEAJ aplicable a TODAS las vistas.
 *
 * Tokens, navbar, strip institucional, footer y utilidades del manual de marca
 * en `docs/MVP-DEAJ/BRAND-MANUAL.html`. Carga junto con `marduk-ui.css` (no
 * lo reemplaza — sólo añade overrides DEAJ y la shell de header/footer).
 */

:root {
    --deaj-primary:        #033e75;
    --deaj-primary-deep:   #153f71;
    --deaj-primary-bright: #2680eb;
    --deaj-primary-digital:#144f9c;
    --deaj-primary-soft:   #5d86d1;
    --deaj-primary-pale:   #7d9eda;
    --deaj-secondary:      #71ce82;
    --deaj-secondary-deep: #39a44c;
    --deaj-yellow:         #fdb611;
    --deaj-coral:          #e96b64;
    --deaj-grad:       linear-gradient(135deg, #033e75 0%, #144f9c 50%, #2680eb 100%);
    --deaj-grad-green: linear-gradient(135deg, #1e5c2a, #39a44c 60%, #71ce82);
}

body {
    font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    color: #1f2937;
}

/* ── Strip institucional superior ─────────────────────────────────── */
.deaj-strip {
    background: #021b3a;
    color: rgba(255, 255, 255, .85);
    padding: .55rem 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.deaj-strip .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.deaj-strip i { color: var(--deaj-yellow); }

/* ── Navbar institucional ─────────────────────────────────────────── */
.navbar-marduk {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #e5e7eb;
    padding-block: .55rem;
}
.navbar-marduk .navbar-brand { font-weight: 800; color: var(--deaj-primary) !important; }
.navbar-marduk .navbar-brand img { height: 38px; vertical-align: middle; display: block; }
.navbar-marduk .nav-link { font-weight: 500; color: #1f2937; }
.navbar-marduk .nav-link.active { color: var(--deaj-primary) !important; font-weight: 600; }
.navbar-marduk .nav-link:hover { color: var(--deaj-primary-bright); }

/* Cinta amarilla institucional (referencia logo Transformación Digital) */
.deaj-yellow-strip { background: var(--deaj-yellow); height: 4px; }

/* ── Footer institucional ─────────────────────────────────────────── */
.footer-deaj {
    background: #0d1117;
    color: #c9d1d9;
    padding: 3rem 0 1.5rem;
    margin-top: 3rem;
}
.footer-deaj a { color: #c9d1d9; text-decoration: none; }
.footer-deaj a:hover { color: var(--deaj-primary-pale); }
.footer-deaj h6 { color: #fff; font-weight: 700; }
.footer-deaj .foot-logo {
    height: 56px; background: #fff; padding: .35rem .75rem; border-radius: 10px; display: inline-block;
}
.footer-deaj .foot-rama {
    height: 56px; background: #fff; padding: .4rem .85rem; border-radius: 10px; display: inline-block;
}

/* ── Eyebrows DEAJ ────────────────────────────────────────────────── */
.eyebrow-deaj {
    font-family: 'JetBrains Mono', monospace;
    font-size: .75rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--deaj-secondary-deep);
    font-weight: 600;
}

.section-title-deaj { font-weight: 800; color: var(--deaj-primary); }

/* Guard de contraste — text-light/text-white sobre fondos pale heredados de Bootstrap legacy.
   En las páginas refactorizadas (about, policies, support, contribute, discussions) había
   bloques con bg-opacity-10 que mantenían letras blancas. Forzamos que el contenido dentro
   de bg-opacity-{10,15,25} y bg-light/bg-white use texto oscuro legible. */
.bg-opacity-10 .text-light, .bg-opacity-10 .text-white,
.bg-opacity-15 .text-light, .bg-opacity-15 .text-white,
.bg-opacity-25 .text-light, .bg-opacity-25 .text-white,
.bg-light .text-light,      .bg-light .text-white,
.bg-white .text-light,      .bg-white .text-white {
    color: var(--deaj-primary, #033e75) !important;
}
.bg-opacity-10 .text-light i.text-light,
.bg-opacity-10 i.text-light {
    color: var(--deaj-primary, #033e75) !important;
}

/* ── Modales DEAJ 3D ─────────────────────────────────────────────────
   Rediseño global de los modales Bootstrap con sello institucional:
   header con gradiente DEAJ + cinta amarilla, entrada 3D con
   perspective+rotateX, glassmorphism sutil, sombra acentuada.        */

.modal-backdrop.show {
    opacity: .55;
    background: radial-gradient(ellipse at top, #021b3a 0%, #000 100%);
}

.modal { perspective: 1400px; }

.modal-dialog {
    transform-origin: 50% 0%;
    transition: transform .42s cubic-bezier(.18,.89,.32,1.28),
                opacity .32s ease-out !important;
}
.modal.fade .modal-dialog {
    transform: perspective(1400px) translate3d(0, -30px, -120px) rotateX(8deg) scale(.95);
    opacity: 0;
}
.modal.show .modal-dialog {
    transform: perspective(1400px) translate3d(0, 0, 0) rotateX(0) scale(1);
    opacity: 1;
}

.modal-content {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,.6) inset,
        0 24px 60px -12px rgba(3, 62, 117, .35),
        0 12px 24px -8px rgba(0, 0, 0, .28),
        0 0 0 1px rgba(3, 62, 117, .08);
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    position: relative;
}
/* Cinta amarilla institucional inferior */
.modal-content::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--deaj-yellow) 0%,
        var(--deaj-secondary) 50%,
        var(--deaj-primary-bright) 100%);
    opacity: .9;
}

.modal-header {
    background: var(--deaj-grad);
    color: #fff;
    border-bottom: 0;
    padding: 1rem 1.4rem;
    position: relative;
    overflow: hidden;
}
.modal-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 30%, rgba(125, 158, 218, .35) 0%, transparent 38%),
        radial-gradient(circle at 88% 75%, rgba(253, 182, 17, .18) 0%, transparent 42%);
    pointer-events: none;
}
.modal-header .modal-title {
    color: #fff;
    font-weight: 700;
    letter-spacing: .01em;
    position: relative;
    z-index: 1;
}
.modal-header .modal-title i,
.modal-header .modal-title .text-primary,
.modal-header .modal-title [class*="text-"] {
    color: var(--deaj-yellow) !important;
}
.modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: .85;
    position: relative;
    z-index: 1;
    transition: transform .2s ease, opacity .2s ease;
}
.modal-header .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.modal-body {
    padding: 1.5rem 1.4rem;
    background: transparent;
}

.modal-footer {
    background: rgba(247, 250, 255, .6);
    border-top: 1px solid rgba(3, 62, 117, .08);
    padding: .9rem 1.4rem;
}

/* Sub-elementos comunes en modales: form-controls con glow institucional */
.modal-content .form-control:focus,
.modal-content .form-select:focus {
    border-color: var(--deaj-primary-bright);
    box-shadow: 0 0 0 .2rem rgba(38, 128, 235, .15);
}

/* Botón "Sugerir títulos" estilo IA con gradiente DEAJ */
.modal-content .ai-action {
    background: linear-gradient(135deg, var(--deaj-primary-deep), var(--deaj-primary-bright));
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 2px 8px rgba(20, 79, 156, .3);
}
.modal-content .ai-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(20, 79, 156, .42);
}
.modal-content .ai-action[disabled] { opacity: .7; transform: none; }

/* Lista de sugerencias IA: tarjetas con hover 3D sutil */
.ai-suggestion-list { margin-top: .5rem; }
.ai-suggestion-list .item {
    background: #fff;
    border: 1px solid rgba(3, 62, 117, .12);
    border-left: 3px solid var(--deaj-secondary);
    border-radius: 8px;
    padding: .7rem .95rem;
    margin-bottom: .5rem;
    cursor: pointer;
    font-size: .92rem;
    line-height: 1.45;
    color: #1f2937;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
    animation: aiSuggestionEnter .35s cubic-bezier(.18,.89,.32,1.28) backwards;
}
.ai-suggestion-list .item:nth-child(1) { animation-delay: .05s; }
.ai-suggestion-list .item:nth-child(2) { animation-delay: .14s; }
.ai-suggestion-list .item:nth-child(3) { animation-delay: .23s; }
.ai-suggestion-list .item::before {
    content: "\f0eb";  /* lightbulb */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--deaj-yellow);
    margin-right: .55rem;
    opacity: .85;
}
.ai-suggestion-list .item:hover {
    transform: translateX(3px) translateY(-1px);
    border-color: var(--deaj-primary-bright);
    border-left-color: var(--deaj-primary-bright);
    box-shadow: 0 6px 16px -4px rgba(3, 62, 117, .22);
}
@keyframes aiSuggestionEnter {
    from { opacity: 0; transform: translateY(8px) rotateX(-12deg); }
    to   { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* Modales fullscreen-sm-down: en móvil suaviza el flat al borde */
@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down .modal-content { border-radius: 0; }
    .modal.fade .modal-dialog {
        transform: perspective(1400px) translate3d(0, 20px, -60px) scale(.98);
    }
}

/* Respeta usuarios con prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog,
    .modal.show .modal-dialog,
    .ai-suggestion-list .item {
        transform: none !important;
        animation: none !important;
        transition: opacity .2s ease !important;
    }
}

/* ── Guard de contraste dentro del .modal-body (DEAJ)
   Algunos cuerpos vienen con clases legacy text-light/text-white o badges
   bg-secondary-soft que pierden contraste sobre el fondo blanco del modal.
   Forzamos colores oscuros en cualquier descendiente del modal-body. */
.modal-body { color: #1f2937; }
.modal-body .text-white,
.modal-body .text-light {
    color: var(--deaj-primary, #033e75) !important;
}
.modal-body .bg-secondary-soft {
    background: #e9ecef !important;
    color: #374151 !important;
}
.modal-body .text-secondary { color: #4b5563 !important; }
.modal-body .text-muted     { color: #6b7280 !important; }
.modal-body .lead           { color: #1f2937; }
.modal-body h1,.modal-body h2,.modal-body h3,
.modal-body h4,.modal-body h5,.modal-body h6 { color: #033e75; }
.modal-body p, .modal-body li, .modal-body td, .modal-body th { color: #1f2937; }
.modal-body a { color: #144f9c; }
.modal-body a:hover { color: #033e75; }

/* Contenido HTML libre de un recurso (lo que entra en r.body) */
.resource-body         { color: #1f2937; line-height: 1.65; }
.resource-body h4,
.resource-body h5      { color: #033e75; margin-top: 1rem; }
.resource-body ul,
.resource-body ol      { padding-left: 1.4rem; }
.resource-body strong  { color: #111827; }
.resource-body em      { color: #4b5563; }
.resource-body a       { color: #144f9c; text-decoration: underline; }

/* btn-close-white para modal-headers en gradientes oscuros */
.modal-header .btn-close.btn-close-white {
    filter: brightness(0) invert(1);
}

/* ── Strip institucional legacy (.m-hero-strip) — homologa al .deaj-strip
   en oscuro institucional para que las letras blancas sean legibles. */
.m-hero-strip {
    background: #021b3a !important;
    color: rgba(255, 255, 255, .85) !important;
    padding: .55rem 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.m-hero-strip .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.m-hero-strip i { color: var(--deaj-yellow, #fdb611); }
.m-hero-strip span { color: rgba(255, 255, 255, .85) !important; }