.custom-modal-body input[type="datetime-local"] {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    margin-bottom: 0.5em;
}
body.dark-mode .custom-modal-body input[type="datetime-local"] {
    background: #232a36;
    color: #fff;
    border: 1px solid #3b4a63;
}
.custom-modal-body input[type="datetime-local"] {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    margin-bottom: 0.5em;
}
body.dark-mode .custom-modal-body input[type="datetime-local"] {
    background: #232a36;
    color: #fff;
    border: 1px solid #3b4a63;
}
.custom-modal-body select {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}
body.dark-mode .custom-modal-body select {
    background: #232a36;
    color: #fff;
    border: 1px solid #3b4a63;
}
/* Modal custom para editar material en evento */
.custom-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.72);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-modal-dialog {
    background: #181c23;
    border-radius: 16px;
    box-shadow: 0 2px 32px #0006;
    padding: 2em 1.5em 1.5em 1.5em;
    min-width: 320px;
    max-width: 95vw;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.custom-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1em;
}
.custom-modal-icon {
    font-size: 2.5em;
    color: #ff3c00;
    margin-bottom: 0.2em;
}
.custom-modal-title {
    font-size: 1.3em;
    font-weight: bold;
    margin: 0;
    color: #fff;
    text-align: center;
}
.custom-modal-body {
    width: 100%;
    margin-bottom: 1.2em;
}
.custom-modal-actions {
    display: flex;
    gap: 1em;
    width: 100%;
    justify-content: center;
}
.custom-modal-actions .btn.primary {
    background: #3b82f6;
    color: #fff;
    border: none;
    font-weight: 700;
    border-radius: 8px;
    padding: 0.7em 1.5em;
    font-size: 1em;
}
.custom-modal-actions .btn.btn-cancel {
    background: #FCA5A5;
    color: #222;
    border: none;
    font-weight: 700;
    border-radius: 8px;
    padding: 0.7em 1.5em;
    font-size: 1em;
}
/* Ajuste color texto materiales en detalles evento (mobile y desktop) */
.event-material-item, .event-material-name {
    color: var(--color-text-primary) !important;
}
body.dark-mode .event-material-item, body.dark-mode .event-material-name {
    color: #fff !important;
}
/* Etiqueta de evento sin materiales */
.event-no-materials {
    color: var(--color-text-primary);
}
body.dark-mode .event-no-materials {
    color: #fff !important;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
}
:root {
    --color-bg: #EBECF2;
    --color-surface: #FFFFFF;
    /* Superficies secundarias (tarjetas/paneles) */
    --color-surface-2: #FAFAFC;
    /* Controles (inputs/botones) */
    --color-control-bg: #F3F4F6;
    --color-control-bg-hover: #E5E7EB;
    --color-control-border: #9A9EB2;
    --color-border: #9A9EB2;
    --color-text-primary: #000;
    --color-text-secondary: #3F435D;
    --color-primary: #2e21eb;
    --color-tooltip-bg: #2A2E33;
    --color-tooltip-text: #fff;
    --shadow-border: rgba(0, 0, 0, 0.1);
    --user-bg-color: var(--color-surface-2);
    --topbar-height: 4.5rem;
    --bottombar-height: 4.25rem;
    /* Azul general; la pantalla de QR sobreescribe a verde */
    --color-qr-green: #3b82f6;
    --color-qr-glow: rgba(59, 130, 246, 0.18);
}
body.dark-mode {
    /* Dark mode: subimos contraste (fondo más oscuro + texto secundario más claro) */
    --color-bg: #07090c;
    /* Surface base: modales/dropdowns/sidebars */
    --color-surface: #111827;
    /* Surface secundaria: tarjetas/paneles (algo más clara que surface) */
    --color-surface-2: #1b2536;
    /* Controles: ligeramente más oscuros que surface para que “se lean” dentro de paneles */
    --color-control-bg: #0b1220;
    --color-control-bg-hover: #0f1a2b;
    --color-control-border: #3b4a63;
    --color-border: #3b4a63;
    --color-text-primary: #F8FAFC;
    --color-text-secondary: #C7D2E2;
    --color-primary: #2e21eb;
    --color-tooltip-bg: #fff;
    --color-tooltip-text: #000;
    --shadow-border: rgba(255, 255, 255, 0.1);
    --user-bg-color: var(--color-surface-2);
    /* Mantener el azul en dark; QR lo sobreescribe a verde */
    --color-qr-green: #3b82f6;
    --color-qr-glow: rgba(59, 130, 246, 0.28);
}
/* Body */
body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg);
    transition: background-color 0.3s ease;
    background-image: url('../brand/imagenes/fondo/Fondo_5.JPG');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

/* Topbar */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    background-color: #535b8f;
    box-shadow: 0 1px 10px var(--shadow-border);
    /* Por encima de modales de pantalla (z-index:5000), por debajo de modales globales (6000) */
    z-index: 5600;
}

/* Bottom bar (solo móvil) */
.mobile-bottombar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--bottombar-height);
    background-color: #535b8f;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 -6px 16px rgba(16,24,40,0.12);
    /* Mantener visible sobre modales de pantalla */
    z-index: 5600;
    padding: 0 0.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.mobile-bottombar-brand,
.mobile-user-name {
    color: #ffffff;
}

.mobile-bottombar .user-icon {
    color: #ffffff;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

.mobile-bottombar .user-icon i {
    font-size: 1.65rem;
}

.mobile-bottombar .user-icon .logout-svg {
    width: 1.65rem;
    height: 1.65rem;
    display: block;
}

.mobile-bottombar-left {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.mobile-bottombar-right {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

/* Botones de acción en la barra inferior (móvil) */
.mobile-bottombar .mobile-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.05rem;
    color: #ffffff;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    text-decoration: none;
}

.mobile-bottombar .mobile-action-btn i {
    font-size: 1.25rem;
    line-height: 1;
    color: #ffffff;
}

.mobile-bottombar .mobile-action-text {
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #ffffff;
}

.mobile-bottombar-brand {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.mobile-user-data {
    display: block;
    min-width: 0;
}

.mobile-user-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}


.topbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: #ffffff;
    overflow: hidden;
}

.topbar-brand img {
    width: 2rem;
}

.topbar-brand span {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
}

.topbar-tabs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    justify-content: center;
}

.topbar-link,
.topbar-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.4rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.92);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
}

.topbar-link i,
.topbar-tab-btn i {
    font-size: 1.25rem;
}

/* QR: fallback con imagen local (evita depender de Boxicons en móvil) */
.topbar-qr-img {
    display: none;
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
}

/* QR: alternativa SVG (dibujito distinto) */
.topbar-qr-svg {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
}

.topbar-link:hover,
.topbar-tab-btn:hover,
.topbar-tab.is-open .topbar-tab-btn {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.14);
}

.topbar-tab {
    position: relative;
}

.topbar-caret {
    font-size: 1.1rem;
}

.topbar-tab.is-open .topbar-caret {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.topbar-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 14rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    box-shadow: 0 10px 25px rgba(16,24,40,0.12);
    padding: 0.35rem;
    display: none;
    /* Por encima del overlay de modales (5000), pero por debajo de modales globales (6000) */
    z-index: 5500;
}
body.dark-mode .topbar-dropdown {
    box-shadow: 0 0 0 2px rgba(46, 33, 235, 0.35), 0 10px 25px rgba(16,24,40,0.12);
}

.topbar-tab.is-open .topbar-dropdown {
    display: block;
}

.topbar-dropdown a {
    display: block;
    padding: 0.55rem 0.65rem;
    border-radius: 0.45rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
}

.topbar-dropdown a:hover {
    background: var(--color-bg);
    color: var(--color-text-primary);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

body.dark-mode .topbar-user {
    background: rgba(255, 255, 255, 0.14);
}

.topbar-user-data {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    white-space: nowrap;
}

.topbar-user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
}

.topbar-user-email {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* Logout en topbar: botón con texto (opción B) */
.topbar-user .user-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    cursor: pointer;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 0.45rem 0.7rem;
    box-shadow: none;
}

.topbar-user .user-logout-btn:hover {
    filter: brightness(0.97);
}

.topbar-user .user-logout-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.topbar-user .user-logout-btn i {
    font-size: 1.4rem;
}

.topbar-user .user-logout-btn .logout-svg {
    width: 1.4rem;
    height: 1.4rem;
    display: block;
    color: currentColor;
}

.topbar-user .user-logout-btn .user-icon-label {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .topbar-user .user-logout-btn .user-icon-label {
        display: none;
    }
    .topbar-user .user-logout-btn {
        padding: 0.45rem;
    }
}

.topbar-menu-btn {
    display: none;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: 0.4rem;
    padding: 0.5rem;
}

.topbar-menu-btn i {
    font-size: 1.6rem;
}

.topbar-menu-btn i:last-child {
    display: none;
}

body.topnav-open .topbar-menu-btn i:first-child {
    display: none;
}

body.topnav-open .topbar-menu-btn i:last-child {
    display: inline;
}

/* Bloquear el scroll del fondo cuando hay un modal abierto (móvil/tablet) */
body.modal-open {
    overflow: hidden;
}

/* Overlay oscuro con blur */
body::before {
    content: '';
    position: fixed;
    top: 0%;
    left: 0;
    width: 100%;
    height: 80vh; /* Ajustar la altura de la imagen para coincidir con el body */ 
    background: inherit;
    background-attachment: fixed;
    /* más oscuro para darle más contraste al contenido flotante */
    -webkit-filter: blur(10px) brightness(0.55);
    filter: blur(10px) brightness(0.55);
    z-index: -1;
}

/* En modo oscuro, oscurecer un poco más el fondo para que el texto no se confunda */
body.dark-mode::before {
    -webkit-filter: blur(10px) brightness(0.35);
    filter: blur(10px) brightness(0.35);
}

/* Utilidades simples */
.inline-form {
    display: inline;
}

/* Sidebar */
.sidebar {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 15rem;
    height: 100%;
    padding: 1.4rem 1rem 0 1rem;
    background-color: var(--color-surface);
    box-shadow: 1px 0 10px var(--shadow-border);
    transition: width 0.5s ease, transform 0.3s ease;
}

.sidebar.minimize{
    width: 4.94rem;
}
/* Header */
.header{
    width: 100%;
}
/* Menu Button */
.menu-btn {
    position: absolute;
    top: 3.5%;
    right: -0.87rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
    box-shadow: 2px 2px 5px var(--shadow-border);
    cursor: pointer;
    transition: right 0.3s ease, background-color 0.3s ease;
}

.menu-btn i{
    font-size: 1.5rem;
}
.sidebar.minimize .menu-btn{
    right: -2.2rem;
}
.sidebar.minimize .menu-btn i{
    transform: rotate(180deg);
}
/* Brand */
.brand{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-left: 0.455rem;
    margin-bottom: 1.8rem;
    overflow: hidden;
}
.brand img{
    width: 2rem;
}
.brand span{
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Menu Container */
.menu-container{
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
}

/* Search */
.search{
    display: flex;
    width: 100%;
    padding: 0.55rem 0;
    margin-bottom: 1.2rem;
    border-radius: 0.3rem;
    box-shadow: 0 0 0 1px var(--color-border);
    cursor: pointer;
    transition: box-shadow 0.5s ease;
}
.search:hover{
    box-shadow: 0 0 0 1px var(--color-text-primary);
}
.sidebar.minimize .search{
    box-shadow: none;
}
.sidebar.minimize .search:hover{
    background-color: var(--color-bg);
}
.search i{
    font-size: 1.35rem;
    color: var(--color-text-secondary);
    padding: 0 0.8rem;
}
.search:hover i{
    color: var(--color-text-primary);
}
.search input{
    width: 70%;
    border: none;
    outline: none;
    background-color: transparent;
    color: var(--color-text-primary);
}

/* User Welcome */
.user-welcome{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 0.8rem;
    margin-bottom: 1.2rem;
    border-radius: 0.3rem;
    background-color: var(--color-bg-secondary);
    box-shadow: 0 0 0 1px var(--color-border);
    transition: all 0.3s ease;
}
.user-welcome i{
    font-size: 1.5rem;
    color: var(--color-primary);
    flex-shrink: 0;
}
.user-welcome span{
    color: var(--color-text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar.minimize .user-welcome span{
    opacity: 0;
    width: 0;
}
.sidebar.minimize .user-welcome{
    padding: 0.75rem;
    justify-content: center;
}

/* Menu */
.menu{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.menu .menu-item{
    position: relative;
    list-style: none;
    overflow: hidden;
}
.menu .menu-link{
    display: flex;
    padding: 0.55rem 0;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: 0.3rem;
}
.menu-item:hover .menu-link,
.sub-menu .sub-menu-link:hover,
.menu-item.active .menu-link{
    color: var(--color-text-primary);
    background-color: var(--color-bg);
}
.menu-link i{
    font-size: 1.35rem;
    padding: 0 0.8rem;
}
.menu-link i:last-child{
    margin-left: auto;
    transition: transform 0.3s ease;
}
.sidebar.minimize .menu-link i:last-child{
    display: none;
}
.menu-item.sub-menu-toggle .menu-link i:last-child{
    transform: rotate(180deg);
}
.menu-link span{
    font-size: 0.8rem;
    font-weight: 500;
}
.sidebar.minimize .menu-item:hover,
.sidebar.minimize .menu-item.sub-menu-toggle{
    overflow: visible;
}
.sidebar.minimize .menu-item:hover span,
.sidebar.minimize .menu-item.sub-menu-toggle span{
    position: absolute;
    left: 4.2rem;
    padding: 0.5rem;
    background-color: var(--color-tooltip-bg);
    border-radius: 0.4rem;
    color: var(--color-tooltip-text);
    transition: all 0.3s ease;
}

/* Sub menu*/
.sub-menu{
    height: 0;
    transition: all 0.3s ease;
    overflow: hidden;
    left: 0;
}
.sidebar.minimize .sub-menu{
    position: absolute;
    left: 4.2rem;
    top: 3rem;
    background-color: var(--color-surface);
    border-radius: 0.2rem;
}
.sub-menu .sub-menu-link{
    display: flex;
    margin-left: 2.5rem;
    padding: 0.55rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: 0.3rem;
}
.sub-menu::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 0.07rem;
    margin-left: 1.4rem;
    background-color: var(--color-border);
}
.sidebar.minimize .sub-menu::before{
    width: 0;
}
.sidebar.minimize .sub-menu a{
    margin: 0 0.5rem;
}
/* Footer */
.footer{
    width: 100%;
    padding: 1rem 0;
    box-shadow: 0 -0.02rem 0 0 var(--color-border);
}
.user{
    display: flex;
    overflow: hidden;
    margin-top: 1rem;
}
.user-img{
    display: flex;
    margin: 0 0.7rem 0 0.35rem;
}
.user-img img{
    width: 2.2rem;
    height: 2.2rem;
    object-fit: cover;
    border-radius: 50%;
}
.user-data{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    white-space: nowrap;
}
.user-data .name{
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.user-data .email{
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}
.user-icon{
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-text-secondary);
}

/* Main */
main{
    margin-left: 0;
    padding: calc(var(--topbar-height) + 2rem) 2rem 2rem 2rem;
    transition: padding 0.2s ease;
}
main h1{
    color: var(--color-text-primary);
}

/* Dark mode */
.brand-dark{
    display: none;
}
body.dark-mode .brand-dark{
    display: flex;
/* Lista de materiales en detalles de evento */
.user-card-materials ul {
    margin: 0.5em 0 0 1.5em;
    color: var(--color-text-primary);
}
body.dark-mode .user-card-materials ul,
body.dark-mode .user-card-materials li {
    color: #fff;
}
}
body.dark-mode .brand-light{
    display: none;
}

/* En modo oscuro, no mostrar imagen junto a 'Localitza' en la topbar */
body.dark-mode .topbar-brand img {
    display: none;
}
.dark-mode-btn{
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 0 10px 2px var(--shadow-border);
    cursor: pointer;
    overflow: hidden;
    border: none;
}

body.dark-mode .dark-mode-btn {
    background-color: rgba(18, 20, 26, 0.95);
}
.dark-mode-btn i{
    font-size: 1.5rem;
    position: absolute;
    transition: transform 0.3s ease-in; /* Transición suave para el cambio de color */

}
.dark-mode-btn i:last-child{
    transform: translateY(0%);
    color: #000; /* Color del sol en modo claro */
}
body.dark-mode .dark-mode-btn i:last-child{ 
    transform: translateY(0%);
    color: #fff; /* Color del sol en modo oscuro */
}
body.dark-mode .dark-mode-btn i:first-child{
    transform: translateY(0%);
}

/* Responsive */
@media (max-height: 683px){
    .footer{
        box-shadow: none;
    }
    .footer ul{
        display: none;
    }
    .menu-container{
        overflow-y: auto;
    }
    .search{
        box-shadow: none;
        border: 2px solid var(--color-border);
    }
    .search:hover{
        box-shadow: none;
    }
    main{
        padding: 2rem;
    }
}
@media (max-width: 900px){
    .topbar {
        justify-content: space-between;
    }
    /* Quitar imagen del QR en topbar (móvil) */
    .topbar-brand img {
        display: none;
    }

    /* Hacer el nombre más pequeño para ganar espacio */
    .topbar-brand {
        gap: 0.4rem;
    }
    .topbar-brand span {
        font-size: 0.85rem;
        max-width: 5.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Permitir que el scroller de iconos se encoja y muestre el primer icono (QR) */
    .topbar-tabs {
        min-width: 0;
    }

    /* Menú superior solo con iconos en móvil */
    .topbar-link span,
    .topbar-tab-btn span {
        display: none;
    }

    .topbar-link,
    .topbar-tab-btn {
        padding: 0.4rem 0.45rem;
    }

    /* En móvil, para el botón QR usamos la imagen local (más fiable que el icon font) */
    .topbar-link-qr i {
        display: none;
    }
    .topbar-link-qr .topbar-qr-img {
        display: none;
    }
    .topbar-link-qr .topbar-qr-svg {
        display: inline-block;
    }

    /* Quitar caret en móvil para ahorrar espacio */
    .topbar-caret {
        display: none;
    }
    /* En móvil: menú superior siempre visible (sin botón hamburguesa) */
    .topbar-menu-btn {
        display: none;
    }

    /* En móvil: dejar los accesos (iconos) a la izquierda y la marca a la derecha */
    .topbar-tabs {
        order: 1;
    }
    .topbar-left {
        order: 2;
    }
    .topbar-tabs {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        background: transparent;
        border-bottom: none;
        box-shadow: none;
        padding: 0;
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0.15rem;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .topbar-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Dropdowns en móvil: panel fijo (no se recorta por overflow del scroller) */
    .topbar-dropdown {
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        top: calc(var(--topbar-height) + 0.35rem);
        min-width: auto;
        max-height: calc(100vh - var(--topbar-height) - var(--bottombar-height) - 2rem);
        overflow: auto;
        z-index: 5500;
    }

    main {
        padding: calc(var(--topbar-height) + 1.25rem) 1rem 1.25rem 1rem;
    }
}

@media (max-width: 820px){
    .topbar-right {
        display: none;
    }
    .mobile-bottombar {
        display: flex;
    }
    body.is-auth main {
        padding-bottom: calc(var(--bottombar-height) + 1.25rem);
    }
}

/* ===== Usuarios Grid Styles ===== */
.users-panel{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 10px 25px rgba(16,24,40,0.12);
}
.users-panel-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}

/* Pagination controls */
.pagination-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:0.75rem;background:rgba(0,0,0,0.03);border-radius:8px;flex-wrap:wrap;gap:0.5rem}
body.dark-mode .pagination-controls{background:rgba(255,255,255,0.05)}
.pagination-info{font-size:0.9rem;color:var(--color-text-secondary)}
.pagination-actions{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.pagination-actions label{font-size:0.9rem;color:var(--color-text-secondary)}
.pagination-actions select{padding:0.4rem 0.6rem;border-radius:6px;border:1px solid var(--color-control-border);background:var(--color-control-bg);color:var(--color-text-primary);cursor:pointer}
.btn-page{padding:0.4rem 0.8rem;border-radius:6px;border:1px solid var(--color-control-border);background:var(--color-control-bg);color:var(--color-text-primary);cursor:pointer;transition:all 0.2s ease}
.btn-page:hover:not(:disabled){background:var(--color-text-secondary);color:#fff;border-color:var(--color-text-secondary)}
.btn-page:disabled{opacity:0.4;cursor:not-allowed}
#page-indicator{font-size:0.9rem;font-weight:600;color:var(--color-text-primary);padding:0 0.5rem}

/* Scroll superior sincronizado */
.table-scroll-top{overflow-x:auto;overflow-y:hidden;margin-bottom:0.5rem;height:12px}
.table-scroll-top::-webkit-scrollbar{height:12px}
.table-scroll-top::-webkit-scrollbar-track{background:rgba(0,0,0,0.05);border-radius:6px}
.table-scroll-top::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:6px}
.table-scroll-top::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}
.scroll-width{height:1px}

.users-actions{display:flex;gap:0.5rem;align-items:center}
.users-actions input[type="search"]{padding:0.5rem 0.75rem;border-radius:8px;border:1px solid var(--color-border);min-width:180px}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.45rem;
    padding:0.6rem 0.95rem;
    border-radius:10px;
    border:1px solid transparent;
    cursor:pointer;
    background:var(--color-surface);
    color:var(--color-text-primary);
    font-weight:700;
    line-height:1;
    text-decoration:none;
    transition:background-color 0.15s ease,border-color 0.15s ease,color 0.15s ease,transform 0.05s ease;
}

.btn:hover:not([disabled]){background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.08)}
body.dark-mode .btn:hover:not([disabled]){background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12)}

.btn:active:not([disabled]){transform:translateY(1px)}

.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}

.btn.secondary{
    background:transparent;
    color:var(--color-text-primary);
    border:1px solid var(--color-border);
}
body.dark-mode .btn.secondary{
    box-shadow: 0 0 0 2px rgba(46, 33, 235, 0.25);
}
.btn.secondary:hover:not([disabled]){background:rgba(0,0,0,0.03)}
body.dark-mode .btn.secondary:hover:not([disabled]){background:rgba(255,255,255,0.06)}

.btn.primary{
    background:#3b82f6;
    color:#fff;
    border-color:#3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.32), 0 6px 18px rgba(16,24,40,0.08) !important;
}
body.dark-mode .btn.primary{
    box-shadow: 0 0 0 2px rgba(59,130,246,0.32), 0 6px 18px rgba(16,24,40,0.08) !important;
}
.btn.primary:hover:not([disabled]){filter:brightness(0.92)}

/* Botón cancelar/tancar (estilo unificado en toda la app) */
.btn.btn-cancel,
a.btn.btn-cancel,
.btn-page.btn-cancel{
    background:#3b82f6;
    border-color:#3b82f6;
    color:#fff;
    font-weight:700;
    white-space:nowrap;
}
.btn.btn-cancel:hover:not([disabled]),
a.btn.btn-cancel:hover,
.btn-page.btn-cancel:hover:not(:disabled){filter:brightness(0.92)}

.btn[disabled]{opacity:0.6;cursor:not-allowed}

.users-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}

/* Table styles for users */
.table-container{width:100%;overflow-x:auto;margin-top:1rem}
.data-table{width:100%;border-collapse:collapse;background:var(--color-surface);border-radius:8px;overflow:hidden}
.data-table thead{background:rgba(0,0,0,0.05)}
body.dark-mode .data-table thead{background:rgba(255,255,255,0.05)}
.data-table th,.data-table td{padding:0.75rem;text-align:left;border-bottom:1px solid var(--color-border);border-right:1px solid var(--color-border);color:var(--color-text-primary);font-size:0.8rem}
.data-table th:last-child,.data-table td:last-child{border-right:none}
.data-table tbody td:nth-child(2),
.data-table tbody td:nth-child(5){border-right:none}
.data-table th{font-weight:600;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.5px}
.data-table tbody tr:hover{background:rgba(0,0,0,0.03)}
body.dark-mode .data-table tbody tr:hover{background:rgba(255,255,255,0.03)}
.data-table .filter-row th{padding:0.5rem;background:transparent}
.data-table .column-filter{width:100%;padding:0.4rem;border-radius:4px;border:1px solid var(--color-control-border);font-size:0.85rem;background:var(--color-control-bg);color:var(--color-text-primary)}
.data-table .column-filter-wide{width:100%}
.data-table .column-filter::placeholder{opacity:0.6}
.data-table button,.data-table .action-btn{padding:0.3rem 0.5rem;margin:0 0.15rem;border-radius:4px;border:1px solid var(--color-border);cursor:pointer;font-size:1rem;background:transparent;transition:all 0.2s ease;display:inline-block!important;vertical-align:middle}
.data-table button.edit,.data-table .action-btn.edit{color:#000;background:transparent}
.data-table button.edit:hover,.data-table .action-btn.edit:hover{background:transparent;color:#000}
.data-table button.edit:focus-visible,.data-table .action-btn.edit:focus-visible{outline:2px solid rgba(46,33,235,0.55);outline-offset:2px}

/* Dark mode: el edit negro no se ve; usar blanco */
body.dark-mode .data-table button.edit,
body.dark-mode .data-table .action-btn.edit{color:#fff;background:transparent}
body.dark-mode .data-table button.edit:hover,
body.dark-mode .data-table .action-btn.edit:hover{color:#fff;background:transparent}
.data-table button.delete,.data-table .action-btn.delete{color:#dc2626;border-color:#dc2626}
.data-table button.delete,.data-table .action-btn.delete{background:transparent}
.data-table button.delete:hover,.data-table .action-btn.delete:hover{background:transparent;color:#dc2626}

/* Lista de materiales (Edificis → Ubicacions): evitar que se ilumine toda la fila al pulsar un icono */
.material-item {
    -webkit-tap-highlight-color: transparent;
}
.material-item .action-btn {
    -webkit-tap-highlight-color: transparent;
}
.material-item .action-btn:active {
    opacity: 0.7;
}
.data-table td{vertical-align:middle}
.data-table td:last-child{white-space:nowrap;text-align:center;min-width:100px}
.user-card{background:var(--user-bg-color);padding:1rem;border-radius:10px;box-shadow:0 6px 18px rgba(31,41,55,0.08);display:flex;flex-direction:column;gap:0.5rem}
.user-card .user-name{font-weight:600;color:var(--color-text-primary);font-size:1rem}
.user-card .user-email{font-size:0.85rem;color:var(--color-text-secondary);display:flex;align-items:center;gap:0.3rem}
.user-card .user-email i{font-size:0.9rem}
.user-card .user-phone{font-size:0.85rem;color:var(--color-text-secondary);display:flex;align-items:center;gap:0.3rem}
.user-card .user-phone i{font-size:0.9rem}
.user-card .user-ubicacion{font-size:0.85rem;color:var(--color-text-secondary);display:flex;align-items:center;gap:0.3rem;font-style:italic}
.user-card .user-ubicacion i{font-size:1rem}
.user-card .user-actions{margin-top:auto;display:flex;gap:0.5rem}
.user-card button{padding:0.4rem 0.6rem;border-radius:8px;border:none;cursor:pointer}
.user-card button.edit{background:transparent;color:#000}
.user-card button.delete{background:transparent;color:#dc2626}
.user-card button.edit:hover,.user-card button.delete:hover{background:transparent}

/* Dark mode: hacer visible el botón editar en tarjetas */
body.dark-mode .user-card button.edit{color:#fff}
body.dark-mode .user-card button.edit:hover{color:#fff;background:transparent}

/* Modal */
/* El modal debe ser usable sin tapar la topbar/bottombar (estas quedan siempre visibles). */
.modal{position:fixed;left:0;right:0;top:0;bottom:0;display:none;align-items:flex-start;justify-content:center;padding:1rem;padding-top:calc(var(--topbar-height) + 0.75rem);background:rgba(0,0,0,0.56);z-index:5000;overflow:hidden}

/* Modal edición material: imprimir QR verde y cancelar rojo/rosa */
#material-modal #btn-generate-qr.btn.secondary{
    background:#16a34a;
    border-color:#16a34a;
    color:#fff;
    box-shadow:0 0 0 2px rgba(22,163,74,0.25);
}
#material-modal #btn-generate-qr.btn.secondary:hover:not([disabled]){background:#15803d;border-color:#15803d;color:#fff}

/* Modal edición material (Edificis): imprimir QR verde */
#material-ubicacio-modal #btn-material-ubicacio-generate-qr.btn.secondary{
    background:#16a34a;
    border-color:#16a34a;
    color:#fff;
    box-shadow:0 0 0 2px rgba(22,163,74,0.25);
}
#material-ubicacio-modal #btn-material-ubicacio-generate-qr.btn.secondary:hover:not([disabled]){background:#15803d;border-color:#15803d;color:#fff}

#material-modal #btn-cancel.btn.secondary{
    background:#3b82f6;
    border-color:#3b82f6;
    color:#fff;
}
#material-modal #btn-cancel.btn.secondary:hover:not([disabled]){filter:brightness(0.92)}

/* Events: sin ajuste especial (ya reservamos topbar con padding del modal) */
#event-modal{align-items:flex-start}
#event-modal .modal-dialog{margin-top:0}

/* En Events + Materials: acciones siempre visibles y scroll en el cuerpo */
#event-modal .modal-content,
#material-modal .modal-content,
#material-ubicacio-modal .modal-content,
#user-modal .modal-content,
#edificio-modal .modal-content,
#event-modal .modal-content{display:flex;flex-direction:column;overflow:hidden}

#edificio-modal .modal-content{
    background-color: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: none;
    width: min(720px, 95%);
    padding: 0;
}
body.dark-mode #edificio-modal .modal-content{
    background-color: rgba(18, 20, 26, 0.95);
}

#edificio-modal .modal-surface{
    padding: 0.5rem 0;
}

#edificio-modal .modal-surface h2{
    margin: 0 0 1.5rem 0;
    color: var(--color-text-primary, #1f2937);
    font-size: 1.5rem;
    font-weight: 600;
}

@media (max-width: 820px){
    #edificio-modal .modal-dialog{width:100%;max-width:100%;}
    #edificio-modal .modal-content{max-height:calc(100vh - var(--topbar-height) - var(--bottombar-height) - 1.5rem);max-height:calc(100dvh - var(--topbar-height) - var(--bottombar-height) - 1.5rem);}
}

#event-modal form.modal-surface,
#material-modal form.modal-surface,
#material-ubicacio-modal form.modal-surface,
#user-modal form.modal-surface,
#edificio-modal form.modal-surface{flex:1;min-height:0}

.modal-body{display:flex;flex-direction:column;gap:0.6rem;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding-right:0.15rem}

@media (max-width: 820px){
    body.is-auth .modal{padding:0.75rem;padding-top:calc(var(--topbar-height) + 0.5rem);padding-bottom:calc(var(--bottombar-height) + 0.75rem)}
}

/* Compactar modales largos en móvil (Usuarios/Materiales) */
@media (max-width: 820px){
    #user-modal .modal-content > form.modal-surface,
    #material-modal .modal-content > form.modal-surface,
    #edificio-modal .modal-content > form.modal-surface,
    #event-modal .modal-content > form.modal-surface,
    #ubicacio-modal .modal-content > form.modal-surface{padding:0.85rem}

    #user-modal .modal-body,
    #material-modal .modal-body,
    #material-ubicacio-modal .modal-body,
    #event-modal .modal-body,
    #edificio-modal .modal-body,
    #ubicacio-modal .modal-body,
    #item-modal .modal-body{gap:0.05rem}

    #user-modal .modal-dialog input,
    #user-modal .modal-dialog textarea,
    #user-modal .modal-dialog select,
    #material-modal .modal-dialog input,
    #material-modal .modal-dialog textarea,
    #material-modal .modal-dialog select,
    #material-ubicacio-modal .modal-dialog input,
    #material-ubicacio-modal .modal-dialog textarea,
    #material-ubicacio-modal .modal-dialog select,
    #event-modal .modal-dialog input,
    #event-modal .modal-dialog textarea,
    #event-modal .modal-dialog select,
    #edificio-modal .modal-dialog input,
    #edificio-modal .modal-dialog textarea,
    #edificio-modal .modal-dialog select,
    #ubicacio-modal .modal-dialog input,
    #ubicacio-modal .modal-dialog textarea,
    #ubicacio-modal .modal-dialog select,
    #item-modal .modal-dialog input,
    #item-modal .modal-dialog textarea,
    #item-modal .modal-dialog select{padding:0.4rem}

    #user-modal .modal-actions,
    #material-modal .modal-actions,
    #material-ubicacio-modal .modal-actions,
    #event-modal .modal-actions,
    #edificio-modal .modal-actions,
    #ubicacio-modal .modal-actions,
    #item-modal .modal-actions{padding-top:0.55rem}

    #user-modal textarea,
    #material-modal textarea,
    #material-ubicacio-modal textarea,
    #event-modal textarea,
    #edificio-modal textarea,
    #ubicacio-modal textarea,
    #item-modal textarea{min-height:2.2rem}

    /* Modal Receptor: permitir scroll cuando el teclado aparece */
    #receptor-modal .modal-dialog {
        height: auto;
        max-height: calc(100dvh - var(--topbar-height) - var(--bottombar-height) - 1.5rem);
        overflow: visible;
        display: flex;
        flex-direction: column;
    }
    
    #receptor-modal .modal-content {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    #receptor-modal form.modal-surface {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }
    
    #receptor-modal .modal-body {
        overflow: visible;
        flex: none;
        min-height: auto;
    }

    /* Para el receptor-modal: botones en flujo normal al final del formulario */
    #receptor-modal .modal-actions {
        position: static;
        background: transparent;
        border-top: none;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 1.5rem;
        flex-shrink: 0;
    }
}

/* Asegurar que el modal receptor puede scrollear en todos los tamaños */
#receptor-modal .modal-dialog {
    height: auto;
    max-height: calc(100dvh - var(--topbar-height) - 1.5rem);
    overflow: visible;
    display: flex;
    flex-direction: column;
}

#receptor-modal .modal-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#receptor-modal form.modal-surface {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

#receptor-modal .modal-body {
    overflow: visible;
    flex: none;
    min-height: auto;
}

/* Para el receptor-modal: botones en flujo normal al final del formulario */
#receptor-modal .modal-actions {
    position: static;
    background: transparent;
    border-top: none;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 1.5rem;
    flex-shrink: 0;
}

/* Modal global de alerta */
#global-alert-modal{z-index:6000}
#global-alert-modal .modal-dialog{width:min(520px,92%)}
#global-alert-modal .modal-surface{background:transparent !important}
#global-alert-modal .modal-content{
    background: rgba(255,255,255,0.85) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 16px;
    box-shadow: 0 18px 50px var(--shadow-border);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
#global-alert-modal .global-alert-title,
#global-alert-modal .global-alert-message{ text-shadow: 0 1px 2px rgba(0,0,0,0.18) }
body.dark-mode #global-alert-modal .modal-content{
    background: rgba(20,24,33,0.85) !important;
}
body.dark-mode #global-alert-modal .global-alert-title,
body.dark-mode #global-alert-modal .global-alert-message{ text-shadow: 0 1px 2px rgba(0,0,0,0.55) }
#global-alert-modal .global-alert-body{padding:1.4rem 1.4rem 1.15rem;display:flex;flex-direction:column;align-items:center;gap:0.75rem;text-align:center}
#global-alert-modal .global-alert-icon{font-size:3.6rem;color:#22c55e;line-height:1;margin-top:0.15rem}
#global-alert-modal .global-alert-title{margin:0;font-size:1.25rem;font-weight:800;letter-spacing:0.2px;color:var(--color-text-primary)}
#global-alert-modal .global-alert-message{margin:0;color:var(--color-text-secondary);line-height:1.55;font-size:1rem}
#global-alert-modal .global-alert-message{white-space:pre-line}
#global-alert-modal .modal-actions{width:100%;justify-content:center;margin-top:0.35rem}
#global-alert-modal #global-alert-ok.btn-page{min-width:220px;padding:0.7rem 1.2rem;border-radius:10px;background:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:800}
#global-alert-modal #global-alert-ok.btn-page:hover:not(:disabled){filter:brightness(0.92);color:#fff}

/* Modal global de confirmación (sí/no) */
#global-confirm-modal{z-index:6000}
#global-confirm-modal .modal-dialog{width:min(520px,92%)}
#global-confirm-modal .modal-surface{background:transparent !important}
#global-confirm-modal .modal-content{
    background: rgba(255,255,255,0.85) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 16px;
    box-shadow: 0 18px 50px var(--shadow-border);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
body.dark-mode #global-confirm-modal .modal-content{
    background: rgba(20,24,33,0.85) !important;
}
#global-confirm-modal .global-confirm-body{padding:1.4rem 1.4rem 1.15rem;display:flex;flex-direction:column;align-items:center;gap:0.75rem;text-align:center}
#global-confirm-modal .global-confirm-icon{font-size:3.2rem;color:var(--color-primary);line-height:1;margin-top:0.15rem}
#global-confirm-modal .global-confirm-title{margin:0;font-size:1.25rem;font-weight:800;letter-spacing:0.2px;color:var(--color-text-primary)}
#global-confirm-modal .global-confirm-message{margin:0;color:var(--color-text-secondary);line-height:1.55;font-size:1rem}
#global-confirm-modal .global-confirm-message{white-space:pre-line}
#global-confirm-modal .global-confirm-actions{width:100%;justify-content:center;margin-top:0.35rem;flex-wrap:wrap;gap:0.6rem}
#global-confirm-modal #global-confirm-cancel.btn-page,
#global-confirm-modal #global-confirm-ok.btn-page{min-width:170px;padding:0.7rem 1.2rem;border-radius:10px}

/* Confirm modal (default): confirmar azul, cancelar rosa */
#global-confirm-modal:not(.is-danger):not(.is-print):not(.is-close) #global-confirm-ok.btn-page{
    background:var(--color-primary);
    border-color:var(--color-primary);
    color:#fff;
    font-weight:800;
}
#global-confirm-modal:not(.is-danger):not(.is-print):not(.is-close) #global-confirm-ok.btn-page:hover:not(:disabled){filter:brightness(0.92);color:#fff}

/* Confirm modal (danger): icono rojo, cancelar azul, eliminar rosa (como materiales) */
#global-confirm-modal.is-danger .global-confirm-icon{color:#dc2626}

/* En confirmaciones de borrado, el botón principal (Eliminar) debe destacar como peligro. */
#global-confirm-modal.is-danger #global-confirm-ok.btn-page{
    background:#dc2626;
    border-color:#dc2626;
    color:#fff;
    font-weight:800;
}
#global-confirm-modal.is-danger #global-confirm-ok.btn-page:hover:not(:disabled){filter:brightness(0.96)}

/* Botón cancelar en modales de peligro (azul) */
#global-confirm-modal.is-danger #global-confirm-cancel.btn-page{
    background:#3b82f6;
    border-color:#3b82f6;
    color:#fff;
    font-weight:800;
}
#global-confirm-modal.is-danger #global-confirm-cancel.btn-page:hover:not(:disabled){filter:brightness(0.92)}

/* Confirm modal (print): confirmar verde, cancelar rojo/rosa */
#global-confirm-modal.is-print #global-confirm-ok.btn-page{
    background:#3b82f6;
    border-color:#3b82f6;
    color:#fff;
    font-weight:700;
    box-shadow:0 0 0 2px rgba(59,130,246,0.25);
}
#global-confirm-modal.is-print #global-confirm-ok.btn-page:hover:not(:disabled){background:#2563eb;border-color:#2563eb;color:#fff}

#global-confirm-modal.is-print #global-confirm-cancel.btn-page{
    background:#FCA5A5;
    border-color:#FCA5A5;
    color:var(--color-text-primary);
    font-weight:700;
}
#global-confirm-modal.is-print #global-confirm-cancel.btn-page:hover:not(:disabled){filter:brightness(0.96)}

/* Confirm modal (close): confirmar azul (Guardar), cancelar rosa (Descartar) */
#global-confirm-modal.is-close .btn-confirm-primary{
    background:#3b82f6;
    border-color:#3b82f6;
    color:#fff;
    font-weight:800;
}
#global-confirm-modal.is-close .btn-confirm-primary:hover:not(:disabled){
    background:#2563eb;
    border-color:#2563eb;
    color:#fff;
}

#global-confirm-modal.is-close .btn-confirm-secondary{
    background:#FCA5A5;
    border-color:#FCA5A5;
    color:var(--color-text-primary);
    font-weight:800;
}
#global-confirm-modal.is-close .btn-confirm-secondary:hover:not(:disabled){filter:brightness(0.96)}

/* Modal QR (materials): acciones principales en verde */
#qr-modal #btn-qr-download.btn.secondary,
#qr-modal #btn-qr-print.btn.secondary{
    background:#16a34a;
    border-color:#16a34a;
    color:#fff;
}
#qr-modal #btn-qr-download.btn.secondary:hover:not([disabled]),
#qr-modal #btn-qr-print.btn.secondary:hover:not([disabled]){
    background:#15803d;
    border-color:#15803d;
    color:#fff;
}

/* Modal QR (materials): botón de cerrar en rojo/rosa */
#qr-modal #btn-qr-close.btn.primary{
    background:#FCA5A5;
    border-color:#FCA5A5;
    color:var(--color-text-primary);
}
#qr-modal #btn-qr-close.btn.primary:hover:not([disabled]){filter:brightness(0.96)}

/* Mobile: aumentar la opacidad del overlay y oscurecer el fondo del body::before para mayor contraste */
@media (max-width: 820px){
    body::before{ -webkit-filter: blur(8px) brightness(0.45); filter: blur(8px) brightness(0.45); }
    .modal{ background: rgba(0,0,0,0.78); }
    .modal-dialog{ margin: 0; width: min(720px, 100%); }

    /* Confirm modal: botones sin desbordes */
    #global-confirm-modal .global-confirm-actions{flex-direction:column;align-items:stretch}
    #global-confirm-modal #global-confirm-cancel.btn-page,
    #global-confirm-modal #global-confirm-ok.btn-page{min-width:0;width:100%}

    .pagination-controls{flex-direction:column;align-items:stretch}
    .pagination-actions{justify-content:center;font-size:0.85rem}
    #page-indicator{font-size:0.85rem}
}
.modal[aria-hidden="false"]{display:flex}
.modal-dialog{width:min(720px,95%);background:transparent !important;padding:0;border-radius:10px;position:relative;overflow:hidden;pointer-events:auto}
body.dark-mode .modal-dialog{background:transparent !important}
.modal-content{background:var(--color-bg) !important;border:1px solid rgba(0,0,0,0.05);box-shadow:none;color:var(--color-text-primary);border-radius:16px;max-height:calc(100vh - var(--topbar-height) - 2rem);max-height:calc(100dvh - var(--topbar-height) - 2rem);overflow:auto;position:relative;overscroll-behavior:contain;touch-action:pan-y}
body.dark-mode .modal-content{background:var(--color-surface) !important;border:1px solid rgba(255,255,255,0.06);color:var(--color-text-primary)}

@media (max-width: 820px){
    body.is-auth .modal-content{max-height:calc(100vh - var(--topbar-height) - var(--bottombar-height) - 1.5rem);max-height:calc(100dvh - var(--topbar-height) - var(--bottombar-height) - 1.5rem)}
}
#user-modal .modal-dialog{background:transparent !important}
body.dark-mode #user-modal .modal-dialog{background:transparent !important}
#user-modal .modal-content{background:var(--color-bg) !important}
body.dark-mode #user-modal .modal-content{background:var(--color-surface) !important}
.modal-surface{background:transparent !important}
body.dark-mode .modal-surface{background:transparent !important}
.modal-dialog form{display:flex;flex-direction:column;gap:0.6rem}
.modal-content > form.modal-surface{padding:1.2rem}
@media (max-width: 820px){
    .modal-content > form.modal-surface{padding:1rem}
}
.modal-dialog input,.modal-dialog textarea,.modal-dialog select{padding:0.6rem;border-radius:8px;border:1px solid var(--color-control-border);width:100%;background:var(--color-control-bg);color:var(--color-text-primary)}
body.dark-mode .modal-dialog input,body.dark-mode .modal-dialog textarea,body.dark-mode .modal-dialog select{background:var(--color-control-bg);color:var(--color-text-primary)}

/* Separación visual extra en modo oscuro: botones/inputs más “marcados” */
body.dark-mode .btn-page{background:var(--color-control-bg);border-color:var(--color-control-border)}
body.dark-mode .btn-page.btn-cancel{background:rgba(255,255,255,0.06)}
body.dark-mode .pagination-actions select{background:var(--color-control-bg);border-color:var(--color-control-border)}
body.dark-mode .modal-dialog input:focus,body.dark-mode .modal-dialog textarea:focus,body.dark-mode .modal-dialog select:focus{outline:2px solid rgba(46,33,235,0.55);outline-offset:2px}

/* DataTables: hacer más distinguibles los botones de acción en dark-mode */
body.dark-mode .data-table button,body.dark-mode .data-table .action-btn{background:rgba(255,255,255,0.05)}
body.dark-mode .data-table button:hover,body.dark-mode .data-table .action-btn:hover{background:rgba(255,255,255,0.08)}
.modal-dialog .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem}
.modal-actions{display:flex;justify-content:flex-end;gap:0.5rem;margin-top:0.5rem}

/* En modales de pantalla (no globales), mantener siempre visibles las acciones (Cancelar/Guardar) */
.modal:not(#global-alert-modal):not(#global-confirm-modal) .modal-actions{position:sticky;bottom:0;z-index:2;background:var(--color-bg);padding-top:0.75rem;padding-bottom:calc(0.25rem + env(safe-area-inset-bottom, 0px));border-top:1px solid rgba(0,0,0,0.08)}
body.dark-mode .modal:not(#global-alert-modal):not(#global-confirm-modal) .modal-actions{background:var(--color-surface);border-top:1px solid rgba(255,255,255,0.10)}

/* Los modales globales mantienen su layout sin sticky */
#global-alert-modal .modal-actions,
#global-confirm-modal .modal-actions{position:static;background:transparent;border-top:none;padding-top:0;padding-bottom:0}

/* Botón cerrar en cabecera de modal */
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:0.75rem}
.modal-close{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--color-border);background:transparent;color:var(--color-text-secondary);cursor:pointer}
.modal-close:hover{background:rgba(0,0,0,0.03)}
body.dark-mode .modal-close:hover{background:rgba(255,255,255,0.06)}
.modal-close:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.modal-close i{font-size:1.4rem;line-height:1}

/* Flatpickr dentro de modales */
.flatpickr-calendar{z-index:6500 !important}

@media (max-width:1100px){.users-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){
    .users-grid{grid-template-columns:repeat(2,1fr)}
    .users-panel{padding:1rem}
    .users-panel-header{flex-direction:column;align-items:stretch}
    .data-table{font-size:0.85rem}
    .data-table th,.data-table td{padding:0.5rem 0.4rem}
}
@media (max-width:480px){
    .users-grid{grid-template-columns:1fr}
    .users-actions{flex-direction:column;align-items:stretch}
    .users-actions input{width:100%}
    .users-panel{padding:0.75rem}
    .data-table{font-size:0.8rem}
    .data-table th,.data-table td{padding:0.4rem 0.3rem}
}

/* Improve contrast in dark-mode */
body.dark-mode .users-panel{background:rgba(18,20,26,0.7)}

/* Inline field errors and notifications */
.field-error{color:#b91c1c;font-size:0.85rem;margin-top:0.25rem}
.notification{padding:0.5rem 0.75rem;border-radius:8px;background:rgba(255,255,255,0.9);border:1px solid rgba(0,0,0,0.06);color:var(--color-text-primary);margin-top:0.5rem}

body.dark-mode .notification{background:rgba(18,20,26,0.9);border:1px solid rgba(255,255,255,0.08);color:var(--color-text-primary)}

/* DataTables (pie): en modo oscuro, texto claro */
body.dark-mode .dataTables_info,
body.dark-mode .dataTables_length,
body.dark-mode .dataTables_length label,
body.dark-mode .dataTables_filter label,
body.dark-mode .dataTables_paginate {
    color: var(--color-text-primary) !important;
}

body.dark-mode .dataTables_paginate .paginate_button,
body.dark-mode .dataTables_paginate .paginate_button:hover,
body.dark-mode .dataTables_paginate .paginate_button:active {
    color: var(--color-text-primary) !important;
}

body.dark-mode .dataTables_paginate .paginate_button.disabled,
body.dark-mode .dataTables_paginate .paginate_button.disabled:hover,
body.dark-mode .dataTables_paginate .paginate_button.disabled:active {
    color: var(--color-text-secondary) !important;
}
.btn[disabled]{opacity:0.6;cursor:not-allowed}

/* Utilidades */
.field-hidden{display:none}

/* Tom Select uses its own styles — custom searchable select removed in favor of TomSelect */

/* Tom Select extra styles for improved option layout */
.ts-option{display:flex;flex-direction:column;gap:0.2rem;padding:0.35rem 0.5rem}
.ts-title{font-weight:600;color:var(--color-text-primary);}
.ts-sub{font-size:0.85rem;color:var(--color-text-secondary)}

/* Fix transparency / contrast for Tom Select inside modal */
.tom-select, .tom-select .ts-control {
    background-color: var(--color-surface) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    color: var(--color-text-primary) !important;
    border-radius: 8px !important;
}

.tom-select .ts-control {
    box-shadow: 0 6px 18px rgba(16,24,40,0.08) !important;
    padding: 0.3rem 0.5rem !important;
}

/* make dropdown scrollable by default and contained where appropriate */
.tom-select .ts-dropdown {
    background: var(--color-surface) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 40px rgba(16,24,40,0.18) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    z-index: 2500 !important; /* above modal content */
    color: var(--color-text-primary) !important;
    max-height: 250px !important; /* Altura máxima para el dropdown */
}

/* When dropdown is placed inside the modal-dialog we ensure it scrolls and fits */
.modal-dialog .tom-select .ts-dropdown {
    overflow-y: auto !important;
    max-height: 220px !important;
    z-index: 9999 !important; /* Por encima del botón sticky de modal-actions */
}

/* A tiny gap at the bottom/top of modal so absolutely-positioned dropdowns aren't flush */
.modal-dialog .ts-dropdown {
    padding-bottom: 18px !important; /* larger inner padding so bottom line is visibly separated */
    padding-top: 8px !important;
}

/* Give dropdowns inside modals a slightly larger radius and a stronger, soft shadow
    so they visually float above the modal content and won't look glued to the edge. */
.modal-dialog .tom-select .ts-dropdown,
.modal-dialog .ts-dropdown {
     border-radius: 12px !important; /* slightly larger radius for a softer card look */
     box-shadow: 0 18px 50px rgba(3, 10, 25, 0.36) !important; /* stronger but soft shadow */
     border: 1px solid rgba(0,0,0,0.10) !important; /* subtle stronger border to separate from modal */
     /* make sure the dropdown keeps a tiny visual gap from the modal edge */
     margin-bottom: 8px !important;
}

/* Fuerza la opacidad total del menú desplegable y las opciones para que no se vea nada del fondo. */
.tom-select,
.tom-select .ts-control,
.tom-select .ts-dropdown,
.tom-select .ts-dropdown .ts-option {
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--color-border) !important;
    margin: 0 !important;
}

/* Hover en opciones */
.tom-select .ts-dropdown .ts-option:hover,
.tom-select .ts-dropdown .ts-option.selected {
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
}

/* Elementos seleccionados (chips) */
.tom-select .ts-item {
    background: rgba(0, 0, 0, 0.1) !important;
    color: var(--color-text-primary) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    margin: 2px 4px 2px 0 !important;
}

/* Contenedor del contenido del menú */
.tom-select .ts-dropdown .ts-dropdown-content {
    max-height: 180px !important;
    overflow-y: auto !important;
}

/* Estilo del scrollbar */
.tom-select .ts-dropdown .ts-dropdown-content::-webkit-scrollbar {
    width: 8px;
}

.tom-select .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-track {
    background: var(--color-bg);
}

.tom-select .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 4px;
}

/* Modo oscuro - Control del dropdown (campo sin desplegar): fondo oscuro y texto blanco */
body.dark-mode .tom-select,
body.dark-mode .tom-select .ts-control,
body.dark-mode .tom-select .ts-control input {
    background-color: #2a3448 !important;
    border-color: #4a5a7a !important;
    color: #FFFFFF !important;
}

/* Modo oscuro - Dropdown desplegado: fondo un poco más claro y texto blanco */
body.dark-mode .tom-select .ts-dropdown,
body.dark-mode .tom-select .ts-dropdown .ts-list,
body.dark-mode .tom-select .ts-dropdown .ts-content {
    background-color: #3a4560 !important;
    border-color: #4a5a7a !important;
    color: #FFFFFF !important;
}

/* Modo oscuro - Opciones del dropdown: fondo más claro y texto blanco */
body.dark-mode .tom-select .ts-dropdown .ts-option {
    background-color: #3a4560 !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid #4a5a7a !important;
}

/* Modo oscuro - Hover y selección: fondo más claro aún y texto blanco */
body.dark-mode .tom-select .ts-dropdown .ts-option:hover,
body.dark-mode .tom-select .ts-dropdown .ts-option.selected,
body.dark-mode .tom-select .ts-dropdown .ts-option.active {
    background-color: #4a5a7a !important;
    color: #FFFFFF !important;
}

/* Mensajes de sin resultados y etiquetas de grupo */
.tom-select .ts-dropdown .ts-no-results,
.tom-select .ts-dropdown .ts-group-label {
    background: var(--color-surface) !important;
    color: var(--color-text-secondary) !important;
    padding: 8px 12px !important;
}

/* 
SALVAGUARDIA: aplica opacidad total para todas las partes desplegables y elementos secundarios (cubre los componentes internos de TomSelect)*/
.tom-select, .tom-select * {
    background: none !important; /* remove inherited backgrounds first */
    background-color: transparent !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* A continuación, establezca explícitamente fondos sólidos para los contenedores relevantes.*/
body:not(.dark-mode) .tom-select,
body:not(.dark-mode) .tom-select .ts-control,
body:not(.dark-mode) .tom-select .ts-dropdown,
body:not(.dark-mode) .tom-select .ts-dropdown .ts-option,
body:not(.dark-mode) .tom-select .ts-dropdown .ts-list,
body:not(.dark-mode) .tom-select .ts-dropdown .ts-content {
    background-color: #ffffff !important; /* full white */
    color: #000000 !important;
    opacity: 1 !important;
    box-shadow: 0 12px 40px rgba(16,24,40,0.18) !important;
}

/* En modo oscuro NO forzar blanco: superficie algo más clara que el fondo + texto blanco */
body.dark-mode .tom-select,
body.dark-mode .tom-select .ts-control,
body.dark-mode .tom-select .ts-control input {
    background-color: #2a3448 !important;
    color: #FFFFFF !important;
}

body.dark-mode .tom-select .ts-dropdown,
body.dark-mode .tom-select .ts-dropdown .ts-list,
body.dark-mode .tom-select .ts-dropdown .ts-content {
    background-color: #3a4560 !important;
    color: #FFFFFF !important;
}

body.dark-mode .tom-select .ts-dropdown .ts-option {
    background-color: #3a4560 !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

body.dark-mode .tom-select .ts-dropdown .ts-option:hover,
body.dark-mode .tom-select .ts-dropdown .ts-option.selected,
body.dark-mode .tom-select .ts-dropdown .ts-option.active {
    background-color: #4a5a7a !important;
    color: #FFFFFF !important;
}

/* Robustez: si el dropdown se renderiza fuera del wrapper (.tom-select), aplicar el mismo esquema */
body.dark-mode .ts-wrapper.single .ts-control,
body.dark-mode .ts-wrapper.single .ts-control input {
    background-color: #2a3448 !important;
    color: #FFFFFF !important;
}

body.dark-mode .ts-dropdown,
body.dark-mode .ts-dropdown .ts-list,
body.dark-mode .ts-dropdown .ts-content,
body.dark-mode .ts-dropdown .ts-dropdown-content {
    background-color: #3a4560 !important;
    color: #FFFFFF !important;
}

body.dark-mode .ts-dropdown .ts-option {
    background-color: #3a4560 !important;
    color: #FFFFFF !important;
}

body.dark-mode .ts-dropdown .ts-option:hover,
body.dark-mode .ts-dropdown .ts-option.selected,
body.dark-mode .ts-dropdown .ts-option.active {
    background-color: #4a5a7a !important;
    color: #FFFFFF !important;
}

body.dark-mode .ts-dropdown .ts-title,
body.dark-mode .ts-dropdown .ts-sub {
    color: #FFFFFF !important;
}

/* Haga que el borde desplegable sea completamente opaco y distinto del modal */
.tom-select .ts-dropdown {
    border: 1px solid rgba(0,0,0,0.08) !important;
}

/* Asegúrese de que no haya áreas transparentes debido al radio del borde o al desbordamiento*/
.tom-select .ts-dropdown .ts-option { border-radius: 0 !important; }

/* Estilos de modo oscuro consolidados arriba - esta sección eliminada para evitar duplicados */

/* Móvil: asegúrese de que el menú desplegable también sea opaco */
@media (max-width: 820px){
    .tom-select .ts-dropdown, .tom-select .ts-control { background-color: #ffffff !important; opacity: 1 !important }
    body.dark-mode .tom-select .ts-control {
        background-color: #2a3448 !important;
        color: #FFFFFF !important;
    }
    body.dark-mode .tom-select .ts-dropdown { 
        background-color: #3a4560 !important;
    }
    body.dark-mode .tom-select .ts-dropdown .ts-option {
        background-color: #3a4560 !important;
        color: #FFFFFF !important;
    }
    body.dark-mode .tom-select .ts-dropdown .ts-option:hover {
        background-color: #4a5a7a !important;
        color: #FFFFFF !important;
    }
}

/* 
ANULACIÓN ADICIONAL: El CSS de Tom Select puede configurar .ts-dropdown.form-control para usar variables 
de arranque (p. ej., var(--bs-body-bg)), que en nuestro diseño pueden ser transparentes. 
Se fuerza una superficie sólida y opaca para los selectores específicos con alta especificidad, 
de modo que no puedan heredar el fondo de la página. */
.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select,
.tom-select .ts-dropdown,
.tom-select .ts-dropdown.form-control,
.tom-select .ts-dropdown.form-select {
    background-color: var(--color-surface) !important; /* superficie sólida explícita */
    background: var(--color-surface) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    background-clip: padding-box !important;
    z-index: 3500 !important; /* garantizar la superposición modal anterior */
    box-shadow: 0 8px 28px rgba(0,0,0,0.18) !important;
}

/* Asegúrese de que el contenedor interno de la lista tampoco tenga transparencia */
.ts-dropdown .ts-list, .ts-dropdown .ts-content { background-color: inherit !important; opacity: 1 !important }

/* Ajustar altura del desplegable */
.ts-dropdown {
    max-height: 160px !important;
    overflow-y: auto !important;
}

/* Eliminar scroll del contenedor interno */
.ts-dropdown .ts-list, 
.ts-dropdown .ts-dropdown-content {
    overflow-y: visible !important;
    max-height: none !important;
}

/* Asegurar que solo el contenedor principal tenga scroll */
.ts-dropdown .ts-dropdown-content {
    overflow: visible !important;
}

/* Reducir altura de los elementos individuales */
.ts-option {
    padding: 4px 10px !important;
    line-height: 1.3 !important;
}

/* Reducir altura de los elementos individuales */
.ts-option {
    padding: 4px 10px !important;
    line-height: 1.3 !important;
}

/* ===============================
   Aura verde permanente (QR)
   Aplica borde y resplandor sutil a inputs/selects/modales
   =============================== */
/* Controles de formulario estándar */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
textarea,
select {
    border-color: var(--color-qr-green) !important;
    box-shadow: 0 0 0 2px var(--color-qr-glow), 0 6px 18px rgba(16,24,40,0.06) !important;
}

/* TomSelect (contenedor y control) */
.tom-select,
.tom-select .ts-control,
.ts-wrapper.single .ts-control {
    border-color: var(--color-qr-green) !important;
    box-shadow: 0 0 0 2px var(--color-qr-glow), 0 6px 18px rgba(16,24,40,0.06) !important;
}

/* Refuerzo al enfocar (teclado/ratón) */
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
.tom-select .ts-control:focus,
.tom-select .ts-control:focus-within {
    border-color: var(--color-control-border) !important;
    box-shadow: 0 10px 24px rgba(16,24,40,0.10) !important;
    outline: none !important;
}
body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="search"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="number"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode input[type="tel"]:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus,
body.dark-mode .tom-select .ts-control:focus,
body.dark-mode .tom-select .ts-control:focus-within {
    box-shadow: 0 0 0 2px rgba(46, 33, 235, 0.35), 0 10px 24px rgba(16,24,40,0.10) !important;
}

/* Dropdown de TomSelect */
.tom-select .ts-dropdown {
    border-color: var(--color-border) !important;
    box-shadow: 0 12px 40px rgba(16,24,40,0.16) !important;
}
body.dark-mode .tom-select .ts-dropdown {
    box-shadow: 0 0 0 1px rgba(46, 33, 235, 0.25), 0 12px 40px rgba(16,24,40,0.16) !important;
}

/* Superficies de modal */
.modal .modal-content,
.modal form.modal-surface {
    border: 1px solid var(--color-border) !important;
    box-shadow: 0 18px 50px rgba(3,10,25,0.32) !important;
}
body.dark-mode .modal .modal-content,
body.dark-mode .modal form.modal-surface {
    box-shadow: 0 0 0 2px rgba(46, 33, 235, 0.25), 0 18px 50px rgba(3,10,25,0.32) !important;
}

/* ===============================
   Overlay de carga para adjuntos
   =============================== */
.adjuntos-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.adjuntos-loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background: var(--color-surface);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    min-width: 180px;
    text-align: center;
}

.adjuntos-loading-spinner .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.adjuntos-loading-spinner p {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin: 0;
}