/* ===== Panel de Administración ===== */
:root {
    --panel-primario: #0d3b66;
    --panel-primario-oscuro: #092a4a;
    --panel-acento: #11a8e0;
    --sidebar-ancho: 240px;
    --topbar-alto: 56px;
}

/* ---------- Login ---------- */
.auth-body {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--panel-primario-oscuro), var(--panel-primario) 60%, #145da0);
}
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.auth-card { width: 100%; max-width: 420px; border-radius: 1rem; }
.auth-logo {
    width: 64px; height: 64px; margin: 0 auto;
    display: grid; place-items: center;
    border-radius: 1rem;
    background: var(--panel-primario); color: #fff; font-size: 1.8rem;
}
.btn-primary { --bs-btn-bg: var(--panel-primario); --bs-btn-border-color: var(--panel-primario);
               --bs-btn-hover-bg: var(--panel-primario-oscuro); --bs-btn-hover-border-color: var(--panel-primario-oscuro); }

/* ---------- Layout admin ---------- */
.admin-body { background: #f3f6fa; }
.admin-topbar {
    position: sticky; top: 0; z-index: 1030;
    height: var(--topbar-alto);
    background: var(--panel-primario);
}
.admin-shell { display: flex; min-height: calc(100vh - var(--topbar-alto)); }
/* Bootstrap pone "background-color: transparent !important" a .offcanvas-lg en escritorio;
   por eso se fuerza el fondo aquí (si no, el texto blanco del menú queda invisible). */
.admin-sidebar {
    --bs-offcanvas-bg: var(--panel-primario-oscuro);
    background-color: var(--panel-primario-oscuro) !important;
}

@media (min-width: 992px) {
    .admin-sidebar {
        width: var(--sidebar-ancho); flex-shrink: 0;
        position: sticky; top: var(--topbar-alto);
        height: calc(100vh - var(--topbar-alto)); overflow-y: auto;
    }
}
@media (max-width: 991.98px) {
    .admin-sidebar { --bs-offcanvas-width: var(--sidebar-ancho); }
}

.admin-sidebar .nav-link {
    color: rgba(255,255,255,.75);
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem 1.25rem;
    border-left: 3px solid transparent;
}
.admin-sidebar .nav-link i { font-size: 1.1rem; }
.admin-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.admin-sidebar .nav-link.active {
    color: #fff; background: rgba(17,168,224,.15);
    border-left-color: var(--panel-acento);
}
.admin-content { flex: 1; min-width: 0; }

/* ---------- Tarjetas ---------- */
.stat-card { transition: transform .15s ease, box-shadow .15s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important; }
.stat-icon {
    width: 48px; height: 48px; border-radius: .75rem;
    display: grid; place-items: center; font-size: 1.4rem;
}

/* ---------- Plan del cliente ---------- */
.plan-pill { background: rgba(13,59,102,.08); color: var(--panel-primario); font-weight: 600; border-radius: 2rem; padding: .15rem .65rem; font-size: .85rem; }
.servicio-card { border-left: 4px solid #198754 !important; }
.servicio-card.estado-warning { border-left-color: #ffc107 !important; }
.servicio-card.estado-danger { border-left-color: #dc3545 !important; }
.periodo-barra { height: 6px; }

/* ---------- Impresión de recibos ---------- */
@media print {
    .admin-topbar, .admin-sidebar, .no-print, .alert { display: none !important; }
    .admin-body, .admin-content { background: #fff !important; padding: 0 !important; }
    .admin-shell { display: block; }
    .recibo { box-shadow: none !important; }
    .col-lg-8 { width: 100% !important; }
}