/* =========================================================
   SEDENA - estilo base institucional para Bootstrap
   Este archivo debe cargarse despues de Bootstrap.
   ========================================================= */

:root {
    color-scheme: dark;

    --sedena-navy: #0d1424;
    --sedena-navy-dark: #080e1b;
    --sedena-navy-soft: #121b2d;
    --sedena-panel: #1a2a3e;
    --sedena-panel-soft: #21344c;
    --sedena-panel-hover: #263b56;
    --sedena-gold: #b98b10;
    --sedena-gold-soft: #d6aa2b;
    --sedena-gold-dark: #8f6a0b;
    --sedena-white: #f4f4f6;
    --sedena-muted: #aeb7c6;
    --sedena-muted-soft: rgba(244, 244, 246, 0.58);
    --sedena-border: rgba(244, 244, 246, 0.28);
    --sedena-border-strong: rgba(244, 244, 246, 0.58);
    --sedena-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    --sedena-radius-sm: 10px;
    --sedena-radius-md: 18px;
    --sedena-radius-lg: 34px;
    --sedena-radius-xl: 54px;
    --sedena-font: Georgia, "Times New Roman", serif;

    --bs-body-font-family: var(--sedena-font);
    --bs-body-bg: var(--sedena-navy);
    --bs-body-color: var(--sedena-white);
    --bs-primary: var(--sedena-gold);
    --bs-primary-rgb: 185, 139, 16;
    --bs-secondary: var(--sedena-panel);
    --bs-secondary-rgb: 26, 42, 62;
    --bs-dark: var(--sedena-navy);
    --bs-dark-rgb: 13, 20, 36;
    --bs-link-color: var(--sedena-gold-soft);
    --bs-link-hover-color: var(--sedena-white);
    --bs-border-color: var(--sedena-border);
}

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

html {
    background: var(--sedena-navy);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--sedena-white);
    background: var(--sedena-navy) !important;
    font-family: var(--sedena-font);
    text-rendering: optimizeLegibility;
}

img,
svg,
video {
    max-width: 100%;
}

a {
    color: var(--sedena-gold-soft);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

a:hover {
    color: var(--sedena-white);
}

::selection {
    color: var(--sedena-navy);
    background: var(--sedena-gold-soft);
}

:focus-visible {
    outline: 3px solid rgba(214, 170, 43, 0.72);
    outline-offset: 3px;
}

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: 1120px;
}

/* Typography */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--sedena-white);
    font-family: var(--sedena-font);
    font-weight: 800;
    letter-spacing: 0;
}

h1,
.h1 {
    font-size: clamp(42px, 6vw, 72px);
    line-height: 0.98;
}

h2,
.h2 {
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.02;
}

h3,
.h3 {
    font-size: clamp(26px, 3.3vw, 38px);
    line-height: 1.08;
}

p,
.text-muted,
.card-text {
    color: var(--sedena-muted-soft) !important;
}

.lead {
    color: var(--sedena-white);
    font-size: clamp(18px, 2.1vw, 24px);
    font-weight: 800;
    line-height: 1.15;
}

.small,
small {
    color: var(--sedena-muted-soft);
    font-weight: 700;
}

/* Backgrounds and text helpers */

.bg-dark,
.text-bg-dark,
.navbar-dark,
.dropdown-menu-dark,
footer.bg-dark {
    background-color: var(--sedena-navy) !important;
}

.bg-primary,
.text-bg-primary {
    background-color: var(--sedena-gold) !important;
}

.bg-secondary,
.text-bg-secondary {
    background-color: var(--sedena-panel) !important;
}

.text-primary {
    color: var(--sedena-gold-soft) !important;
}

.text-secondary {
    color: var(--sedena-muted) !important;
}

.border,
.border-top,
.border-end,
.border-bottom,
.border-start {
    border-color: var(--sedena-border) !important;
}

hr {
    border: 0;
    opacity: 1;
    background: var(--sedena-border);
}

/* Layout sections */

.sedena-section {
    padding: clamp(56px, 8vw, 96px) 0;
    color: var(--sedena-white);
    background: var(--sedena-navy);
}

.sedena-section-soft {
    background: var(--sedena-navy-soft);
}

.sedena-section-dark {
    background: var(--sedena-navy-dark);
}

.sedena-title,
.section-title {
    margin: 0 auto 18px;
    color: var(--sedena-white);
    font-size: clamp(36px, 5.4vw, 60px);
    font-weight: 800;
    line-height: 1.02;
    text-align: center;
}

.sedena-subtitle,
.section-subtitle {
    max-width: 900px;
    margin: 0 auto 42px;
    color: var(--sedena-white);
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 800;
    line-height: 1.14;
    text-align: center;
}

.sedena-kicker-line,
.section-kicker-line {
    display: block;
    width: 2px;
    height: 120px;
    margin: 0 auto 34px;
    background: linear-gradient(180deg, rgba(185, 139, 16, 0), var(--sedena-gold), rgba(185, 139, 16, 0));
}

.sedena-divider {
    width: min(100%, 980px);
    height: 5px;
    margin: 0 auto 34px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, var(--sedena-gold) 0 38%, rgba(185, 139, 16, 0) 72%);
}

/* Navbar and offcanvas */

.navbar {
    padding: 30px 0 18px;
    border: 0;
    background: var(--sedena-navy) !important;
}

.navbar .container,
.navbar .container-fluid {
    gap: 26px;
}

.navbar-brand {
    margin: 0;
    color: var(--sedena-white) !important;
    font-weight: 800;
}

.navbar-brand img {
    max-width: min(460px, 86vw);
    object-fit: contain;
}

.navbar-nav {
    align-items: center;
    gap: clamp(14px, 2.4vw, 28px);
}

.navbar .nav-link {
    position: relative;
    color: var(--sedena-white) !important;
    font-size: clamp(17px, 1.7vw, 20px);
    font-weight: 800;
    letter-spacing: 0;
    padding: 8px 0 !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.navbar .show > .nav-link {
    color: var(--sedena-gold-soft) !important;
}

.navbar-toggler {
    border: 0;
    color: var(--sedena-white);
    box-shadow: none !important;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.offcanvas {
    background: var(--sedena-navy) !important;
    color: var(--sedena-white);
}

.offcanvas-header {
    border-bottom: 1px solid var(--sedena-border);
}

.btn-close-white {
    filter: none;
}

/* Dropdowns */

.dropdown-menu {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--sedena-radius-md);
    background: var(--sedena-panel) !important;
    box-shadow: var(--sedena-shadow);
}

.dropdown-item {
    border-radius: var(--sedena-radius-sm);
    color: var(--sedena-white) !important;
    font-weight: 800;
    white-space: normal;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    color: var(--sedena-gold-soft) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Underline links */

.sedena-underline,
.texto-subrayado,
.texto-subrayado-rojo {
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-decoration: none !important;
}

.sedena-underline::after,
.texto-subrayado::after,
.texto-subrayado-rojo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--sedena-gold);
    transition: width 220ms ease;
}

.sedena-underline:hover::after,
.sedena-underline.active::after,
.texto-subrayado:hover::after,
.texto-subrayado.active::after,
.texto-subrayado-rojo:hover::after,
.texto-subrayado-rojo.active::after {
    width: 100%;
}

/* Buttons */

.btn {
    border-radius: var(--sedena-radius-sm);
    font-family: var(--sedena-font);
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: none !important;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary,
.btn-warning,
.btn-success {
    border-color: var(--sedena-gold) !important;
    background: var(--sedena-gold) !important;
    color: var(--sedena-navy-dark) !important;
}

.btn-primary:hover,
.btn-warning:hover,
.btn-success:hover {
    border-color: var(--sedena-gold-soft) !important;
    background: var(--sedena-gold-soft) !important;
    color: var(--sedena-navy-dark) !important;
}

.btn-secondary,
.btn-dark,
.btn-outline-secondary:hover,
.btn-outline-light:hover {
    border-color: var(--sedena-panel) !important;
    background: var(--sedena-panel) !important;
    color: var(--sedena-white) !important;
}

.btn-outline-primary,
.btn-outline-warning {
    border-color: var(--sedena-gold) !important;
    color: var(--sedena-gold-soft) !important;
}

.btn-outline-primary:hover,
.btn-outline-warning:hover {
    background: var(--sedena-gold) !important;
    color: var(--sedena-navy-dark) !important;
}

.btn-link {
    color: var(--sedena-gold-soft);
    font-weight: 800;
    text-decoration: none;
}

.btn-link:hover {
    color: var(--sedena-white);
}

.btn-lg {
    border-radius: var(--sedena-radius-md);
    padding: 0.78rem 1.25rem;
}

.sedena-btn,
.custom-btn-botones {
    display: inline-flex;
    min-height: 64px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border: 0;
    border-radius: var(--sedena-radius-md);
    background: var(--sedena-panel);
    color: var(--sedena-white) !important;
    font-size: clamp(18px, 2vw, 25px);
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    text-decoration: none;
}

.sedena-btn:hover,
.custom-btn-botones:hover {
    background: var(--sedena-panel-hover);
    color: var(--sedena-white) !important;
    transform: translateY(-2px);
}

/* Cards */

.card {
    overflow: hidden;
    border: 0;
    border-radius: var(--sedena-radius-lg);
    background: var(--sedena-panel);
    color: var(--sedena-white);
    box-shadow: none;
}

.card-header,
.card-footer {
    border-color: var(--sedena-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--sedena-white);
}

.card-body {
    padding: 1.6rem;
}

.card-title {
    color: var(--sedena-white);
    font-weight: 800;
    line-height: 1.05;
}

.card-subtitle {
    color: var(--sedena-muted);
}

.card-img,
.card-img-top {
    object-fit: cover;
}

.sedena-card {
    border-radius: var(--sedena-radius-xl);
    background: var(--sedena-panel);
}

.sedena-card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.sedena-image-card,
.tarjeta-pilar {
    overflow: hidden;
    border: 0 !important;
    border-radius: var(--sedena-radius-xl) !important;
    background: transparent !important;
    color: var(--sedena-white);
    cursor: pointer;
    transition: transform 180ms ease, filter 180ms ease;
}

.sedena-image-card:hover,
.tarjeta-pilar:hover {
    transform: translateY(-5px);
    filter: brightness(1.06);
}

.sedena-image-bg,
.card-bg {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border-radius: inherit;
    background-size: cover;
    background-position: center;
}

.sedena-image-bg::before,
.card-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(7, 12, 24, 0.46);
}

.sedena-image-title,
.card-custom,
.tarjeta-fuerzas {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--sedena-white);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55);
}

/* News cards */

.sedena-news-card,
.noticia-card {
    overflow: hidden;
    border: 0;
    border-radius: var(--sedena-radius-xl);
    background: var(--sedena-panel);
    color: var(--sedena-white);
}

.sedena-news-card img,
.noticia-card img,
.noticia-card .card-img-top {
    width: 100%;
    height: 290px;
    object-fit: cover;
}

.sedena-news-card .card-body,
.noticia-card .card-body {
    padding: 26px 28px 32px;
}

.sedena-news-date,
.noticia-card small,
.noticia-card .fecha {
    color: var(--sedena-muted-soft);
    font-weight: 800;
}

.sedena-news-card .card-title,
.noticia-card .card-title {
    margin: 10px 0 18px;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 0.96;
}

.sedena-news-link,
.noticia-card .btn,
.noticia-card a:not(.stretched-link) {
    display: block;
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.38);
    color: var(--sedena-gold-soft);
    font-weight: 800;
    text-align: right;
    text-decoration: none;
}

/* Result/stat cards */

.sedena-stat-card,
.resultado-card {
    display: grid;
    min-height: 178px;
    padding: 28px 18px;
    place-items: center;
    border: 2px solid var(--sedena-border-strong);
    border-radius: var(--sedena-radius-lg);
    background: transparent;
    text-align: center;
}

.sedena-stat-number,
.resultado-card .numero,
.resultado-card strong {
    display: block;
    color: var(--sedena-gold);
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 800;
    line-height: 1;
}

.sedena-stat-label,
.resultado-card .etiqueta,
.resultado-card span {
    display: block;
    margin-top: 12px;
    color: var(--sedena-white);
    font-size: 15px;
    font-weight: 800;
}

/* Forms */

.form-label {
    color: var(--sedena-white);
    font-weight: 800;
}

.form-control,
.form-select {
    border: 1px solid var(--sedena-border);
    border-radius: var(--sedena-radius-sm);
    background-color: var(--sedena-panel);
    color: var(--sedena-white);
}

.form-control::placeholder {
    color: rgba(244, 244, 246, 0.42);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--sedena-gold);
    background-color: var(--sedena-panel-soft);
    color: var(--sedena-white);
    box-shadow: 0 0 0 0.25rem rgba(185, 139, 16, 0.22);
}

.form-check-input {
    border-color: var(--sedena-border-strong);
    background-color: transparent;
}

.form-check-input:checked {
    border-color: var(--sedena-gold);
    background-color: var(--sedena-gold);
}

.input-group-text {
    border-color: var(--sedena-border);
    background: var(--sedena-panel-soft);
    color: var(--sedena-white);
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-box input[type="text"] {
    width: 190px;
    border: 0 !important;
    border-radius: var(--sedena-radius-sm) !important;
    background: #15183a !important;
    color: var(--sedena-white) !important;
}

.search-box button {
    min-width: 52px;
    min-height: 38px;
    border: 0;
    border-radius: var(--sedena-radius-sm);
    color: #958ab2 !important;
    background: #15183a !important;
}

/* Lists, tables and pagination */

.list-group {
    --bs-list-group-bg: var(--sedena-panel);
    --bs-list-group-color: var(--sedena-white);
    --bs-list-group-border-color: var(--sedena-border);
    --bs-list-group-action-hover-bg: var(--sedena-panel-hover);
    --bs-list-group-action-hover-color: var(--sedena-white);
    --bs-list-group-active-bg: var(--sedena-gold);
    --bs-list-group-active-border-color: var(--sedena-gold);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sedena-white);
    --bs-table-border-color: var(--sedena-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-striped-color: var(--sedena-white);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-table-hover-color: var(--sedena-white);
}

.page-link {
    border-color: var(--sedena-border);
    background: var(--sedena-panel);
    color: var(--sedena-white);
}

.page-link:hover,
.active > .page-link,
.page-link.active {
    border-color: var(--sedena-gold);
    background: var(--sedena-gold);
    color: var(--sedena-navy-dark);
}

/* Alerts, badges, accordions and modals */

.alert {
    border: 1px solid rgba(185, 139, 16, 0.28);
    border-radius: var(--sedena-radius-md);
    background: var(--sedena-panel) !important;
    color: var(--sedena-white) !important;
}

.badge {
    border-radius: 999px;
    font-weight: 800;
}

.badge.text-bg-primary,
.badge.bg-primary {
    background: var(--sedena-gold) !important;
    color: var(--sedena-navy-dark) !important;
}

.accordion {
    --bs-accordion-bg: var(--sedena-panel);
    --bs-accordion-color: var(--sedena-white);
    --bs-accordion-border-color: var(--sedena-border);
    --bs-accordion-btn-color: var(--sedena-white);
    --bs-accordion-active-color: var(--sedena-gold-soft);
    --bs-accordion-active-bg: var(--sedena-panel-soft);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(185, 139, 16, 0.22);
}

.modal-content {
    border: 1px solid var(--sedena-border);
    border-radius: var(--sedena-radius-md);
    background: var(--sedena-navy);
    color: var(--sedena-white);
}

.modal-header,
.modal-footer {
    border-color: var(--sedena-border);
}

/* Carousel */

.carousel {
    background: var(--sedena-navy);
}

.carousel-item img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
}

.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background-color: var(--sedena-gold);
}

/* Footer */

footer,
.sedena-footer {
    color: var(--sedena-white);
    background: var(--sedena-navy-dark);
}

footer a,
.sedena-footer a {
    color: var(--sedena-white);
    text-decoration: none;
}

footer a:hover,
.sedena-footer a:hover {
    color: var(--sedena-gold-soft);
}

.menufooter {
    color: var(--sedena-white);
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}

.titulofooter {
    color: var(--sedena-white);
    font-size: clamp(34px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
}

.iconosfooter {
    color: var(--sedena-white);
    font-size: 22px;
    text-decoration: none;
}

.m-iconos {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
}

/* Useful grids */

.sedena-grid-2,
.sedena-grid-3,
.sedena-grid-4,
.resultados-grid,
.noticias-grid {
    display: grid;
    gap: 28px;
}

.sedena-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sedena-grid-3,
.noticias-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sedena-grid-4,
.resultados-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Compatibility helpers for current HTML */

.carousel-container {
    width: 100%;
    overflow: hidden;
    background: var(--sedena-navy);
}

#carouselExampleFade .carousel-item img {
    min-height: 320px;
    max-height: 670px;
}

.card-img-overlay {
    z-index: 1;
    padding: 26px !important;
}

.fondo-bloque {
    background: transparent !important;
}

.centrar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#fila {
    justify-content: center;
    gap: 28px;
}

#cardespecial {
    width: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
}

#cardespecial .card-content {
    display: grid;
    gap: 10px;
    place-items: center;
}

#cardespecial .card-icon img {
    width: 116px;
    height: 116px;
    object-fit: contain;
}

#cardespecial .card-title {
    display: none;
}

/* Responsive */

@media (min-width: 992px) {
    .navbar .container-fluid {
        flex-wrap: wrap;
        justify-content: center;
    }

    .navbar-brand {
        width: 100%;
        text-align: center;
    }

    .navbar-collapse,
    .offcanvas-body {
        width: 100%;
    }

    .navbar-nav {
        justify-content: center !important;
        width: 100%;
    }
}

@media (max-width: 991.98px) {
    .navbar {
        padding: 22px 0;
    }

    .navbar-brand img {
        max-width: 72vw;
        max-height: 72px;
    }

    .navbar-nav {
        align-items: flex-start;
        gap: 10px;
    }

    .sedena-grid-4,
    .resultados-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sedena-grid-3,
    .noticias-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .sedena-section {
        padding: 48px 0;
    }

    .sedena-kicker-line,
    .section-kicker-line {
        height: 82px;
        margin-bottom: 26px;
    }

    #carouselExampleFade .carousel-item img {
        min-height: 260px;
    }

    .sedena-grid-2,
    .sedena-grid-3,
    .sedena-grid-4,
    .resultados-grid,
    .noticias-grid {
        grid-template-columns: 1fr;
    }

    .sedena-stat-card,
    .resultado-card {
        min-height: 148px;
    }

    .sedena-image-bg,
    .card-bg {
        min-height: 240px;
    }
}