/* Ocultar en extra small (<576px) */
@media (max-width: 575.98px) {
    .hidden-xs {
        display: none !important;
    }
    .marx {
        margin-bottom: 2rem !important;
    }
}

/* Ocultar en small (576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hidden-sm {
        display: none !important;
    }
    .marx {
        margin-bottom: 2rem !important;
    }
}

/* Ocultar en medium (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hidden-md {
        display: none !important;
    }
}

/* Ocultar en large (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hidden-lg {
        display: none !important;
    }
    .container .container-bingo {
        max-width: 90% !important;
    }
}

/* Quitar flechas de inputs type number */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ════════════════════════════════════════════════════════════════
   PAGE HEADER — Título + Breadcrumb
   ════════════════════════════════════════════════════════════════ */
.animate-in .col-12 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

/* ── Título ── */
.animate-in .h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    line-height: 1;
}
.animate-in .h3 i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(99,102,241,.2);
    border: 1px solid rgba(99,102,241,.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    color: #a5b4fc;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(99,102,241,.2);
}

/* ── Breadcrumb ── */
.animate-in nav { flex-shrink: 0; }

.animate-in .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: .28rem .75rem;
    margin: 0;
    gap: 0;
}

.animate-in .breadcrumb-item {
    display: flex;
    align-items: center;
    line-height: 1;
    padding: 0;
    font-size: .72rem;
}

/* Separador */
.animate-in .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
}
.animate-in .breadcrumb-item + .breadcrumb-item::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .45rem;
    color: rgba(255,255,255,.2);
    padding: 0 .4rem;
    display: flex;
    align-items: center;
    line-height: 1;
    float: none;
    position: static;
}

.animate-in .breadcrumb-item a {
    color: rgba(255,255,255,.4);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color .2s;
}
.animate-in .breadcrumb-item a:hover { color: #a5b4fc; }

.animate-in .breadcrumb-item.active {
    color: #a5b4fc;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* ════════════════════════════════════════════════════════════════
   LIGHT THEME
   ════════════════════════════════════════════════════════════════ */

/* Header */
html[data-theme="light"] .animate-in .h3 {
    color: #1e293b;
}
html[data-theme="light"] .animate-in .h3 i {
    background: rgba(99,102,241,.1);
    border-color: rgba(99,102,241,.2);
    color: #4f46e5;
    box-shadow: 0 0 12px rgba(99,102,241,.1);
}

/* Breadcrumb */
html[data-theme="light"] .animate-in .breadcrumb {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.08);
}
html[data-theme="light"] .animate-in .breadcrumb-item a {
    color: rgba(0,0,0,.4);
}
html[data-theme="light"] .animate-in .breadcrumb-item a:hover {
    color: #4f46e5;
}
html[data-theme="light"] .animate-in .breadcrumb-item.active {
    color: #4f46e5;
}
html[data-theme="light"] .animate-in .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(0,0,0,.2);
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
    .animate-in .h3 {
        font-size: .9rem;
    }
    .animate-in .h3 i {
        width: 28px;
        height: 28px;
        font-size: .72rem;
        border-radius: 8px;
    }
    .animate-in .breadcrumb {
        padding: .22rem .55rem;
    }
    .animate-in .breadcrumb-item,
    .animate-in .breadcrumb-item a,
    .animate-in .breadcrumb-item.active {
        font-size: .65rem;
    }
}

@media (max-width: 360px) {
    .animate-in .h3 { font-size: .82rem; }
    .animate-in nav { display: none; }
}

/* ════════════════════════════════════════════════════════════
   NOTIFICACIONES — Panel
════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.notif-wrapper {
    position: relative;
}

/* ── Botón campana ── */
.notif-bell-btn {
    background    : none;
    border        : none;
    color         : rgba(255,255,255,.8);
    font-size     : 1.1rem;
    cursor        : pointer;
    padding       : .35rem .45rem;
    position      : relative;
    border-radius : 8px;
    transition    : color .2s, background .2s;
    line-height   : 1;
}
.notif-bell-btn:hover {
    color      : #fff;
    background : rgba(255,255,255,.08);
}

/* ── Badge contador ── */
.notif-badge-count {
    position        : absolute;
    top             : 2px;
    right           : 2px;
    transform       : translate(40%, -40%);
    background      : #ef4444;
    color           : #fff;
    font-size       : .58rem;
    font-weight     : 700;
    min-width       : 16px;
    height          : 16px;
    border-radius   : 99px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 0 3px;
    line-height     : 1;
    pointer-events  : none;
}

/* ── Panel base ── */
.notif-panel {
    position      : absolute;
    top           : calc(100% + 8px);
    right         : 0;
    background    : #1e293b;
    border        : 1px solid rgba(255,255,255,.08);
    border-radius : 14px;
    box-shadow    : 0 12px 40px rgba(0,0,0,.45);
    z-index       : 9999;
    overflow      : hidden;
    animation     : notifFadeIn .18s ease;
}
.notif-panel-desktop { width: 320px; }
.notif-panel-mobile  { width: 290px; right: -8px; }

@keyframes notifFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
.notif-panel-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : .7rem 1rem .6rem;
    border-bottom   : 1px solid rgba(255,255,255,.06);
    flex-shrink     : 0;
}
.notif-panel-title {
    font-size   : .82rem;
    font-weight : 700;
    color       : #e2e8f0;
    display     : flex;
    align-items : center;
    gap         : .4rem;
}
.notif-panel-title i { color: #a5b4fc; }

.notif-mark-all-btn {
    background    : none;
    border        : none;
    font-size     : .7rem;
    color         : #a5b4fc;
    cursor        : pointer;
    padding       : .2rem .45rem;
    border-radius : 6px;
    transition    : background .2s;
    display       : flex;
    align-items   : center;
    gap           : .3rem;
    white-space   : nowrap;
}
.notif-mark-all-btn:hover { background: rgba(165,180,252,.1); }

/* ── Body con scroll ── */
.notif-panel-body {
    max-height     : 340px;
    overflow-y     : auto;
    padding        : .4rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}
.notif-panel-body::-webkit-scrollbar       { width: 4px; }
.notif-panel-body::-webkit-scrollbar-track { background: transparent; }
.notif-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

/* ── Item ───────────────────────────────────────── */
.notif-item {
    display        : flex;
    align-items    : flex-start;
    gap            : .55rem;

    padding        : .5rem .6rem .9rem .6rem; /* espacio extra abajo para la hora */
    border-radius  : 10px;

    cursor         : pointer;
    transition     : background .18s;
    text-decoration: none;
    color          : inherit;

    position       : relative;
    margin-bottom  : .25rem;
}

/* Hover / unread */
.notif-item:hover           { background: rgba(255,255,255,.06); }
.notif-item.is-unread       { background: rgba(99,102,241,.08); }
.notif-item.is-unread:hover { background: rgba(99,102,241,.14); }

/* ── Icono ─────────────────────────────────────── */
.notif-item-emoji {
    width           : 30px;
    height          : 30px;
    border-radius   : 8px;
    background      : rgba(255,255,255,.06);

    display         : flex;
    align-items     : center;
    justify-content : center;

    font-size       : .85rem;
    flex-shrink     : 0;
}

/* ── Contenedor texto ───────────────────────────── */
.notif-item-body {
    flex       : 1;
    min-width  : 0;
}

/* ── Título ─────────────────────────────────────── */
.notif-item-title {
    font-size     : .78rem;
    font-weight   : 600;
    color         : #cbd5e1;

    line-height   : 1.15;

    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;

    margin-bottom : .15rem;
}

.notif-item.is-unread .notif-item-title {
    color       : #fff;
    font-weight : 700;
}

/* ── Mensaje ────────────────────────────────────── */
.notif-item-msg {
    font-size   : .66rem; /* más pequeño */
    color       : rgba(148,163,184,.8);

    line-height : 1.2;

    display            : -webkit-box;
    -webkit-line-clamp : 3; /* hasta 3 líneas */
    -webkit-box-orient : vertical;
    overflow           : hidden;
}

/* ── Hora ───────────────────────────────────────── */
.notif-item-time {
    position    : absolute;
    right       : .6rem;
    bottom      : .25rem;

    font-size   : .58rem;
    color       : rgba(148,163,184,.5);

    white-space : nowrap;
}

/* Punto no leído */
.notif-unread-dot {
    width         : 7px;
    height        : 7px;
    border-radius : 50%;
    background    : #6366f1;
    flex-shrink   : 0;
    margin-top    : .35rem;
}

/* ── Estado vacío ── */
.notif-empty {
    text-align    : center;
    padding       : 2rem 1rem;
    color         : rgba(148,163,184,.55);
    font-size     : .8rem;
}
.notif-empty i {
    font-size     : 1.8rem;
    margin-bottom : .5rem;
    display       : block;
    opacity       : .35;
}

/* ── Footer ── */
.notif-panel-footer {
    border-top : 1px solid rgba(255,255,255,.06);
    padding    : .45rem;
    flex-shrink: 0;
}
.notif-view-all {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : .35rem;
    padding         : .4rem;
    border-radius   : 8px;
    font-size       : .74rem;
    font-weight     : 600;
    color           : #a5b4fc;
    text-decoration : none;
    transition      : background .18s;
}
.notif-view-all:hover { background: rgba(165,180,252,.1); color: #c7d2fe; }

/* ── Skeletons ── */
.notif-skeleton {
    display       : flex;
    align-items   : flex-start;
    gap           : .55rem;
    padding       : .55rem .6rem;
    border-radius : 10px;
}
.notif-sk-icon {
    width         : 32px;
    height        : 32px;
    border-radius : 8px;
    background    : rgba(255,255,255,.07);
    flex-shrink   : 0;
    animation     : notifPulse 1.4s ease infinite;
}
.notif-sk-lines {
    flex           : 1;
    display        : flex;
    flex-direction : column;
    gap            : .4rem;
    padding-top    : .2rem;
}
.notif-sk-line {
    height        : 10px;
    border-radius : 6px;
    background    : rgba(255,255,255,.07);
    animation     : notifPulse 1.4s ease infinite;
}
.notif-sk-line.w50 { width: 50%; }
.notif-sk-line.w60 { width: 60%; }
.notif-sk-line.w70 { width: 70%; }
.notif-sk-line.w80 { width: 80%; }
.notif-sk-line.w90 { width: 90%; animation-delay: .15s; }

@keyframes notifPulse {
    0%,100% { opacity: .45; }
    50%     { opacity: .9;  }
}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME
════════════════════════════════════════════════════════════ */
html[data-theme="light"] .notif-bell-btn {
    color: #475569;
}
html[data-theme="light"] .notif-bell-btn:hover {
    color: #1e293b;
    background: rgba(0,0,0,.05);
}
html[data-theme="light"] .notif-panel {
    background : #fff;
    border-color: rgba(0,0,0,.08);
    box-shadow : 0 12px 40px rgba(0,0,0,.12);
}
html[data-theme="light"] .notif-panel-header {
    border-color: rgba(0,0,0,.07);
}
html[data-theme="light"] .notif-panel-title { color: #1e293b; }
html[data-theme="light"] .notif-panel-title i { color: #4f46e5; }
html[data-theme="light"] .notif-mark-all-btn { color: #4f46e5; }
html[data-theme="light"] .notif-mark-all-btn:hover { background: rgba(79,70,229,.07); }

html[data-theme="light"] .notif-item:hover           { background: rgba(0,0,0,.04); }
html[data-theme="light"] .notif-item.is-unread       { background: rgba(99,102,241,.06); }
html[data-theme="light"] .notif-item.is-unread:hover { background: rgba(99,102,241,.1); }
html[data-theme="light"] .notif-item-emoji           { background: rgba(0,0,0,.05); }
html[data-theme="light"] .notif-item-title           { color: #334155; }
html[data-theme="light"] .notif-item.is-unread .notif-item-title { color: #0f172a; }
html[data-theme="light"] .notif-item-msg             { color: #64748b; }
html[data-theme="light"] .notif-item-time            { color: #94a3b8; }

html[data-theme="light"] .notif-sk-icon,
html[data-theme="light"] .notif-sk-line  { background: rgba(0,0,0,.07); }

html[data-theme="light"] .notif-panel-footer { border-color: rgba(0,0,0,.07); }
html[data-theme="light"] .notif-view-all     { color: #4f46e5; }
html[data-theme="light"] .notif-view-all:hover { background: rgba(79,70,229,.07); color: #3730a3; }

html[data-theme="light"] .notif-empty { color: rgba(100,116,139,.6); }

/* ── Dropdown usuario — mantener estilos existentes ── */
.dropdown-menu {
    background   : #1e293b;
    border       : 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding      : .4rem;
    box-shadow   : 0 8px 32px rgba(0,0,0,.4);
}
.dropdown-menu .dropdown-item {
    border-radius: 8px;
    padding      : .5rem .75rem;
    transition   : background .2s;
    color        : #e2e8f0 !important;
}
.dropdown-menu .dropdown-item:hover {
    background: rgba(255,255,255,.07);
    color     : #fff !important;
}
html[data-theme="light"] .dropdown-menu {
    background  : #fff;
    border-color: rgba(0,0,0,.08);
    box-shadow  : 0 8px 32px rgba(0,0,0,.1);
}
html[data-theme="light"] .dropdown-menu .dropdown-item       { color: #1e293b !important; }
html[data-theme="light"] .dropdown-menu .dropdown-item:hover { background: rgba(99,102,241,.07); color: #4f46e5 !important; }

/*.navbar.navbar-glass {
    position: sticky !important;
    top: 0px;
    z-index: 100;
}*/

/* ══════════════════════════════════════════════════════════
   SweetAlert2 — tema oscuro para transacciones
══════════════════════════════════════════════════════════ */
.swal-tx-popup {
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .5) !important;
    padding: 1.5rem !important;
}

.swal-tx-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
}

.swal-tx-confirm {
    border-radius: 10px !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    padding: .6rem 1.2rem !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, .3) !important;
}

.swal-tx-cancel {
    border-radius: 10px !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    padding: .6rem 1.2rem !important;
    color: rgba(255, 255, 255, .6) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
}

.swal-tx-cancel:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: rgba(255, 255, 255, .85) !important;
}

/* Icono de pregunta */
.swal2-icon.swal2-question {
    border-color: #34d399 !important;
    color: #34d399 !important;
}

/* ════════════════════════════════════════════════════════════
   SELECT-GLOBAL.CSS
   Estilos universales para todos los <select> del sistema
   Se aplica sin importar la clase del módulo
════════════════════════════════════════════════════════════ */

/* ── Reset universal de apariencia nativa ── */
select {
    appearance         : none !important;
    -webkit-appearance : none !important;
    -moz-appearance    : none !important;
    background-image   : none !important;
    background-repeat  : no-repeat !important;
    background-position: unset !important;
    background-size    : unset !important;
    padding-right      : 2.2rem !important;

    /* Flecha personalizada SVG (modo oscuro) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat  : no-repeat !important;
    background-position: right .75rem center !important;
    background-size    : 12px 8px !important;
}

/* ── Flecha en modo claro ── */
html[data-theme="light"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat  : no-repeat !important;
    background-position: right .75rem center !important;
    background-size    : 12px 8px !important;
}

/* ── Opciones (modo oscuro) ── */
select option {
    background-color: #202044;
    color           : #f1f5f9;
    font-weight     : 500;
    padding         : .4rem .6rem;
}

select option:checked,
select option:hover {
    background-color: #1e293b;
    color           : #f1f5f9;
}

select option[value=""] {
    color: #94a3b8;
}

select option:disabled {
    color  : #475569;
    cursor : not-allowed;
}

/* ── Opciones (modo claro) ── */
html[data-theme="light"] select option {
    background-color: #ffffff;
    color           : #0f172a;
}

html[data-theme="light"] select option:checked,
html[data-theme="light"] select option:hover {
    background-color: #6366f1;
    color           : #ffffff;
}

html[data-theme="light"] select option[value=""] {
    color: #94a3b8;
}

html[data-theme="light"] select option:disabled {
    color: #94a3b8;
}

/* ── Select deshabilitado ── */
select:disabled {
    opacity: .5;
    cursor : not-allowed;
}

/* ── Select múltiple (sin flecha) ── */
select[multiple] {
    background-image   : none !important;
    padding-right      : .75rem !important;
    height             : auto;
}

select[multiple] option {
    padding: .35rem .6rem;
}