/* Admin Area Styles - Solo estilos de la barra de navegaci�n AdminNav */

/* Admin Nav - Barra de navegaci�n con degradado rojo */
.admin-nav {
    background: linear-gradient(90deg, #dc3545 0%, #a71d2a 100%) !important;
    border-bottom: 2px solid #a71d2a;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.admin-nav .nav-link {
    color: #ffffff !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.admin-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.admin-nav .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.admin-nav .dropdown-item {
    color: #333333;
    transition: all 0.2s ease;
}

.admin-nav .dropdown-item:hover {
    background-color: #dc3545;
    color: #ffffff;
}

.admin-nav .dropdown-item i {
    margin-right: 8px;
    font-size: 16px;
}

.admin-nav .menu-icon i {
    font-size: 18px;
    margin-right: 4px;
}

/* Regular Nav - Enlace a Admin Area (rojo destacado) */
.admin-area-link {
    color: #dc3545 !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.admin-area-link:hover {
    background-color: rgba(220, 53, 69, 0.1) !important;
    color: #a71d2a !important;
}


/* Topbar - Enlace al area de administracion (icono rojo, como en el menu lateral) */
.topbar-admin-link i {
    color: #dc3545;
}

.topbar-admin-link:hover i {
    color: #a71d2a;
}

/* Admin Nav - Enlace para volver al �rea regular (destacado) */
.admin-nav .regular-area-link {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    margin-left: 8px;
}

.admin-nav .regular-area-link:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .admin-nav .menu-text {
        display: none;
    }

    .admin-nav .menu-icon i {
        font-size: 20px;
    }
}

/* =====================================================================
   Zona de administración — señalización SUAVE en rojo (menú + breadcrumb).
   Reutiliza la paleta "danger subtle" del tema (el mismo rojo discreto de
   los iconos del panel /admin), no un rojo pleno. Vía variables --ins-*
   para adaptarse a skin/tema claro-oscuro.
   !important para ganar a las variantes html[data-bs-theme=dark][...].
   ===================================================================== */
.wrapper.admin-area {
    --ins-sidenav-bg: var(--ins-danger-bg-subtle) !important;
    --ins-sidenav-border-color: var(--ins-danger-border-subtle) !important;
    --ins-sidenav-item-hover-bg: rgba(var(--ins-danger-rgb), 0.12) !important;
    --ins-sidenav-item-active-bg: rgba(var(--ins-danger-rgb), 0.18) !important;
    --ins-sidenav-item-active-color: var(--ins-danger-text-emphasis) !important;
}

/* Enlace "volver a la app": leve realce sobre el fondo rosado. */
.admin-area .sidenav-menu .regular-area-link {
    background-color: rgba(var(--ins-danger-rgb), 0.1);
    border-radius: 5px;
}

.admin-area .sidenav-menu .regular-area-link:hover {
    background-color: rgba(var(--ins-danger-rgb), 0.2) !important;
}

/* =====================================================================
   Editor de configuracion inicial de pantallas (admin/appearance).
   La barra de tabs (.spe-tabbar) muestra en hover el mismo border-bottom
   que la pestana activa de nav-bordered (.nav-link.active).
   ===================================================================== */
.spe-tabbar .nav-item .nav-link:hover {
    border-bottom: 1px solid var(--ins-primary);
}


/* portal/admin: margin-left a juego con el sidenav fijo (mismo mecanismo que .app-topbar/.content-page). */
.wrapper.admin-area .portal-navbar,
.wrapper.admin-area .portal-content {
    margin-left: var(--ins-sidenav-width);
    transition: margin-left 0.25s ease-in-out;
}

/* El Footer (margin-top:auto) solo se pega abajo si su contenedor es un flex-column con altura
   minima de pantalla completa: en /admin eso lo da .content-page (app.css), pero .portal-content
   (compartido con el portal publico) solo trae "flex:1 1 auto" -pensado para cuando ES hijo de un
   flex, no para sus propios hijos-, asi que en /portal/admin el footer se quedaba pegado al
   contenido en vez de al fondo de la pantalla. Mismo calculo de min-height que .content-page. */
.wrapper.admin-area .portal-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - calc(var(--ins-topbar-height) + 1px));
}

html[data-sidenav-size=condensed] .wrapper.admin-area .portal-navbar,
html[data-sidenav-size=condensed] .wrapper.admin-area .portal-content {
    margin-left: var(--ins-sidenav-width-sm);
}

/* El navbar de admin reutiliza .portal-navbar/.portal-container del portal publico, que en
   portal.css los acota y centra (max-width + margin-inline:auto) para la landing SIN sidenav.
   En admin si hay sidenav (margin-left ya fijado arriba) y el navbar debe llegar hasta el borde
   derecho de la pantalla, no quedar centrado como una caja. Mayor especificidad que las reglas
   de portal.css (incluidas sus media queries) para ganarles sin usar !important. */
.wrapper.admin-area .portal-navbar {
    width: auto;
    max-width: none;
    margin-right: 0;
    border-radius: 0;
}

.wrapper.admin-area .portal-navbar .portal-container {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* El navbar de admin usa la misma estructura interna que el del feed (.portal-navbar-inner, sin
   colapso de Bootstrap): hay sidenav, asi que se estira a todo el ancho libre igual que alli
   (".portal-shell--with-nav .portal-navbar-inner{max-width:none}" en portal.css). */
.wrapper.admin-area .portal-navbar .portal-navbar-inner {
    max-width: none;
}

/* El navbar de /portal/admin mide lo mismo que el de /portal: altura fija = --ins-topbar-height, sin padding
   vertical (el py-2 de Bootstrap + el .nav-user de UserDropdown, de min-height igual a la topbar, lo dejaban
   mas alto). Es la misma regla que portal.css aplica a ".portal-shell--with-nav .portal-navbar", que aqui no
   alcanza porque el layout de admin usa ".wrapper.admin-area". */
.wrapper.admin-area .portal-navbar {
    height: var(--ins-topbar-height);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.wrapper.admin-area .portal-navbar .portal-navbar-inner {
    height: 100%;
}