/* ==========================================================================
   Obradia — tema visual. Paleta inspirada en la identidad de Anthropic:
   crudo/marfil de fondo, tinta casi negra, terracota ("clay") como acento.
   ========================================================================== */
:root {
    --o-bg: #F5F4EE;
    --o-bg-soft: #EDEBE3;
    --o-surface: #FFFFFF;
    --o-ink: #191917;
    --o-ink-soft: #40403E;
    --o-muted: #87867F;
    --o-border: #E3E0D6;
    --o-clay: #D97757;
    --o-clay-dark: #C2603F;
    --o-clay-soft: #F6E4DC;
    --o-ok: #5E7A4F;
    --o-ok-soft: #E3EBDD;
    --o-info: #5B7DB1;
    --o-info-soft: #E1E8F3;
    --o-warn: #B88A2E;
    --o-warn-soft: #F5ECD6;
    --o-sidebar: #ECEAE2;
    --o-sidebar-ink: #40403E;
    --o-sidebar-strong: #191917;
    --o-sidebar-muted: #87867F;
    --o-sidebar-line: #D9D5C9;
    --o-sidebar-active: #DEDBD0;
    --o-radius: 10px;
    --o-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --o-font-serif: "Lora", Georgia, serif;
    --bs-body-font-family: var(--o-font);
    --bs-body-bg: var(--o-bg);
    --bs-body-color: var(--o-ink);
    --bs-primary: var(--o-clay);
    --bs-primary-rgb: 217, 119, 87;
    --bs-link-color: var(--o-clay-dark);
    --bs-link-color-rgb: 194, 96, 63;
    --bs-link-hover-color: var(--o-clay);
    --bs-link-hover-color-rgb: 217, 119, 87;
    --bs-border-color: var(--o-border);
    --bs-border-radius: 8px;
}
[data-bs-theme="dark"] {
    --o-bg: #191917;
    --o-bg-soft: #22211F;
    --o-surface: #262523;
    --o-ink: #ECEAE3;
    --o-ink-soft: #CFCBC2;
    --o-muted: #9A978E;
    --o-border: #37352F;
    --o-clay-soft: #3E2A22;
    --o-ok-soft: #27301F;
    --o-info-soft: #22293A;
    --o-warn-soft: #3A3120;
    --o-sidebar: #121210;
    --o-sidebar-ink: #CFCBC2;
    --o-sidebar-strong: #FFFFFF;
    --o-sidebar-muted: #7F7C74;
    --o-sidebar-line: #2E2C29;
    --o-sidebar-active: #22211F;
    --bs-body-bg: var(--o-bg);
    --bs-body-color: var(--o-ink);
    --bs-border-color: var(--o-border);
}
html[data-sidebar-tone="dark"] {
    --o-sidebar: #121210;
    --o-sidebar-ink: #CFCBC2;
    --o-sidebar-strong: #FFFFFF;
    --o-sidebar-muted: #7F7C74;
    --o-sidebar-line: #2E2C29;
    --o-sidebar-active: #22211F;
}
html, body { height: 100%; }
body { font-family: var(--o-font); font-size: 14px; color: var(--o-ink); background: var(--o-bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .page-title, .auth-brand h1 { font-family: var(--o-font-serif); font-weight: 600; letter-spacing: -0.01em; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.text-clay { color: var(--o-clay) !important; }
.text-ok { color: var(--o-ok) !important; }
.text-muted { color: var(--o-muted) !important; }

/* ---- Botones ---- */
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary { --bs-btn-bg: var(--o-clay); --bs-btn-border-color: var(--o-clay); --bs-btn-hover-bg: var(--o-clay-dark); --bs-btn-hover-border-color: var(--o-clay-dark); --bs-btn-active-bg: var(--o-clay-dark); --bs-btn-active-border-color: var(--o-clay-dark); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-disabled-bg: var(--o-clay); --bs-btn-disabled-border-color: var(--o-clay); }
.btn-outline-primary { --bs-btn-color: var(--o-clay-dark); --bs-btn-border-color: var(--o-clay); --bs-btn-hover-bg: var(--o-clay); --bs-btn-hover-border-color: var(--o-clay); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--o-clay-dark); --bs-btn-active-border-color: var(--o-clay-dark); }
.btn-outline-secondary { --bs-btn-color: var(--o-ink-soft); --bs-btn-border-color: var(--o-border); --bs-btn-hover-bg: var(--o-bg-soft); --bs-btn-hover-color: var(--o-ink); --bs-btn-hover-border-color: var(--o-border); --bs-btn-active-bg: var(--o-bg-soft); --bs-btn-active-color: var(--o-ink); --bs-btn-active-border-color: var(--o-border); }
.btn-icon { background: none; border: 0; color: inherit; padding: .4rem .5rem; border-radius: 8px; line-height: 1; font-size: 1.1rem; }
.btn-icon:hover { background: rgba(127,127,127,.15); }
.form-control, .form-select { border-radius: 8px; border-color: var(--o-border); background: var(--o-surface); color: var(--o-ink); }
.form-control:focus, .form-select:focus { border-color: var(--o-clay); box-shadow: 0 0 0 .2rem rgba(217,119,87,.18); }
.form-label { font-weight: 500; font-size: .82rem; color: var(--o-ink-soft); margin-bottom: .25rem; }
.form-check-input:checked { background-color: var(--o-clay); border-color: var(--o-clay); }
.input-group-text { background: var(--o-bg-soft); border-color: var(--o-border); color: var(--o-muted); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .25rem .75rem; }

/* ---- Estructura ---- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar { width: 240px; flex: 0 0 240px; background: var(--o-sidebar); color: var(--o-sidebar-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; transition: width .2s, flex-basis .2s; overflow: hidden; z-index: 1030; }
.app-sidebar__brand { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.1rem; color: var(--o-sidebar-strong); font-family: var(--o-font-serif); font-size: 1.25rem; font-weight: 600; }
.app-sidebar__brand:hover { text-decoration: none; color: var(--o-sidebar-strong); }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--o-clay); color: #fff; font-size: 1.05rem; flex: 0 0 auto; }
.brand-mark.lg { width: 56px; height: 56px; font-size: 1.7rem; border-radius: 14px; }
.app-sidebar__nav { flex: 1; overflow-y: auto; padding: .25rem .6rem 1rem; }
.nav-group { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--o-sidebar-muted); padding: .9rem .6rem .3rem; white-space: nowrap; }
.nav-item { display: flex; align-items: center; gap: .7rem; padding: .5rem .65rem; border-radius: 8px; color: var(--o-sidebar-ink); white-space: nowrap; font-size: .9rem; }
.nav-item i { font-size: 1.05rem; width: 20px; text-align: center; flex: 0 0 20px; }
.nav-item:hover { background: var(--o-sidebar-active); color: var(--o-sidebar-strong); text-decoration: none; }
.nav-item.is-active { background: var(--o-sidebar-active); color: var(--o-sidebar-strong); box-shadow: inset 3px 0 0 var(--o-clay); }
.app-sidebar__footer { display: flex; justify-content: space-between; padding: .6rem .8rem; border-top: 1px solid var(--o-sidebar-line); }
html[data-sidebar="collapsed"] .app-sidebar { width: 64px; flex-basis: 64px; }
html[data-sidebar="collapsed"] .brand-text, html[data-sidebar="collapsed"] .nav-item span, html[data-sidebar="collapsed"] .nav-group { display: none; }
html[data-sidebar="collapsed"] .nav-item { justify-content: center; padding: .55rem 0; }
html[data-sidebar="collapsed"] .app-sidebar__footer { flex-direction: column; align-items: center; gap: .3rem; }
html[data-sidebar="collapsed"] #toggleSidebar i { transform: rotate(180deg); }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar { height: 58px; display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; background: var(--o-surface); border-bottom: 1px solid var(--o-border); position: sticky; top: 0; z-index: 1020; }
.topbar-empresa { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; }
.topbar-empresa__nombre { font-weight: 600; white-space: nowrap; }
.topbar-obra .form-select { min-width: 240px; max-width: 420px; }
.topbar-user__btn { background: none; border: 0; display: flex; align-items: center; gap: .6rem; color: inherit; padding: .25rem .4rem; border-radius: 8px; }
.topbar-user__btn:hover { background: var(--o-bg-soft); }
.topbar-user__nombre { display: block; font-weight: 600; font-size: .86rem; line-height: 1.1; }
.topbar-user__rol { display: block; font-size: .72rem; color: var(--o-muted); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--o-clay-soft); color: var(--o-clay-dark); font-weight: 600; }
.app-content { padding: 1.5rem 2rem 3rem; max-width: 1400px; width: 100%; margin: 0 auto; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1025; }
@media (max-width: 991.98px) {
    .app-sidebar { position: fixed; left: -260px; transition: left .2s; }
    html[data-sidebar-open="true"] .app-sidebar { left: 0; }
    html[data-sidebar-open="true"] .sidebar-backdrop { display: block; }
    .app-content { padding: 1rem; }
    .topbar-obra .form-select { min-width: 150px; }
}

/* ---- Cabeceras y tarjetas ---- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-title { font-size: 1.65rem; margin: 0; }
.page-subtitle { color: var(--o-muted); margin: .2rem 0 0; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.card-o { background: var(--o-surface); border: 1px solid var(--o-border); border-radius: var(--o-radius); padding: 1.1rem 1.25rem; }
.card-o__title { font-weight: 600; font-size: .95rem; margin-bottom: .85rem; }
.card-o--btn { cursor: pointer; transition: border-color .15s, transform .15s; }
.card-o--btn:hover { border-color: var(--o-clay); transform: translateY(-1px); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.kpi { background: var(--o-surface); border: 1px solid var(--o-border); border-radius: var(--o-radius); padding: .9rem 1rem; }
.kpi__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--o-muted); }
.kpi__value { font-family: var(--o-font-serif); font-size: 1.45rem; font-weight: 600; margin-top: .2rem; line-height: 1.2; }
.kpi__sub { font-size: .75rem; color: var(--o-muted); }
.dl-o { display: grid; grid-template-columns: 110px 1fr; gap: .35rem .75rem; margin: 0; font-size: .88rem; }
.dl-o dt { color: var(--o-muted); font-weight: 500; }
.dl-o dd { margin: 0; }
.modulo-link { display: flex; gap: .8rem; align-items: center; padding: .7rem .8rem; border: 1px solid var(--o-border); border-radius: 8px; color: inherit; height: 100%; }
.modulo-link i { font-size: 1.3rem; color: var(--o-clay); }
.modulo-link:hover { border-color: var(--o-clay); text-decoration: none; background: var(--o-bg-soft); }

/* ---- Tablas ---- */
.table-o { --bs-table-bg: transparent; --bs-table-color: var(--o-ink); --bs-table-border-color: var(--o-border); font-size: .88rem; }
.table-o thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--o-muted); font-weight: 600; border-bottom-width: 1px; white-space: nowrap; }
.table-o tbody tr:hover { background: var(--o-bg-soft); }
.table-o.sortable thead th { cursor: pointer; user-select: none; }
.table-o.sortable thead th:empty { cursor: default; }
.table-o.sortable thead th.sorted-asc::after { content: " ↑"; }
.table-o.sortable thead th.sorted-desc::after { content: " ↓"; }
.badge-o { display: inline-block; padding: .18rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.badge-ok { background: var(--o-ok-soft); color: var(--o-ok); }
.badge-info { background: var(--o-info-soft); color: var(--o-info); }
.badge-warn { background: var(--o-warn-soft); color: var(--o-warn); }
.badge-clay { background: var(--o-clay-soft); color: var(--o-clay-dark); }
.badge-muted { background: var(--o-bg-soft); color: var(--o-muted); }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ---- Grafico de barras simple ---- */
.bars { display: flex; gap: .5rem; height: 180px; align-items: flex-end; }
.bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.bars__pair { flex: 1; width: 100%; display: flex; gap: 3px; align-items: flex-end; justify-content: center; }
.bars__bar { width: 40%; border-radius: 4px 4px 0 0; min-height: 2px; }
.bars__bar--in { background: var(--o-ok); }
.bars__bar--out { background: var(--o-clay); }
.bars__label { font-size: .7rem; color: var(--o-muted); margin-top: .3rem; }
.legend { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
.legend--in { background: var(--o-ok); } .legend--out { background: var(--o-clay); }

/* ---- Alertas / auth ---- */
.alert { border-radius: 8px; }
.auth-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; background: radial-gradient(circle at 20% 10%, #F6E4DC 0, transparent 40%), var(--o-bg); }
.auth-card { width: 100%; max-width: 420px; background: var(--o-surface); border: 1px solid var(--o-border); border-radius: 14px; padding: 2rem; box-shadow: 0 10px 40px rgba(25,25,23,.06); }
.auth-brand { text-align: center; margin-bottom: 1.5rem; }
.auth-brand h1 { font-size: 1.8rem; margin: .8rem 0 .2rem; }
.auth-brand p { color: var(--o-muted); margin: 0; }
.dropdown-menu { border-color: var(--o-border); border-radius: 10px; }
.modal-content { border-radius: 12px; background: var(--o-surface); color: var(--o-ink); }