/* ===================================================================
   LAYOUT PRINCIPAL DEL PANEL
   =================================================================== */

.app-shell {
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* ===================================================================
   SIDEBAR
   =================================================================== */

.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(
        to bottom,
        rgba(20, 20, 28, 0.85),
        rgba(10, 10, 14, 0.95)
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
}

[data-theme="light"] .sidebar {
    background: white;
    border-right: 1px solid var(--border-soft);
}

.sidebar-header {
    padding: 24px 24px 20px;
    border-bottom: 1px solid var(--border-soft);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.sidebar-logo-img {
    height: 38px;
    width: auto;
    max-width: 100%;
    filter: drop-shadow(0 0 12px var(--sanet-blue-glow));
}

.sidebar-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sanet-blue), var(--sanet-blue-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: white;
    box-shadow: 0 0 16px var(--sanet-blue-glow);
}

.sidebar-brand-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-1);
}

.sidebar-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 13px;
    color: var(--text-2);
    border-bottom: 1px solid var(--border-soft);
    transition: color 0.2s;
}

.sidebar-back:hover {
    color: var(--sanet-blue-bright);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 24px;
    color: var(--text-2);
    font-size: 14px;
    transition: all 0.15s;
    position: relative;
    cursor: pointer;
}

.nav-item:hover {
    color: var(--text-1);
    background: rgba(30, 107, 255, 0.06);
}

.nav-item.active {
    color: var(--sanet-blue-bright);
    background: rgba(30, 107, 255, 0.10);
    font-weight: 500;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--sanet-blue);
    border-radius: 0 3px 3px 0;
}

.nav-item .nav-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-item .nav-arrow {
    margin-left: auto;
    font-size: 12px;
    opacity: 0.5;
    transition: transform 0.2s;
}

.nav-item.has-submenu.open .nav-arrow {
    transform: rotate(90deg);
}

.nav-submenu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
    background: rgba(0, 0, 0, 0.25);
}

.nav-submenu.open {
    max-height: 300px;
}

.nav-subitem {
    display: flex;
    align-items: center;
    padding: 9px 24px 9px 54px;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.15s;
}

.nav-subitem:hover {
    color: var(--text-1);
}

.nav-subitem.active {
    color: var(--sanet-blue-bright);
}

.nav-subitem::before {
    content: '°';
    margin-right: 10px;
    color: var(--text-3);
}

/* ===================================================================
   MAIN CONTENT
   =================================================================== */

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ===================================================================
   TOPBAR
   =================================================================== */

.topbar {
    height: var(--topbar-height);
    padding: 0 var(--content-padding);
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--border-soft);
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 14, 0.7),
        rgba(10, 10, 14, 0.5)
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
    z-index: 10;
}

[data-theme="light"] .topbar {
    background: rgba(255, 255, 255, 0.85);
}

.topbar-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
}

.topbar-menu-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: background 0.2s;
}

.topbar-menu-btn:hover {
    background: var(--bg-2);
}

.topbar-info {
    flex: 1;
    text-align: center;
    color: var(--text-2);
    font-size: 13px;
}

.topbar-info strong {
    color: var(--text-1);
    margin-left: 6px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-action-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bg-2);
    color: var(--text-2);
    border: 1px solid var(--border-soft);
    transition: all 0.2s;
    position: relative;
}

.topbar-action-btn:hover {
    color: var(--sanet-blue-bright);
    border-color: var(--border-focus);
    background: var(--bg-3);
}

.topbar-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--live);
    color: white;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sanet-blue), var(--sanet-blue-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

/* ===================================================================
   CONTENT AREA
   =================================================================== */

.content {
    flex: 1;
    padding: var(--content-padding);
}

.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-2);
}

.breadcrumbs a {
    color: var(--text-2);
    transition: color 0.2s;
}

.breadcrumbs a:hover {
    color: var(--text-1);
}

.breadcrumbs .separator {
    color: var(--text-3);
    font-size: 14px;
}

.breadcrumbs .current {
    color: var(--sanet-blue-bright);
    font-weight: 500;
}

/* ===================================================================
   DASHBOARD CARDS (réplica del SBP dashboard)
   =================================================================== */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.stat-card {
    background: linear-gradient(
        to bottom,
        rgba(20, 20, 28, 0.65),
        rgba(10, 10, 14, 0.78)
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-tile);
    padding: 22px;
    border: 1px solid var(--border-soft);
    transition: all 0.25s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .stat-card {
    background: white;
    border: 1px solid var(--border-soft);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.stat-card:hover {
    border-color: var(--border-focus);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(30, 107, 255, 0.15);
}

[data-theme="light"] .stat-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08),
                0 0 16px rgba(30, 107, 255, 0.10);
}

.stat-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.stat-label {
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 8px;
    font-weight: 500;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1;
    font-family: 'Outfit', sans-serif;
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    font-size: 22px;
}

.stat-icon.icon-blue { background: linear-gradient(135deg, #3D8BFF, #1E6BFF); }
.stat-icon.icon-cyan { background: linear-gradient(135deg, #06B6D4, #0891B2); }
.stat-icon.icon-green { background: linear-gradient(135deg, #22C55E, #16A34A); }
.stat-icon.icon-purple { background: linear-gradient(135deg, #A855F7, #7E22CE); }
.stat-icon.icon-orange { background: linear-gradient(135deg, #F59E0B, #D97706); }
.stat-icon.icon-pink { background: linear-gradient(135deg, #EC4899, #BE185D); }

/* ===================================================================
   PANELES Y SECCIONES
   =================================================================== */

.panel {
    background: linear-gradient(
        to bottom,
        rgba(20, 20, 28, 0.65),
        rgba(10, 10, 14, 0.78)
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-tile);
    border: 1px solid var(--border-soft);
    padding: 22px;
}

[data-theme="light"] .panel {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.panel-title {
    font-size: 16px;
    font-weight: 600;
}

/* Toolbar de tabla (Show entries + Search) */
.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 16px;
    flex-wrap: wrap;
}

.entries-control {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-2);
}

.entries-control select {
    width: auto;
    padding: 6px 10px;
}

.search-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-control input {
    width: 240px;
}

/* Paginación */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    gap: 16px;
    flex-wrap: wrap;
}

.pagination-info {
    font-size: 13px;
    color: var(--text-2);
}

.pagination-controls {
    display: flex;
    gap: 6px;
}

.page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--bg-2);
    color: var(--text-2);
    border: 1px solid var(--border-soft);
    font-size: 13px;
    transition: all 0.15s;
}

.page-btn:hover:not(:disabled) {
    border-color: var(--border-focus);
    color: var(--text-1);
}

.page-btn.active {
    background: var(--sanet-blue);
    color: white;
    border-color: var(--sanet-blue);
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Acciones de fila (edit/delete) */
.action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    color: white;
}

.action-btn-edit {
    background: var(--success);
}

.action-btn-delete {
    background: var(--error);
}

.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Info banner (los azules de SBP arriba de las tablas) */
.info-banner {
    padding: 14px 18px;
    background: rgba(30, 107, 255, 0.08);
    border: 1px solid rgba(30, 107, 255, 0.20);
    border-radius: var(--radius-input);
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.6;
}

.info-banner strong {
    color: var(--sanet-blue-bright);
}

/* Responsive */
@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        left: -260px;
        z-index: 100;
        transition: left 0.3s;
    }
    .sidebar.open {
        left: 0;
    }
    .topbar-info {
        display: none;
    }
}

/* ===================================================================
   COLOR DE LA BARRA DEL NAVEGADOR EN EL TELÉFONO
   -------------------------------------------------------------------
   Safari en iPhone tiñe su barra de estado con el color de fondo del
   elemento que está más arriba en la ventana, que es .topbar. Como la
   nuestra es vidrio translúcido, su background-color calculado es
   TRANSPARENTE: Safari no encuentra color y, al cambiar de tema, la
   barra se queda con el del tema anterior hasta que algo fuerza un
   repintado (abrir el menú lateral, por ejemplo).

   Probado en un iPhone real el 22/09/2026. De cinco técnicas, la única
   que funciona es que la barra tenga fondo OPACO. NO sirven: el meta
   theme-color (Safari 26 dejó de leerlo), el fondo sólido de html/body,
   ni darle color al velo fijo de body::before. Apple además descarta el
   negro puro #000 y vuelve a su color por defecto, que es claro; por eso
   #0A0A0E.

   Se vuelve opaca solo en pantalla angosta —el desenfoque casi no se
   aprecia en un teléfono— y del mismo color que la página, así que no se
   nota el cambio. En escritorio el vidrio queda intacto.
   =================================================================== */

:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

@media (max-width: 900px) {
    .topbar {
        background-color: #0A0A0E;
        background-image: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    [data-theme="light"] .topbar {
        background-color: #F4F6FA;
        background-image: none;
    }
}