/* Seguimiento OT — Chavín de Huántar
   Direction: calm, precise field instrument. Warm paper, andesite ink, jade accent, gold dot.
   Display: Bricolage Grotesque · UI: Geist · Figures/codes: Geist Mono. */

@font-face { font-family: 'Bricolage'; src: url(/fonts/bricolagegrotesque-latin.woff2) format('woff2'); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage'; src: url(/fonts/bricolagegrotesque-latin-ext.woff2) format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; src: url(/fonts/geist-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; src: url(/fonts/geist-latin-ext.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; src: url(/fonts/geistmono-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Geist Mono'; src: url(/fonts/geistmono-latin-ext.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1E9F; }

:root {
  --bg: #F3F1EC; --bg-2: #ECE9E2; --surface: #FFFFFF; --surface-2: #F8F7F3; --surface-3: #F1EFE9;
  --line: rgba(31, 27, 20, .09); --line-2: rgba(31, 27, 20, .16);
  --ink: #1D1B17; --ink-2: #57534B; --ink-3: #8B867C; --ink-4: #B3AEA4;
  --acento: #0E5E52; --acento-2: #0B4D43; --acento-suave: #E2EEEA; --acento-ink: #0B4D43;
  --oro: #D9A441;
  --rojo: #B3402D; --rojo-suave: #F7E5E0; --ocre: #A86B12; --ocre-suave: #F8EDD8; --azul: #335A9E; --azul-suave: #E5ECF7;
  --verde: #2F7742; --verde-suave: #E2F0E5; --ciruela: #7A4470; --ciruela-suave: #F2E5EF; --gris: #6D695F; --gris-suave: #ECEAE4;
  --sombra-1: 0 1px 0 rgba(31,27,20,.04), 0 1px 2px rgba(31,27,20,.06);
  --sombra-2: 0 1px 0 rgba(31,27,20,.03), 0 6px 18px -6px rgba(31,27,20,.16);
  --sombra-3: 0 24px 60px -18px rgba(31,27,20,.35), 0 2px 6px rgba(31,27,20,.08);
  --r-1: 8px; --r-2: 12px; --r-3: 18px;
  --f-ui: 'Geist', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
  --f-disp: 'Bricolage', 'Geist', ui-sans-serif, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --side: 248px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121210; --bg-2: #181815; --surface: #1C1B18; --surface-2: #211F1C; --surface-3: #272522;
    --line: rgba(255, 248, 235, .08); --line-2: rgba(255, 248, 235, .15);
    --ink: #F2EFE8; --ink-2: #BDB8AD; --ink-3: #8A857B; --ink-4: #5F5B54;
    --acento: #4DB3A0; --acento-2: #6CC7B5; --acento-suave: rgba(77,179,160,.14); --acento-ink: #7FD3C2;
    --oro: #E2B65A;
    --rojo: #E8775F; --rojo-suave: rgba(232,119,95,.14); --ocre: #E0A64A; --ocre-suave: rgba(224,166,74,.14); --azul: #8AAEE8; --azul-suave: rgba(138,174,232,.14);
    --verde: #7CC48D; --verde-suave: rgba(124,196,141,.13); --ciruela: #D293C6; --ciruela-suave: rgba(210,147,198,.13); --gris: #A39E93; --gris-suave: rgba(255,248,235,.07);
    --sombra-1: 0 1px 0 rgba(0,0,0,.3); --sombra-2: 0 8px 22px -8px rgba(0,0,0,.6); --sombra-3: 0 28px 70px -18px rgba(0,0,0,.75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121210; --bg-2: #181815; --surface: #1C1B18; --surface-2: #211F1C; --surface-3: #272522;
  --line: rgba(255, 248, 235, .08); --line-2: rgba(255, 248, 235, .15);
  --ink: #F2EFE8; --ink-2: #BDB8AD; --ink-3: #8A857B; --ink-4: #5F5B54;
  --acento: #4DB3A0; --acento-2: #6CC7B5; --acento-suave: rgba(77,179,160,.14); --acento-ink: #7FD3C2;
  --oro: #E2B65A;
  --rojo: #E8775F; --rojo-suave: rgba(232,119,95,.14); --ocre: #E0A64A; --ocre-suave: rgba(224,166,74,.14); --azul: #8AAEE8; --azul-suave: rgba(138,174,232,.14);
  --verde: #7CC48D; --verde-suave: rgba(124,196,141,.13); --ciruela: #D293C6; --ciruela-suave: rgba(210,147,198,.13); --gris: #A39E93; --gris-suave: rgba(255,248,235,.07);
  --sombra-1: 0 1px 0 rgba(0,0,0,.3); --sombra-2: 0 8px 22px -8px rgba(0,0,0,.6); --sombra-3: 0 28px 70px -18px rgba(0,0,0,.75);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14.5px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01', 'cv11'; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--acento-suave); }

.mono { font-family: var(--f-mono); font-size: .92em; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.muted { color: var(--ink-3); }
.xs { font-size: 12px; }
.t-rojo { color: var(--rojo); } .t-ocre { color: var(--ocre); } .t-azul { color: var(--azul); }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 550; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow svg { width: 14px; height: 14px; }

/* ── tones (used by states) ── */
.tn-gris { --tono: var(--gris); --tono-suave: var(--gris-suave); }
.tn-ocre { --tono: var(--ocre); --tono-suave: var(--ocre-suave); }
.tn-azul { --tono: var(--azul); --tono-suave: var(--azul-suave); }
.tn-jade { --tono: var(--acento); --tono-suave: var(--acento-suave); }
.tn-ciruela { --tono: var(--ciruela); --tono-suave: var(--ciruela-suave); }
.tn-verde { --tono: var(--verde); --tono-suave: var(--verde-suave); }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tono, var(--ink-3)); flex: none; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; font-weight: 550; font-size: 13.5px; white-space: nowrap; transition: background .15s, box-shadow .15s, transform .1s, color .15s; }
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn-primario { background: var(--acento); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.18); }
:root[data-theme="dark"] .btn-primario { color: #0d1a17; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primario { color: #0d1a17; } }
.btn-primario:hover { background: var(--acento-2); }
.btn-sutil { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), var(--sombra-1); }
.btn-sutil:hover { background: var(--surface-2); }
.btn-peligro { background: var(--rojo); color: #fff; }
.btn-peligro-sutil { color: var(--rojo); background: var(--rojo-suave); }
.btn-sm { height: 32px; padding: 0 11px; font-size: 13px; border-radius: 9px; }
.btn-grande { height: 46px; font-size: 15px; border-radius: 12px; width: 100%; }
.btn-bloque { width: 100%; margin-top: 14px; }
.btn-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--ink-2); transition: background .15s, color .15s; flex: none; }
.btn-ic:hover { background: var(--surface-3); color: var(--ink); }
.btn-ic svg { width: 18px; height: 18px; }
.btn-xs { width: 26px; height: 26px; border-radius: 7px; }
.btn-xs svg { width: 15px; height: 15px; }
.link { color: var(--acento-ink); font-weight: 550; font-size: 12.5px; }
.link:hover { text-decoration: underline; }

/* ── chips, avatars ── */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 550; background: var(--tono-suave, var(--gris-suave)); color: var(--tono, var(--ink-2)); white-space: nowrap; }
.chip svg { width: 12px; height: 12px; }
.chip-gris { --tono: var(--gris); --tono-suave: var(--gris-suave); }
.chip-ocre { --tono: var(--ocre); --tono-suave: var(--ocre-suave); }
.chip-azul { --tono: var(--azul); --tono-suave: var(--azul-suave); }
.chip-jade { --tono: var(--acento-ink); --tono-suave: var(--acento-suave); }
.chip-rojo { --tono: var(--rojo); --tono-suave: var(--rojo-suave); }
.av { display: inline-grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff; font-weight: 650; letter-spacing: .02em; flex: none; box-shadow: 0 0 0 2px var(--surface); }
.av-xs { width: 18px; height: 18px; font-size: 8.5px; }
.av-sm { width: 24px; height: 24px; font-size: 10px; }
.av-md { width: 32px; height: 32px; font-size: 12px; }
.av-vacio { background: var(--surface-3); color: var(--ink-4); box-shadow: inset 0 0 0 1px var(--line-2); }
.tag { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; }
.tag-ent { background: var(--acento-suave); color: var(--acento-ink); }
.tag-tarea { background: var(--ocre-suave); color: var(--ocre); }
.semaforo { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.s-vencido { background: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-suave); }
.s-riesgo { background: var(--ocre); box-shadow: 0 0 0 3px var(--ocre-suave); }
.s-ok { background: var(--verde); }
kbd { font: 500 11px var(--f-mono); color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 5px; line-height: 18px; }

/* ── forms ── */
.form { display: grid; gap: 14px; }
.form-2 { grid-template-columns: 1fr 1fr; }
.form-3 { grid-template-columns: repeat(3, 1fr); }
.span-2 { grid-column: span 2; } .span-3 { grid-column: 1 / -1; }
.form-acc { display: flex; gap: 10px; flex-wrap: wrap; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > span { font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
.campo small { color: var(--ink-3); font-size: 12px; }
input:where(:not([type=checkbox]):not([type=radio]):not([type=range])), select, textarea {
  width: 100%; min-width: 0; height: 38px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface);
  transition: border-color .15s, box-shadow .15s; outline: none; }
textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B867C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; }
:where(input, select, textarea):focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
:where(input, select):disabled { background: var(--surface-2); color: var(--ink-2); }
input[type=date] { font-variant-numeric: tabular-nums; }
.form-error { color: var(--rojo); font-size: 13px; min-height: 18px; }
.sel { width: auto; height: 34px; font-size: 13px; }
.sel-limpio { width: auto; height: 30px; border-color: transparent; background-color: transparent; font-weight: 550; padding-left: 6px; }
.sel-limpio:hover { background-color: var(--surface-3); }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i { width: 32px; height: 19px; border-radius: 99px; background: var(--ink-4); position: relative; transition: background .2s; flex: none; }
.switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.switch input:checked + i { background: var(--acento); }
.switch input:checked + i::after { transform: translateX(13px); }
.switch input:focus-visible + i { outline: 2px solid var(--acento); outline-offset: 2px; }
.check-txt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.check-txt input { accent-color: var(--acento); width: 16px; height: 16px; }

/* ── login ── */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }
.login-arte { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 20% 10%, #13695C 0%, #0B4A40 45%, #072E28 100%); }
.login-arte::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 75% 80%, rgba(217,164,65,.20), transparent 70%); }
.contornos { position: absolute; inset: 0; width: 100%; height: 100%; }
.contornos path { fill: none; }
.login-arte .c-menor { stroke: rgba(236, 244, 240, .16); stroke-width: 1; }
.login-arte .c-mayor { stroke: rgba(236, 244, 240, .34); stroke-width: 1.4; }
.login-panel { display: flex; flex-direction: column; justify-content: center; padding: 56px clamp(28px, 6vw, 88px); max-width: 560px; width: 100%; justify-self: center; gap: 22px; }
.login-marca, .side-marca { display: flex; align-items: center; gap: 11px; }
.login-marca b, .side-marca b { display: block; font: 650 15px/1.15 var(--f-disp); letter-spacing: -.01em; }
.login-marca small, .side-marca small { display: block; font-size: 12px; color: var(--ink-3); }
.marca-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--acento); color: #EAF4F1; display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.marca-ic svg { width: 26px; height: 26px; }
.login h1 { font: 650 clamp(34px, 4.2vw, 50px)/1.02 var(--f-disp); letter-spacing: -.035em; margin-top: 18px; }
.login h1 em { font-style: normal; color: var(--acento); }
.login .muted { font-size: 15.5px; max-width: 42ch; }
.login .form { margin-top: 10px; }
.login-pie { font-size: 12px; color: var(--ink-4); margin-top: 18px; }

/* ── shell ── */
.shell { display: grid; grid-template-columns: var(--side) 1fr; height: 100vh; height: 100dvh; }
.side { display: flex; flex-direction: column; gap: 20px; padding: 18px 14px 14px; border-right: 1px solid var(--line); background: var(--bg-2); min-height: 0; overflow-y: auto; }
.side-marca { padding: 4px 6px; }
.side-nav { display: grid; gap: 2px; }
.side-nav a { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; border-radius: 10px; color: var(--ink-2); font-weight: 520; transition: background .15s, color .15s; position: relative; }
.side-nav a svg { width: 19px; height: 19px; }
.side-nav a:hover { background: var(--surface-3); color: var(--ink); }
.side-nav a.activo { background: var(--surface); color: var(--ink); box-shadow: var(--sombra-1), inset 0 0 0 1px var(--line); }
.side-nav a.activo svg { color: var(--acento); }
.badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--rojo); color: #fff; font: 600 11px/20px var(--f-ui); font-style: normal; text-align: center; }
.badge:empty { display: none; }
[data-badge="pendientes"].badge { background: var(--ink-2); }
[data-badge="pendientes"].badge.urgente { background: var(--rojo); }
.side-proy { margin-top: auto; padding: 14px; border-radius: var(--r-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.side-proy p { font: 600 13px/1.35 var(--f-disp); margin: 6px 0 4px; }
.side-proy small { color: var(--ink-3); font-size: 11.5px; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; text-align: left; transition: background .15s; }
.side-user:hover { background: var(--surface-3); }
.side-user > span:not(.av) { flex: 1; min-width: 0; }
.side-user b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user small { display: block; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user > svg { width: 16px; height: 16px; color: var(--ink-3); }
.main { overflow-y: auto; overflow-x: hidden; min-width: 0; scroll-behavior: auto; }
.vista { padding: 28px clamp(18px, 3vw, 40px) 64px; max-width: 1480px; margin: 0 auto; display: grid; gap: 22px; align-content: start; }
.vista.entra > * { animation: subir .5s var(--ease) both; }
.vista.entra > *:nth-child(2) { animation-delay: .04s; } .vista.entra > *:nth-child(3) { animation-delay: .08s; }
.vista.entra > *:nth-child(4) { animation-delay: .12s; } .vista.entra > *:nth-child(5) { animation-delay: .16s; } .vista.entra > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } }
.tabbar { display: none; }

.vh h1 { font: 650 clamp(28px, 3vw, 36px)/1.1 var(--f-disp); letter-spacing: -.03em; margin-top: 4px; }
.vh-sub { color: var(--ink-2); font-size: 15px; margin-top: 8px; max-width: 70ch; }
.vh-sub b { font-weight: 600; }
.vh-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vh-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── panels ── */
.panel { background: var(--surface); border-radius: var(--r-3); box-shadow: var(--sombra-1), inset 0 0 0 1px var(--line); padding: 20px 22px; min-width: 0; }
.panel-plano { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-h h2 { font: 620 16.5px/1.25 var(--f-disp); letter-spacing: -.015em; }
.panel-h > .muted, .panel-h > a { font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.panel-h a svg { width: 14px; height: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.grid-2-asim { grid-template-columns: 1.45fr 1fr; }
.vacio { display: grid; place-items: center; text-align: center; gap: 8px; padding: 26px 10px; color: var(--ink-3); }
.vacio svg { width: 26px; height: 26px; color: var(--ink-4); }
.ver-mas { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 13px; color: var(--acento-ink); font-weight: 550; }
.ver-mas svg { width: 14px; height: 14px; }

/* ── pulse (resumen hero) ── */
.pulso { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pulso-card { position: relative; background: var(--surface); border-radius: var(--r-3); padding: 22px 24px 20px; box-shadow: var(--sombra-1), inset 0 0 0 1px var(--line); overflow: hidden; }
.pulso-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pulso-num { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 26px; }
.pulso-num b { font: 650 clamp(44px, 5vw, 60px)/.95 var(--f-disp); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.pulso-num span { color: var(--ink-3); font-size: 14px; }
.pulso-pie { color: var(--ink-2); font-size: 13px; margin-top: 8px; }
.pulso-pie b { font-weight: 600; color: var(--ink); }
.regla, .medidor { position: relative; margin: 0 4px; }
.regla { margin-bottom: 46px; } .medidor { margin-bottom: 26px; }
.regla-pista, .medidor-pista { position: relative; height: 12px; border-radius: 99px; background: var(--surface-3); overflow: hidden;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / 18 - 1px), var(--line-2) calc(100% / 18 - 1px) calc(100% / 18)); }
.regla-pista i, .medidor-pista i { position: absolute; top: 0; bottom: 0; }
.regla-cumplido { left: 0; background: var(--ink); border-radius: 99px 0 0 99px; }
.regla-exceso { background: repeating-linear-gradient(-45deg, var(--rojo) 0 5px, color-mix(in srgb, var(--rojo) 70%, transparent) 5px 9px); }
.regla-ampl { background: color-mix(in srgb, var(--ocre) 16%, transparent); }
.regla-marca, .regla-hoy, .medidor-prog { position: absolute; top: -4px; transform: translateX(-50%); display: grid; justify-items: center; pointer-events: none; }
.regla-marca::before, .regla-hoy::before, .medidor-prog::before { content: ''; width: 2px; height: 20px; background: var(--ink); border-radius: 2px; }
.regla-marca em, .regla-hoy em, .medidor-prog em { font-style: normal; font-size: 11px; color: var(--ink-3); white-space: nowrap; margin-top: 4px; }
.regla-marca b { font: 600 12px var(--f-mono); white-space: nowrap; }
.regla-hoy { top: -20px; }
.regla-hoy::before { order: 2; height: 30px; background: var(--rojo); }
.regla-hoy em { order: 1; margin: 0 0 2px; color: var(--rojo); font-weight: 600; }
.regla-marca { transform: translateX(-100%); justify-items: end; }
.regla-marca::before { margin-left: auto; }
.regla-marca em, .regla-marca b { text-align: right; }
.regla-fin::before { margin-left: auto; }
.regla-fin::before { background: var(--ocre); }
.medidor-pista i { left: 0; background: linear-gradient(90deg, var(--acento-2), var(--acento)); border-radius: 99px; }
.medidor-prog::before { background: var(--ink-3); }
.medidor-prog { transform: translateX(-100%); justify-items: end; }

.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.kpis-3 { grid-template-columns: repeat(3, 1fr); }
.kpi { position: relative; display: grid; gap: 2px; text-align: left; padding: 16px 18px 15px; border-radius: var(--r-2); background: var(--surface); box-shadow: var(--sombra-1), inset 0 0 0 1px var(--line); transition: transform .2s var(--ease), box-shadow .2s; overflow: hidden; }
button.kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-2), inset 0 0 0 1px var(--line); }
.kpi::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--k); }
.kpi-jade { --k: var(--acento); } .kpi-ocre { --k: var(--ocre); } .kpi-rojo { --k: var(--rojo); } .kpi-azul { --k: var(--azul); } .kpi-gris { --k: var(--ink-4); } .kpi-verde { --k: var(--verde); }
.kpi-t { font-size: 12.5px; color: var(--ink-2); font-weight: 520; }
.kpi-n { font: 650 32px/1.1 var(--f-disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi-n-sm { font-size: 24px; margin: 4px 0 2px; }
.kpi-rojo .kpi-n { color: var(--rojo); }
.kpi-s { font-size: 12px; color: var(--ink-3); }

.lista-atencion { list-style: none; margin: 0; padding: 0; display: grid; }
.fila-at { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 8px; border-radius: 10px; transition: background .15s; }
.fila-at:hover { background: var(--surface-2); }
.lista-atencion li + li .fila-at { border-top: 1px solid var(--line); border-radius: 0; }
.lista-atencion li + li .fila-at:hover { border-radius: 10px; border-color: transparent; }
.fila-at-txt { flex: 1; min-width: 0; display: grid; }
.fila-at-txt b { font-weight: 560; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-at-txt small { font-size: 12px; color: var(--ink-3); }

.agenda { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.agenda > li { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 8px 0; }
.agenda > li + li { border-top: 1px dashed var(--line-2); }
.agenda-dia { display: grid; justify-items: center; align-content: start; padding-top: 2px; }
.agenda-dia b { font: 650 22px/1 var(--f-disp); letter-spacing: -.03em; }
.agenda-dia span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.agenda .pronto .agenda-dia b { color: var(--ocre); }
.agenda .pasado .agenda-dia b { color: var(--rojo); }
.agenda-items { display: grid; gap: 4px; min-width: 0; }
.agenda-cuando { font-size: 11.5px; color: var(--ink-3); font-weight: 550; }
.agenda-it { display: flex; align-items: center; gap: 10px; text-align: left; padding: 6px 8px; margin: 0 -8px; border-radius: 9px; min-width: 0; }
.agenda-it:hover { background: var(--surface-2); }
.agenda-it > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.agenda-it b { font-weight: 560; font-size: 13.5px; }
.agenda-it small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.leyenda { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.ley-prog, .ley-ejec { display: inline-block; width: 16px; height: 0; border-top: 2px dashed var(--ink-3); margin-left: 6px; vertical-align: middle; }
.ley-ejec { border-top: 3px solid var(--acento); }
.curva { position: relative; }
.curva svg { width: 100%; height: auto; overflow: visible; }
.eje-l { stroke: var(--line); }
.eje-t { fill: var(--ink-3); font: 11px var(--f-ui); font-variant-numeric: tabular-nums; }
.c-prog { fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-dasharray: 5 5; }
.c-ejec { fill: none; stroke: var(--acento); stroke-width: 2.8; stroke-linejoin: round; }
.c-area { fill: var(--acento-suave); }
.c-pt { fill: var(--surface); stroke: var(--acento); stroke-width: 3; }
.c-lbl { fill: var(--acento-ink); font: 650 13px var(--f-disp); }
.c-guia { stroke: var(--line-2); }
.c-hp { fill: var(--surface); stroke: var(--ink-3); stroke-width: 2; }
.c-he { fill: var(--surface); stroke: var(--acento); stroke-width: 2.5; }
.tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); background: var(--ink); color: var(--bg); padding: 9px 11px; border-radius: 10px; font-size: 12px; display: grid; gap: 3px; pointer-events: none; white-space: nowrap; box-shadow: var(--sombra-2); }
.tip b { font-weight: 600; }
.tip span { display: flex; align-items: center; gap: 6px; opacity: .9; }
.tip .ley-prog, .tip .ley-ejec { margin: 0; }
.tip .ley-prog { border-color: currentColor; }

.cartera-barra { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 2px; margin-bottom: 16px; }
.cartera-barra i { background: var(--tono); min-width: 3px; }
.cartera-ley { list-style: none; margin: 0; padding: 0; display: grid; }
.cartera-ley li { display: grid; grid-template-columns: 10px 1fr auto 92px 46px; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; }
.cartera-ley li + li { border-top: 1px solid var(--line); }
.cartera-ley b { font-weight: 600; text-align: right; }
.cartera-ley .num.muted { text-align: right; }

.tabla-resp { display: grid; }
.resp-fila { display: grid; grid-template-columns: minmax(180px, 1.2fr) 2fr 90px 90px 80px 90px; align-items: center; gap: 14px; padding: 10px 0; font-size: 13px; }
.resp-fila + .resp-fila { border-top: 1px solid var(--line); }
.resp-quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.resp-quien span { display: grid; min-width: 0; }
.resp-quien b { font-weight: 600; }
.resp-quien small { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resp-barra { position: relative; height: 26px; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.resp-barra i { position: absolute; inset: 0 auto 0 0; background: var(--acento-suave); border-right: 2px solid var(--acento); }
.resp-barra em { position: relative; font-style: normal; font-size: 12px; line-height: 26px; padding-left: 10px; font-weight: 550; }
.resp-dato { font-size: 12.5px; }
.resp-dato b { font-weight: 650; font-size: 14px; }
.resp-dato.num { text-align: right; font-weight: 550; }

/* ── board ── */
.barra-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.buscar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px; border-radius: 11px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); min-width: 280px; flex: 0 1 360px; }
.buscar:focus-within { box-shadow: inset 0 0 0 1px var(--acento), 0 0 0 3px var(--acento-suave); }
.buscar svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.buscar input { border: 0 !important; box-shadow: none !important; padding: 0 !important; height: 100% !important; background: transparent !important; }
.chips-resp { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-f { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; font-size: 13px; font-weight: 520; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); background: var(--surface); transition: all .15s; }
.chip-f:has(.av) { padding-left: 6px; }
.chip-f:hover { color: var(--ink); }
.chip-f.on { background: var(--ink); color: var(--bg); box-shadow: none; }
.chip-f.on .av { box-shadow: 0 0 0 2px var(--ink); }

.kanban { display: flex; gap: 18px; overflow-x: auto; padding: 2px 2px 18px; margin: 0 -2px; align-items: flex-start; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.grupo { flex: none; display: grid; gap: 10px; }
.grupo-h { display: flex; align-items: center; gap: 10px; padding: 0 4px 0 6px; min-height: 30px; border-bottom: 2px solid var(--g); padding-bottom: 8px; }
.grupo-prep { --g: color-mix(in srgb, var(--ocre) 55%, transparent); }
.grupo-ejec { --g: color-mix(in srgb, var(--acento) 60%, transparent); }
.grupo-cierre { --g: color-mix(in srgb, var(--verde) 55%, transparent); }
.grupo-h h2 { font: 650 13px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.grupo-n { font-size: 12.5px; color: var(--ink-2); font-weight: 550; }
.grupo-venc { font-size: 12.5px; font-weight: 600; }
.grupo-ayuda { font-size: 12px; color: var(--ink-3); }
.grupo-h .btn-ic { margin-left: auto; }
.grupo-cols { display: flex; gap: 10px; align-items: flex-start; }
.grupo-cols .col { width: 244px; flex: none; }
.col.resalta { box-shadow: inset 0 0 0 2px var(--tono), 0 0 0 4px var(--tono-suave); }
.grupo-stub { display: grid; gap: 8px; width: 168px; text-align: left; padding: 14px 14px 12px; border-radius: var(--r-3); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); position: relative; }
.grupo-stub:hover { box-shadow: inset 0 0 0 1px var(--line-2); background: var(--surface-2); }
.grupo-stub-tit { font: 650 12px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.grupo-stub > b { font: 650 30px/1 var(--f-disp); color: var(--ink); }
.grupo-stub ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.grupo-stub li { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.grupo-stub li span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grupo-stub li b { font: 600 12px var(--f-mono); }
.grupo-stub small { font-size: 12px; color: var(--ink-3); }
.grupo-stub > svg { position: absolute; top: 12px; right: 10px; width: 16px; height: 16px; color: var(--ink-3); }
.col { background: color-mix(in srgb, var(--tono) 5%, var(--bg-2)); border-radius: var(--r-3); padding: 12px 10px 10px; display: flex; flex-direction: column; min-height: 220px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, background .15s; scroll-snap-align: start; }
.col.drop-on { box-shadow: inset 0 0 0 2px var(--tono); background: color-mix(in srgb, var(--tono) 10%, var(--bg-2)); }
.col-h { padding: 2px 6px 10px; }
.col-tit { display: flex; align-items: center; gap: 8px; }
.col-tit h3 { font: 620 13.5px var(--f-disp); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-n { font: 600 12px var(--f-mono); color: var(--tono); background: var(--tono-suave); border-radius: 99px; padding: 1px 7px; }
.col-tit .btn-ic { margin-left: auto; }
.col-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.col-monto { display: flex; justify-content: space-between; font-size: 12px; margin-top: 6px; font-weight: 550; color: var(--ink-2); }
.col-lista { display: grid; gap: 9px; align-content: start; flex: 1; min-height: 60px; }
.col-vacia { border: 1.5px dashed var(--line-2); border-radius: 12px; padding: 18px 10px; text-align: center; font-size: 12.5px; color: var(--ink-4); }
.col-colapsada { padding: 12px 8px; }
.col-colapsada .col-tit h2 { font-size: 13px; }
.col-colapsada .col-tit { flex-wrap: wrap; }
.col-colapsada-btn { display: grid; justify-items: center; gap: 2px; padding: 18px 6px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.col-colapsada-btn b { font: 650 26px/1 var(--f-disp); color: var(--tono); }
.col-colapsada-btn span { font-size: 12px; }
.col-colapsada-btn small { font-size: 11.5px; color: var(--ink-3); }

.card { position: relative; background: var(--surface); border-radius: 13px; padding: 12px 13px 11px; box-shadow: var(--sombra-1), inset 0 0 0 1px var(--line); cursor: pointer; display: grid; gap: 8px; transition: box-shadow .18s, transform .18s var(--ease); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-x pan-y; }
.card:hover { box-shadow: var(--sombra-2), inset 0 0 0 1px var(--line-2); transform: translateY(-1px); }
.card.n-vencido { box-shadow: var(--sombra-1), inset 0 0 0 1px var(--line), inset 3px 0 0 var(--rojo); }
.card.n-riesgo { box-shadow: var(--sombra-1), inset 0 0 0 1px var(--line), inset 3px 0 0 var(--ocre); }
.card-top { display: flex; align-items: center; gap: 6px; min-height: 21px; }
.card-cod { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.card-cod small { color: var(--ink-4); }
.card-chips { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; justify-content: flex-end; }
.card-tit { font: 560 13.8px/1.35 var(--f-ui); letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dual-pista { position: relative; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.dual-pista i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.dual-t { background: repeating-linear-gradient(-45deg, var(--line-2) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--line-2); }
.dual-a { background: var(--acento); }
.n-vencido .dual-a { background: var(--rojo); } .n-riesgo .dual-a { background: var(--ocre); }
.dual-ley { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }
.dual-ley b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.card-sig { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.card-sig svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--ink-3); }
.card-sig b { font-weight: 600; }
.sig-pronto, .sig-pronto svg { color: var(--ocre); }
.sig-vencido, .sig-vencido svg { color: var(--rojo); }
.card-pie { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.card-monto { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.card-cnt { margin-left: auto; display: flex; gap: 9px; color: var(--ink-3); font-size: 12px; }
.card-cnt span { display: inline-flex; align-items: center; gap: 3px; }
.card-cnt svg { width: 13px; height: 13px; }
.card.levantando { transform: scale(1.03); box-shadow: var(--sombra-3); }
.card-origen { opacity: .25; display: none; }
.card-hueco { border-radius: 13px; background: color-mix(in srgb, var(--acento) 8%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--acento) 45%, transparent); }
.card-fantasma { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; box-shadow: var(--sombra-3) !important; opacity: .96; transition: none; }
body.arrastrando, body.arrastrando * { cursor: grabbing !important; }

/* ── side sheet ── */
#ficha-root .hoja-velo { position: fixed; inset: 0; background: rgba(16, 14, 10, .32); backdrop-filter: blur(2px); opacity: 0; transition: opacity .25s; z-index: 40; }
#ficha-root .hoja { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100vw); background: var(--bg); z-index: 41; box-shadow: var(--sombra-3); transform: translateX(104%); transition: transform .32s var(--ease); display: flex; }
#ficha-root.in .hoja-velo { opacity: 1; }
#ficha-root.in .hoja { transform: none; }
.hoja-in { flex: 1; overflow-y: auto; padding: 22px 26px 60px; display: grid; gap: 18px; align-content: start; }
.hoja-h-top { display: flex; align-items: center; gap: 10px; }
.hoja-cod { font-size: 12.5px; color: var(--ink-3); }
.hoja-h-top .btn-ic { margin-left: auto; }
.sel-estado { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 99px; background: var(--tono-suave); color: var(--tono); font-size: 12.5px; font-weight: 600; }
.sel-estado select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sel-estado svg { width: 14px; height: 14px; }
.hoja-tit { font: 650 25px/1.18 var(--f-disp); letter-spacing: -.025em; margin: 12px 0 10px; }
.hoja-resp { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.aviso { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 12px; font-size: 13px; font-weight: 520; }
.aviso svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.aviso-vencido { background: var(--rojo-suave); color: var(--rojo); }
.aviso-riesgo { background: var(--ocre-suave); color: var(--ocre); }
.hoja-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.stat { background: var(--surface); padding: 13px 14px 12px; display: grid; gap: 2px; align-content: start; }
.stat-t { font-size: 11.5px; color: var(--ink-3); font-weight: 550; }
.stat-n { font: 650 24px/1.15 var(--f-disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-fecha { font-size: 21px; }
.stat-monto { font-size: 16.5px; letter-spacing: -.01em; margin-top: 4px; }
.stat-s { font-size: 12px; color: var(--ink-3); }
.stat input[type=range] { width: 100%; accent-color: var(--acento); margin: 6px 0 0; height: 18px; }
.mini-barra { height: 5px; background: var(--surface-3); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.mini-barra i { display: block; height: 100%; background: var(--acento); }
.lt { padding: 4px 4px 0; }
.lt-pista { position: relative; height: 26px; }
.lt-pista::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: var(--line-2); border-radius: 2px; }
.lt-rango { position: absolute; top: 10px; height: 6px; border-radius: 99px; background: var(--acento-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 40%, transparent); }
.lt-susp { position: absolute; top: 9px; height: 8px; border-radius: 3px; background: repeating-linear-gradient(-45deg, var(--gris) 0 2px, transparent 2px 5px); }
.lt-hito { position: absolute; top: 7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); border-radius: 3px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink-3); }
:is(.lt-hito, .g-hito, .g-ley-hito).e-conforme { background: var(--acento); box-shadow: inset 0 0 0 2px var(--acento); }
:is(.lt-hito, .g-hito, .g-ley-hito).e-pagado { background: var(--verde); box-shadow: inset 0 0 0 2px var(--verde); }
:is(.lt-hito, .g-hito, .g-ley-hito).e-entregado { background: var(--azul); box-shadow: inset 0 0 0 2px var(--azul); }
:is(.lt-hito, .g-hito, .g-ley-hito).e-observado { background: var(--ocre); box-shadow: inset 0 0 0 2px var(--ocre); }
:is(.lt-hito, .g-hito, .g-ley-hito).e-vencido { background: var(--rojo); box-shadow: inset 0 0 0 2px var(--rojo), 0 0 0 3px var(--rojo-suave); }
.lt-hoy { position: absolute; top: 0; bottom: -2px; width: 2px; background: var(--rojo); transform: translateX(-50%); border-radius: 2px; }
.lt-hoy em { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font: 600 10.5px var(--f-ui); font-style: normal; color: var(--rojo); }
.lt-ley { display: flex; justify-content: space-between; font: 11.5px var(--f-mono); color: var(--ink-3); margin-top: 2px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); position: sticky; top: -22px; background: var(--bg); z-index: 2; margin: 0 -26px; padding: 8px 26px 0; }
.tabs button { position: relative; padding: 9px 12px 11px; font-size: 13.5px; font-weight: 550; color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; }
.tabs button i { font: 600 11px var(--f-mono); font-style: normal; background: var(--surface-3); color: var(--ink-2); border-radius: 99px; padding: 1px 6px; }
.tabs button[aria-selected=true] { color: var(--ink); }
.tabs button[aria-selected=true]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--acento); border-radius: 2px; }
.tab-cuerpo { display: grid; gap: 16px; }

.composer { background: var(--surface); border-radius: var(--r-2); box-shadow: var(--sombra-1), inset 0 0 0 1px var(--line); padding: 4px; }
.composer:focus-within { box-shadow: inset 0 0 0 1px var(--acento), 0 0 0 3px var(--acento-suave); }
.composer textarea { border: 0 !important; box-shadow: none !important; background: transparent; min-height: 74px; font-size: 14px; }
.c-barra { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px; flex-wrap: wrap; }
.c-barra .btn-primario { margin-left: auto; }
.c-avance { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-3); }
.c-avance input { width: 62px !important; height: 32px !important; text-align: right; }
.c-files { list-style: none; margin: 0; padding: 4px 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.c-files li { display: flex; align-items: center; gap: 7px; padding: 4px 4px 4px 4px; border-radius: 9px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; max-width: 220px; }
.c-files img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.c-files svg { width: 18px; height: 18px; color: var(--ink-3); margin-left: 4px; }
.c-files span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.feed { list-style: none; margin: 0; padding: 0; display: grid; }
.fi { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 12px 0; position: relative; }
.fi + .fi { border-top: 1px solid var(--line); }
.fi-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-3); }
.fi-ic svg { width: 16px; height: 16px; }
.fi-c { min-width: 0; display: grid; gap: 6px; justify-items: start; }
.fi-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; width: 100%; }
.fi-h b { font-weight: 600; }
.fi-h time { color: var(--ink-3); font-size: 12px; }
.fi-borrar { margin-left: auto; opacity: 0; }
.fi:hover .fi-borrar, .fi-borrar:focus-visible { opacity: 1; }
.fi-serv { display: inline-flex; gap: 6px; align-items: baseline; font-size: 12.5px; color: var(--acento-ink); font-weight: 550; text-align: left; max-width: 100%; }
.fi-serv:hover { text-decoration: underline; }
.fi-txt { white-space: pre-wrap; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.fi-sis { font-size: 13px; color: var(--ink-2); }
.fi-fotos { display: grid; gap: 4px; width: 100%; max-width: 460px; border-radius: 12px; overflow: hidden; }
.fi-fotos.n1 { grid-template-columns: 1fr; } .fi-fotos.n2 { grid-template-columns: 1fr 1fr; } .fi-fotos.n3, .fi-fotos.n4 { grid-template-columns: 1fr 1fr; }
.fi-fotos.n3 .fi-foto:first-child { grid-row: span 2; }
.fi-foto { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--surface-3); overflow: hidden; }
.fi-fotos.n1 .fi-foto { aspect-ratio: 16 / 10; }
.fi-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.fi-foto:hover img { transform: scale(1.03); }
.fi-foto span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font: 650 22px var(--f-disp); }
.fi-arch { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fi-arch a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 9px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; max-width: 320px; }
.fi-arch a:hover { box-shadow: inset 0 0 0 1px var(--acento); }
.fi-arch svg { width: 16px; height: 16px; color: var(--acento); flex: none; }
.fi-arch span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 520; }
.fi-arch small { color: var(--ink-3); }
.feed-dia { font: 600 12px var(--f-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 18px 0 2px; }
.feed-dia:first-child { margin-top: 0; }
.panel-feed { max-width: 860px; }
.cargando { padding: 20px 0; }

.ents { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ent { position: relative; background: var(--surface); border-radius: var(--r-2); padding: 13px 14px; box-shadow: var(--sombra-1), inset 0 0 0 1px var(--line); display: grid; gap: 10px; }
.ent-vencido { box-shadow: var(--sombra-1), inset 0 0 0 1px var(--line), inset 3px 0 0 var(--rojo); }
.ent-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ent-h b { font-weight: 600; font-size: 14px; }
.sel-ent { width: auto; height: 28px; font-size: 12.5px; font-weight: 600; border: 0; background-color: var(--tono-suave); color: var(--tono); border-radius: 99px; padding: 0 28px 0 11px; margin-left: auto; }
.ent-f { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.ent-f label { display: grid; gap: 4px; font-size: 11.5px; color: var(--ink-3); font-weight: 550; }
.ent-f input { height: 34px; width: 160px; }
.ent-f b { font: 500 13px var(--f-mono); color: var(--ink); }
.ent-cuando { font-size: 12.5px; font-weight: 550; padding-bottom: 8px; }
.ent-nota { height: 34px !important; font-size: 13px; background: var(--surface-2) !important; }
.ent-borrar { position: absolute; top: 10px; right: 10px; }
.add-ent, .add-tarea { display: flex; gap: 8px; flex-wrap: wrap; }
.add-ent input[name=nombre], .add-tarea input[name=texto] { flex: 1 1 220px; }
.add-ent input[type=date], .add-tarea input[type=date] { width: 150px; flex: none; }
.add-ent input[name=pct] { width: 86px; flex: none; }
.add-tarea select { width: auto; flex: 0 1 auto; }
.add-tarea select[name=servicio_id] { flex: 1 1 200px; max-width: 280px; }

.tareas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.tarea { display: flex; align-items: center; gap: 10px; padding: 9px 2px; font-size: 13.5px; }
.tarea + .tarea { border-top: 1px solid var(--line); }
.tarea-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tarea-txt .fi-serv { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarea.hecha .tarea-txt { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.tarea-fecha { font: 500 12px var(--f-mono); color: var(--ink-3); white-space: nowrap; }
.tarea [data-borrar-tarea] { opacity: 0; }
.tarea:hover [data-borrar-tarea], .tarea [data-borrar-tarea]:focus-visible { opacity: 1; }
.check { position: relative; display: grid; place-items: center; cursor: pointer; flex: none; }
.check input { position: absolute; opacity: 0; width: 22px; height: 22px; cursor: pointer; margin: 0; z-index: 1; }
.check i { width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--ink-4); display: grid; place-items: center; transition: all .15s; }
.check i svg { width: 14px; height: 14px; color: #fff; opacity: 0; stroke-width: 2.6; }
.check input:checked + i { background: var(--acento); box-shadow: none; }
.check input:checked + i svg { opacity: 1; }
.check input:focus-visible + i { outline: 2px solid var(--acento); outline-offset: 2px; }
.tarea.vencida .check i { box-shadow: inset 0 0 0 1.5px var(--rojo); }
.hechas { margin-top: 14px; }
.hechas summary { cursor: pointer; font-size: 13px; color: var(--ink-3); font-weight: 550; }

.bloque { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.bloque-h h3 { font: 620 15px var(--f-disp); }
.eventos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.eventos li { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 10px 12px; background: var(--surface); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.eventos li > span:nth-child(2) { flex: 1; display: grid; }
.eventos small { color: var(--ink-3); }
.add-ev { margin-top: 4px; }
.bloque-peligro { justify-items: start; }

/* ── gantt ── */
.gantt-ley { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--ink-3); }
.gantt-ley span { display: inline-flex; align-items: center; gap: 7px; }
.g-ley-barra { width: 22px; height: 8px; border-radius: 99px; background: var(--acento-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 40%, transparent); }
.g-ley-av { width: 22px; height: 8px; border-radius: 99px; background: var(--acento); }
.g-ley-hito { width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink-3); }
.g-ley-susp { width: 22px; height: 8px; border-radius: 2px; background: repeating-linear-gradient(-45deg, var(--gris) 0 2px, transparent 2px 5px); }
.gantt { overflow: auto; background: var(--surface); border-radius: var(--r-3); box-shadow: var(--sombra-1), inset 0 0 0 1px var(--line); max-height: calc(100vh - 220px); }
.g-grid { position: relative; }
.g-cab { display: flex; position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); }
.g-lado { width: 300px; flex: none; position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--line); }
.g-lado-cab { padding: 12px 16px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.g-meses { position: relative; height: 40px; }
.g-meses span { position: absolute; top: 0; height: 100%; padding: 12px 8px; font-size: 12px; font-weight: 550; color: var(--ink-2); border-left: 1px solid var(--line); text-transform: capitalize; white-space: nowrap; }
.g-cuerpo { position: relative; }
.g-lineas { position: absolute; top: 0; bottom: 0; left: 300px; pointer-events: none; z-index: 0; }
.g-lineas i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.g-hoy, .g-proy { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rojo); z-index: 1; }
.g-hoy em, .g-proy em { position: sticky; top: 44px; display: inline-block; transform: translateX(-50%); margin-top: 4px; font: 600 10.5px var(--f-ui); font-style: normal; color: #fff; background: var(--rojo); padding: 2px 6px; border-radius: 99px; white-space: nowrap; }
.g-proy { background: var(--ink-3); width: 1px; }
.g-proy em { background: var(--ink-2); }
.g-ampl { background: var(--ocre); }
.g-ampl em { background: var(--ocre); }
.g-fila { display: flex; position: relative; min-height: 46px; border-bottom: 1px solid var(--line); }
.g-fila:hover { background: color-mix(in srgb, var(--acento) 3%, transparent); }
.g-fila:hover .g-lado { background: color-mix(in srgb, var(--acento) 3%, var(--surface)); }
button.g-lado { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-content: center; column-gap: 8px; text-align: left; padding: 6px 14px 6px 16px; }
button.g-lado .mono { color: var(--ink-3); grid-column: 1; }
button.g-lado b { font-weight: 550; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 1; }
button.g-lado .av { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.g-pista { position: relative; z-index: 1; }
.g-barra { position: absolute; top: 15px; height: 16px; border-radius: 99px; background: var(--acento-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 35%, transparent); overflow: hidden; cursor: pointer; }
.g-barra.n-vencido { background: var(--rojo-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rojo) 40%, transparent); }
.g-barra.n-riesgo { background: var(--ocre-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ocre) 40%, transparent); }
.g-barra.est-culminado { background: var(--gris-suave); box-shadow: none; }
.g-av { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acento); border-radius: 99px; opacity: .9; }
.g-barra.n-vencido .g-av { background: var(--rojo); } .g-barra.n-riesgo .g-av { background: var(--ocre); }
.g-susp { position: absolute; top: 13px; height: 20px; border-radius: 3px; background: repeating-linear-gradient(-45deg, var(--gris) 0 2px, transparent 2px 5px); opacity: .8; }
.g-hito { position: absolute; top: 17px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); border-radius: 3px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink-3); z-index: 2; }
.sin-fechas { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-serv { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; text-align: left; }
.chip-serv:hover { box-shadow: inset 0 0 0 1px var(--acento); }
.chip-serv .mono { color: var(--ink-3); }

/* ── pendientes ── */
.segmentado { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--surface-3); }
.segmentado button { height: 30px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 550; color: var(--ink-2); }
.segmentado button[aria-selected=true] { background: var(--surface); color: var(--ink); box-shadow: var(--sombra-1); }
.sub-h { font: 600 12px var(--f-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 16px 0 6px; display: flex; gap: 6px; }
.sub-h:first-of-type { margin-top: 0; }
.sub-h span { font-family: var(--f-mono); }
.ent-lista { list-style: none; margin: 0; padding: 0; }
.ent-lista button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 6px; border-radius: 10px; }
.ent-lista button:hover { background: var(--surface-2); }
.ent-lista li + li button { border-top: 1px solid var(--line); border-radius: 0; }
.ent-lista-f { display: grid; width: 64px; flex: none; }
.ent-lista-f b { font: 600 13px var(--f-mono); }
.ent-lista-f small { font-size: 11.5px; color: var(--ink-3); }
.ent-lista-f.t-rojo b, .ent-lista-f.t-rojo small { color: var(--rojo); }
.ent-lista-t { flex: 1; min-width: 0; display: grid; }
.ent-lista-t b { font-weight: 580; font-size: 13.5px; }
.ent-lista-t small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── presupuesto ── */
.panel-tabla { padding: 0; overflow: hidden; }
.tabla-scroll { overflow-x: auto; }
.tabla-pp { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 860px; }
.tabla-pp th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding: 11px 12px; border-bottom: 1px solid var(--line); }
.tabla-pp td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabla-pp .num { text-align: right; white-space: nowrap; }
.tabla-pp tr.nv-1 td { background: var(--surface-2); font-weight: 650; font-family: var(--f-disp); font-size: 13.5px; }
.tabla-pp tr.nv-2.grupo td { font-weight: 600; }
.tabla-pp tr.nv-3 td:nth-child(2) { padding-left: 22px; } .tabla-pp tr.nv-4 td:nth-child(2) { padding-left: 34px; }
.tabla-pp tr.deducido td { color: var(--ink-4); }
.tabla-pp tr.deducido td:nth-child(2) { text-decoration: line-through; text-decoration-color: var(--ink-4); }
.tabla-pp tr.hoja:hover td { background: var(--surface-2); }
.tabla-pp tfoot td { font-weight: 650; background: var(--surface-2); border-bottom: 0; padding: 12px; }
.pp-tog { display: inline-flex; align-items: center; gap: 4px; font: inherit; }
.pp-tog svg { width: 14px; height: 14px; color: var(--ink-3); }
.avance-col { width: 150px; white-space: nowrap; }
.avance-col .num { font-size: 12px; color: var(--ink-2); margin-left: 8px; }
.pp-barra { display: inline-block; width: 80px; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; vertical-align: middle; }
.pp-barra i { display: block; height: 100%; background: var(--acento); }
.pp-in { width: 130px !important; height: 30px !important; text-align: right; }

/* ── equipo ── */
.usuarios { list-style: none; margin: 0; padding: 0; display: grid; }
.usuarios li { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.usuarios li + li { border-top: 1px solid var(--line); }
.usuarios li.inactivo { opacity: .5; }
.u-txt { flex: 1; min-width: 0; display: grid; }
.u-txt b { font-weight: 600; }
.u-txt small { color: var(--ink-3); font-size: 12px; }
.credencial { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 14px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); margin-top: 12px; font-size: 13px; }
.credencial span { color: var(--ink-3); }
.credencial b { font-weight: 600; word-break: break-all; }

/* ── overlays ── */
.modal-wrap { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(16,14,10,.38); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s; }
.modal-wrap.in { opacity: 1; }
.modal { width: 100%; background: var(--bg); border-radius: 20px; box-shadow: var(--sombra-3); transform: translateY(10px) scale(.98); transition: transform .25s var(--ease); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal-wrap.in .modal { transform: none; }
.modal-sm { max-width: 440px; } .modal-md { max-width: 600px; }
.modal-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px 22px; }
.modal-h h2 { font: 650 19px var(--f-disp); letter-spacing: -.02em; }
.modal-b { padding: 8px 22px 6px; overflow-y: auto; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px 18px; }
.popover { position: fixed; z-index: 80; min-width: 220px; padding: 6px; border-radius: 14px; background: var(--surface); box-shadow: var(--sombra-3), inset 0 0 0 1px var(--line); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s var(--ease); }
.popover.in { opacity: 1; transform: none; }
.popover button { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border-radius: 9px; font-size: 13.5px; }
.popover button:hover { background: var(--surface-3); }
.popover button svg { width: 18px; height: 18px; color: var(--ink-3); }
.popover .peligro { color: var(--rojo); } .popover .peligro svg { color: var(--rojo); }
.popover hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }
.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); padding: 11px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 520; box-shadow: var(--sombra-3); opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .3s var(--ease); max-width: min(90vw, 520px); }
.toast.in { opacity: 1; transform: none; }
.toast-error { background: var(--rojo); color: #fff; }
.visor { position: fixed; inset: 0; z-index: 95; background: rgba(8,8,6,.92); display: grid; place-items: center; padding: 30px; }
.visor figure { margin: 0; display: grid; gap: 10px; justify-items: center; max-width: 100%; max-height: 100%; }
.visor img { max-width: min(92vw, 1400px); max-height: calc(100vh - 110px); border-radius: 8px; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.visor figcaption { color: rgba(255,255,255,.75); font-size: 13px; display: flex; gap: 14px; align-items: center; }
.visor figcaption a { display: inline-flex; gap: 5px; align-items: center; color: #fff; font-weight: 550; }
.visor figcaption svg { width: 15px; height: 15px; }
.visor .btn-ic { position: absolute; color: #fff; background: rgba(255,255,255,.1); width: 44px; height: 44px; border-radius: 50%; }
.visor .btn-ic:hover { background: rgba(255,255,255,.2); }
.visor-x { top: 18px; right: 18px; }
.visor-nav { top: 50%; transform: translateY(-50%); }
.visor-nav.izq { left: 18px; } .visor-nav.der { right: 18px; }

/* ── responsive ── */
@media (max-width: 1280px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .kpis .kpi:nth-child(n+4) { grid-column: span 1; }
  .resp-fila { grid-template-columns: minmax(160px, 1.2fr) 1.4fr 80px 80px 70px 80px; gap: 10px; }
}
@media (max-width: 1080px) {
  .grid-2, .grid-2-asim, .pulso { grid-template-columns: 1fr; }
  .login { grid-template-columns: 1fr; }
  .login-arte { position: fixed; inset: 0; z-index: -1; opacity: .12; }
}
@media (max-width: 860px) {
  :root { --side: 0px; }
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .main { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a, .tabbar button { flex: 1; display: grid; justify-items: center; gap: 2px; padding: 4px 0; font-size: 10.5px; font-weight: 550; color: var(--ink-3); position: relative; }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar .activo { color: var(--acento); }
  .tabbar .badge { position: absolute; top: 0; left: calc(50% + 6px); min-width: 17px; height: 17px; line-height: 17px; font-size: 10px; padding: 0 4px; }
  .vista { padding: 20px 16px 40px; gap: 18px; }
  .kpis, .kpis-3 { grid-template-columns: 1fr 1fr; }
  .kpi-n { font-size: 27px; }
  .resp-fila { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .resp-quien, .resp-barra { grid-column: 1 / -1; }
  .resp-dato.num { text-align: left; }
  .buscar { min-width: 0; flex: 1 1 100%; }
  .kanban { margin: 0 -16px; padding: 2px 16px 18px; scroll-snap-type: x mandatory; scroll-padding: 16px; }
  .grupo-cols .col { width: 82vw; scroll-snap-align: start; }
  .grupo-ayuda { display: none; }
  #ficha-root .hoja { width: 100vw; }
  .hoja-in { padding: 16px 16px calc(40px + env(safe-area-inset-bottom)); }
  .tabs { margin: 0 -16px; padding: 6px 12px 0; top: -16px; overflow-x: auto; }
  .tabs button { white-space: nowrap; }
  .hoja-stats { grid-template-columns: 1fr 1fr; }
  .form-2, .form-3 { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: auto; }
  .g-lado { width: 170px; }
  .g-lineas { left: 170px; }
  .gantt { max-height: none; }
  .pulso-num b { font-size: 46px; }
  .regla-marca em { display: none; }
  .regla-marca:not(.regla-fin) b { display: none; }
  .regla { margin-bottom: 30px; }
  .ent-f input { width: 140px; }
  .usuarios li { flex-wrap: wrap; }
  .usuarios .u-txt { flex: 1 1 calc(100% - 50px); }
  .modal-wrap { align-items: end; padding: 0; }
  .modal { border-radius: 20px 20px 0 0; max-height: 92vh; padding-bottom: env(safe-area-inset-bottom); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── stage pipeline, deliverable strip, route and review cycle ── */
.sig-azul, .sig-azul svg { color: var(--azul); }
.sig-ciruela, .sig-ciruela svg { color: var(--ciruela); }
.chip-ciruela { --tono: var(--ciruela); --tono-suave: var(--ciruela-suave); }
.t-verde { color: var(--verde); } .t-ciruela { color: var(--ciruela); }
.btn-ocre { background: var(--ocre); color: #fff; }
.btn-ocre:hover { filter: brightness(1.06); }
.btn-ocre-sutil { background: var(--ocre-suave); color: var(--ocre); }
.btn-texto { color: var(--ink-3); padding: 0 8px; }
.btn-texto:hover { color: var(--ink); background: var(--surface-3); }
.modal-ctx { font-size: 13px; margin-bottom: 10px; }

.flujo-res { display: grid; grid-template-columns: 5fr 5fr 1.2fr; gap: 14px; }
.flujo-grupo { display: grid; gap: 8px; min-width: 0; }
.flujo-grupo-t { font: 650 11px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 6px; border-bottom: 2px solid var(--g); }
.fg-prep { --g: color-mix(in srgb, var(--ocre) 55%, transparent); }
.fg-ejec { --g: color-mix(in srgb, var(--acento) 60%, transparent); }
.fg-cierre { --g: color-mix(in srgb, var(--verde) 55%, transparent); }
.flujo-pasos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.flujo-paso { display: grid; gap: 4px; align-content: start; padding: 10px 10px 9px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; transition: box-shadow .15s, transform .15s var(--ease); }
.flujo-paso:hover { box-shadow: inset 0 0 0 1px var(--tono); transform: translateY(-1px); }
.flujo-paso.vacio { opacity: .55; }
.flujo-n { font: 650 24px/1 var(--f-disp); color: var(--tono); letter-spacing: -.02em; }
.flujo-t { font-size: 12px; font-weight: 560; line-height: 1.25; min-height: 30px; }
.flujo-barra { height: 4px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.flujo-barra i { display: block; height: 100%; background: var(--tono); }
.flujo-paso small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ruta { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; position: relative; }
.ruta-paso { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border-radius: 10px; text-align: center; position: relative; color: var(--ink-3); }
.ruta-paso:not(:disabled):hover { background: var(--surface-3); }
.ruta-paso:disabled { cursor: default; }
.ruta-paso::before { content: ''; position: absolute; top: 18px; left: -50%; width: 100%; height: 2px; background: var(--line-2); z-index: 0; }
.ruta-paso:first-child::before { display: none; }
.ruta-paso.hecho::before, .ruta-paso.actual::before { background: var(--acento); }
.ruta-paso i { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--f-mono); font-style: normal; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ruta-paso i svg { width: 14px; height: 14px; stroke-width: 2.6; }
.ruta-paso.hecho i { background: var(--acento); color: #fff; box-shadow: none; }
.ruta-paso.actual i { background: var(--surface); color: var(--acento-ink); box-shadow: inset 0 0 0 2px var(--acento), 0 0 0 4px var(--acento-suave); }
.ruta-paso span { font-size: 11.5px; font-weight: 600; }
.ruta-paso.actual span { color: var(--ink); }
.ruta-paso small { font-size: 10.5px; color: var(--acento-ink); font-weight: 550; line-height: 1.2; }

.ents-res { font-size: 12.5px; }
.ent-est { margin-left: auto; }
.ent-cuando { font-size: 12.5px; font-weight: 550; }
.flujo { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; }
.flujo li { flex: 1; display: grid; justify-items: start; gap: 1px; position: relative; padding-top: 16px; min-width: 0; }
.flujo li::before { content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--line-2); }
.flujo li.hecho::before { background: var(--acento); }
.flujo li i { position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink-4); z-index: 1; }
.flujo li.hecho i { background: var(--acento); box-shadow: none; }
.flujo li.f-ocre.hecho i { background: var(--ocre); }
.flujo li.actual i { box-shadow: inset 0 0 0 2px var(--acento), 0 0 0 4px var(--acento-suave); }
.flujo li span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.flujo li.hecho span { color: var(--ink); }
.flujo li small { font: 500 11px var(--f-mono); color: var(--ink-3); }
.flujo li.actual small { color: var(--acento-ink); font-family: var(--f-ui); }
.flujo-doc { font-family: var(--f-ui) !important; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.ent-nota-txt { font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border-radius: 8px; padding: 7px 10px; }
.ent-acc { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ent-acc .btn-texto { margin-left: auto; }
.ent-corr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.ent-corr label { display: grid; gap: 4px; font-size: 11.5px; color: var(--ink-3); font-weight: 550; min-width: 0; }
.ent-corr input, .ent-corr select { height: 32px; font-size: 13px; }
.ent-corr .span-2 { grid-column: span 2; }
.ent-corr .btn { align-self: end; justify-self: start; }
@media (max-width: 1080px) {
  .flujo-res { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .flujo-pasos { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .ruta-paso span { font-size: 10.5px; }
  .ruta-paso small { display: none; }
  .ent-corr { grid-template-columns: 1fr 1fr; }
  .flujo li span { font-size: 11px; }
}

.etapas { display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 2px 2px 4px; }
.etapas-row { flex-wrap: wrap; }
.etapas::-webkit-scrollbar { display: none; }
.etapas-g { display: grid; gap: 6px; flex: none; }
.etapas-gt { font: 650 10.5px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 4px; border-bottom: 2px solid var(--g); }
.eg-prep { --g: color-mix(in srgb, var(--ocre) 55%, transparent); }
.eg-ejec { --g: color-mix(in srgb, var(--acento) 60%, transparent); }
.eg-cierre { --g: color-mix(in srgb, var(--verde) 55%, transparent); }
.etapas-row { display: flex; gap: 6px; }
.etapa { position: relative; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px 0 9px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; font-weight: 550; color: var(--ink-2); white-space: nowrap; transition: box-shadow .15s, color .15s; }
.etapa:hover { box-shadow: inset 0 0 0 1.5px var(--tono); color: var(--ink); }
.etapa b { font: 650 13px var(--f-mono); color: var(--tono); min-width: 14px; text-align: center; }
.etapa.vacia { opacity: .5; }
.etapa-venc { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; border-radius: 99px; background: var(--rojo); color: #fff; font: 600 10px/17px var(--f-ui); font-style: normal; text-align: center; padding: 0 4px; }

/* ── deliverable chips, progress bar with time tick, legends ── */
.em { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 6px; font: 600 10.5px/1 var(--f-mono); font-style: normal;
  background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.em.e-entregado { background: var(--azul); color: #fff; box-shadow: none; }
.em.e-observado { background: var(--ocre); color: #fff; box-shadow: none; }
.em.e-conforme { background: var(--acento); color: #fff; box-shadow: none; }
.em.e-pagado { background: var(--verde); color: #fff; box-shadow: none; }
.em.e-vencido { background: var(--rojo); color: #fff; box-shadow: none; }
:root[data-theme="dark"] .em:is(.e-entregado, .e-observado, .e-conforme, .e-pagado, .e-vencido) { color: #14130f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .em:is(.e-entregado, .e-observado, .e-conforme, .e-pagado, .e-vencido) { color: #14130f; } }
.em.em-actual { outline: 2px solid var(--ink); outline-offset: 1.5px; }
.em-bloque { display: grid; gap: 5px; }
.em-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.em-lab { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.em-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.em-cnt { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.avb-ley { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-bottom: 5px; }
.avb-ley b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.avb-pista { position: relative; height: 6px; border-radius: 99px; background: var(--surface-3); }
.avb-a { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--acento); }
.avb-atras .avb-a { background: var(--ocre); }
.n-vencido .avb-a { background: var(--rojo); }
.avb-m { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--ink); }
.leyenda-ent { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-3); }
.ley-tit { font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; }
.ley-it { display: inline-flex; align-items: center; gap: 6px; }
.ley-it .em { min-width: 18px; height: 16px; font-size: 9.5px; border-radius: 5px; }
.ley-sep { width: 1px; height: 14px; background: var(--line-2); }
.ley-avb { position: relative; width: 26px; height: 6px; border-radius: 99px; background: var(--surface-3); }
.ley-avb b { position: absolute; left: 0; top: 0; bottom: 0; width: 60%; border-radius: 99px; background: var(--acento); }
.ley-marca { width: 2px; height: 12px; border-radius: 2px; background: var(--ink); }
.gantt-leyendas { display: grid; gap: 8px; }
.gantt-ley .ley-tit { margin-right: 0; }
.g-ley-hoy { width: 2px; height: 12px; background: var(--rojo); border-radius: 2px; }

.lt-em { position: absolute; top: 3px; transform: translateX(-50%); z-index: 1; }
.lt-pista { height: 28px; }
.g-em { position: absolute; top: 13px; transform: translateX(-50%); z-index: 2; }
.g-ley-barra.g-ley-venc { background: var(--rojo-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rojo) 40%, transparent); }
.g-ley-barra.g-ley-riesgo { background: var(--ocre-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ocre) 40%, transparent); }
.lt .leyenda-ent { margin-top: 10px; font-size: 11.5px; gap: 4px 12px; }