/* ================================================================
   SAGAC-RC INDIGENAS — Estilos propios
   Identidad: «Registro Soberano» — institucional CNE (2026-09-13)
   Cian #00B4D8 dominante · azul-gris · cian claro #4FC3E4
   Tipografía: Cormorant Garamond (display) + DM Sans (cuerpo).
   Fuentes locales en assets/fonts/ (fonts.css) — offline.
   Iconos: Bootstrap Icons (assets/bootstrap-icons/) — offline.
   ================================================================ */

:root {
    /* Principal: cian completo */
    --c-cne:            #00B4D8;
    --c-cne-dark:       #007FAA;
    --c-cne-deep:       #044A66;
    --c-cne-mid:        #4FC3E4;

    /* Acentos — cian claro */
    --c-oro:            #4FC3E4;
    --c-oro-dark:       #0088A0;
    --c-oro-light:      #A8E3F7;
    --c-oro-pale:       #DDF2FA;

    /* Neutros — azul-gris / blanco */
    --c-ink:            #0E2A3A;
    --c-texto:          #273A47;
    --c-texto-sec:      #5B7486;
    --c-borde:          #CCE3EF;
    --c-fondo:          #F1F8FD;
    --c-blanco:         #FFFFFF;

    /* Superficies */
    --c-superficie:     #FFFFFF;
    --c-superficie-2:   #E6F3FA;

    /* Tipografía */
    --ff-display:       'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --ff-body:          'DM Sans', system-ui, sans-serif;

    /* Sombras — tonos cian profundos */
    --s-sm:   0 1px 3px rgba(4,74,102,.07), 0 1px 2px rgba(4,74,102,.05);
    --s-md:   0 4px 12px rgba(4,74,102,.09), 0 2px 4px rgba(4,74,102,.05);
    --s-lg:   0 12px 32px rgba(4,74,102,.14), 0 4px 8px rgba(4,74,102,.07);
    --s-glow: 0 0 0 3px rgba(0,180,216,.30);

    /* Transiciones */
    --t-fast:   .15s cubic-bezier(.4,0,.2,1);
    --t-smooth: .3s cubic-bezier(.4,0,.2,1);
    --t-spring: .4s cubic-bezier(.175,.885,.32,1.275);

    /* Radios */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
}

/* --- Reset y base --- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--ff-body);
    color: var(--c-texto);
    background-color: var(--c-fondo);
    line-height: 1.6;
}

/* --- Tipografía global --- */
h1, h2, h3, h4, h5, h6,
.titulo-modulo,
.card-title {
    font-family: var(--ff-display);
    color: var(--c-cne-deep);
    letter-spacing: .01em;
}

/* ================================================================
   BARRA SUPERIOR / MASTHEAD INSTITUCIONAL
   ================================================================ */
.barra-superior {
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 6px, transparent 6px 12px),
        linear-gradient(135deg, var(--c-cne-deep) 0%, var(--c-cne) 65%, var(--c-cne-mid) 100%);
    color: var(--c-blanco);
    font-size: .875rem;
    letter-spacing: .02em;
    box-shadow: 0 2px 12px rgba(4,74,102,.45);
    position: relative;
    z-index: 100;
}

.barra-superior::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-oro-dark), var(--c-oro-light), var(--c-oro), var(--c-oro-light), var(--c-oro-dark));
}

.barra-superior .denominacion {
    font-family: var(--ff-body);
    font-size: .78rem;
    font-weight: 500;
    color: rgba(255,253,248,.92);
    line-height: 1.25;
}

.barra-superior .app-titulo {
    font-family: var(--ff-display);
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-oro-light);
    line-height: 1;
}

.barra-superior .texto-rojo {
    color: var(--c-oro-light);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .12em;
}

.barra-superior .btn-light {
    background: rgba(255,253,248,.12);
    border: 1px solid rgba(255,253,248,.28);
    color: var(--c-blanco);
    font-weight: 500;
    transition: var(--t-fast);
}

.barra-superior .btn-light:hover {
    background: rgba(255,255,255,.2);
    border-color: var(--c-oro-light);
    color: #fff;
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar {
    background: var(--c-superficie);
    border-right: 1px solid var(--c-borde);
    padding: 1.25rem 0;
    border-radius: var(--r-md);
    box-shadow: var(--s-sm);
}

.sidebar .nav {
    padding: 0 .75rem;
}

.nav-icon {
    display: inline-block;
    width: 1.5em;
    text-align: center;
    margin-right: .3rem;
    font-style: normal;
    font-size: 1.1rem;
    color: var(--c-oro-dark);
}

.nav-icon .bi {
    vertical-align: -0.14em;
    line-height: 1;
}

.sidebar .nav-link {
    color: var(--c-texto-sec);
    padding: .6rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    border-radius: var(--r-sm);
    border-left: 3px solid transparent;
    transition: var(--t-fast);
    margin-bottom: 2px;
    position: relative;
    overflow: hidden;
}

.sidebar .nav-link:hover {
    color: var(--c-cne);
    background: var(--c-oro-pale);
    border-left-color: var(--c-oro);
    transform: translateX(2px);
}

.sidebar .nav-link.active {
    color: var(--c-blanco);
    font-weight: 600;
    background: linear-gradient(135deg, var(--c-cne-deep) 0%, var(--c-cne) 100%);
    border-left-color: var(--c-oro-light);
    box-shadow: var(--s-md);
}

.sidebar .nav-link.active:hover {
    background: linear-gradient(135deg, var(--c-cne-deep) 0%, var(--c-cne-mid) 100%);
    transform: translateX(0);
}

.sidebar .nav-link.active .nav-icon,
.sidebar .nav-link:hover .nav-icon {
    color: inherit;
}

.sidebar small.text-muted {
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--c-texto-sec) !important;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .12em;
}

.sidebar .marca {
    padding: 0 1rem .75rem;
    border-bottom: 1px solid var(--c-borde);
    margin-bottom: .5rem;
}

.sidebar .marca .app-titulo {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--c-cne);
    line-height: 1.2;
}

.sidebar .marca .sub {
    font-size: .7rem;
    color: var(--c-texto-sec);
    letter-spacing: .05em;
}

/* ================================================================
   TARJETAS DEL DASHBOARD (estilo folio)
   ================================================================ */
.tarjeta-menu {
    border: 1px solid var(--c-borde);
    border-radius: var(--r-md);
    background: var(--c-blanco);
    transition: var(--t-smooth);
    position: relative;
    overflow: hidden;
    box-shadow: var(--s-sm);
}

.tarjeta-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-oro-dark), var(--c-oro-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-smooth);
}

.tarjeta-menu:hover {
    transform: translateY(-6px);
    box-shadow: var(--s-lg);
    border-color: var(--c-oro);
}

.tarjeta-menu:hover::before {
    transform: scaleX(1);
}

.tarjeta-menu .card-body {
    padding: 1.75rem 1.25rem;
}

.tarjeta-icono {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--c-blanco);
    margin-bottom: .75rem;
    box-shadow: 0 4px 12px rgba(4,74,102,.28);
    transition: var(--t-smooth);
    background: linear-gradient(135deg, var(--c-cne-deep) 0%, var(--c-cne) 100%);
}

.tarjeta-menu:hover .tarjeta-icono {
    transform: scale(1.12) rotate(-3deg);
    box-shadow: 0 6px 20px rgba(4,74,102,.35);
}

.tarjeta-icono .bi {
    font-size: 1.7rem;
    line-height: 1;
}

.btn .bi:first-child {
    margin-right: .45rem;
}

.tarjeta-menu .card-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.12rem;
    color: var(--c-cne-deep);
    margin-top: .75rem;
}

.tarjeta-menu .card-text {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--c-texto-sec);
}

/* ================================================================
   TITULO MODULO (overline serif + filete oro)
   ================================================================ */
.titulo-modulo {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    position: relative;
    display: inline-block;
    padding-bottom: .55rem;
}

.titulo-modulo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 3px;
    background: linear-gradient(90deg, var(--c-oro-dark), var(--c-oro-light));
    border-radius: 2px;
}

/* ================================================================
   FORMULARIOS
   ================================================================ */
.form-control,
.form-select {
    border: 1.5px solid var(--c-borde);
    border-radius: var(--r-sm);
    padding: .55rem .85rem;
    font-size: .9rem;
    transition: var(--t-fast);
    background: var(--c-blanco);
    color: var(--c-texto);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--c-oro);
    box-shadow: var(--s-glow);
    outline: none;
}

/* Select nativo (p. ej. dentro de modales; combos.js NO lo pasa a Select2):
   el atajo `background` de arriba borra la flecha de Bootstrap, se repone con
   un chevron propio y se iguala al alto/borde de los inputs. */
.js-select-nativo.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--c-blanco);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7A86' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 1rem 1rem;
    padding-right: 2.4rem;
    cursor: pointer;
}
.js-select-nativo.form-select:disabled {
    background-color: var(--c-fondo);
    opacity: .7;
    cursor: not-allowed;
}

/* Encabezado de seccion dentro de un modal (agrupa campos). */
.modal-seccion {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--c-cne);
    border-bottom: 1px solid var(--c-borde);
    padding-bottom: .3rem;
    margin-bottom: .1rem;
}

.focused .form-label {
    color: var(--c-cne);
    transition: color var(--t-fast);
}

.focused .form-control {
    border-color: var(--c-oro);
}

.form-label {
    font-weight: 600;
    font-size: .8rem;
    color: var(--c-texto);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .35rem;
}

/* ================================================================
   BOTONES
   ================================================================ */
.btn-primary {
    background: linear-gradient(135deg, var(--c-cne-deep) 0%, var(--c-cne) 100%);
    border: none;
    border-radius: var(--r-sm);
    font-weight: 600;
    letter-spacing: .02em;
    padding: .55rem 1.5rem;
    color: var(--c-blanco);
    transition: var(--t-fast);
    box-shadow: 0 2px 8px rgba(123,28,28,.35);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--c-cne) 0%, var(--c-cne-mid) 100%);
    box-shadow: 0 4px 16px rgba(123,28,28,.45);
    transform: translateY(-1px);
    color: var(--c-blanco);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(123,28,28,.25);
}

.btn-cne {
    background: linear-gradient(135deg, var(--c-oro-dark) 0%, var(--c-oro) 100%);
    border: none;
    border-radius: var(--r-sm);
    font-weight: 700;
    letter-spacing: .03em;
    padding: .55rem 1.5rem;
    color: #062F43;
    transition: var(--t-fast);
    box-shadow: 0 2px 8px rgba(0,136,160,.4);
}

.btn-cne:hover {
    background: linear-gradient(135deg, var(--c-oro) 0%, var(--c-oro-light) 100%);
    box-shadow: 0 4px 16px rgba(0,180,216,.5);
    transform: translateY(-1px);
    color: #062F43;
}

.btn-cne:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,136,160,.3);
}

.btn-outline-secondary {
    border-color: var(--c-borde);
    color: var(--c-texto-sec);
    border-radius: var(--r-sm);
    font-weight: 500;
    transition: var(--t-fast);
}

.btn-outline-secondary:hover {
    background: var(--c-oro-pale);
    border-color: var(--c-oro);
    color: var(--c-cne-deep);
}

/* ================================================================
   LOGIN  (estructura Colorlib Login_v3, paleta cian)
   ================================================================ */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(0,180,216,.40), transparent 60%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px),
        linear-gradient(160deg, #031B2B 0%, var(--c-cne-deep) 45%, var(--c-cne) 75%, var(--c-cne-mid) 100%);
    position: relative;
}

.limiter {
    width: 100%;
    flex: 1;
    display: flex;
}

.container-login100 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 1.25rem .75rem;
}

.wrap-login100 {
    width: 480px;
    border-radius: var(--r-md);
    overflow: hidden;
    padding: 46px 50px 34px;
    background: linear-gradient(180deg, var(--c-cne) 0%, var(--c-cne-dark) 55%, var(--c-cne-deep) 100%);
    box-shadow: 0 22px 54px rgba(2,40,58,.55);
    position: relative;
    z-index: 1;
}

.login100-form { width: 100%; }

.login100-form-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: var(--c-blanco);
    margin: 0 auto 1rem;
    box-shadow: 0 10px 26px rgba(1,30,44,.45);
}

.login100-form-logo-img {
    width: 98px;
    height: 98px;
    border-radius: 50%;
    object-fit: cover;
}

.login100-form-eyebrow {
    font-family: var(--ff-body);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: rgba(255,255,255,.82);
    text-align: center;
    margin-bottom: .3rem;
}

.login100-form-title {
    font-family: var(--ff-body);
    font-size: 1.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-blanco);
    line-height: 1.2;
    text-align: center;
    display: block;
}

.login100-form-sub {
    font-size: .8rem;
    color: rgba(255,255,255,.85);
    line-height: 1.45;
    text-align: center;
    margin: .4rem 0 1.5rem;
}

.wrap-input100 {
    width: 100%;
    position: relative;
    border-bottom: 2px solid rgba(255,255,255,.28);
    margin-bottom: 2rem;
}

.input100 {
    font-family: var(--ff-body);
    font-size: 16px;
    color: var(--c-blanco);
    line-height: 1.2;
    display: block;
    width: 100%;
    height: 46px;
    background: transparent;
    padding: 0 5px 0 42px;
    border: none;
    outline: none;
    transition: padding var(--t-smooth);
}

.input100:-webkit-autofill,
.input100:-webkit-autofill:hover,
.input100:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--c-blanco);
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

.input100::placeholder { color: rgba(255,255,255,.62); }
.input100:focus::placeholder { color: transparent; }

.focus-input100 {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.focus-input100::before {
    content: '';
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--c-blanco);
    transition: width var(--t-smooth);
}

.focus-input100 i {
    position: absolute;
    top: 12px;
    left: 6px;
    font-size: 22px;
    color: rgba(255,255,255,.9);
    transition: top var(--t-smooth), font-size var(--t-smooth);
}

.input100:focus { padding-left: 6px; }

.input100:focus + .focus-input100 i,
.wrap-input100.has-val .focus-input100 i {
    top: -24px;
    font-size: 16px;
}

.input100:focus + .focus-input100::before,
.wrap-input100.has-val .focus-input100::before {
    width: 100%;
}

.wrap-input100.has-val .input100 { padding-left: 6px; }

.container-login100-form-btn {
    width: 100%;
    display: flex;
    justify-content: center;
}

.login100-form-btn {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-cne-deep);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    min-width: 120px;
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 50rem;
    background: linear-gradient(180deg, var(--c-oro-light) 0%, var(--c-cne) 100%);
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: all var(--t-smooth);
}

.login100-form-btn::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--c-blanco);
    opacity: 1;
    transition: opacity var(--t-smooth);
}

.login100-form-btn:hover { color: var(--c-blanco); box-shadow: 0 8px 22px rgba(1,30,44,.35); }
.login100-form-btn:hover::before { opacity: 0; }

.login100-link {
    display: block;
    font-size: .78rem;
    color: rgba(255,255,255,.78);
    text-align: center;
    transition: color var(--t-fast);
}

.login100-link:hover { color: var(--c-blanco); text-decoration: underline; }

.p-t-24 { padding-top: 1.5rem; }

.login-footer {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    text-align: center;
}

.login-footer p {
    font-size: .78rem;
    color: rgba(255,255,255,.85);
    max-width: 380px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Modal de recuperacion de clave */
.login-modal {
    border: 1px solid var(--c-oro-light);
    border-radius: var(--r-md);
    box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

.login-modal-header {
    background: linear-gradient(90deg, var(--c-cne-deep), var(--c-cne));
    color: var(--c-blanco);
    border: none;
}

.login-modal-label {
    font-weight: 600;
    color: var(--c-texto);
}

.login-modal-text {
    font-size: .83rem;
    color: var(--c-texto-sec);
    line-height: 1.45;
}

.login-modal-btn {
    background: linear-gradient(90deg, var(--c-cne), var(--c-cne-dark));
    border: none;
    color: var(--c-blanco);
    font-weight: 600;
}

.login-modal-btn:hover {
    background: linear-gradient(90deg, var(--c-cne-dark), var(--c-cne-deep));
    color: var(--c-blanco);
}

@media print { .login-modal { display: none !important; } }

/* ================================================================
   ALERTAS
   ================================================================ */
.alert-danger {
    background: #FBEDE8;
    border: 1px solid #E8C3B8;
    color: #7B1C1C;
    border-radius: var(--r-sm);
    font-size: .85rem;
    border-left: 4px solid #C0392B;
}

/* ================================================================
   TABLAS
   ================================================================ */
.table {
    border-color: var(--c-borde);
}

.table thead th {
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-blanco);
    border-bottom-width: 2px;
    border-bottom-color: var(--c-oro);
    background: linear-gradient(135deg, var(--c-cne-deep) 0%, var(--c-cne) 100%);
}

.table tbody td {
    vertical-align: middle;
    font-size: .88rem;
}

.table-hover tbody tr:hover {
    background-color: var(--c-oro-pale);
}

/* ================================================================
   FIELDSET / FORMULARIOS EXTENSOS
   ================================================================ */
.requeridos legend {
    background: linear-gradient(135deg, var(--c-cne) 0%, var(--c-cne-mid) 100%);
    color: var(--c-blanco);
    padding: .45rem 1rem;
    border-radius: var(--r-sm);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .04em;
    width: 100%;
}

/* ================================================================
   ENLACE / BOTON "VOLVER" (pildora con flecha)
   ================================================================ */
.btn-volver {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem 1.5rem;
    border: 1.5px solid var(--c-borde);
    border-radius: 999px;
    background: var(--c-blanco);
    color: var(--c-cne-deep);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .03em;
    text-decoration: none;
    box-shadow: var(--s-sm);
    transition: var(--t-smooth);
    position: relative;
}

.btn-volver::before {
    content: '\2190';
    font-size: 1.05rem;
    line-height: 1;
    color: var(--c-oro-dark);
    transition: transform var(--t-smooth), color var(--t-fast);
}

.btn-volver:hover {
    border-color: var(--c-oro);
    background: linear-gradient(135deg, var(--c-oro-pale) 0%, var(--c-blanco) 100%);
    box-shadow: var(--s-glow);
    transform: translateX(-4px);
}

.btn-volver:hover::before {
    color: var(--c-oro-dark);
    transform: translateX(-4px);
}

.btn-volver:active {
    transform: translateX(-2px) scale(.98);
}

/* Variante compacta para "Volver"/"Cancelar" dentro de formularios */
.btn-volver--min {
    padding: .45rem 1.1rem;
    font-size: .82rem;
    background: transparent;
    border-style: dashed;
}

.btn-volver--min:hover {
    border-style: solid;
}

/* Contenedor estandar del enlace (arriba del contenido) */
.volver-barra {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 1.25rem;
}

.volver-barra--centro {
    justify-content: center;
}

/* ================================================================
   FOOTER
   ================================================================ */
.app-footer {
    font-size: .78rem;
    color: var(--c-texto-sec);
    background: var(--c-superficie);
    border-top: 1px solid var(--c-borde);
    position: relative;
}

.app-footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--c-oro-dark), var(--c-oro-light), var(--c-oro), var(--c-oro-light), var(--c-oro-dark));
}

/* ================================================================
   UTILIDADES
   ================================================================ */
.etiqueta {
    font-weight: 600;
    color: var(--c-texto);
    font-size: .85rem;
}

/* ================================================================
   ANIMACIONES
   ================================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,180,216,.45); }
    50%      { box-shadow: 0 0 0 8px rgba(0,180,216,0); }
}

.animate-in {
    /* backwards: NO conservar transform/opacity al terminar.
       Un transform retenido crea un containing block para position:fixed,
       lo que rompe el .modal / .modal-backdrop de Bootstrap (pantalla oscura). */
    animation: fadeInUp .5s cubic-bezier(.4,0,.2,1) backwards;
}

.animate-fade {
    animation: fadeIn .4s ease both;
}

.animate-slide {
    /* backwards: no conservar transform (evita romper modales de Bootstrap). */
    animation: slideInLeft .4s ease backwards;
}

/* Staggered card animations */
.tarjeta-menu:nth-child(1) { animation-delay: .05s; }
.tarjeta-menu:nth-child(2) { animation-delay: .10s; }
.tarjeta-menu:nth-child(3) { animation-delay: .15s; }
.tarjeta-menu:nth-child(4) { animation-delay: .20s; }

/* Sidebar link stagger */
.sidebar .nav-item {
    animation: slideInLeft .3s ease both;
}
.sidebar .nav-item:nth-child(1) { animation-delay: .05s; }
.sidebar .nav-item:nth-child(2) { animation-delay: .10s; }
.sidebar .nav-item:nth-child(3) { animation-delay: .15s; }
.sidebar .nav-item:nth-child(4) { animation-delay: .20s; }
.sidebar .nav-item:nth-child(5) { animation-delay: .25s; }
.sidebar .nav-item:nth-child(6) { animation-delay: .30s; }
.sidebar .nav-item:nth-child(7) { animation-delay: .35s; }

/* ================================================================
   SIDEBAR ACORDEON (colapsables)
   ================================================================ */
.sidebar .accordion-button {
    color: var(--c-texto-sec);
    font-size: .85rem;
    font-weight: 600;
    padding: .55rem 1rem;
    border: none;
    border-radius: var(--r-sm) !important;
    border-left: 3px solid transparent;
    background: transparent;
    box-shadow: none;
    transition: var(--t-fast);
    margin-bottom: 1px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-family: var(--ff-body);
}

.sidebar .accordion-button:not(.collapsed) {
    color: var(--c-cne);
    background: var(--c-oro-pale);
    border-left-color: var(--c-oro);
}

.sidebar .accordion-button:hover {
    color: var(--c-cne);
    background: var(--c-oro-pale);
    border-left-color: var(--c-oro);
    transform: translateX(2px);
}

.sidebar .accordion-button::after {
    width: .8em;
    height: .8em;
    background-size: .8em;
    filter: brightness(0) saturate(100%) invert(55%) sepia(55%) saturate(640%) hue-rotate(12deg);
    transition: var(--t-fast);
}

.sidebar .accordion-button:not(.collapsed)::after {
    filter: brightness(0) saturate(100%) invert(40%) sepia(70%) saturate(760%) hue-rotate(8deg);
    transform: rotate(180deg);
}

.sidebar .accordion-collapse {
    border: none;
}

.sidebar .accordion-body {
    padding: .15rem 0 .15rem .75rem;
}

.sidebar .accordion-body .nav-link {
    padding: .4rem .85rem;
    font-size: .82rem;
    margin-bottom: 1px;
}

.sidebar .accordion-body .nav-link .nav-icon {
    font-size: .9rem;
    color: var(--c-texto-sec);
}

.sidebar .accordion-button .bi {
    margin-right: .55rem;
    font-size: .95rem;
    vertical-align: -0.12em;
}

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--c-superficie-2); }
::-webkit-scrollbar-thumb { background: var(--c-oro-dark); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-cne); }

/* ================================================================
   PRINT
   ================================================================ */
@media print {
    .no-print,
    .barra-superior,
    .app-footer,
    header,
    .sidebar { display: none !important; }
    body { background: #fff; }
    .col-md-9, .col-lg-10 { flex: 0 0 100%; max-width: 100%; }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
    .sidebar {
        border-right: none;
        border-bottom: 1px solid var(--c-borde);
        border-radius: var(--r-md);
        margin-bottom: 1rem;
    }
    .titulo-modulo { font-size: 1.2rem; }
    .tarjeta-menu .card-body { padding: 1.25rem 1rem; }
    .wrap-login100 { padding: 36px 20px 26px; }
}

/* ================================================================
   BOTONES REDONDEADOS (píldora) + hero denominación
   ================================================================ */
.hero-denominacion {
    font-family: var(--ff-body);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--c-cne-dark);
    margin-bottom: .45rem;
}

.btn,
.btn-cne,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark,
.btn-outline-light,
.btn-close {
    border-radius: 50rem !important;
}