/* ============================================================
   Rentger — Base: variables, layout, topbar, sidebar
   ============================================================ */
:root {
    --brand:        #1d4ed8;
    --brand-lt:     #3b82f6;
    --brand-shadow: rgba(29,78,216,.32);
    --sidebar-bg:   #0f172a;
    --ink:          #0f172a;
    --body-bg:      #f1f5f9;
    --card-radius:  14px;
    --btn-radius:   9px;
    color-scheme:   light;
}

body { background: var(--body-bg); color: var(--ink); font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif; }
*, input, button, select, textarea { font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif; }

/* ── Topbar ── */
.topbar { background: var(--sidebar-bg); height: 54px; display: flex; align-items: center; padding: 0 20px; justify-content: space-between; box-shadow: 0 2px 8px rgba(0,0,0,.3); position: sticky; top: 0; z-index: 300; }
.topbar .brand-logo { font-size: 1.15rem; color: #fff; font-weight: 700; letter-spacing: .02rem; }
.topbar .brand-logo .dot { color: var(--brand-lt); }
.topbar .brand-sep { color: rgba(255,255,255,.25); margin: 0 10px; }
.topbar .brand-es  {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 500; letter-spacing: .02rem;
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    padding: 3px 11px; border-radius: 20px;
}
.topbar .brand-es i { font-size: .8rem; color: var(--brand-lt); }
.topbar .brand-es .brand-es-on {
    font-weight: 700;
    background: linear-gradient(90deg, var(--brand-lt), #93c5fd);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.topbar .user-badge { background: rgba(255,255,255,.1); border-radius: 20px; padding: 4px 12px; color: rgba(255,255,255,.8); font-size: .8rem; }
.topbar .btn-out { background: rgba(220,53,69,.15); border: 1px solid rgba(220,53,69,.3); color: #f87171; border-radius: 8px; padding: 4px 12px; font-size: .8rem; text-decoration: none; transition: background .2s; }
.topbar .btn-out:hover { background: rgba(220,53,69,.28); color: #fca5a5; }

/* ── Hamburguesa ── */
.btn-hamburger { background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; padding: 4px 8px; display: none; line-height: 1; }

/* ── Layout ── */
.main-area { display: flex; min-height: calc(100vh - 54px); }

/* ── Sidebar ── */
.sidebar { width: 220px; min-width: 220px; background: var(--sidebar-bg); padding: 20px 12px; border-right: 1px solid rgba(255,255,255,.05); flex-shrink: 0; }
.sidebar-section { font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .1rem; padding: 0 8px; margin: 14px 0 6px; }
.sidebar .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: rgba(255,255,255,.55); font-size: .86rem; text-decoration: none; transition: all .15s; background: none; border: none; width: 100%; text-align: left; cursor: pointer; }
.sidebar .nav-item i { width: 18px; text-align: center; font-size: 1rem; }
.sidebar .nav-item:hover  { background: rgba(255,255,255,.07); color: rgba(255,255,255,.9); }
.sidebar .nav-item.active { background: var(--brand); color: #fff; font-weight: 500; box-shadow: 0 4px 12px var(--brand-shadow); }
.sidebar .nav-item.danger { color: #f87171; }
.sidebar .nav-item.danger:hover { background: rgba(220,53,69,.15); }

/* ── Submenú desplegable ── */
.sidebar .nav-item .chev { margin-left: auto; font-size: .7rem; width: auto; transition: transform .2s; }
.sidebar .nav-item[aria-expanded="true"] .chev { transform: rotate(180deg); }
.sidebar .nav-sub { margin: 2px 0 4px; }
.sidebar .nav-sub .nav-item { padding-left: 38px; font-size: .82rem; }

/* ── Overlay ── */
.sidebar-overlay { display: none; position: fixed; inset: 54px 0 0 0; background: rgba(0,0,0,.5); z-index: 199; }
.sidebar-overlay.open { display: block; }

/* ── Contenido ── */
.content { flex: 1; padding: 28px 32px; overflow-y: auto; color: var(--ink); background: var(--body-bg); }

/* ── Impresión / Exportar a PDF (window.print) ──
   Oculta navegación e interacción; deja solo el contenido del documento. */
@media print {
    .topbar, .sidebar, .sidebar-overlay, .btn-hamburger,
    .back-link, .no-print, .pagination,
    .modal, .modal-backdrop, .alert,
    .btn-brand, .btn-cancel, .btn-edit, .btn-del { display: none !important; }
    .main-area { display: block; min-height: 0; }
    .content   { padding: 1.4cm; background: #fff; overflow: visible; }
    body       { background: #fff; }
    .card, .card-table { box-shadow: none !important; border: 1px solid #ddd !important; }
    a { text-decoration: none !important; color: inherit !important; }
    /* margin:0 elimina la cabecera/pie que el navegador añade (título y URL).
       El margen real lo da el padding de .content de arriba. */
    @page { margin: 0; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .btn-hamburger { display: flex; }
    .topbar { padding: 0 12px; }
    .topbar .brand-es,
    .topbar .brand-sep { display: none; }
    .topbar .brand-logo { font-size: .95rem; white-space: nowrap; }
    .topbar .user-badge { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sidebar { position: fixed; top: 54px; left: -230px; height: calc(100vh - 54px); z-index: 200; transition: left .25s ease; box-shadow: 4px 0 20px rgba(0,0,0,.4); }
    .sidebar.open { left: 0; }
    .content { padding: 16px 16px 70px; overflow-x: hidden; width: 100%; }
    .page-title { font-size: 1.1rem; }
    .d-flex.justify-content-between { flex-wrap: wrap; gap: 10px; }
}