/*
 * Overrides que aislan artic.css del layout de Adminty.
 * Se carga DESPUÉS de artic.css.
 */

/* ── Fondo de página ──────────────────────────────────────────────────────── */
html[data-theme="light"] {
    background: #f0f4f8 !important;
}
html[data-theme="light"] body,
html[data-theme="light"] .pcoded,
html[data-theme="light"] .pcoded-container,
html[data-theme="light"] .pcoded-main-container,
html[data-theme="light"] .pcoded-wrapper,
html[data-theme="light"] .pcoded-content,
html[data-theme="light"] .pcoded-inner-content,
html[data-theme="light"] .main-body,
html[data-theme="light"] .page-wrapper {
    background: transparent !important;
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */

/* artic.css fuerza width/height 36px en .navbar .nav-icon y .navbar .btn
   con !important. Solo revertimos esas propiedades — nada más. */
.header-navbar .nav-icon,
.header-navbar .btn {
    width: auto !important;
    height: auto !important;
    min-height: unset !important;
    padding: unset !important;
    display: unset !important;
}

/* Mantener el topbar en su posición original.
   pcoded.min.js mide la altura real del header (outerHeight) y la aplica
   como margin-top inline en .pcoded-main-container. Si la altura natural
   queda fraccionaria (ej. 57.9018px, por el cambio de íconos/fuente),
   ese margin-top inline queda "raro". Fijamos una altura entera prolija
   para que la medición sea limpia y coincida con lo que el resto del
   layout espera (.pcoded-main-container asume 56px). */
.header-navbar.pcoded-header {
    top: 0 !important;
    position: fixed !important;
    height: 56px;
}

/* artic.css tiñe TODOS los .navbar de glassmorphism.
   El topbar de Adminty tiene su propio fondo — lo preservamos. */
html[data-theme="light"] .header-navbar.pcoded-header {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid #e8edf2 !important;
    box-shadow: 0 1px 8px rgba(15,23,42,0.07) !important;
}

/* ── Cards estructurales (no de contenido) ────────────────────────────────── */

/* artic.css → .card { overflow: hidden; border-radius: 14px }
   Eso rompe dropdowns en el topbar y el sidebar de chat.
   Solo neutralizamos los cards que son parte del layout, no del contenido. */
.pcoded-header .card,
.pcoded-navbar .card,
.users .card,
.users .card_main {
    overflow: visible !important;
    border-radius: 4px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Cards del contenido: solo asegurar que los dropdowns internos no queden cortados */
.pcoded-content .card {
    overflow: visible !important;
}

/* ── Inputs del template ──────────────────────────────────────────────────── */
.right-icon-control .form-control {
    border-radius: 4px !important;
}

/* ── Material Symbols — alineación en contexto de Adminty ────────────────── */

/* script.js le agrega icon-toggle-right/-left al ícono de #mobile-collapse
   (pensado para íconos feather, que pintan su glyph vía ::before). Como acá
   el <i> es Material Symbols, queda un glyph de feather superpuesto: lo anulamos. */
#mobile-collapse i.material-symbols-outlined.icon-toggle-right::before,
#mobile-collapse i.material-symbols-outlined.icon-toggle-left::before {
    content: none !important;
}

/* Íconos en el menú lateral */
.pcoded-micon i.material-symbols-outlined {
    font-size: 20px;
    vertical-align: middle;
    line-height: 1;
    display: inline-block;
}

/* Íconos en el topbar: resetear el font-family que hereda de feather/fa */
.header-navbar i.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
}

/* Íconos en el dropdown de usuario */
.profile-notification i.material-symbols-outlined {
    font-size: 17px;
    vertical-align: middle;
    margin-right: 6px;
}

/* ════════════════════════════════════════════════════════════════════════
   Paleta "MI" — crema cálido + carbón + dorado champán
   Sidebar y topbar, según el sistema de diseño nuevo (ver Ficha del Socio)
   ════════════════════════════════════════════════════════════════════════ */
:root {
    --mi-bg:        #F2EFE8;
    --mi-sidebar:   #FFFDF9;
    --mi-card:      #FFFFFF;
    --mi-ink:       #211F1B;
    --mi-charcoal:  #211E1B;
    --mi-gold:      #E3BE6A;
    --mi-gold-deep: #C7A04A;
    --mi-gold-soft: #F6EEDB;
    --mi-muted:     #8C887C;
    --mi-label:     #A6A192;
    --mi-border:    #ECE7DB;
    --mi-green:     #2FA37A;
}

/* Fondo general de página */
html[data-theme="light"] {
    background: var(--mi-bg) !important;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────────
   Adminty pinta el fondo oscuro en distintas capas anidadas según atributos
   de su "theme customizer" (navbar-theme, sidebar-img, etc.). En vez de pelear
   selector por selector, repintamos toda la cadena de contenedores. ─────────── */
.pcoded-navbar,
.pcoded-navbar .pcoded-inner-navbar,
.pcoded-navbar .main-menu,
.pcoded-navbar .mCustomScrollbar,
.pcoded-navbar .mCustomScrollBox,
.pcoded-navbar .mCSB_container,
.pcoded-navbar .mCSB_container_wrapper,
.pcoded[sidebar-img="true"] .pcoded-navbar,
.pcoded[sidebar-img="true"] .pcoded-navbar .main-menu,
.pcoded-navbar[navbar-theme] .main-menu {
    background: var(--mi-sidebar) !important;
    background-image: none !important;
    box-shadow: none !important;
}
html[data-theme="light"] .pcoded-navbar {
    border-right: 1px solid var(--mi-border);
}
/* Logo del topbar: Adminty lo pinta con [logo-theme=theme1]/[header-theme=theme1] */
.pcoded .pcoded-header .navbar-logo[logo-theme=theme1] {
    background-color: var(--mi-sidebar) !important;
}
.pcoded .pcoded-header[header-theme=theme1] .navbar-logo a {
    color: #5C584E !important;
}

/* Adminty fija estos colores con [navbar-theme=theme1], que pesa más que
   nuestras clases planas — los pisamos con el mismo selector. */
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li > a {
    color: #5C584E !important;
}
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li.active:hover > a,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li:hover > a {
    background: var(--mi-gold-soft) !important;
    color: var(--mi-ink) !important;
}
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li.active > a {
    background: var(--mi-gold) !important;
    color: var(--mi-ink) !important;
}

.pcoded-navbar .pcoded-item > li > a {
    color: #5C584E;
    border-radius: 12px;
    margin: 2px 12px;
    transition: background .15s ease, color .15s ease;
}
.pcoded-navbar .pcoded-item > li > a:before {
    display: none !important;
}
.pcoded-navbar .pcoded-item > li:not(.active):hover > a {
    background: var(--mi-gold-soft);
    color: var(--mi-ink);
}
.pcoded-navbar .pcoded-item > li.active > a {
    background: var(--mi-gold) !important;
    color: var(--mi-ink) !important;
    box-shadow: 0 6px 16px rgba(227,190,106,.4);
}
.pcoded-navbar .pcoded-micon .material-symbols-outlined {
    color: #8C887C;
    transition: color .15s ease;
}
.pcoded-navbar .pcoded-item > li:hover .pcoded-micon .material-symbols-outlined,
.pcoded-navbar .pcoded-item > li.active .pcoded-micon .material-symbols-outlined {
    color: var(--mi-ink);
}
.pcoded-navbar .pcoded-item > li.logout > a,
.pcoded-navbar .pcoded-item > li.logout .pcoded-micon .material-symbols-outlined {
    color: #B0526A;
}
.pcoded-navbar .pcoded-item > li.logout:hover > a {
    background: #FBEDEF !important;
    color: #B0526A !important;
}
.pcoded-navbar .pcoded-item > li.logout:hover .pcoded-micon .material-symbols-outlined {
    color: #B0526A;
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .header-navbar.pcoded-header {
    background: var(--mi-bg) !important;
    border-bottom: 1px solid var(--mi-border) !important;
    box-shadow: none !important;
}
.header-navbar .nav-right .badge.bg-c-green {
    background: var(--mi-green) !important;
}
.header-navbar .dropdown-toggle img.img-radius {
    border: 2px solid var(--mi-gold-soft);
}
.header-navbar .dropdown-toggle span {
    color: var(--mi-ink);
    font-weight: 600;
}

/* Barra superior móvil: carbón con acentos crema/dorado, igual que el handoff */
@media only screen and (max-width: 992px) {
    html[data-theme="light"] .header-navbar.pcoded-header {
        background: var(--mi-charcoal) !important;
        border-bottom: none !important;
    }
    /* En móvil el logo queda sobre el carbón del topbar: el crema del sidebar
       no contrasta ahí, así que lo pisamos con un dorado oscuro propio. */
    .pcoded .pcoded-header .navbar-logo[logo-theme=theme1] {
        background-color: #957941 !important;
    }
    .header-navbar .navbar-logo .mobile-menu i.material-symbols-outlined {
        color: #F4F1E8;
    }
    /* Solo debe verse el ícono de menú (3 rayas); ocultamos el de "más opciones" */
    .header-navbar .navbar-logo .mobile-options {
        display: none !important;
    }
}