:root {
    --brand-950: #052e2b;
    --brand-900: #134e4a;
    --brand-700: #0f766e;
    --brand-600: #0d9488;
    --brand-100: #ccfbf1;
    --brand-50: #f0fdfa;
    --ink-950: #0f172a;
    --ink-700: #334155;
    --ink-500: #64748b;
    --line: #e2e8f0;
    --surface: #ffffff;
    --canvas: #f6f8fb;
    --danger: #b42318;
    --success: #067647;
    --warning: #b54708;
    --radius: 1.1rem;
    --shadow: 0 16px 40px rgba(15, 23, 42, .07);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink-950);
    background: var(--canvas);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: anywhere;
}

a { color: var(--brand-700); }
a:hover { color: var(--brand-900); }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 9999; padding: .7rem 1rem; background: #fff; border-radius: .6rem; box-shadow: var(--shadow); }
.skip-link:focus { top: 1rem; }
.min-w-0 { min-width: 0; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar {
    width: 278px;
    min-height: 100vh;
    position: fixed;
    inset: 0 auto 0 0;
    flex-direction: column;
    padding: 1.3rem;
    color: #fff;
    background:
        radial-gradient(circle at 15% 10%, rgba(45, 212, 191, .22), transparent 28%),
        linear-gradient(160deg, var(--brand-950), #0a3f3b 60%, #082f49);
}
.brand { display: flex; align-items: center; gap: .8rem; padding: .35rem; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; border-radius: 13px; color: var(--brand-950); background: #5eead4; font-weight: 900; }
.brand strong { display: block; font-size: 1rem; letter-spacing: -.02em; }
.brand small { display: block; color: #99f6e4; font-size: .72rem; }
.brand.compact { color: var(--ink-950); }

.sidebar-nav { display: grid; gap: .35rem; margin-top: 2rem; }
.nav-item-link { display: flex; align-items: center; gap: .8rem; min-height: 48px; padding: .6rem .75rem; border-radius: .8rem; color: #ccfbf1; text-decoration: none; font-weight: 650; font-size: .92rem; }
.nav-item-link:hover { color: #fff; background: rgba(255,255,255,.09); }
.nav-item-link.active { color: var(--brand-950); background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.16); }
.nav-symbol { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: inherit; background: rgba(255,255,255,.1); font-size: .66rem; font-weight: 900; letter-spacing: .03em; }
.nav-item-link.active .nav-symbol { background: var(--brand-100); color: var(--brand-900); }

.sidebar-user { margin-top: auto; display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .85rem; border: 1px solid rgba(255,255,255,.12); border-radius: .9rem; background: rgba(255,255,255,.07); }
.sidebar-user small { color: #99f6e4; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--brand-900); font-weight: 900; }
.logout-link { color: #fecaca; font-size: .75rem; text-decoration: none; }
.logout-button { padding: 0; border: 0; background: transparent; cursor: pointer; }

.app-content { width: 100%; min-height: 100vh; margin-left: 278px; display: flex; flex-direction: column; }
.page-container { width: min(1280px, 100%); margin: 0 auto; padding: 2rem clamp(1rem, 3vw, 2.5rem) 3rem; flex: 1; }
.page-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; margin-bottom: 1.7rem; }
.page-heading h1 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -.045em; font-weight: 800; }
.page-heading p:not(.eyebrow) { margin: .45rem 0 0; color: var(--ink-500); }
.page-heading time { color: var(--ink-500); font-weight: 650; white-space: nowrap; }
.eyebrow { margin: 0 0 .35rem; color: var(--brand-700); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 850; }

.app-card { overflow: hidden; border: 1px solid rgba(226,232,240,.9); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.app-card .card-header { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); background: transparent; }
.app-card .card-body { padding: 1.2rem; }
.metric-card { min-height: 142px; padding: 1.2rem; display: flex; flex-direction: column; justify-content: space-between; }
.metric-card small { color: var(--ink-500); font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.metric-card strong { font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -.05em; }
.metric-card .metric-note { color: var(--ink-500); font-size: .82rem; }
.metric-accent { border-top: 4px solid var(--brand-600); }
.metric-success { border-top: 4px solid #12b76a; }
.metric-danger { border-top: 4px solid #f04438; }
.metric-warning { border-top: 4px solid #f79009; }

.section-title { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; }
.section-subtitle { margin: .25rem 0 0; color: var(--ink-500); font-size: .85rem; }
.data-list { display: grid; gap: .7rem; }
.data-row { display: grid; grid-template-columns: minmax(160px, 1.5fr) repeat(2, minmax(105px, .65fr)) minmax(130px, .8fr); gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; }
.data-row:hover { border-color: #99f6e4; background: var(--brand-50); }
.data-row strong { display: block; }
.data-row small { color: var(--ink-500); }

.status { display: inline-flex; align-items: center; width: fit-content; padding: .32rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.status-success { color: var(--success); background: #ecfdf3; }
.status-warning { color: var(--warning); background: #fffaeb; }
.status-danger { color: var(--danger); background: #fef3f2; }
.status-neutral { color: var(--ink-700); background: #f1f5f9; }

.btn-primary { --bs-btn-bg: var(--brand-700); --bs-btn-border-color: var(--brand-700); --bs-btn-hover-bg: var(--brand-900); --bs-btn-hover-border-color: var(--brand-900); }
.btn { border-radius: .72rem; font-weight: 700; }
.form-control, .form-select { min-height: 44px; border-radius: .72rem; border-color: #cbd5e1; }
.form-control:focus, .form-select:focus { border-color: var(--brand-600); box-shadow: 0 0 0 .25rem rgba(13,148,136,.14); }
.form-label { color: var(--ink-700); font-size: .84rem; font-weight: 750; }
.app-alert { border: 1px solid rgba(15,23,42,.06); border-radius: .9rem; box-shadow: 0 10px 25px rgba(15,23,42,.06); }
.empty-state { padding: 3rem 1rem; text-align: center; color: var(--ink-500); }
.empty-state strong { display: block; color: var(--ink-950); font-size: 1.05rem; margin-bottom: .35rem; }

.mobile-header { height: 68px; padding: .75rem 1rem; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1020; }
.menu-button { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: .7rem; color: var(--brand-900); background: var(--brand-50); font-weight: 800; }
.offcanvas .sidebar-nav { margin-top: .4rem; }
.offcanvas .nav-item-link { color: var(--ink-700); }
.offcanvas .nav-item-link.active { color: #fff; background: var(--brand-700); }
.app-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 2.5rem; color: var(--ink-500); border-top: 1px solid var(--line); background: #fff; font-size: .78rem; }

.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; background: #fff; }
.login-visual { position: relative; overflow: hidden; padding: clamp(2rem, 6vw, 5rem); display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: linear-gradient(145deg, #052e2b, #0f766e 62%, #155e75); }
.login-visual::before, .login-visual::after { content: ""; position: absolute; border-radius: 50%; background: rgba(94,234,212,.15); }
.login-visual::before { width: 420px; height: 420px; right: -120px; top: -160px; }
.login-visual::after { width: 290px; height: 290px; left: -130px; bottom: -120px; }
.login-visual > * { position: relative; z-index: 1; }
.login-visual h1 { max-width: 680px; margin: 0; font-size: clamp(2.5rem, 6vw, 5.2rem); line-height: .98; letter-spacing: -.065em; font-weight: 850; }
.login-visual p { max-width: 580px; margin: 1.3rem 0 0; color: #ccfbf1; font-size: 1.05rem; }
.login-badge { width: fit-content; padding: .45rem .75rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.08); font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.login-panel { display: grid; place-items: center; padding: 2rem; }
.login-form { width: min(430px, 100%); }
.login-form h2 { margin-bottom: .5rem; font-weight: 850; letter-spacing: -.04em; }
.login-form .lead { margin-bottom: 2rem; color: var(--ink-500); font-size: .95rem; }
.login-form .form-control { min-height: 52px; }

.progress-bar-brand { background: var(--brand-600); }
.table thead th { color: var(--ink-500); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.pagination .page-link { color: var(--brand-700); }
.pagination .active > .page-link { background: var(--brand-700); border-color: var(--brand-700); }
.document-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.document-card { padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; text-decoration: none; }
.document-card:hover { border-color: var(--brand-600); background: var(--brand-50); }
.document-card small { display: block; color: var(--ink-500); }
.details-summary { padding: 1rem 1.2rem; cursor: pointer; color: var(--ink-950); font-weight: 800; list-style-position: inside; }
.details-summary:hover { color: var(--brand-700); }
.finance-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; min-width: 0; }
.finance-row > div:first-of-type { flex: 1 1 300px; min-width: 0; }
.finance-row > strong, .finance-row > .status { flex: 0 0 auto; }
.finance-row > input[type="file"] { flex: 1 1 220px; min-width: 180px; }
.finance-row > :last-child { margin-left: auto; }
.pending-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, .8fr) auto; gap: .8rem; align-items: end; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--brand-50); }
.pending-toolbar .form-label { margin-bottom: .35rem; }
.pending-reset { white-space: nowrap; }
.pending-results { grid-column: 1 / -1; margin: 0; color: var(--ink-500); font-size: .8rem; font-weight: 750; }
.pending-empty { border: 1px dashed var(--line); border-radius: .9rem; }
[hidden] { display: none !important; }
.expense-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .75rem 1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; }
.expense-row + .expense-row { margin-top: .7rem; }
.expense-row small { display: block; color: var(--ink-500); }
.expense-row > form, .expense-row > small:last-child { grid-column: 1 / -1; }
.payment-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.15rem; }
.payment-alert-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--success); font-size: 1.15rem; }
.payment-alert-content { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; min-width: 0; }
.payment-alert-content > strong { flex-basis: 100%; font-size: 1rem; }
.payment-alert-content > span { min-width: 0; }
.payment-alert-action { white-space: nowrap; }
.minute-list { display: grid; gap: 1rem; }
.minute-card { display: grid; grid-template-columns: 90px minmax(220px, 1fr) minmax(190px, auto); gap: 1.2rem; align-items: start; padding: 1.2rem; border: 1px solid var(--line); border-radius: 1rem; }
.minute-card > time { display: grid; place-items: center; padding: .8rem .4rem; border-radius: .8rem; color: var(--brand-900); background: var(--brand-50); }
.minute-card > time strong { font-size: 1.8rem; line-height: 1; }
.minute-card > time span { margin-top: .3rem; color: var(--ink-500); font-size: .68rem; font-weight: 800; }
.minute-card h3 { margin: .15rem 0 .3rem; font-size: 1.05rem; font-weight: 800; }
.minute-card p { margin: 0; color: var(--ink-500); font-size: .82rem; }
.document-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.minute-admin-actions { grid-column: 2 / -1; display: flex; justify-content: flex-end; gap: .5rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.permission-table .btn { min-width: 94px; }

@media (max-width: 991.98px) {
    .app-content { margin-left: 0; }
    .page-container { padding-top: 1.35rem; }
    .login-page { grid-template-columns: 1fr; }
    .login-visual { min-height: 38vh; padding: 2rem; }
    .login-visual h1 { font-size: clamp(2.2rem, 10vw, 3.8rem); }
    .login-panel { padding: 2.5rem 1.2rem; }
}

@media (max-width: 767.98px) {
    .page-container { padding: 1.15rem .75rem 2rem; }
    .page-heading { align-items: flex-start; }
    .page-heading time { display: none; }
    .page-heading { margin-bottom: 1.15rem; }
    .app-card .card-header, .app-card .card-body { padding: 1rem; }
    .data-row { grid-template-columns: 1fr 1fr; }
    .data-row > :first-child, .data-row > :last-child { grid-column: 1 / -1; }
    .app-footer { flex-direction: column; padding: 1rem; }
    .finance-row { display: flex; align-items: stretch; }
    .finance-row > div:first-of-type, .finance-row > input[type="file"] { flex-basis: 100%; min-width: 0; width: 100%; }
    .finance-row > :last-child { margin-left: 0; }
    .pending-toolbar { grid-template-columns: 1fr; }
    .pending-results { grid-column: 1; }
    .pending-reset { width: 100%; }
    .expense-row { grid-template-columns: minmax(0, 1fr) auto; }
    .expense-row > a { grid-column: 1 / -1; justify-self: start; }
    .expense-row > form { flex-direction: column; align-items: stretch; }
    .payment-alert { grid-template-columns: 1fr; align-items: stretch; }
    .payment-alert-icon { width: 40px; height: 40px; }
    .payment-alert-content { display: grid; gap: .35rem; }
    .payment-alert-action { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
    .minute-card { grid-template-columns: 72px 1fr; }
    .document-actions, .minute-admin-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 479.98px) {
    .mobile-header { padding-inline: .75rem; }
    .brand.compact .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
    .data-row:not(.finance-row) { grid-template-columns: 1fr; gap: .7rem; }
    .data-row:not(.finance-row) > * { grid-column: 1 / -1; }
    .data-row .btn { flex: 1 1 auto; }
    .minute-card { grid-template-columns: 1fr; }
    .minute-card > time { width: 74px; }
    .document-actions, .minute-admin-actions { grid-column: 1; }
    .card-footer .btn { flex: 1 1 auto; }
}

@media (pointer: coarse) {
    .btn, .menu-button, .nav-item-link, .pagination .page-link { min-height: 44px; }
    .btn-sm { min-height: 40px; padding-top: .45rem; padding-bottom: .45rem; }
    .form-check-input { width: 2.5em; height: 1.35em; }
}

@media (max-width: 767.98px) {
    input, select, textarea, .form-control, .form-select { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}