/*
 | ERP Construccion - Hoja global de estilos
 | ------------------------------------------------------------
 | Este archivo concentra el diseno comun de la aplicacion.
 | La idea es que las vistas Blade contengan estructura y datos,
 | mientras que aqui se controle layout, navegacion, tablas,
 | pantallas tipo BrickFlow, proyectos y Gantt.
 */

/* Variables visuales principales: colores, bordes y sombras reutilizables. */
:root {
    --bg:#f3f4f6;
    --panel:#ffffff;
    --side:#111827;
    --side-2:#172033;
    --ink:#172033;
    --muted:#64748b;
    --line:#e2e8f0;
    --brand:#ea580c;
    --brand-hover:#c2410c;
    --brand-dark:#9a3412;
    --brand-accent:#fb923c;
    --blue:#2563eb;
    --ok:#15803d;
    --warn:#b45309;
    --bad:#b91c1c;
    --shadow:0 1px 2px #0f172a0a, 0 8px 24px #0f172a0d;
    --shadow-soft:0 1px 2px #0f172a0a;
    --sidebar-width:252px;
    --sidebar-width-collapsed:78px;
    --topbar-height:64px;
    --demo-banner-height:42px;
    --control-height-sm:32px;
    --control-height-md:40px;
    --control-height-lg:48px;
    --row-height-sm:34px;
    --row-height-md:42px;
    --row-height-lg:52px;
    --radius-sm:6px;
    --radius-md:8px;
    --radius-lg:12px;
    --focus-ring:0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
    --workspace-height:calc(100vh - var(--topbar-height));
}

html[data-demo-mode="off"] {
    --demo-banner-height:0px;
}

html[data-demo-mode="off"] [data-demo-mode-only] {
    display:none !important;
}

/* Reset minimo para que los componentes mantengan medidas estables. */
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter, "Segoe UI", Arial, sans-serif; overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }

/* Layout principal: sidebar fija y contenido ocupando toda la altura visible. */
.shell { height:100vh; min-height:100vh; display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); overflow:hidden; }
.sidebar { background:var(--side); border-right:1px solid #263247; height:100vh; min-height:100vh; position:sticky; top:0; overflow-y:auto; color:#e5e7eb; }
.content-shell { min-width:0; min-height:0; display:grid; grid-template-rows:var(--topbar-height) var(--demo-banner-height) minmax(0,1fr); overflow:hidden; }
main { padding:0; min-height:0; overflow:auto; }
.workspace-content { padding:12px; min-height:calc(var(--workspace-height) - var(--demo-banner-height)); height:calc(var(--workspace-height) - var(--demo-banner-height)); overflow:auto; }
.workspace-full { padding:0; min-height:calc(var(--workspace-height) - var(--demo-banner-height)); height:calc(var(--workspace-height) - var(--demo-banner-height)); overflow:hidden; }
.page-pad { padding:12px; min-height:var(--workspace-height); }
.page-fill { min-height:var(--workspace-height); height:var(--workspace-height); overflow:auto; }

/* Marca superior del sidebar. */
.brand-row { height:68px; display:flex; align-items:center; gap:12px; padding:0 18px; background:#0b1220; border-bottom:1px solid #263247; }
.logo-mark { width:34px; height:34px; border-radius:10px; position:relative; background:linear-gradient(145deg, #fb923c, #c2410c); box-shadow:0 10px 24px #0004; }
.logo-mark:before { content:"T"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:19px; font-weight:900; }
.logo-mark:after { display:none; }
.brand-name { font-size:21px; color:#fff; font-weight:850; letter-spacing:-.03em; }
.hamburger { margin-left:auto; color:var(--brand); font-size:28px; font-weight:800; }

/* Menu lateral desplegable. */
.side-section { border-top:1px solid #263247; }
.side-section summary { list-style:none; cursor:pointer; }
.side-section summary::-webkit-details-marker { display:none; }
details.side-section:not([open]) .side-sub { display:none; }
details.side-section:not([open]) .chev { transform:rotate(0deg); }
details.side-section[open] .chev { transform:rotate(90deg); }
.side-main { display:flex; align-items:center; gap:14px; min-height:48px; padding:0 18px; color:#f8fafc; font-weight:750; }
.side-main .chev { margin-left:auto; font-size:22px; transition:.15s ease; }
.side-sub { background:transparent; padding:10px; }
.side-sub a { display:block; padding:11px 13px; border-radius:9px; color:#cbd5e1; font-weight:650; transition:background .16s ease,color .16s ease,transform .16s ease; }
.side-sub a:hover { background:#ffffff10; color:#fff; transform:translateX(2px); }
.side-sub a.active { background:linear-gradient(135deg, var(--brand), var(--brand-hover)); color:#fff; box-shadow:0 8px 18px #0003; }
.side-sub-group { margin:8px 0 4px; }
.side-sub-title { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 24px 6px; color:var(--brand-dark); font-weight:900; cursor:pointer; }
.side-sub-title:after { content:">"; font-size:18px; transition:.15s ease; }
.side-sub-group[open] .side-sub-title:after { transform:rotate(90deg); }
.side-sub-group:not([open]) .side-sub-nested { display:none; }
.side-sub-nested { padding-left:18px; }
.side-sub-nested a { padding:8px 24px; font-weight:600; }
.side-link { display:flex; align-items:center; gap:14px; min-height:48px; padding:0 22px; color:var(--brand-dark); font-weight:800; }
.side-link .chev { margin-left:auto; font-size:22px; }
.side-version { position:sticky; bottom:0; padding:20px; color:#64748b; font-size:12px; text-align:left; background:linear-gradient(transparent, var(--side) 28%); }

/* Barra superior de usuario y acciones globales. */
.topbar { height:var(--topbar-height); background:#ffffffee; backdrop-filter:blur(12px); display:flex; align-items:center; gap:18px; justify-content:space-between; padding:0 22px; border-bottom:1px solid var(--line); }
.module-chip { display:inline-flex; align-items:center; gap:10px; background:#fff7ed; color:var(--brand-dark); border:1px solid #fed7aa; border-radius:999px; padding:8px 13px; font-weight:800; }
.chip-close { display:none; }
.top-actions { display:flex; align-items:center; gap:20px; color:var(--brand); }
.ai-badge { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#eee; color:#222; font-weight:900; }
.avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(#cfd4dc,#9aa3ae); }
.userbox { display:flex; align-items:center; gap:10px; color:#111; }
.user-meta { line-height:1.1; max-width:210px; }
.user-meta strong { display:block; font-size:14px; }
.user-meta span { display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.logout-inline button { border:0; background:transparent; color:var(--brand-dark); cursor:pointer; font-weight:800; }

/* Selector desplazable del modo demo. Permite ocultar o mostrar avisos y visita de prueba. */
.demo-mode-switch {
    --switch-height:34px;
    --demo-label-width:82px;
    position:relative;
    display:grid;
    grid-template-columns:var(--demo-label-width) 1fr 1fr;
    align-items:center;
    width:292px;
    min-height:var(--switch-height);
    padding:3px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--panel);
    box-shadow:inset 0 1px 2px #0f172a12;
    isolation:isolate;
}

.demo-mode-switch-label {
    position:relative;
    z-index:2;
    width:auto;
    height:auto;
    padding-left:10px;
    overflow:visible;
    clip:auto;
    color:var(--ink);
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}

.demo-mode-switch button {
    position:relative;
    z-index:2;
    min-height:calc(var(--switch-height) - 8px);
    border:0;
    border-radius:999px;
    background:transparent;
    color:var(--muted);
    font:inherit;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}

.demo-mode-switch button.is-active {
    color:#fff;
}

.demo-mode-thumb {
    position:absolute;
    z-index:1;
    top:3px;
    left:calc(3px + var(--demo-label-width));
    width:calc((100% - 6px - var(--demo-label-width)) / 2);
    height:calc(100% - 6px);
    border-radius:999px;
    background:var(--brand);
    box-shadow:0 8px 20px color-mix(in srgb, var(--brand) 28%, transparent);
    transition:transform .22s ease, background .22s ease, box-shadow .22s ease;
}

html[data-demo-mode="off"] .demo-mode-thumb {
    transform:translateX(100%);
    background:var(--muted);
    box-shadow:0 8px 20px #0f172a18;
}

/* Aviso permanente de entorno demo. */
.demo-banner {
    min-height:var(--demo-banner-height);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:6px 18px;
    background:linear-gradient(90deg, #fff7ed, #ecfeff);
    border-bottom:1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
    color:var(--ink);
    font-size:13px;
}

.demo-banner strong {
    color:var(--brand-dark);
    text-transform:uppercase;
    letter-spacing:.04em;
    font-size:12px;
}

.demo-banner span {
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Visita guiada contextual: resalta el elemento y coloca un bocadillo junto a el. */
.tour-overlay {
    position:fixed;
    inset:0;
    z-index:80;
    display:block;
    pointer-events:auto;
    background:#0f172a70;
    backdrop-filter:blur(1px);
}

.tour-overlay[hidden] {
    display:none;
}

.tour-card {
    position:fixed;
    z-index:82;
    width:min(440px, calc(100vw - 28px));
    max-height:min(760px, calc(100vh - 40px));
    overflow:auto;
    pointer-events:auto;
    background:var(--panel);
    color:var(--ink);
    border:1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
    border-radius:var(--radius-lg);
    box-shadow:0 24px 80px #0005;
    padding:22px;
}

.tour-card:before {
    content:"";
    position:absolute;
    width:14px;
    height:14px;
    left:-7px;
    top:32px;
    rotate:45deg;
    background:var(--panel);
    border-left:1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
    border-bottom:1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
}

.tour-target-active {
    position:relative;
    z-index:81;
    border-radius:var(--radius-md);
    outline:3px solid var(--brand-accent);
    outline-offset:4px;
    box-shadow:0 0 0 8px color-mix(in srgb, var(--brand) 20%, transparent), 0 16px 40px #0f172a30;
}

.tour-eyebrow {
    margin:0 0 8px;
    color:var(--brand-dark);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.tour-card h2 {
    margin:0 0 10px;
    font-size:22px;
}

.tour-card p {
    margin:0;
    color:var(--muted);
    line-height:1.55;
    white-space:pre-line;
}

.tour-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:20px;
    flex-wrap:wrap;
}

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

.tour-cleanup {
    width:100%;
    justify-content:center;
    margin-top:6px;
}

/* Componentes base reutilizados por formularios, tablas y paneles. */
.btn { border:1px solid var(--line); background:#fff; padding:10px 12px; border-radius:6px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.btn.primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.btn.icon { width:40px; height:40px; display:inline-grid; place-items:center; padding:0; font-size:21px; color:var(--brand-dark); }
.card { background:#fff; border:1px solid #d9dee8; border-radius:5px; padding:16px; box-shadow:var(--shadow); }
.panel { background:#fff; border:1px solid #d9dee8; border-radius:5px; box-shadow:var(--shadow); overflow:hidden; }
.panel-title { color:#9aa8bf; font-weight:800; font-size:14px; padding:12px; border-bottom:1px solid #aeb8c9; }
.panel-body { padding:18px 16px; }
h1 { font-size:25px; margin:0 0 14px; }
h2 { font-size:18px; margin:0 0 12px; }
.muted { color:var(--muted); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.split { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.grid { display:grid; gap:14px; }
.grid.cols { grid-template-columns:repeat(4,1fr); }
.grid.cols-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
label { display:block; font-size:13px; font-weight:800; margin:12px 0 6px; color:#7384a0; }
input, select, textarea { width:100%; border:1px solid var(--line); border-radius:6px; padding:12px; font:inherit; background:#fff; }
textarea { min-height:90px; }
table { width:100%; border-collapse:collapse; }
th,td { padding:11px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; background:#e5e7eb; font-size:12px; font-weight:800; }
.badge.emitido { background:#fef3c7; color:var(--warn); }
.badge.facturado,.badge.pagada { background:#dcfce7; color:var(--ok); }
.badge.vencida { background:#fee2e2; color:var(--bad); }
.fab { position:fixed; right:18px; bottom:18px; background:var(--brand); color:white; padding:15px 18px; border-radius:999px; font-weight:900; box-shadow:0 10px 24px #0003; z-index:5; }
.errors { background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca; padding:12px; border-radius:8px; margin:12px; }
.status { background:#dcfce7; color:#14532d; border:1px solid #bbf7d0; padding:12px; border-radius:8px; margin:12px; }
.line-grid { display:grid; grid-template-columns:1fr 90px 80px 110px 90px; gap:8px; align-items:end; margin-bottom:10px; }
.mobile-menu-toggle { display:none; position:fixed; right:14px; top:12px; z-index:12; border:0; background:var(--brand); color:#fff; border-radius:7px; padding:9px 11px; font-size:22px; }

/* Pantallas de datos: hace que tarjetas/tablas puedan crecer hasta el fondo. */
.data-screen { min-height:var(--workspace-height); height:var(--workspace-height); overflow:auto; }
.data-table-panel { min-height:0; display:flex; flex-direction:column; }
.data-table-panel .panel-body { min-height:0; overflow:auto; flex:1; }
.workspace-content > .card:last-child,
.workspace-content > form.card:last-child,
.workspace-content > .panel:last-child,
.page-pad > .card:last-child,
.page-pad > .panel:last-child { min-height:calc(var(--workspace-height) - 110px); }
.workspace-content > .split:first-child,
.workspace-content > h1:first-child { margin-top:0; }
.workspace-content > .row,
.workspace-content > .grid,
.workspace-content > .split { margin-bottom:12px; }
.workspace-content > .card:last-child table { min-width:100%; }

/* Modulos genericos tipo BrickFlow: maestro/detalle, tablas y tarjetas. */
.bc-workspace { display:grid; grid-template-columns:360px 1fr; min-height:var(--workspace-height); height:var(--workspace-height); overflow:hidden; }
.bc-list-pane { background:#f7f7f7; border-right:1px solid #d5d5d5; padding:10px 12px; min-width:0; overflow:auto; }
.bc-main-pane { min-width:0; padding:0 12px 24px; overflow:auto; }
.bc-searchbar { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #d0d6df; border-radius:5px; padding:7px; box-shadow:var(--shadow); }
.bc-searchbar input { border:0; padding:7px 6px; }
.bc-searchbar input:focus { outline:0; }
.bc-searchbar .tool { border:0; background:#fff; color:var(--brand-dark); font-size:21px; min-width:28px; cursor:pointer; }
.bc-record-card { display:grid; grid-template-columns:74px 1fr; margin-top:10px; background:#fff; border:1px solid #d6dde8; border-left:4px solid var(--brand); border-radius:4px; box-shadow:var(--shadow); overflow:hidden; }
.bc-record-card.active { background:#dfe8f6; }
.bc-record-icon { display:grid; place-items:center; border-right:1px solid #d6dde8; padding:12px 8px; }
.bc-circle { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--blue); color:#fff; font-weight:900; }
.bc-card-body { padding:10px 12px; line-height:1.55; min-width:0; }
.bc-card-body strong { color:var(--brand); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-code { color:#50617d; font-size:12px; margin-top:8px; text-align:center; }
.bc-module-hero { margin-top:2px; background:var(--brand); color:#fff; border-radius:4px; box-shadow:var(--shadow); overflow:hidden; }
.bc-hero-main { display:grid; grid-template-columns:auto auto minmax(180px,1fr) repeat(3,minmax(92px,140px)) auto; gap:10px; align-items:center; padding:10px; }
.bc-hero-btn { width:40px; height:40px; border:1px solid #fff8; background:var(--brand); color:#fff; border-radius:6px; font-size:18px; cursor:pointer; display:grid; place-items:center; }
.bc-hero-title strong { display:block; font-size:21px; }
.bc-hero-title span { display:block; font-size:15px; }
.bc-hero-label { font-size:13px; font-weight:800; }
.bc-hero-label strong { display:block; font-size:19px; }
.bc-hero-tabs { display:grid; grid-template-columns:repeat(4,1fr); background:#fff; color:var(--brand); border:1px solid #d5d5d5; border-top:0; padding:9px 12px; font-size:18px; }
.bc-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.bc-field { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:center; margin:18px 0; color:#4e6080; }
.bc-field .ico { color:#aebbd0; font-size:20px; text-align:center; }
.bc-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0 14px; }
.bc-kpi { background:#fff; border:1px solid #d9dee8; border-radius:5px; padding:13px; box-shadow:var(--shadow); }
.bc-kpi strong { display:block; font-size:22px; color:var(--brand-dark); }
.bc-kpi span { color:var(--muted); font-size:12px; font-weight:800; }
.bc-toolbar { display:flex; gap:8px; align-items:center; justify-content:space-between; background:var(--brand); color:#fff; margin-top:2px; border-radius:4px 4px 0 0; padding:8px; }
.bc-toolbar-left, .bc-toolbar-right { display:flex; align-items:center; gap:7px; }
.bc-toolbar .btn { background:var(--brand); border-color:#fff8; color:#fff; padding:8px 10px; }
.bc-table-wrap { background:#fff; border:1px solid #d9dee8; border-top:0; box-shadow:var(--shadow); overflow:auto; min-height:calc(var(--workspace-height) - 210px); }
.bc-table th { color:#60708b; font-size:12px; white-space:nowrap; background:#fafafa; }
.bc-table td { white-space:nowrap; }
.bc-table input, .bc-table textarea { min-width:110px; padding:8px; border-radius:3px; }
.bc-table textarea { min-height:38px; min-width:210px; }
.bc-empty { display:grid; place-items:center; min-height:260px; color:#8a96aa; }
.bc-form-panel { margin-top:12px; }
.bc-mini-form { display:grid; grid-template-columns:1fr 120px 120px auto; gap:8px; align-items:end; }
.settings-create-panel {
    margin:0;
    border-radius:0;
    border-top:0;
    box-shadow:none;
}
.settings-create-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
    gap:8px;
    align-items:end;
}
.settings-create-grid label {
    display:block;
    margin-bottom:4px;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
}
.settings-value-cell input,
.settings-value-cell select {
    min-width:120px;
}
.bc-card-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; margin-top:14px; }
.bc-activity-card { background:#fff; border:1px solid #d9dee8; border-left:4px solid var(--brand); border-radius:5px; box-shadow:var(--shadow); padding:12px; display:grid; grid-template-columns:48px 1fr; gap:12px; }
.bc-activity-card:nth-child(2n) .bc-circle { background:#0f766e; }
.bc-activity-card:nth-child(3n) .bc-circle { background:#b45309; }
.bc-gantt { display:grid; grid-template-columns:340px 1fr; background:#fff; border:1px solid #d9dee8; box-shadow:var(--shadow); overflow:auto; }
.bc-gantt-left, .bc-gantt-right { min-width:0; }
.bc-gantt-head, .bc-gantt-row { display:grid; grid-template-columns:1fr 80px 80px; gap:8px; align-items:center; min-height:42px; padding:0 10px; border-bottom:1px solid #e0e5ef; }
.bc-gantt-head { color:#60708b; font-weight:800; background:#fafafa; }
.bc-timeline-head, .bc-timeline-row { min-width:680px; min-height:42px; border-bottom:1px solid #e0e5ef; display:grid; grid-template-columns:repeat(12,1fr); align-items:center; padding:0 10px; }
.bc-timeline-head { color:#60708b; font-size:12px; font-weight:800; background:#fafafa; }
.bc-bar { height:18px; border-radius:999px; background:var(--brand); box-shadow:inset 0 0 0 1px #fff8; }
.bc-side-filter { margin-top:12px; background:#fff; border:1px solid #d9dee8; border-radius:5px; box-shadow:var(--shadow); padding:12px; }

/* Proyecto: pantalla maestro/detalle con formularios y panel gris lateral. */
.project-editor { display:grid; grid-template-columns:300px minmax(0,1fr) 38%; height:var(--workspace-height); min-height:var(--workspace-height); background:#f4f4f4; overflow:hidden; }
.project-icons { display:none; }
.project-left { border-right:1px solid #d6d6d6; background:#f8f8f8; padding:10px 14px; min-width:0; overflow:auto; }
.project-search { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #d3d8e1; border-radius:4px; padding:7px; box-shadow:var(--shadow); }
.project-search input { border:0; padding:7px; }
.project-search input:focus { outline:0; }
.project-search button, .project-search a { border:0; background:#fff; color:var(--brand-dark); font-weight:900; font-size:20px; cursor:pointer; }
.project-mini-card { display:grid; grid-template-columns:62px 1fr; margin-top:10px; background:#fff; border:1px solid #d5dae5; border-radius:4px; box-shadow:var(--shadow); overflow:hidden; }
.project-mini-card.active { background:#e1ebf8; }
.project-mini-side { display:grid; place-items:center; border-right:1px solid #d5dae5; padding:10px 4px; }
.project-p { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--blue); color:#fff; font-weight:900; font-size:18px; }
.project-mini-code { color:#50617d; font-size:11px; margin-top:8px; }
.project-mini-body { padding:8px 10px; line-height:1.55; min-width:0; }
.project-mini-body strong { display:block; color:var(--brand); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-work { min-width:0; overflow:auto; }
.project-grey { background:#cfcfcf; margin:0 10px 0 0; border-radius:5px; }
.project-orange { height:44px; background:var(--brand); color:#fff; display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center; padding:0 8px; }
.project-orange .round { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:2px solid #fff; font-weight:900; }
.project-orange .btn { background:var(--brand); color:#fff; border-color:#fff8; padding:7px 10px; }
.project-tabs { display:grid; grid-template-columns:repeat(6,1fr); background:#fff; border-bottom:1px solid #d7dce5; }
.project-tabs a { text-align:center; padding:14px 8px; font-size:12px; color:#56657d; border-bottom:2px solid transparent; }
.project-tabs a.active { color:#222; border-bottom-color:var(--brand); }
.project-form-area { padding:8px 10px 18px; }
.project-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.box-panel { background:#fff; border:1px solid #d3d8e1; border-radius:5px; padding:12px; min-width:0; }
.box-panel.tight { padding:8px; }
.box-panel input, .box-panel select, .box-panel textarea { border-radius:4px; padding:8px; font-size:12px; }
.box-panel label { margin:8px 0 4px; font-size:11px; color:#667894; }
.required-field input { border-color:#ff2b1a; }
.required-text { color:#ff2b1a; font-size:11px; margin-top:3px; font-weight:800; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tabline { display:flex; gap:20px; border-bottom:1px solid #d6dbe4; margin:8px 0; }
.tabline span { padding:8px 16px; font-size:12px; color:#5a6880; border-bottom:2px solid transparent; }
.tabline span.active { border-bottom-color:var(--brand); }
.project-record-layout { display:grid; grid-template-columns:360px 1fr; gap:10px; min-height:calc(var(--workspace-height) - 120px); }
.record-create { position:sticky; top:8px; align-self:start; }
.project-table-wrap { background:#fff; border:1px solid #d3d8e1; overflow:auto; min-height:calc(var(--workspace-height) - 130px); }
.project-table th { background:#eceff3; color:#2f3745; font-size:12px; padding:8px; white-space:nowrap; }
.project-table td { padding:6px; font-size:12px; white-space:nowrap; }
.project-table input, .project-table textarea { padding:7px; border-radius:3px; font-size:12px; min-width:110px; }
.project-table textarea { min-width:230px; min-height:34px; }
.budget-grid th, .budget-grid td { border:1px solid #b9c4d2; }
.budget-grid tbody tr:nth-child(odd) { background:#dcecf8; }
.budget-grid tbody tr:nth-child(even) { background:#eef6fc; }
.project-empty { display:grid; place-items:center; min-height:260px; color:#777; }
.meta-small { color:#8da0ba; font-size:11px; }

/* Gantt profesional: ocupa todo el espacio y mantiene tabla izquierda fija. */
.gantt-page { height:var(--workspace-height); display:grid; grid-template-rows:auto auto auto minmax(0,1fr); background:#f5f6f8; overflow:hidden; }
.gantt-top { background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; }
.gantt-actions, .gantt-project { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gantt-top .btn, .gantt-top select, .gantt-top input { height:34px; padding:6px 9px; border-radius:4px; border:1px solid #fff8; }
.gantt-top .btn { background:var(--brand); color:#fff; }
.gantt-kpis { display:grid; grid-template-columns:repeat(7, minmax(120px, 1fr)); gap:1px; background:#d7dce5; border-bottom:1px solid #c7cfdb; }
.gantt-kpi { background:#fff; padding:8px 10px; min-width:0; }
.gantt-kpi span { display:block; color:#7a8aa2; font-size:11px; font-weight:800; }
.gantt-kpi strong { font-size:17px; color:#25334a; }
.gantt-work { overflow:auto; display:grid; grid-template-columns:760px minmax(1200px, 1fr); align-items:start; min-height:0; }
.gantt-left, .gantt-right { min-width:0; }
.gantt-left { position:sticky; left:0; z-index:3; background:#fff; box-shadow:4px 0 5px #0001; }
.gantt-grid { border-collapse:separate; border-spacing:0; width:100%; font-size:12px; }
.gantt-grid th { position:sticky; top:0; z-index:4; background:#e7ebf0; color:#2b3545; border-right:1px solid #c8d0dd; border-bottom:1px solid #aeb8c7; padding:7px 6px; white-space:nowrap; }
.gantt-grid td { height:30px; padding:4px 6px; border-right:1px solid #d2d9e4; border-bottom:1px solid #dce2ea; white-space:nowrap; background:#fff; vertical-align:middle; }
.gantt-row-summary td { background:#eef2f7; font-weight:800; }
.gantt-row-selected td { background:#dcecf8; }
.task-name { display:flex; align-items:center; gap:5px; min-width:0; }
.task-indent { display:inline-block; width:calc(var(--level) * 18px); flex:0 0 calc(var(--level) * 18px); }
.task-toggle { color:#7b8798; min-width:13px; }
.task-icon { color:var(--brand-dark); font-size:13px; }
.task-label { overflow:hidden; text-overflow:ellipsis; max-width:280px; }
.status-pill { display:inline-block; min-width:70px; text-align:center; border-radius:999px; padding:3px 8px; font-size:11px; font-weight:800; background:#e5e7eb; }
.status-active { background:#dbeafe; color:#1d4ed8; }
.status-delayed { background:#fee2e2; color:#b91c1c; }
.status-done { background:#dcfce7; color:#15803d; }
.status-blocked { background:#fef3c7; color:#92400e; }
.priority-critical { color:#b91c1c; font-weight:900; }
.timeline { min-width:calc(var(--gantt-days, 60) * 28px); position:relative; }
.time-head { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:repeat(var(--gantt-days, 60), 28px); height:31px; background:#e7ebf0; border-bottom:1px solid #aeb8c7; }
.time-cell { border-right:1px solid #cdd4df; text-align:center; font-size:10px; color:#58677d; padding-top:4px; }
.time-cell.weekend { background:#dfe3ea; }
.time-row { display:grid; grid-template-columns:repeat(var(--gantt-days, 60), 28px); height:30px; position:relative; border-bottom:1px solid #dce2ea; }
.time-row.summary { background:#f3f5f8; }
.day-bg { border-right:1px solid #edf0f4; }
.day-bg.weekend { background:#eceff3; }
.today-line { position:absolute; top:0; bottom:0; width:2px; background:#ff1f00; z-index:3; pointer-events:none; }
.bar { position:absolute; top:6px; height:18px; border-radius:2px; color:#fff; font-size:10px; line-height:18px; overflow:hidden; white-space:nowrap; padding-left:5px; box-shadow:0 0 0 1px #0002; }
.bar-summary { height:14px; top:8px; background:#0f766e; }
.bar-task { background:#0891b2; }
.bar-critical { background:#b91c1c; }
.bar-delayed { background:#dc2626; }
.bar-done { background:#16a34a; }
.bar-milestone { width:14px !important; height:14px; top:8px; transform:rotate(45deg); background:#7c3aed; padding:0; }
.bar-progress { position:absolute; left:0; top:0; bottom:0; background:#0003; }
.baseline { position:absolute; height:4px; top:24px; border-radius:999px; background:#6b7280aa; }
.dep-line { position:absolute; height:2px; background:#7f8fa8; transform-origin:left center; z-index:2; opacity:.75; }
.gantt-panels { display:grid; grid-template-columns:1.3fr 1fr; gap:10px; padding:10px; background:#fff; border-bottom:1px solid #d2d9e4; }
.compact-panel { border:1px solid #d4dbe6; border-radius:4px; padding:8px; background:#fff; }
.compact-panel h2 { font-size:13px; margin:0 0 6px; color:#596a84; }
.quick-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(94px, 1fr)); gap:6px; align-items:end; }
.quick-grid label, .dep-grid label { font-size:10px; margin:0 0 3px; }
.quick-grid input, .quick-grid select, .dep-grid input, .dep-grid select { padding:6px; height:31px; border-radius:3px; font-size:12px; }
.dep-grid { display:grid; grid-template-columns:1fr 1fr 72px 70px auto; gap:6px; align-items:end; }
.print-note { display:none; }

/* Responsive: mantiene uso móvil sin romper pantallas densas en escritorio. */
@media (max-width:1350px) { .project-editor { grid-template-columns:300px 1fr; } .project-grey { display:none; } }
@media (max-width:1200px) {
    .gantt-kpis { grid-template-columns:repeat(3,1fr); }
    .gantt-panels, .quick-grid, .dep-grid { grid-template-columns:1fr; }
    .gantt-work { grid-template-columns:650px minmax(1000px, 1fr); }
}
@media (max-width:1180px) {
    .bc-workspace, .bc-gantt { grid-template-columns:1fr; height:auto; min-height:var(--workspace-height); overflow:auto; }
    .bc-detail-grid { grid-template-columns:1fr; }
    .bc-hero-main { grid-template-columns:auto auto 1fr; }
    .bc-hero-label { display:none; }
}
@media (max-width:980px) {
    body { overflow:auto; }
    .shell { grid-template-columns:1fr; overflow:visible; height:auto; }
    .sidebar { position:fixed; z-index:11; width:304px; transform:translateX(-100%); transition:.2s ease; box-shadow:8px 0 22px #0003; }
    body.menu-open .sidebar { transform:translateX(0); }
    .content-shell { min-height:100vh; }
    main, .workspace-content, .workspace-full { overflow:visible; height:auto; }
    .mobile-menu-toggle { display:block; }
    .topbar { padding-right:62px; }
    .module-chip { display:none; }
    .grid.cols { grid-template-columns:1fr 1fr; }
    .project-editor, .project-record-layout, .project-form-grid { grid-template-columns:1fr; height:auto; min-height:var(--workspace-height); overflow:auto; }
    .project-tabs { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
    .top-actions { gap:10px; }
    .user-meta { display:none; }
    .grid.cols, .bc-kpis, .bc-mini-form, .settings-create-grid { grid-template-columns:1fr; }
    table, thead, tbody, tr, th, td { display:block; }
    th { display:none; }
    td { border:0; padding:4px 0; }
    tr { border-bottom:1px solid var(--line); padding:10px 0; }
    .line-grid { grid-template-columns:1fr 1fr; }
    h1 { font-size:23px; }
    .bc-list-pane { padding-right:8px; }
    .bc-main-pane { padding:0 8px 18px; }
}
@media print {
    .sidebar, .topbar, .fab, .gantt-panels, .gantt-top form, .gantt-top .btn { display:none !important; }
    .shell { display:block; }
    .gantt-page { height:auto; overflow:visible; }
    .gantt-work { overflow:visible; grid-template-columns:760px 1fr; }
    .print-note { display:block; padding:8px; }
}

/*
 | Sistema visual moderno
 | ------------------------------------------------------------
 | Esta capa final normaliza el ERP con una apariencia SaaS:
 | tema turquesa configurable, modo oscuro, densidad visual,
 | alturas consistentes, foco accesible y responsive reforzado.
 */

html[data-theme="dark"] {
    --bg:#0f172a;
    --panel:#111827;
    --side:#0f172a;
    --side-2:#162033;
    --ink:#e5edf7;
    --muted:#94a3b8;
    --line:#243244;
    --shadow:0 1px 2px #0005, 0 14px 34px #0005;
    --shadow-soft:0 1px 2px #0004;
}

html[data-accent="blue"] { --brand:#2563eb; --brand-hover:#1d4ed8; --brand-dark:#1e40af; --brand-accent:#60a5fa; }
html[data-accent="green"] { --brand:#10b981; --brand-hover:#059669; --brand-dark:#047857; --brand-accent:#34d399; }
html[data-accent="purple"] { --brand:#8b5cf6; --brand-hover:#7c3aed; --brand-dark:#6d28d9; --brand-accent:#a78bfa; }
html[data-accent="orange"] { --brand:#f97316; --brand-hover:#ea580c; --brand-dark:#c2410c; --brand-accent:#fb923c; }
html[data-accent="red"] { --brand:#ef4444; --brand-hover:#dc2626; --brand-dark:#b91c1c; --brand-accent:#f87171; }
html[data-accent="gray"] { --brand:#475569; --brand-hover:#334155; --brand-dark:#1e293b; --brand-accent:#94a3b8; }

html[data-density="compact"] {
    --control-height-sm:28px;
    --control-height-md:34px;
    --control-height-lg:42px;
    --row-height-sm:28px;
    --row-height-md:34px;
    --row-height-lg:42px;
}

html[data-density="wide"] {
    --control-height-sm:38px;
    --control-height-md:48px;
    --control-height-lg:58px;
    --row-height-sm:42px;
    --row-height-md:52px;
    --row-height-lg:62px;
}

body {
    background:var(--bg);
    color:var(--ink);
    font-family:Inter, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
    font-size:14px;
}

a:hover { color:var(--brand-dark); }

:focus-visible {
    outline:0;
    box-shadow:var(--focus-ring);
}

.shell {
    grid-template-columns:var(--sidebar-width) minmax(0,1fr);
    background:var(--bg);
}

html[data-sidebar="collapsed"] .shell {
    grid-template-columns:var(--sidebar-width-collapsed) minmax(0,1fr);
}

.sidebar {
    background:var(--side);
    border-right:1px solid #263247;
    scrollbar-width:thin;
}

.brand-row {
    background:#0b1220;
    border-bottom:1px solid #263247;
    gap:10px;
}

.brand-name {
    color:#fff;
    font-size:20px;
    font-weight:750;
    white-space:nowrap;
}

.hamburger { color:var(--brand); }
.sidebar-toggle { margin-left:auto; }

html[data-sidebar="collapsed"] .brand-name,
html[data-sidebar="collapsed"] .side-main span:nth-child(2),
html[data-sidebar="collapsed"] .side-sub,
html[data-sidebar="collapsed"] .side-version,
html[data-sidebar="collapsed"] .chev {
    display:none;
}

html[data-sidebar="collapsed"] .brand-row { justify-content:center; padding:0; }
html[data-sidebar="collapsed"] .side-main { justify-content:center; padding:0; }
html[data-sidebar="collapsed"] .side-main span:first-child { font-size:20px; }

.side-section {
    border-top:0;
    margin:4px 8px;
}

.side-main {
    min-height:var(--row-height-lg);
    padding:0 12px;
    border-radius:var(--radius-md);
    color:#e5e7eb;
    font-weight:720;
}

.side-main:hover {
    background:#ffffff10;
    color:#fff;
}

.side-sub {
    background:transparent;
    padding:4px 0 8px;
}

.side-sub a,
.side-sub-nested a {
    min-height:var(--row-height-md);
    display:flex;
    align-items:center;
    border-radius:var(--radius-md);
    padding:0 12px;
    color:#cbd5e1;
    font-weight:650;
}

.side-sub a:hover,
.side-sub-nested a:hover {
    background:#ffffff10;
    color:#fff;
}

.side-sub a.active {
    background:linear-gradient(90deg, var(--brand), var(--brand-hover));
    color:#fff;
    box-shadow:var(--shadow-soft);
}

.primary-navigation {
    margin-top:12px;
    padding-bottom:10px;
    border-bottom:1px solid #263247;
}

.primary-navigation .side-sub {
    display:grid;
    gap:3px;
}

.primary-navigation a {
    gap:11px;
}

.primary-navigation .nav-icon {
    width:20px;
    flex:0 0 20px;
    color:#94a3b8;
    text-align:center;
    font-size:15px;
}

.primary-navigation a.active .nav-icon,
.primary-navigation a:hover .nav-icon {
    color:inherit;
}

.side-sub-title {
    color:#f8fafc;
    font-weight:780;
    padding:10px 12px 6px;
}

.topbar {
    background:var(--panel);
    border-bottom:1px solid var(--line);
    padding:0 18px;
    box-shadow:var(--shadow-soft);
}

.module-chip {
    background:color-mix(in srgb, var(--brand) 12%, var(--panel));
    color:var(--brand-dark);
    border:1px solid color-mix(in srgb, var(--brand) 25%, var(--line));
    border-radius:999px;
    min-height:var(--control-height-md);
}

.chip-close {
    background:color-mix(in srgb, var(--brand) 18%, transparent);
    color:var(--brand-dark);
}

.top-actions { color:var(--muted); gap:12px; }
.top-icon { font-size:20px; color:var(--brand); }

.global-search {
    flex:1;
    max-width:560px;
    min-width:220px;
    position:relative;
}

.global-search input {
    height:var(--control-height-md);
    border-radius:999px;
    padding-left:38px;
    background:var(--bg);
}

.global-search:before {
    content:"Q";
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:var(--muted);
    font-weight:800;
    z-index:1;
}

.userbox { color:var(--ink); }
.logout-inline button { color:var(--muted); }
.logout-inline button:hover { color:var(--brand-dark); }

.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-ghost {
    min-height:var(--control-height-md);
    border-radius:var(--radius-md);
    border:1px solid var(--line);
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:720;
    line-height:1;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-ghost:hover {
    transform:translateY(-1px);
}

.btn,
.btn-secondary { background:var(--panel); color:var(--ink); }
.btn:hover,
.btn-secondary:hover { border-color:color-mix(in srgb, var(--brand) 40%, var(--line)); color:var(--brand-dark); }
.btn.primary,
.btn-primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.btn.primary:hover,
.btn-primary:hover { background:var(--brand-hover); border-color:var(--brand-hover); color:#fff; }
.btn-success { background:#10b981; border-color:#10b981; color:#fff; }
.btn-warning { background:#f59e0b; border-color:#f59e0b; color:#fff; }
.btn-danger { background:#ef4444; border-color:#ef4444; color:#fff; }
.btn-ghost { background:transparent; color:var(--muted); border-color:transparent; }
.btn-ghost:hover { background:color-mix(in srgb, var(--brand) 9%, transparent); color:var(--brand-dark); }
.btn-icon,
.btn.icon {
    width:var(--control-height-md);
    height:var(--control-height-md);
    padding:0;
    border-radius:var(--radius-md);
}
.btn-sm { min-height:var(--control-height-sm); padding:0 10px; font-size:12px; }
.btn-lg { min-height:var(--control-height-lg); padding:0 18px; font-size:15px; }
.btn-block { width:100%; }

.toolbar,
.actions-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}

.card,
.panel,
.box-panel {
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft);
}

.card { padding:18px; }
.panel-title {
    color:var(--muted);
    border-bottom:1px solid var(--line);
}

h1 { font-size:clamp(22px, 2vw, 30px); letter-spacing:0; color:var(--ink); }
h2 { color:var(--ink); letter-spacing:0; }
.muted { color:var(--muted); }

input,
select,
textarea {
    min-height:var(--control-height-md);
    border-color:var(--line);
    border-radius:var(--radius-md);
    background:var(--panel);
    color:var(--ink);
    padding:0 12px;
}

textarea {
    padding-top:10px;
    min-height:calc(var(--control-height-lg) * 2);
    resize:vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline:0;
    border-color:var(--brand);
    box-shadow:var(--focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled {
    background:color-mix(in srgb, var(--muted) 8%, var(--panel));
    color:color-mix(in srgb, var(--muted) 80%, var(--ink));
    cursor:not-allowed;
}

input[type="checkbox"] {
    width:18px;
    min-height:18px;
    accent-color:var(--brand);
}

label {
    color:var(--muted);
    font-size:12px;
    font-weight:750;
}

table {
    border-collapse:separate;
    border-spacing:0;
}

th,
td {
    height:var(--row-height-md);
    padding:8px 10px;
    border-bottom:1px solid var(--line);
}

th {
    position:sticky;
    top:0;
    z-index:1;
    background:color-mix(in srgb, var(--bg) 85%, var(--panel));
    color:var(--muted);
    font-size:12px;
    text-transform:none;
    font-weight:800;
}

tbody tr:hover td {
    background:color-mix(in srgb, var(--brand) 6%, transparent);
}

.table-card,
.table-wrap {
    overflow:auto;
    min-height:0;
}

.badge {
    background:color-mix(in srgb, var(--muted) 14%, transparent);
    color:var(--ink);
}

.fab {
    background:var(--brand);
    border-radius:999px;
}

.fab:hover {
    background:var(--brand-hover);
    color:#fff;
}

.status,
.errors { margin:12px; }

.mt-sm { margin-top:12px; }
.mt-md { margin-top:14px; }
.mt-lg { margin-top:18px; }
.p-md { padding:12px; }
.full-width { width:100%; }
.check-inline { width:auto; min-height:18px; }
.auth-shell { width:min(980px, calc(100% - 32px)); min-height:620px; margin:5vh auto; display:grid; grid-template-columns:minmax(320px,.9fr) minmax(380px,1.1fr); overflow:hidden; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 28px 80px #0f172a18; }
.auth-intro { display:flex; flex-direction:column; justify-content:center; padding:54px; color:#fff; background:radial-gradient(circle at 15% 10%, #fb923c 0, transparent 34%), linear-gradient(145deg, #172033, #0b1220); }
.auth-logo { width:52px; height:52px; display:grid; place-items:center; border-radius:15px; background:linear-gradient(145deg, #fb923c, #c2410c); color:#fff; font-size:27px; font-weight:900; box-shadow:0 16px 34px #0005; }
.auth-kicker,.auth-eyebrow { margin:22px 0 8px; color:#fdba74; font-size:12px; font-weight:850; letter-spacing:.13em; }
.auth-intro h2 { margin:0; color:#fff; font-size:clamp(32px,4vw,48px); line-height:1.02; letter-spacing:-.045em; }
.auth-intro > p:last-child { max-width:390px; margin-top:24px; color:#cbd5e1; font-size:16px; line-height:1.65; }
.auth-card { width:auto; max-width:none; margin:0; padding:54px; border:0; border-radius:0; box-shadow:none; align-self:center; }
.auth-card-wide { max-width:none; margin:0; padding-block:38px; }
.auth-card h1 { margin-bottom:6px; font-size:34px; letter-spacing:-.035em; }
.auth-card form { margin-top:26px; }
.auth-card label { margin-top:13px; }
.auth-card .btn-primary { min-height:48px; border-radius:10px; }
.auth-link { color:var(--brand-dark); font-weight:750; }
.form-actions { margin-top:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.section-title { margin-top:18px; }
.nowrap { flex-wrap:nowrap; }
.center-row { justify-content:center; }
.project-notes-large { min-height:175px; }
.panel-title-compact { padding:0 0 10px; }
.project-save-main { margin:12px 0; }
.pagination-wrap { margin-top:12px; }
.table-search { width:min(100%, 260px); padding:8px; }

.dashboard-page {
    min-height:var(--workspace-height);
    display:grid;
    gap:16px;
}

.dashboard-hero {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:16px;
    align-items:center;
}

.dashboard-title span {
    display:block;
    color:var(--muted);
    font-size:13px;
    font-weight:650;
    margin-top:4px;
}

.metric-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(180px,1fr));
    gap:12px;
}

.metric-card {
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:16px;
    box-shadow:var(--shadow-soft);
    display:grid;
    gap:8px;
}

.metric-card span {
    color:var(--muted);
    font-size:12px;
    font-weight:780;
}

.metric-card strong {
    font-size:clamp(24px, 2.2vw, 36px);
    color:var(--ink);
}

.metric-card em {
    font-style:normal;
    color:var(--brand-dark);
    font-weight:800;
}

.widget-grid {
    display:grid;
    grid-template-columns:1.35fr .9fr;
    gap:14px;
    min-height:0;
}

.widget-list {
    display:grid;
    gap:10px;
}

.mini-progress {
    height:8px;
    border-radius:999px;
    background:color-mix(in srgb, var(--muted) 16%, transparent);
    overflow:hidden;
}

.mini-progress span {
    display:block;
    height:100%;
    width:var(--value, 0%);
    background:linear-gradient(90deg, var(--brand), var(--brand-accent));
}

.appearance-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:14px;
}

.swatch-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
    gap:10px;
}

.swatch {
    min-height:var(--control-height-lg);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    background:var(--panel);
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 12px;
    cursor:pointer;
}

.swatch:before {
    content:"";
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--swatch, var(--brand));
    box-shadow:inset 0 0 0 1px #0002;
}

.swatch-turquoise { --swatch:#14B8C4; }
.swatch-blue { --swatch:#2563EB; }
.swatch-green { --swatch:#10B981; }
.swatch-purple { --swatch:#8B5CF6; }
.swatch-orange { --swatch:#F97316; }
.swatch-red { --swatch:#EF4444; }
.swatch-gray { --swatch:#475569; }
.progress-72 { --value:72%; }

.swatch.is-active,
.segmented button.is-active {
    border-color:var(--brand);
    color:var(--brand-dark);
    background:color-mix(in srgb, var(--brand) 10%, var(--panel));
}

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

.segmented button {
    min-height:var(--control-height-md);
    border:1px solid var(--line);
    background:var(--panel);
    color:var(--ink);
    border-radius:var(--radius-md);
    padding:0 12px;
    cursor:pointer;
    font-weight:720;
}

.color-picker-row {
    display:flex;
    align-items:center;
    gap:10px;
}

.color-picker-row input[type="color"] {
    width:54px;
    padding:4px;
}

.bc-toolbar,
.gantt-top,
.project-orange {
    background:linear-gradient(90deg, var(--brand), var(--brand-hover));
}

.bc-toolbar .btn,
.gantt-top .btn,
.project-orange .btn,
.bc-hero-btn {
    background:color-mix(in srgb, #fff 10%, transparent);
    color:#fff;
    border-color:#ffffff66;
}

.bc-module-hero {
    background:linear-gradient(90deg, var(--brand), var(--brand-hover));
}

.bc-record-card,
.bc-activity-card {
    border-left-color:var(--brand);
}

.bc-circle,
.project-p {
    background:var(--brand-dark);
}

.project-editor {
    background:var(--bg);
    grid-template-columns:300px minmax(620px,1fr) minmax(280px,34%);
}

.project-grey {
    background:color-mix(in srgb, var(--muted) 18%, var(--bg));
}

.project-left,
.bc-list-pane {
    background:color-mix(in srgb, var(--bg) 72%, var(--panel));
}

.project-mini-card.active,
.bc-record-card.active {
    background:color-mix(in srgb, var(--brand) 10%, var(--panel));
}

.project-tabs a.active {
    color:var(--brand-dark);
}

.gantt-page {
    background:var(--bg);
}

.gantt-work {
    grid-template-columns:minmax(680px, 44vw) minmax(980px, 1fr);
}

.gantt-grid th,
.time-head {
    background:color-mix(in srgb, var(--bg) 85%, var(--panel));
}

.gantt-grid td,
.time-row {
    height:var(--row-height-sm);
}

.time-head,
.time-row {
    grid-template-columns:repeat(var(--gantt-days, 60), var(--gantt-day-width, 28px));
}

.timeline {
    min-width:calc(var(--gantt-days, 60) * var(--gantt-day-width, 28px));
}

.gantt-row-edit.is-hidden {
    display:none;
}

.gantt-help {
    font-size:11px;
    margin-top:6px;
}

.gantt-actions form {
    margin:0;
}

.gantt-controls {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
    min-width:0;
    position:relative;
}

.gantt-top {
    flex-wrap:wrap;
}

.gantt-project-picker {
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
}

.gantt-project-picker select {
    min-width:220px;
}

.gantt-filter-shell {
    position:relative;
}

.filter-count {
    display:inline-grid;
    place-items:center;
    min-width:20px;
    height:20px;
    border-radius:999px;
    padding:0 6px;
    background:#fff;
    color:var(--brand-dark);
    font-size:12px;
    font-weight:900;
}

.filter-popup {
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    width:min(360px, calc(100vw - 28px));
    background:var(--panel);
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    z-index:20;
    padding:14px;
}

.filter-popup[hidden] {
    display:none;
}

.gantt-filter-form {
    display:grid;
    gap:8px;
    margin:0;
}

.gantt-filter-form label {
    margin:4px 0 0;
}

.filter-actions {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:8px;
}

.gantt-task-column {
    width:310px;
}

/* Botonera compacta del Gantt: acciones con iconos y ayuda en tooltip nativo. */
.gantt-icon-btn {
    position:relative;
    width:var(--control-height-md);
    height:var(--control-height-md);
    min-width:var(--control-height-md);
    padding:0;
}

.ui-icon {
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    pointer-events:none;
}

.gantt-icon-btn .filter-count {
    position:absolute;
    top:-7px;
    right:-7px;
    border:1px solid #fff;
}

/* Redimensionado tipo hoja de calculo para la tabla del Gantt. */
.gantt-main {
    overflow:hidden;
    scrollbar-width:thin;
}

.gantt-page {
    height:var(--workspace-height);
    min-height:var(--workspace-height);
    grid-template-rows:auto auto auto minmax(0, 1fr);
    overflow:hidden;
    scrollbar-width:thin;
}

.gantt-work {
    grid-template-columns:minmax(100%, max-content);
    align-items:start;
    overflow:auto;
    isolation:isolate;
    min-height:0;
    height:100%;
    padding-bottom:16px;
    scrollbar-width:thin;
}

.gantt-left {
    grid-column:1;
    position:relative;
    left:auto;
    z-index:1;
    overflow:visible;
    align-self:start;
    scrollbar-width:thin;
    background:var(--panel);
    border-right:0;
    box-shadow:none;
}

.gantt-empty-state {
    min-height:0;
    height:100%;
    display:grid;
    place-items:center;
    padding:32px;
    overflow:auto;
    background:linear-gradient(135deg, color-mix(in srgb, var(--brand) 7%, transparent), transparent 58%), var(--bg);
    border-top:1px solid var(--border);
}

.gantt-empty-state > div {
    width:min(100%, 640px);
    display:grid;
    justify-items:start;
    gap:10px;
    padding:28px;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--panel);
    box-shadow:var(--shadow);
}

.gantt-empty-state h2 {
    margin:0;
    color:var(--text);
    font-size:clamp(22px, 2vw, 30px);
}

.gantt-empty-state p {
    margin:0;
    color:var(--muted);
    line-height:1.6;
}

.gantt-empty-icon {
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:var(--brand);
    color:#fff;
    font-weight:900;
    box-shadow:0 12px 28px color-mix(in srgb, var(--brand) 28%, transparent);
}

.gantt-right {
    display:none;
}

.resizable-table {
    table-layout:fixed;
    width:max-content;
    min-width:max(100%, 1094px);
}

.resizable-table th {
    position:sticky;
    overflow:visible;
    user-select:none;
}

.resizable-table th.is-resizing {
    background:color-mix(in srgb, var(--brand) 12%, var(--panel));
}

.column-resize-handle {
    position:absolute;
    top:0;
    right:-5px;
    z-index:8;
    width:10px;
    height:100%;
    cursor:col-resize;
    touch-action:none;
}

.column-resize-handle::after {
    content:"";
    position:absolute;
    top:7px;
    bottom:7px;
    left:4px;
    width:2px;
    border-radius:999px;
    background:transparent;
}

.column-resize-handle:hover::after,
.column-resize-handle:focus-visible::after,
body.is-resizing-columns .column-resize-handle::after {
    background:var(--brand);
}

.gantt-col-wbs { width:82px; }
.gantt-col-name { width:340px; }
.gantt-col-duration { width:74px; }
.gantt-col-date { width:96px; }
.gantt-col-assignee { width:180px; }
.gantt-col-progress { width:72px; }
.gantt-col-status { width:150px; }

body.is-resizing-columns,
body.is-resizing-gantt {
    cursor:col-resize;
    user-select:none;
}

.bar-label {
    position:relative;
    z-index:1;
}

@media (max-width:1500px) {
    .metric-grid { grid-template-columns:repeat(2, minmax(180px,1fr)); }
    .widget-grid { grid-template-columns:1fr; }
}

@media (max-width:1180px) {
    .global-search { max-width:none; }
    .topbar { gap:10px; }
    .project-editor { grid-template-columns:280px 1fr; }
}

@media (max-width:980px) {
    .auth-shell {
        width:min(720px, calc(100% - 28px));
        grid-template-columns:1fr;
        margin:24px auto;
    }
    .auth-intro { min-height:230px; padding:38px; }
    .auth-intro h2 { max-width:560px; }
    .auth-card { padding:42px 38px; }
    html[data-sidebar="collapsed"] .shell { grid-template-columns:1fr; }
    .global-search { display:none; }
    .content-shell { grid-template-rows:var(--topbar-height) auto auto; }
    .topbar { position:sticky; top:0; z-index:8; }
    .dashboard-hero { grid-template-columns:1fr; }
    .metric-grid { grid-template-columns:1fr 1fr; }
    .grid.cols-2 { grid-template-columns:1fr; }
    .project-editor { grid-template-columns:1fr; }
}

@media (max-width:720px) {
    body { font-size:13px; }
    .auth-shell {
        width:100%;
        min-height:100vh;
        margin:0;
        border:0;
        border-radius:0;
    }
    .auth-intro { min-height:210px; padding:30px 24px; }
    .auth-intro h2 { font-size:34px; }
    .auth-intro > p:last-child { margin-top:16px; }
    .auth-card,
    .auth-card-wide { padding:32px 24px; }
    .auth-card h1 { font-size:30px; }
    .demo-mode-switch {
        width:236px;
        --demo-label-width:72px;
        --switch-height:32px;
    }
    .demo-mode-switch-label {
        font-size:11px;
        padding-left:7px;
    }
    .demo-mode-switch button {
        font-size:11px;
        padding-inline:4px;
    }
    .demo-banner {
        align-items:flex-start;
        flex-direction:column;
        gap:6px;
        padding:8px 12px;
    }
    .demo-banner span {
        white-space:normal;
    }
    .tour-start-top {
        display:none;
    }
    .top-actions .ai-badge,
    .top-actions .top-icon { display:none; }
    .metric-grid { grid-template-columns:1fr; }
    .toolbar,
    .actions-toolbar,
    .split { align-items:stretch; }
    .toolbar > *,
    .actions-toolbar > * { width:100%; }
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-warning,
    .btn-danger,
    .btn-ghost { width:100%; }
    .btn-icon { width:var(--control-height-md); }
    .gantt-top {
        align-items:stretch;
    }
    .gantt-actions,
    .gantt-controls,
    .gantt-project-picker {
        width:100%;
    }
    .gantt-actions form,
    .gantt-project-picker select,
    .gantt-filter-shell {
        width:100%;
    }
    .gantt-actions {
        align-items:center;
        justify-content:flex-start;
    }
    .gantt-actions form {
        width:auto;
    }
    .gantt-icon-btn {
        width:var(--control-height-md);
        min-width:var(--control-height-md);
    }
    .filter-popup {
        position:fixed;
        left:14px;
        right:14px;
        top:calc(var(--topbar-height) + 12px);
        width:auto;
    }
    table.responsive-table,
    table.responsive-table thead,
    table.responsive-table tbody,
    table.responsive-table tr,
    table.responsive-table th,
    table.responsive-table td {
        display:block;
    }
}

/* Platform administration: public website analytics */
.admin-page-heading { align-items:flex-start; margin-bottom:24px; }
.admin-page-heading h1 { margin:3px 0 7px; }
.admin-page-heading .muted { max-width:680px; margin:0; }
.admin-kicker { margin:0; color:#ea580c; font-size:11px; font-weight:900; letter-spacing:.14em; }
.admin-live { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #bbf7d0; border-radius:999px; color:#166534; background:#f0fdf4; font-size:12px; font-weight:800; }
.admin-live i { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px #dcfce7; }
.admin-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.admin-metrics article { padding:20px; border:1px solid #dfe4ec; border-radius:12px; background:#fff; box-shadow:0 8px 25px #0f172a08; }
.admin-metrics span,.admin-metrics small,.admin-metrics strong { display:block; }
.admin-metrics span { color:#64748b; font-size:12px; font-weight:750; }
.admin-metrics strong { margin:9px 0 5px; color:#0f172a; font-size:30px; letter-spacing:-.04em; }
.admin-metrics small { color:#94a3b8; font-size:11px; }
.admin-grid-main,.admin-grid-secondary { display:grid; gap:14px; margin-bottom:14px; }
.admin-grid-main { grid-template-columns:minmax(0,1.7fr) minmax(260px,.7fr); }
.admin-grid-secondary { grid-template-columns:1fr 1fr; }
.analytics-card { padding:22px; border-radius:12px; box-shadow:0 8px 25px #0f172a08; }
.analytics-title { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.analytics-title h2 { margin:0; color:#0f172a; font-size:16px; }
.analytics-title p { margin:5px 0 0; color:#94a3b8; font-size:11px; }
.analytics-title>span,.chart-legend { color:#64748b; font-size:11px; font-weight:700; }
.chart-legend span { display:flex; align-items:center; gap:6px; }
.chart-legend i { width:8px; height:8px; border-radius:2px; background:#f97316; }
.visit-chart { height:235px; margin-top:22px; display:flex; align-items:stretch; gap:8px; }
.chart-column { min-width:0; flex:1; display:grid; grid-template-rows:18px 1fr 24px; text-align:center; }
.chart-column>strong { color:#64748b; font-size:9px; }
.chart-column>div { min-height:150px; display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid #e2e8f0; background:repeating-linear-gradient(to top,transparent 0,transparent 39px,#f1f5f9 40px); }
.chart-column i { width:min(22px,70%); min-height:3px; border-radius:5px 5px 1px 1px; background:linear-gradient(#fb923c,#f97316); transition:.2s; }
.chart-column:hover i { background:#c2410c; }
.chart-column>span { overflow:hidden; padding-top:8px; color:#94a3b8; font-size:8px; white-space:nowrap; }
.device-list,.ranking-list { margin-top:18px; }
.device-list>div,.ranking-list>div { min-height:55px; display:flex; align-items:center; gap:12px; border-top:1px solid #eef2f7; }
.device-list>div:first-child,.ranking-list>div:first-child { border-top:0; }
.device-icon,.ranking-list>div>span { width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:9px; color:#ea580c; background:#fff3e9; font-size:13px; font-weight:900; }
.device-list p,.ranking-list p { min-width:0; flex:1; margin:0; }
.device-list strong,.device-list small,.ranking-list strong,.ranking-list small { display:block; }
.device-list strong,.ranking-list strong { overflow:hidden; color:#334155; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.device-list small,.ranking-list small { overflow:hidden; margin-top:3px; color:#94a3b8; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.device-list b,.ranking-list b { color:#0f172a; font-size:12px; }
.ranking-list>div>span { width:26px; height:26px; color:#64748b; background:#f1f5f9; font-size:10px; }
.recent-visits { margin-bottom:25px; }
.recent-visits .table-wrap { margin-top:18px; overflow:auto; }
.table-subtext { display:block; margin-top:3px; color:#94a3b8; font-size:10px; }
.analytics-badge { display:inline-block; padding:4px 7px; border-radius:999px; color:#475569; background:#f1f5f9; font-size:10px; font-weight:800; }
.empty-cell { padding:40px!important; color:#94a3b8; text-align:center!important; }
.simple-pagination { margin-top:18px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }
.simple-pagination a,.simple-pagination>span { color:#334155; font-size:11px; font-weight:800; }
.simple-pagination a:last-child,.simple-pagination>span:last-child { text-align:right; }
.simple-pagination>span { color:#cbd5e1; }
.simple-pagination small { color:#94a3b8; }

@media (max-width:1000px) {
    .admin-metrics { grid-template-columns:repeat(2,1fr); }
    .admin-grid-main { grid-template-columns:1fr; }
}
@media (max-width:700px) {
    .admin-page-heading { gap:16px; }
    .admin-page-heading,.analytics-title { align-items:flex-start; }
    .admin-metrics,.admin-grid-secondary { grid-template-columns:1fr; }
    .visit-chart { gap:3px; }
    .chart-column:nth-child(odd)>span { visibility:hidden; }
    .analytics-card { padding:16px; }
}