:root {
    --bg-dark: #0c1524;
    --bg-darker: #07101b;
    --card: rgba(255, 255, 255, 0.96);
    --card-soft: rgba(255, 255, 255, 0.14);
    --orange: #f47c20;
    --orange-soft: #ffb86a;
    --brand: #16263d;
    --brand-soft: #223550;
    --text: #152033;
    --muted: #667085;
    --line: #e7eaf0;
    --shadow: 0 22px 60px rgba(9, 16, 31, 0.16);
    --shadow-strong: 0 28px 75px rgba(11, 18, 33, 0.24);
    --radius-xl: 30px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(244, 124, 32, 0.08), transparent 26%),
        radial-gradient(circle at bottom right, rgba(34, 53, 80, 0.06), transparent 30%),
        linear-gradient(180deg, #f7f9fc 0%, #edf2f7 100%);
}

body {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
select {
    font: inherit;
}

.auth-page {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at top left, rgba(244, 124, 32, 0.36), transparent 28%),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 30%),
        radial-gradient(circle at bottom right, rgba(255, 155, 55, 0.18), transparent 34%),
        linear-gradient(135deg, #08111c 0%, #12253b 54%, #1d314a 100%);
}

.auth-page::before,
.auth-page::after,
.panel-page::before,
.panel-page::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(18px);
    opacity: 0.65;
}

.auth-page::before {
    inset: -180px auto auto -140px;
    width: 420px;
    height: 420px;
    background: rgba(244, 124, 32, 0.13);
}

.auth-page::after {
    inset: auto -120px 60px auto;
    width: 320px;
    height: 320px;
    background: rgba(255, 255, 255, 0.08);
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
}

.auth-hero {
    position: relative;
    overflow: hidden;
    padding: 56px 48px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(12px);
    opacity: 0.55;
}

.hero-glow-a {
    width: 360px;
    height: 360px;
    left: -120px;
    top: 40px;
    background: rgba(244, 124, 32, 0.25);
}

.hero-glow-b {
    width: 280px;
    height: 280px;
    right: 60px;
    bottom: 60px;
    background: rgba(255, 255, 255, 0.18);
}

.hero-glow-c {
    width: 180px;
    height: 180px;
    right: 180px;
    top: 120px;
    background: rgba(244, 124, 32, 0.18);
}

.hero-copy {
    position: relative;
    z-index: 1;
    max-width: 620px;
}

.hero-brand {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 22px;
    align-items: center;
}

.hero-brand-mark {
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(244, 124, 32, 0.98), rgba(255, 174, 89, 0.96));
    box-shadow: 0 18px 40px rgba(244, 124, 32, 0.28);
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.brand-card {
    display: grid;
    gap: 28px;
    align-items: center;
}

.brand-logo {
    width: min(100%, 220px);
    aspect-ratio: 3 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
}

.logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #ffd9bb;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hero-copy h1 {
    margin: 0 0 12px;
    font-size: clamp(2.1rem, 4vw, 3.8rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.hero-copy p {
    margin: 0;
    max-width: 52ch;
    font-size: 1.03rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
}

.hero-features {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.hero-features article {
    padding: 16px 16px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.hero-features strong {
    display: block;
    margin-bottom: 8px;
    color: var(--orange-soft);
    font-size: 1.05rem;
}

.hero-features span {
    display: block;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.95rem;
    line-height: 1.55;
}

.auth-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #fefefe 0%, #eef3f8 100%);
}

.auth-card {
    width: min(100%, 455px);
    background: var(--card);
    border-radius: 32px;
    padding: 36px 34px 30px;
    box-shadow: var(--shadow-strong);
    border: 1px solid rgba(255, 255, 255, 0.72);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(18px);
    transform: translateY(0);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 7px;
    background: linear-gradient(90deg, var(--orange) 0%, #ffb36b 50%, #f59e0b 100%);
}

.auth-card::after {
    content: "";
    position: absolute;
    right: -48px;
    top: -42px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 124, 32, 0.18), transparent 70%);
    pointer-events: none;
}

.auth-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 34px 80px rgba(11, 18, 33, 0.28);
}

.auth-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.auth-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(244, 124, 32, 0.12);
    color: var(--orange);
    font-size: 1.35rem;
}

.auth-heading h2 {
    margin: 0;
    font-size: 1.55rem;
}

.auth-heading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.auth-logo-slot {
    margin: 2px 0 18px;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(244, 124, 32, 0.08), rgba(244, 124, 32, 0.02)),
        #fff;
    border: 1px solid rgba(244, 124, 32, 0.14);
}

.auth-logo {
    max-width: min(100%, 220px);
    max-height: 72px;
    object-fit: contain;
}

.auth-logo-fallback {
    width: min(100%, 220px);
    min-height: 72px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(244, 124, 32, 0.14), rgba(255, 179, 107, 0.12));
    color: #e26a12;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-subtitle {
    margin: -4px 0 18px;
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.6;
}

.alert {
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.alert-error {
    background: #fff0ec;
    color: #b42318;
    border: 1px solid #ffd3cc;
}

.auth-form {
    display: grid;
    gap: 16px;
}

.field {
    display: grid;
    gap: 8px;
}

.field span,
.checkline span {
    color: #344054;
    font-size: 0.9rem;
    font-weight: 700;
}

.field input {
    width: 100%;
    border: 1px solid #d4dae4;
    border-radius: 14px;
    padding: 14px 16px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    background: #fff;
}

.field input:focus {
    border-color: rgba(244, 124, 32, 0.85);
    box-shadow: 0 0 0 4px rgba(244, 124, 32, 0.12);
    transform: translateY(-1px);
}

.checkline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--muted);
}

.btn {
    border: 0;
    border-radius: 14px;
    padding: 14px 18px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--orange) 0%, #ff9b37 100%);
    color: #fff;
    box-shadow: 0 14px 28px rgba(244, 124, 32, 0.28);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(244, 124, 32, 0.32);
}

.btn-primary:active {
    transform: translateY(0);
}

.auth-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.92rem;
}

.auth-footer a {
    color: var(--orange);
    font-weight: 700;
}

.panel-page {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at top left, rgba(244, 124, 32, 0.08), transparent 24%),
        radial-gradient(circle at bottom right, rgba(20, 29, 47, 0.05), transparent 26%),
        linear-gradient(180deg, #f6f8fc 0%, #edf2f7 100%);
    min-height: 100vh;
}

.panel-page::before {
    inset: -140px auto auto -160px;
    width: 360px;
    height: 360px;
    background: rgba(244, 124, 32, 0.08);
}

.panel-page::after {
    inset: auto -110px 60px auto;
    width: 260px;
    height: 260px;
    background: rgba(34, 53, 80, 0.07);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 84px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 28px;
    background: linear-gradient(135deg, rgba(29, 45, 68, 0.96) 0%, rgba(17, 27, 44, 0.96) 100%);
    color: #fff;
    box-shadow: 0 12px 34px rgba(13, 19, 33, 0.2);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar-mark {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--orange) 0%, #ff9b37 100%);
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.topbar-brand strong,
.topbar-brand span {
    display: block;
}

.topbar-brand span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
}

.topbar-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.topbar-nav a {
    padding: 10px 14px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 700;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.topbar-nav a.active,
.topbar-nav a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(-1px);
}

.nav-exit {
    background: rgba(244, 124, 32, 0.16);
}

.panel-wrap {
    padding: 28px;
    display: grid;
    gap: 22px;
}

.welcome-banner,
.panel-card,
.dashboard-grid .stat-card {
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(25, 35, 58, 0.09);
    border: 1px solid rgba(230, 235, 244, 0.9);
}

.welcome-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 24px 26px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 253, 0.96));
}

.welcome-banner::after {
    content: "";
    position: absolute;
    inset: auto -70px -80px auto;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(244, 124, 32, 0.12), transparent 72%);
}

.welcome-banner h1 {
    margin: 0 0 8px;
    font-size: 1.8rem;
}

.welcome-banner p {
    margin: 0;
    color: var(--muted);
}

.ruc-chip {
    min-width: 220px;
    border-radius: 18px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(244, 124, 32, 0.12), rgba(255, 171, 102, 0.08));
    border: 1px solid rgba(244, 124, 32, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.ruc-chip span {
    display: block;
    color: var(--muted);
    font-size: 0.88rem;
    margin-bottom: 6px;
}

.ruc-chip strong {
    font-size: 1.05rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.stat-card {
    padding: 22px 22px 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 42px rgba(25, 35, 58, 0.13);
}

.stat-card::after {
    content: "";
    position: absolute;
    inset: auto -18px -18px auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
    pointer-events: none;
}

.stat-card span {
    color: var(--muted);
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.stat-card strong {
    display: block;
    font-size: 1.65rem;
    margin-bottom: 6px;
}

.stat-card small {
    color: var(--muted);
}

.stat-card.orange strong {
    color: var(--orange);
}

.stat-card.dark {
    background: linear-gradient(135deg, #1d2d44 0%, #111b2c 100%);
    color: #fff;
}

.stat-card.dark span,
.stat-card.dark small {
    color: rgba(255, 255, 255, 0.74);
}

.stat-card.light strong {
    color: #0f172a;
}

.panel-card {
    padding: 24px 26px 28px;
    backdrop-filter: blur(12px);
}

.panel-card-head h2 {
    margin: 0 0 6px;
    font-size: 1.25rem;
}

.panel-card-head p {
    margin: 0 0 20px;
    color: var(--muted);
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.filter-box {
    display: grid;
    gap: 8px;
}

.filter-box label {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.filter-box input {
    width: 100%;
    border: 1px solid #d8deea;
    border-radius: 16px;
    background: #fbfcfe;
    padding: 14px 16px;
    color: #0f172a;
}

.portal-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(2, minmax(150px, 0.9fr)) minmax(150px, 0.9fr) minmax(150px, 0.9fr) auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 18px;
}

.portal-filter {
    display: grid;
    gap: 8px;
}

.portal-filter span {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.portal-filter input,
.portal-filter select {
    width: 100%;
    border: 1px solid #d8deea;
    border-radius: 16px;
    background: #fbfcfe;
    padding: 14px 16px;
    color: #0f172a;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.portal-filter input[type="date"] {
    min-height: 49px;
    font-family: inherit;
}

.portal-filter input:focus,
.portal-filter select:focus {
    border-color: rgba(244, 124, 32, 0.75);
    box-shadow: 0 0 0 4px rgba(244, 124, 32, 0.1);
    transform: translateY(-1px);
}

.portal-toolbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
}

.panel-bulk-actions {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.admin-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-body { margin: 0; background: #f4f7fb; color: #18283c; }
.admin-layout { min-height: 100vh; display: flex; }
.admin-sidebar { width: 258px; flex: 0 0 258px; display: flex; flex-direction: column; background: #17283b; color: #d8e2ed; box-shadow: 8px 0 28px rgba(17, 35, 54, .12); z-index: 5; }
.admin-brand { min-height: 82px; display: flex; align-items: center; gap: 12px; padding: 0 22px; background: #112235; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-brand-logo { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border-radius: 16px; background: #eef8fb; }
.admin-brand-logo img { display: block; width: 38px; height: 38px; object-fit: contain; border-radius: 8px; }
.admin-brand strong, .admin-brand span, .admin-profile strong, .admin-profile span { display: block; }
.admin-brand strong { color: #fff; font-size: 1rem; }
.admin-brand span, .admin-profile span { margin-top: 3px; color: #8fa4ba; font-size: .72rem; }
.admin-profile { display: flex; align-items: center; gap: 12px; padding: 25px 22px 20px; }
.admin-avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border: 3px solid #f4a340; border-radius: 50%; background: #324c68; color: #fff; font-weight: 800; }
.admin-avatar.small { width: 30px; height: 30px; flex-basis: 30px; border-width: 2px; font-size: .78rem; }
.admin-menu { display: grid; gap: 5px; padding: 8px 12px; }
.admin-menu-label { padding: 16px 12px 5px; color: #7189a1; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.admin-menu-link, .admin-logout { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 13px; border-radius: 10px; color: #c7d4e1; font-size: .86rem; font-weight: 700; text-decoration: none; transition: background .2s, color .2s; }
.admin-menu-link:hover, .admin-menu-link.is-active { background: #26425f; color: #fff; }
.admin-menu-link b { margin-left: auto; color: #89a1b9; font-size: 1.2rem; }
.menu-icon { width: 17px; color: #f4a340; text-align: center; font-size: .95rem; }
.admin-logout { margin: auto 12px 20px; color: #ffb2a5; }
.admin-logout:hover { background: #3a2b32; color: #fff; }
.admin-main { min-width: 0; flex: 1; }
.admin-topbar { height: 82px; display: flex; align-items: center; padding: 0 34px; background: #fff; border-bottom: 1px solid #e5ebf2; }
.admin-menu-toggle { display: none; border: 0; background: transparent; color: #213a55; font-size: 1.3rem; cursor: pointer; }
.admin-breadcrumb { display: flex; align-items: center; gap: 10px; color: #8a9aab; font-size: .86rem; }
.admin-breadcrumb strong { color: #213a55; }
.admin-top-user { display: flex; align-items: center; gap: 12px; margin-left: auto; color: #30465c; font-size: .85rem; font-weight: 700; }
.admin-content { max-width: 1320px; margin: 0 auto; padding: 42px 46px 60px; }
.admin-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.eyebrow { color: #e07827; font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.admin-heading h1 { margin: 7px 0 4px; color: #172b40; font-size: 2rem; }
.admin-heading p { margin: 0; color: #788b9f; }
.admin-status { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #dcefe5; border-radius: 99px; background: #f2fbf6; color: #2b8a5b; font-size: .8rem; font-weight: 800; }
.admin-status i { width: 8px; height: 8px; border-radius: 50%; background: #38b978; box-shadow: 0 0 0 4px rgba(56,185,120,.13); }
.admin-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 25px; }
.admin-card { min-height: 145px; padding: 25px; border: 1px solid #e3eaf2; border-top: 4px solid #4f82b6; border-radius: 16px; background: #fff; box-shadow: 0 12px 28px rgba(31,58,86,.06); }
.admin-card.accent-orange { border-top-color: #f19a3e; }
.admin-card.accent-green { border-top-color: #42a879; }
.admin-card span { color: #75899d; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.admin-card strong { display: block; margin: 18px 0 8px; color: #20374f; font-size: 1.05rem; }
.admin-card small { color: #8697a8; font-size: .82rem; }
.admin-welcome-card { display: flex; align-items: center; gap: 20px; padding: 28px; border: 1px solid #e3eaf2; border-radius: 18px; background: #fff; box-shadow: 0 12px 28px rgba(31,58,86,.06); }
.admin-welcome-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: #fff2e5; color: #e07827; font-size: 1.4rem; }
.admin-welcome-card h2 { margin: 0 0 7px; color: #20374f; font-size: 1.1rem; }
.admin-welcome-card p { margin: 0 0 12px; color: #788b9f; }
.admin-coming-soon { display: inline-block; padding: 5px 10px; border-radius: 99px; background: #f1f5f9; color: #708399; font-size: .72rem; font-weight: 800; }

@media (max-width: 900px) {
    .admin-sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .25s ease; }
    .admin-sidebar.is-open { transform: translateX(0); }
    .admin-menu-toggle { display: block; margin-right: 18px; }
    .admin-topbar { padding: 0 22px; }
    .admin-content { padding: 34px 22px 50px; }
    .admin-cards { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .admin-heading { align-items: flex-start; flex-direction: column; }
    .admin-top-user span { display: none; }
    .admin-welcome-card { align-items: flex-start; flex-direction: column; }
}

.admin-user-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 22px; align-items: start; }
.admin-user-grid.without-form { grid-template-columns: minmax(0, 1fr); }
.admin-modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgba(18, 31, 45, .66); }
.admin-user-modal { width: min(720px, 100%); max-height: min(720px, calc(100vh - 48px)); overflow: auto; border-radius: 8px !important; }
.admin-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 22px; background: #0b9d96; color: #fff; }
.admin-modal-head h2 { margin: 0 0 4px; color: #fff; font-size: 1rem; }.admin-modal-head p { margin: 0; color: rgba(255,255,255,.82); font-size: .78rem; }
.admin-modal-close { color: #fff; font-size: 1.45rem; line-height: 1; text-decoration: none; opacity: .85; }.admin-modal-close:hover { opacity: 1; }
.admin-user-modal .admin-user-form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px 28px 26px; }
.admin-user-modal .admin-user-form label:nth-of-type(5), .admin-user-modal .admin-user-form .admin-check, .admin-user-modal .admin-form-actions { grid-column: 1 / -1; }
.admin-view-modal { width: min(620px, 100%); }
.admin-view-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 22px 28px; }
.admin-view-list div { display: grid; gap: 6px; padding: 13px 12px; border-bottom: 1px solid #e5ebef; }
.admin-view-list span { color: #748798; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.admin-view-list strong { color: #20374f; font-size: .87rem; font-weight: 600; }
.admin-view-footer { display: flex; justify-content: flex-end; padding: 0 28px 24px; }
.admin-table-card, .admin-form-card { border: 1px solid #e3eaf2; border-radius: 18px; background: #fff; box-shadow: 0 12px 28px rgba(31,58,86,.06); overflow: hidden; }
.admin-table-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 22px 24px; border-bottom: 1px solid #e9eef4; }
.admin-table-head h2 { margin: 0 0 5px; color: #20374f; font-size: 1.05rem; }
.admin-table-head p { margin: 0; color: #8999a9; font-size: .8rem; }
.admin-count { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 10px; background: #fff0df; color: #dd7626; font-weight: 800; }
.admin-table-wrap { overflow-x: auto; }
.admin-users-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.admin-users-table th { padding: 13px 16px; background: #f7f9fc; color: #77899c; font-size: .72rem; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.admin-users-table td { padding: 15px 16px; border-top: 1px solid #edf1f5; color: #516579; font-size: .82rem; }
.admin-users-table td strong { color: #20374f; }
.admin-role, .admin-state { display: inline-block; padding: 5px 9px; border-radius: 99px; font-size: .68rem; font-weight: 800; }
.role-admin { background: #e9f0ff; color: #3c69ad; }.role-client { background: #fff1e5; color: #c86d22; }
.state-on { background: #e4f8ed; color: #238451; }.state-off { background: #fbe8e8; color: #bb5050; }
.admin-row-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }.admin-row-actions form { margin: 0; }
.row-action { display: inline-block; padding: 7px 9px; border: 0; border-radius: 7px; font: inherit; font-size: .72rem; font-weight: 800; text-decoration: none; cursor: pointer; }.row-action.view { background: #e8f5f7; color: #188494; }.row-action.delete { background: #fbe9e9; color: #c45151; }
.admin-empty { padding: 30px !important; text-align: center; color: #8999a9 !important; }
.admin-form-card { position: sticky; top: 22px; }.admin-user-form { display: grid; gap: 14px; padding: 22px 24px 24px; }.admin-user-form label { display: grid; gap: 7px; color: #64788c; font-size: .78rem; font-weight: 800; }.admin-user-form label small { color: #9aabb9; font-weight: 500; }.admin-user-form input:not([type="checkbox"]), .admin-user-form select { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid #dce5ed; border-radius: 9px; background: #fbfdff; color: #20374f; font: inherit; font-weight: 500; }.admin-user-form input:focus, .admin-user-form select:focus { outline: 0; border-color: #4a91a7; box-shadow: 0 0 0 3px rgba(74,145,167,.12); }.admin-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px !important; }.admin-check input { accent-color: #2c9a8e; }.admin-form-actions { display: flex; gap: 10px; padding-top: 5px; }.admin-message { margin-bottom: 20px; padding: 13px 16px; border-radius: 10px; font-weight: 700; font-size: .85rem; }.admin-message.success { background: #e7f8ee; color: #257b4e; }.admin-message.error { background: #fcebea; color: #b44e49; }.admin-message.info { background: #eaf2fb; color: #386794; }
@media (max-width: 1100px) { .admin-user-grid { grid-template-columns: 1fr; }.admin-form-card { position: static; } }
@media (max-width: 600px) { .admin-modal-backdrop { padding: 10px; }.admin-user-modal .admin-user-form { grid-template-columns: 1fr; padding: 20px; }.admin-user-modal .admin-user-form label:nth-of-type(5), .admin-user-modal .admin-user-form .admin-check, .admin-user-modal .admin-form-actions { grid-column: auto; }.admin-view-list { grid-template-columns: 1fr; padding: 16px 20px; }.admin-view-footer { padding: 0 20px 20px; } }

/* Vista de usuarios: tabla sobria y compacta, sin exceso de color. */
.admin-user-grid .admin-table-card,
.admin-user-grid .admin-form-card { border-color: #dfe5ea; border-radius: 8px; box-shadow: 0 2px 7px rgba(32, 55, 79, .08); }
.admin-user-grid .admin-table-head { padding: 18px 20px; }
.admin-user-grid .admin-count { min-width: 30px; height: 30px; border-radius: 5px; background: #eef2f5; color: #52677a; }
.admin-user-grid .admin-users-table { min-width: 760px; }
.admin-user-grid .admin-users-table th { padding: 11px 12px; background: #eef2f5; color: #52677a; border-bottom: 1px solid #d8e0e7; font-size: .7rem; }
.admin-user-grid .admin-users-table td { padding: 12px; border-top-color: #e0e6eb; color: #43576a; }
.admin-user-grid .admin-users-table tbody tr:nth-child(even) { background: #fafbfc; }
.admin-user-grid .admin-users-table tbody tr:hover { background: #f1f7f8; }
.admin-user-grid .role-admin, .admin-user-grid .role-client,
.admin-user-grid .state-on, .admin-user-grid .state-off { padding: 4px 8px; border: 1px solid #d9e1e7; background: #f5f7f9; color: #52677a; }
.admin-user-grid .state-on { border-color: #b9dec9; background: #f0faf4; color: #28784b; }
.admin-user-grid .row-action { border: 1px solid #d8e1e7; background: #fff; color: #52677a; }
.admin-user-grid .row-action.view:hover { border-color: #79b5bd; background: #f0fafb; color: #147482; }
.admin-user-grid .row-action.delete { border-color: #efcaca; background: #fff8f8; color: #b34d4d; }
.admin-user-grid .row-action.delete:hover { background: #fceaea; }
.roles-table { min-width: 850px; }
.roles-table .permission { border-color: #d8dde2; background: #f1f3f5; color: #52677a; }
.admin-permissions-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; padding: 24px 28px 26px; }
.admin-permissions-form label { padding: 10px 12px; border: 1px solid #e2e8ed; border-radius: 8px; color: #52677a; font-size: .82rem; font-weight: 700; }
.admin-permissions-form input { margin-right: 8px; accent-color: #0b9d96; }
.admin-upload-card { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr); gap: 24px; align-items: end; margin-bottom: 22px; padding: 22px 24px; border: 1px solid #dfe5ea; border-radius: 8px; background: #fff; box-shadow: 0 2px 7px rgba(32,55,79,.08); }
.admin-filter-card { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 14px; align-items: end; margin-bottom: 22px; padding: 20px; border: 1px solid #dfe5ea; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(32,55,79,.08); }
.admin-filter-card label { display: grid; gap: 7px; color: #64788c; font-size: .76rem; font-weight: 800; }.admin-filter-card input, .admin-filter-card select { min-height: 42px; box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #dce5ed; border-radius: 8px; background: #fbfdff; color: #52677a; font: inherit; }
.admin-filter-card .btn { min-height: 42px; white-space: nowrap; }
.admin-comprobantes-table { min-width: 1180px; }
.admin-comprobantes-table td { vertical-align: middle; }
.admin-table-subtext { display: block; margin-top: 4px; color: #8a9aaa; font-size: .68rem; }
.provider-pill { display: inline-block; padding: 5px 9px; border-radius: 99px; font-size: .68rem; font-weight: 800; }
.provider-ose { background: #fff0df; color: #c56d24; }
.provider-sunat { background: #e9f1ff; color: #3d67a3; }
.state-muted { background: #f0f3f5; color: #8996a1; }
@media (max-width: 1200px) { .admin-filter-card { grid-template-columns: repeat(3, minmax(150px, 1fr)); } }
@media (max-width: 800px) { .admin-filter-card { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .admin-filter-card { grid-template-columns: 1fr; } }
.admin-upload-card h2 { margin: 0 0 5px; color: #20374f; font-size: 1rem; }
.admin-upload-card p { margin: 0; color: #8999a9; font-size: .82rem; }
.admin-upload-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.admin-upload-form label { display: grid; gap: 7px; color: #64788c; font-size: .76rem; font-weight: 800; }
.admin-upload-form select, .admin-upload-form input[type="file"] { width: 100%; box-sizing: border-box; min-height: 43px; padding: 10px; border: 1px solid #dce5ed; border-radius: 8px; background: #fbfdff; color: #52677a; font: inherit; }
@media (max-width: 900px) { .admin-upload-card { grid-template-columns: 1fr; }.admin-upload-form { grid-template-columns: 1fr; } }
.admin-permissions-form .admin-form-actions { grid-column: 1 / -1; display: flex; gap: 10px; padding-top: 12px; }
@media (max-width: 600px) { .admin-permissions-form { grid-template-columns: 1fr; padding: 20px; }.admin-permissions-form .admin-form-actions { grid-column: auto; } }

.panel-bulk-actions strong {
    display: block;
    margin-bottom: 6px;
    color: #1d2d44;
    font-size: 1rem;
}

.panel-bulk-actions p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    padding: 14px 18px;
    background: #eef2f8;
    color: #1d2d44;
    font-weight: 800;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-ghost:hover {
    background: #e3e9f2;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(29, 45, 68, 0.08);
}

.table-shell {
    overflow: auto;
    border: 1px solid #e6ebf4;
    border-radius: 20px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.docs-total {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 14px;
    padding: 0 8px;
    color: var(--muted);
    font-size: 0.9rem;
}

.docs-total strong {
    color: var(--ink);
    font-weight: 800;
}

.docs-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.docs-table thead th {
    text-align: left;
    padding: 16px 14px;
    background: #f7f9fc;
    color: #4b5563;
    font-size: 0.88rem;
    font-weight: 800;
    border-bottom: 1px solid #e6ebf4;
}

.docs-table tbody td {
    padding: 15px 14px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
    font-size: 0.95rem;
}

.docs-table tbody tr:hover {
    background: #f8fbff;
}

.doc-msg {
    max-width: 260px;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
}

.badge.is-ok {
    background: #e8f8ef;
    color: #157347;
}

.badge.is-bad {
    background: #fdecec;
    color: #b42318;
}

.badge.is-warn {
    background: #fff2df;
    color: #b54708;
}

.badge.is-pend {
    background: #eef4ff;
    color: #2754c5;
}

.badge.is-neutral {
    background: #edf2f7;
    color: #475467;
}

.portal-alert {
    margin: 0 0 18px;
    padding: 14px 18px;
    border-radius: 18px;
    border: 1px solid transparent;
    font-weight: 700;
    line-height: 1.45;
    box-shadow: 0 10px 22px rgba(25, 35, 58, 0.06);
}

.portal-alert.success {
    background: #e8f8ef;
    border-color: #bce7cd;
    color: #157347;
}

.portal-alert.error {
    background: #fff0ec;
    border-color: #ffd3cc;
    color: #b42318;
}

.portal-alert.info {
    background: #eef4ff;
    border-color: #cdd9ff;
    color: #274c9b;
}

.doc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.doc-action-form {
    margin: 0;
}

.mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 9px 12px;
    border-radius: 12px;
    background: #1d2d44;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    border: 0;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.mini-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(29, 45, 68, 0.16);
    filter: brightness(1.03);
}

.mini-btn-retry {
    background: linear-gradient(135deg, #f47c20 0%, #ff9f4d 100%);
}

.empty-state {
    text-align: center;
    color: var(--muted);
    padding: 36px 20px;
}

@media (max-width: 1024px) {
    .auth-shell,
    .dashboard-grid,
    .filters-grid,
    .portal-toolbar {
        grid-template-columns: 1fr;
    }

    .auth-hero {
        padding: 40px 28px;
    }

    .hero-brand {
        grid-template-columns: 1fr;
    }

    .hero-brand-mark {
        width: 80px;
        height: 80px;
    }

    .hero-features {
        grid-template-columns: 1fr;
    }

    .welcome-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .auth-panel,
    .panel-wrap {
        padding: 18px;
    }

    .auth-card {
        padding: 28px 18px 22px;
        border-radius: 22px;
    }

    .auth-logo-slot {
        min-height: 78px;
    }

    .topbar {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 18px;
    }

    .welcome-banner,
    .panel-card {
        padding: 20px;
    }

    .portal-toolbar-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .panel-bulk-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .topbar-nav {
        width: 100%;
    }

    .topbar-nav a {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* Presentacion simple del acceso: conserva el formulario y su validacion. */
.auth-page {
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(8, 28, 42, .58), rgba(10, 67, 72, .38)),
        url('../IMG/fondo.png') center center / cover no-repeat;
}

.auth-page::before,
.auth-page::after,
.hero-glow,
.hero-copy,
.auth-footer {
    display: none;
}

.auth-shell {
    display: block;
    min-height: 100vh;
}

.auth-hero {
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100vh;
    padding: 0;
    background: transparent;
}

.auth-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(4, 20, 31, .12), rgba(4, 20, 31, .48));
}

.auth-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100vh;
    padding: 24px;
    background: transparent;
}

.auth-card {
    width: min(100%, 390px);
    padding: 34px 34px 30px;
    border: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.auth-card::before,
.auth-card::after {
    display: none;
}

.auth-logo-slot {
    min-height: 46px;
    margin-bottom: 18px;
}

.auth-logo {
    max-height: 46px;
}

.auth-heading {
    padding-bottom: 16px;
    border-bottom: 1px solid #dfe6e8;
}

.auth-heading h2 {
    color: #172b36;
    font-size: 1.35rem;
}

.auth-heading p,
.auth-subtitle {
    color: #60727b;
}

.auth-subtitle {
    margin: 16px 0 22px;
    text-align: center;
}

.auth-form input {
    border-color: #a8d1cf;
    background: #f7fbfb;
}

.auth-form input:focus {
    border-color: #39b99c;
    box-shadow: 0 0 0 3px rgba(57, 185, 156, .14);
}

.auth-form .btn-primary {
    background: linear-gradient(135deg, #62d2ae, #3eb89e);
    box-shadow: 0 14px 28px rgba(44, 126, 196, .24);
}

.auth-form .btn-primary:hover {
    box-shadow: 0 18px 32px rgba(44, 126, 196, .30);
}

.auth-logo-slot {
    background: #fff;
    border-color: rgba(55, 161, 205, .22);
}

.auth-icon {
    background: rgba(41, 157, 205, .12);
    color: #1674b8;
}

.field input:focus {
    border-color: rgba(41, 157, 205, .78);
    box-shadow: 0 0 0 4px rgba(41, 157, 205, .12);
}

.auth-icon img {
    display: block;
    width: 42px;
    height: 48px;
    object-fit: contain;
    border-radius: 10px;
}

.topbar-mark {
    overflow: hidden;
    background: #eef8fb;
}

.topbar-mark img {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 8px;
}
.admin-layout{transition:all .22s ease}.admin-sidebar{transition:width .22s ease,transform .22s ease}.admin-menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:36px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(255,255,255,.08);color:#fff;font-size:20px;line-height:1;cursor:pointer}.admin-menu-toggle:hover{background:rgba(255,255,255,.16)}.admin-layout.is-collapsed .admin-sidebar{width:78px}.admin-layout.is-collapsed .admin-sidebar .admin-brand>div:not(.admin-brand-logo),.admin-layout.is-collapsed .admin-sidebar .admin-profile>div:not(.admin-avatar),.admin-layout.is-collapsed .admin-sidebar .admin-menu-label,.admin-layout.is-collapsed .admin-sidebar .admin-menu-link b,.admin-layout.is-collapsed .admin-sidebar .admin-menu-link,.admin-layout.is-collapsed .admin-sidebar .admin-logout{font-size:0}.admin-layout.is-collapsed .admin-sidebar .admin-menu-link,.admin-layout.is-collapsed .admin-sidebar .admin-logout{justify-content:center;padding-left:0;padding-right:0}.admin-layout.is-collapsed .admin-sidebar .menu-icon{font-size:18px;margin:0}.admin-layout.is-collapsed .admin-sidebar .admin-brand,.admin-layout.is-collapsed .admin-sidebar .admin-profile{justify-content:center}.admin-layout.is-collapsed .admin-sidebar .admin-brand-logo{margin:0}.admin-layout.is-collapsed .admin-sidebar .admin-avatar{margin:0}.admin-layout.is-collapsed .admin-main{margin-left:0}.admin-layout.is-collapsed .admin-main{width:calc(100% - 78px)}
@media (min-width:901px){.admin-sidebar{width:248px}.admin-main{margin-left:248px;width:calc(100% - 248px)}.admin-layout.is-collapsed .admin-main{margin-left:78px}}
@media (max-width:900px){.admin-menu-toggle{display:inline-flex}.admin-layout.is-collapsed .admin-sidebar{width:248px;transform:translateX(-100%)}.admin-layout.is-collapsed .admin-main{margin-left:0;width:100%}}
/* Botón visible sobre el encabezado claro */
.admin-menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:36px;margin-right:18px;border:1px solid #d6e0e8;border-radius:8px;background:#14283d;color:#fff;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 2px 5px rgba(20,40,61,.16)}
.admin-menu-toggle:hover{background:#234767}
/* Ajuste visual del modo contraído */
.admin-layout.is-collapsed .admin-sidebar{width:78px!important;min-width:78px!important;flex:0 0 78px!important;overflow:hidden}
.admin-layout.is-collapsed .admin-main{margin-left:78px!important;width:calc(100% - 78px)!important;max-width:calc(100% - 78px)!important}
.admin-layout.is-collapsed .admin-sidebar .admin-menu-link,.admin-layout.is-collapsed .admin-sidebar .admin-logout{width:100%;box-sizing:border-box;text-align:center}
.admin-layout.is-collapsed .admin-sidebar .admin-brand-logo{display:flex;justify-content:center}
.admin-layout.is-collapsed .admin-sidebar .admin-brand-logo img{max-width:42px}
@media (max-width:900px){.admin-layout.is-collapsed .admin-sidebar{width:248px!important;min-width:248px!important;flex-basis:248px!important}.admin-layout.is-collapsed .admin-main{margin-left:0!important;width:100%!important;max-width:100%!important}}

/* ============================================================
   SIDEBAR TOGGLE — reemplaza TODOS los bloques viejos que
   mencionan .admin-sidebar, .admin-menu-toggle, .is-open o
   .is-collapsed por este bloque único.
   Un solo mecanismo: clase "is-collapsed" en .admin-layout.
   Mismo comportamiento (ocultar/mostrar) en desktop y móvil.
   ============================================================ */

.admin-layout {
    min-height: 100vh;
    display: flex;
    position: relative;
}

.admin-sidebar {
    width: 258px;
    flex: 0 0 258px;
    display: flex;
    flex-direction: column;
    background: #17283b;
    color: #d8e2ed;
    box-shadow: 8px 0 28px rgba(17, 35, 54, .12);
    z-index: 30;

    /* clave: siempre fijo, siempre con transform, en cualquier ancho */
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(0);
    transition: transform .25s ease;
}

/* Estado oculto: aplica igual en cualquier tamaño de pantalla */
.admin-layout.is-collapsed .admin-sidebar {
    transform: translateX(-100%);
}

.admin-main {
    min-width: 0;
    flex: 1;
    margin-left: 258px;
    width: calc(100% - 258px);
    transition: margin-left .25s ease, width .25s ease;
}

/* Cuando el sidebar está oculto, el contenido ocupa todo el ancho */
.admin-layout.is-collapsed .admin-main {
    margin-left: 0;
    width: 100%;
}

/* Overlay oscuro detrás del sidebar cuando está abierto en pantallas
   angostas, para que se sienta como "drawer". Se agrega vía JS
   (ver script) como <div class="admin-overlay"></div> dentro de
   .admin-layout, justo después de .admin-sidebar. */
.admin-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(10, 18, 28, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

@media (max-width: 900px) {
    /* En pantallas angostas arrancamos con el sidebar oculto */
    .admin-layout:not(.is-collapsed) .admin-sidebar {
        transform: translateX(0);
    }
    .admin-layout:not(.is-collapsed) .admin-main {
        margin-left: 0;
        width: 100%;
    }
    /* En móvil el contenido nunca se corre: el sidebar flota encima */
    .admin-main {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .admin-layout:not(.is-collapsed) .admin-overlay {
        opacity: 1;
        pointer-events: auto;
    }
    /* En móvil el estado inicial es "cerrado": usamos is-collapsed
       por defecto agregándolo desde JS al detectar el viewport,
       o partiendo con la clase ya puesta en el HTML. */
}

.admin-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 36px;
    margin-right: 18px;
    border: 1px solid #d6e0e8;
    border-radius: 8px;
    background: #14283d;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(20, 40, 61, .16);
    transition: background .2s ease;
}

.admin-menu-toggle:hover {
    background: #234767;
}