/* Jair Presupuestos · mismo lenguaje que el Tabulador de honorarios: vidrio, píldoras, etiquetas en versalitas.
   Sin degradados. Todo color sale de los tokens; hay tema de día, de noche y automático (sigue al sistema). */
:root {
  /* superficies (día) */
  --bg: #eef0f6; --panel: #ffffff; --panel-2: #f5f6fa; --hover: rgba(10, 12, 20, .05);
  --glass: rgba(255, 255, 255, .66); --glass-2: rgba(255, 255, 255, .82); --glass-3: #ffffff;
  --line: rgba(10, 12, 20, .10); --line2: rgba(10, 12, 20, .06); --line-strong: rgba(10, 12, 20, .17);
  /* texto */
  --text: #11131a; --muted: #5b6070; --faint: #8b90a0;
  /* acento y estados */
  --accent: #0a84ff; --accent-hover: #0073e6; --accent-soft: rgba(10, 132, 255, .12); --accent-line: rgba(10, 132, 255, .35); --on-accent: #ffffff;
  --ok: #1d8a3a; --ok-soft: rgba(48, 209, 88, .13); --warn: #9a5b00; --warn-soft: rgba(255, 179, 64, .16); --bad: #d63a2f; --bad-soft: rgba(255, 69, 58, .11);
  --ink: #11131a; --on-ink: #ffffff;
  /* comparativa y selección */
  --add: rgba(48, 209, 88, .13); --add-line: rgba(48, 209, 88, .45); --del: rgba(255, 69, 58, .11); --del-line: rgba(255, 69, 58, .40);
  --mod: rgba(255, 179, 64, .16); --mod-line: rgba(255, 179, 64, .55);
  --sel: rgba(10, 132, 255, .20); --selrow: rgba(10, 132, 255, .07); --cap1: #e9ecf3; --cap2: #f2f4f8; --pdf-bg: #5b6069;
  /* verde pastel de acento */
  --presencia: #af52de; --presencia-soft: rgba(175, 82, 222, .12); --remoto: rgba(255, 179, 64, .22);
  --mint: #e4f6ec; --mint-2: #cdeedb; --mint-line: #a6dcbf; --mint-strong: #34b36b; --mint-ink: #1d6a45;
  /* desglose de la cascada */
  --seg-directo: #0a84ff; --seg-ind: #5e5ce6; --seg-fin: #a9b8f5; --seg-util: #34b36b; --seg-cargos: #9ad8b4; --seg-iva: #b8bdc9;
  /* tonos de capítulo: pasteles muy suaves (uno por capítulo, se repiten cada ocho) */
  --t0: #eaf2ff; --t1: #e8f6ee; --t2: #fdf0e3; --t3: #f0ecfb; --t4: #e6f5f6; --t5: #fbecf2; --t6: #f5f3e2; --t7: #ecf0f5;
  /* forma */
  --r-sm: 8px; --r: 12px; --r-lg: 20px;
  --h-ctl: 36px; --row: 28px; --top-h: 60px; --bar-gap: 12px; --bar-h: 62px; --bar-space: calc(var(--bar-h) + var(--bar-gap) * 2);
  --shadow-pop: 0 20px 50px rgba(20, 25, 45, .18); --float-shadow: 0 2px 14px rgba(20, 25, 45, .07);
  --bar-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 30px rgba(20, 25, 45, .12), 0 2px 6px rgba(20, 25, 45, .06);
  --blur: blur(30px) saturate(180%);
  --ease: cubic-bezier(.2, .8, .25, 1); --t: 160ms;
  --mono: "Cascadia Mono", ui-monospace, Consolas, monospace;
  --gato: #4b5160; --gato-2: #eef0f4; --gato-oreja: #e9b7b7; --gato-ojo: #a8d86a; --gato-pupila: #15171d; --gato-boca: #3b2027; --gato-lengua: #e98a9a;
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, "Helvetica Neue", sans-serif;
  font-size: 13.5px; line-height: 1.45; letter-spacing: -.011em; color: var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* noche */
html[data-theme="dark"] {
  --bg: #06070b; --panel: #11131b; --panel-2: #171a24; --hover: rgba(255, 255, 255, .06);
  --glass: rgba(255, 255, 255, .055); --glass-2: rgba(255, 255, 255, .09); --glass-3: rgba(255, 255, 255, .14);
  --line: rgba(255, 255, 255, .10); --line2: rgba(255, 255, 255, .06); --line-strong: rgba(255, 255, 255, .18);
  --text: #f4f5f9; --muted: #a6abbb; --faint: #71778a;
  --accent: #0a84ff; --accent-hover: #3b9bff; --accent-soft: rgba(10, 132, 255, .18); --accent-line: rgba(10, 132, 255, .45);
  --ok: #30d158; --ok-soft: rgba(48, 209, 88, .14); --warn: #ffb340; --warn-soft: rgba(255, 179, 64, .14); --bad: #ff453a; --bad-soft: rgba(255, 69, 58, .14);
  --ink: #f4f5f9; --on-ink: #11131a;
  --add: rgba(48, 209, 88, .14); --del: rgba(255, 69, 58, .14); --mod: rgba(255, 179, 64, .14);
  --sel: rgba(10, 132, 255, .35); --selrow: rgba(10, 132, 255, .12); --cap1: #1b1f2b; --cap2: #161924;
  --mint: rgba(48, 209, 88, .13); --mint-2: rgba(48, 209, 88, .22); --mint-line: rgba(48, 209, 88, .40); --mint-strong: #30d158; --mint-ink: #7fe0a0;
  --seg-fin: #5a64a8; --seg-cargos: #2f7a52; --seg-iva: #5b6070;
  --t0: #152036; --t1: #13251c; --t2: #2a1f14; --t3: #1f1a30; --t4: #12262a; --t5: #2a1822; --t6: #25231a; --t7: #1a1f28;
  --shadow-pop: 0 24px 70px rgba(0, 0, 0, .55); --float-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  --bar-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 14px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
  --gato: #c9ccd6; --gato-2: #3a3e4a; --gato-oreja: #b97f86;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg: #06070b; --panel: #11131b; --panel-2: #171a24; --hover: rgba(255, 255, 255, .06);
    --glass: rgba(255, 255, 255, .055); --glass-2: rgba(255, 255, 255, .09); --glass-3: rgba(255, 255, 255, .14);
    --line: rgba(255, 255, 255, .10); --line2: rgba(255, 255, 255, .06); --line-strong: rgba(255, 255, 255, .18);
    --text: #f4f5f9; --muted: #a6abbb; --faint: #71778a;
    --accent: #0a84ff; --accent-hover: #3b9bff; --accent-soft: rgba(10, 132, 255, .18); --accent-line: rgba(10, 132, 255, .45);
    --ok: #30d158; --ok-soft: rgba(48, 209, 88, .14); --warn: #ffb340; --warn-soft: rgba(255, 179, 64, .14); --bad: #ff453a; --bad-soft: rgba(255, 69, 58, .14);
    --ink: #f4f5f9; --on-ink: #11131a;
    --add: rgba(48, 209, 88, .14); --del: rgba(255, 69, 58, .14); --mod: rgba(255, 179, 64, .14);
    --sel: rgba(10, 132, 255, .35); --selrow: rgba(10, 132, 255, .12); --cap1: #1b1f2b; --cap2: #161924;
    --mint: rgba(48, 209, 88, .13); --mint-2: rgba(48, 209, 88, .22); --mint-line: rgba(48, 209, 88, .40); --mint-strong: #30d158; --mint-ink: #7fe0a0;
    --seg-fin: #5a64a8; --seg-cargos: #2f7a52; --seg-iva: #5b6070;
    --t0: #152036; --t1: #13251c; --t2: #2a1f14; --t3: #1f1a30; --t4: #12262a; --t5: #2a1822; --t6: #25231a; --t7: #1a1f28;
    --shadow-pop: 0 24px 70px rgba(0, 0, 0, .55); --float-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  --bar-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 14px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
    --gato: #c9ccd6; --gato-2: #3a3e4a; --gato-oreja: #b97f86;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: var(--sel); }

/* ---------- controles (píldoras, como el Tabulador) ---------- */
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 0 15px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--glass-2); color: var(--text); font-weight: 590; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform .12s var(--ease);
}
button:hover:not(:disabled) { background: var(--glass-3); border-color: var(--line-strong); }
button:active:not(:disabled) { transform: scale(.97); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: 0 6px 18px rgba(10, 132, 255, .28); }
button.primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 8px 24px rgba(10, 132, 255, .38); }
button.danger { color: var(--bad); border-color: var(--del-line); background: var(--bad-soft); }
button.danger:hover:not(:disabled) { background: var(--bad-soft); }
button.link { min-height: 28px; border: 0; background: none; color: var(--accent); padding: 0 9px; font-weight: 590; box-shadow: none; }
button.link:hover:not(:disabled) { background: var(--accent-soft); }
button.link.danger { color: var(--bad); }
button.link.danger:hover:not(:disabled) { background: var(--bad-soft); }

input[type=text], input[type=search], input[type=number], input[type=date], input:not([type]), select, textarea {
  min-height: var(--h-ctl); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 12px; background: var(--panel);
  font-weight: 500; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}
select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.2 8 10l4-3.8' fill='none' stroke='%238b90a0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px; }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; cursor: pointer; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-soft);
}
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
textarea { resize: vertical; padding-top: 8px; line-height: 1.5; }
label { display: block; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }

/* ---------- barra superior flotante: no toca los bordes, el contenido pasa por debajo ---------- */
.topbar {
  position: fixed; z-index: 20; top: var(--bar-gap); left: 50%; transform: translateX(-50%);
  width: min(1560px, calc(100% - var(--bar-gap) * 2)); display: flex; align-items: center; gap: 12px;
  min-height: var(--top-h); padding: 8px 10px 8px 12px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--glass-2); box-shadow: var(--bar-shadow);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.topbar .brand { display: flex; align-items: center; gap: 11px; min-width: 0; flex: none; color: var(--text); text-decoration: none; }
.brand-logo {
  height: 42px; min-width: 42px; max-width: 170px; border-radius: 12px; flex: none; display: grid; place-items: center; overflow: hidden;
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 16h10M7 12h10M7 8h6' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 24px;
}
.brand-logo.con-logo { background: none; border-radius: 0; }
.brand-logo img { height: 42px; width: auto; max-width: 170px; object-fit: contain; display: block; }
.brand-txt { min-width: 0; display: flex; flex-direction: column; }
.brand-nombre { font-size: 14.5px; font-weight: 640; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.brand-sub { color: var(--faint); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.topspacer { flex: 1; }
.demo-badge { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--mod-line); font-weight: 650; font-size: 11px; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.save-status { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; color: var(--muted); white-space: nowrap; }
.save-status:empty { display: none; }
.usuario-chip { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; padding: 3px 4px 3px 12px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line); white-space: nowrap; }
.usuario-chip[hidden] { display: none; }
/* Pantalla de entrada (servidor en internet) */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.entrar .card { width: min(380px, 100%); display: flex; flex-direction: column; gap: 12px; }
.entrar h1 { margin: 0; font-size: 20px; }
.entrar input { width: 100%; }
.entrar .error-text { color: var(--bad); min-height: 1.2em; margin: 0; }
.save-status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.save-status.saving { background: var(--glass-2); color: var(--muted); }
.save-status.saved { background: var(--ok-soft); color: var(--ok); }
.save-status.error { background: var(--bad); color: #fff; }
.seg.tema-seg button { width: 34px; padding: 0; }
.tema-seg svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- menú en la barra + resumen ---------- */
.shell { position: relative; z-index: 1; display: grid; min-height: 0; }
.topnav { display: flex; align-items: center; gap: 2px; padding: 3px; margin-left: 6px; border-radius: 14px; background: var(--hover); flex: none; }
.topnav a {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border-radius: 11px; color: var(--muted); text-decoration: none;
  font-weight: 580; letter-spacing: -.012em; white-space: nowrap; border: 1px solid transparent;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.topnav a svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.topnav a:hover { color: var(--text); background: var(--glass-2); }
.topnav a.active { background: var(--glass-3); color: var(--text); border-color: var(--line); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.topnav a.active svg { color: var(--accent); opacity: 1; }
.mini { position: relative; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 13px; border-radius: 12px;
  background: var(--glass-2); border: 1px solid var(--line); white-space: nowrap; outline: none; }
.mini:empty { display: none; }
.mini.con-pop { cursor: default; }
.mini:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent-line); }
.mini h6 { margin: 0; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.mini-linea { display: flex; gap: 12px; font-size: 12.5px; color: var(--muted); }
.mini-linea b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 650; }
.mini.con-pop .mini-linea b { color: var(--accent); font-size: 14px; letter-spacing: -.02em; }
.mini-pop {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 260px; padding: 14px; border-radius: 16px;
  background: var(--glass-3); border: 1px solid var(--line); box-shadow: var(--shadow-pop);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.mini:hover .mini-pop, .mini:focus-within .mini-pop { opacity: 1; transform: none; pointer-events: auto; }
.mini-fila { display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; padding: 3px 0; color: var(--muted); }
.mini-fila b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 620; }
.mini-big { margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.mini-big small { font-size: 10.5px; color: var(--faint); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mini-big b { font-size: 19px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--accent); }

/* ---------- páginas ---------- */
main { position: relative; min-height: 0; min-width: 0; overflow: auto; padding-top: var(--bar-space); scroll-padding-top: var(--bar-space); }
.page { padding: 22px 26px 110px; max-width: 1180px; margin: 0 auto; animation: entrar .32s var(--ease); }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page h1 { font-size: 27px; line-height: 1.2; margin: 0 0 14px; font-weight: 700; letter-spacing: -.035em; }
.page h2 { font-size: 15.5px; margin: 26px 0 10px; font-weight: 640; letter-spacing: -.02em; }
.page > .row:has(> h1) { margin-bottom: 16px; }
.page > .row > h1 { margin: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
label.row { gap: 8px; cursor: pointer; }
.spacer { flex: 1; }
.card { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--float-shadow);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 18px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: 11.5px; font-weight: 620; color: var(--faint); letter-spacing: .02em; text-transform: uppercase; margin-left: 2px; }
.crumbs { font-size: 12px; color: var(--faint); margin-bottom: 6px; }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--accent); }

/* ---------- tablas de listado ---------- */
table.list {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
table.list th, table.list td { padding: 10px 12px; border-bottom: 1px solid var(--line2); text-align: left; vertical-align: middle; }
table.list th {
  background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  border-bottom-color: var(--line); position: sticky; top: 0; z-index: 1;
}
table.list th.num, table.list td.num { text-align: right; }
table.list th, table.list td.num, table.list td.small { white-space: nowrap; }
table.list tbody tr:last-child td { border-bottom: 0; }
table.list tbody tr { transition: background-color var(--t) var(--ease); }
table.list tbody tr:hover td { background: var(--panel-2); }
table.list td a { font-weight: 500; text-decoration: none; }
table.list td a:hover { text-decoration: underline; }
table.list td.actions { white-space: nowrap; text-align: right; padding-top: 6px; padding-bottom: 6px; }
.empty { padding: 40px 24px; text-align: center; color: var(--muted); }

/* ---------- tarjetas (obras y presupuestos) ---------- */
.toolbar { margin-bottom: 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.cards-pres { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.tcard {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 172px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px 12px;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.tcard:hover { border-color: var(--line-strong); box-shadow: 0 2px 8px rgba(17, 24, 39, .05); }
.tcard:has(.stretch:focus-visible) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tcard.archivada { background: var(--panel-2); }
.tcard.archivada .tcard-title a { color: var(--muted); }
.tcard-top { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.tcard-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -.005em; }
.tcard-title a { color: var(--text); text-decoration: none; }
.tcard:hover .tcard-title a { color: var(--accent); }
/* el enlace del título cubre toda la tarjeta; las acciones quedan por encima */
.stretch::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.stretch:focus-visible { outline: none; }
.tcard-sub { margin-top: -8px; }
.tcard-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 20px; margin: 0; }
.tcard-meta > div { min-width: 0; }
.tcard-meta > .full { grid-column: 1 / -1; }
.tcard-meta dt { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.tcard-meta dd { margin: 0; overflow-wrap: anywhere; }
.tcard-meta dd.num { text-align: left; }
.tcard-total { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--mint); border: 1px solid var(--mint-2); border-radius: var(--r); }
.tcard-total > span { font-size: 11px; font-weight: 600; color: var(--mint-ink); text-transform: uppercase; letter-spacing: .04em; }
.tcard-total > strong { font-size: 20px; font-weight: 650; letter-spacing: -.01em; text-align: left; }
.tcard-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line2); }
.tcard-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 0 -8px 0 auto; }
.tcard-foot > .spacer { flex: 0 0 0; }
.tcard-actions.start { justify-content: flex-start; margin: 0 0 0 -8px; }
.obra-info .tcard-meta { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--muted); background: var(--line2); border-radius: 999px; padding: 2px 9px; }
.chip.menta { background: var(--mint); color: var(--mint-ink); }
.card-empty { grid-column: 1 / -1; background: var(--panel); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.obra-info { margin-bottom: 24px; }

/* ---------- selector segmentado ---------- */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--line2); border-radius: 8px; }
.seg button { min-height: 28px; border: 0; background: transparent; color: var(--muted); border-radius: var(--r); padding: 0 14px; }
.seg button:hover:not(:disabled) { background: var(--hover); color: var(--text); border: 0; }
.seg button.on, .seg button.on:hover:not(:disabled) { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--line); }

/* ---------- insignias ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); white-space: nowrap;
}
.badge.borrador { background: var(--line2); border-color: var(--line); color: var(--muted); }
.badge.emitido { background: var(--ok-soft); border-color: var(--add-line); color: var(--ok); }
.badge.borrador::before, .badge.emitido::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.matriz { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.badge.manual { color: var(--muted); }
.badge.agregado { background: var(--add); border-color: var(--add-line); color: var(--ok); }
.badge.eliminado { background: var(--del); border-color: var(--del-line); color: var(--bad); }
.badge.modificado { background: var(--mod); border-color: var(--mod-line); color: var(--warn); }

/* ---------- editor ---------- */
.editor {
  display: grid; grid-template-rows: auto auto 1fr; height: 100%; max-width: 1840px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--panel); box-shadow: var(--float-shadow);
}
main:has(> .editor), main:has(> .preview-wrap) { padding: var(--bar-space) 14px 14px; overflow: hidden; }
body.amplia .topbar { display: none; }
body.amplia main:has(> .editor) { padding: 0; }
body.amplia .editor { border-radius: 0; border: 0; max-width: none; }
body.amplia .ed-head { display: none; }
.ed-head { padding: 12px 20px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
.ed-head h1 { font-size: 18px; margin: 0; font-weight: 650; letter-spacing: -.01em; }
.ed-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.ed-tools button { min-height: 30px; padding: 0 10px; }
.ed-tools .sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }
.ed-body { display: grid; grid-template-columns: 1fr 420px; min-height: 0; }
.ed-body.sin-panel { grid-template-columns: 1fr 0; }
.ed-body.sin-panel .side { display: none; }
#btn-panel[aria-pressed='true'] { background: var(--mint); border-color: var(--mint-line); color: var(--mint-ink); }
.readonly-banner { background: var(--ok-soft); color: var(--ok); border-bottom: 1px solid var(--add-line); padding: 8px 20px; display: flex; gap: 10px; align-items: center; font-weight: 500; }
.readonly-banner button { background: var(--panel); }

.vgrid { position: relative; overflow: auto; background: var(--panel); outline: none; min-height: 0; }
.vgrid:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.vg-head, .vg-row { display: grid; grid-template-columns: var(--cols); height: var(--row); align-items: stretch; }
.vg-head {
  position: sticky; top: 0; z-index: 3; background: var(--panel-2); border-bottom: 1px solid var(--line);
  color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
}
.vg-head > div { padding: 0 8px; border-right: 1px solid var(--line2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: calc(var(--row) - 1px); }
.vg-body { position: relative; }
.vg-row { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--line2); }
.vg-row > div { padding: 0 10px; border-right: 1px solid var(--line2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: calc(var(--row) - 1px); }
.vg-row:hover > div { background: var(--panel-2); }
.vg-row.cap1, .vg-row.cap1:hover > div { background: var(--cap1); font-weight: 600; }
.vg-row.cap2, .vg-row.cap2:hover > div { background: var(--cap2); font-weight: 600; }
.vg-row.cap2 .c-descripcion { padding-left: 22px; }
.vg-row.selrow > div { background: var(--selrow); }
.vg-row.marked > div.c-n { background: var(--accent); color: var(--on-accent); }
.vg-row .c-n { color: var(--faint); text-align: right; font-size: 11px; cursor: pointer; user-select: none; }
.vg-row > div.cur { box-shadow: inset 0 0 0 2px var(--accent); background: var(--panel); }
.vg-row > div.invalid { box-shadow: inset 0 0 0 2px var(--bad); background: var(--bad-soft); }
.vg-row .num { font-family: var(--mono); font-size: 12.5px; }
.cell-editor { position: absolute; z-index: 5; border: 2px solid var(--accent); padding: 3px 6px; font-size: 13px; background: var(--panel); border-radius: 0; min-height: 0; box-shadow: none; }
.cell-editor:focus-visible { box-shadow: none; }
textarea.cell-editor { min-height: 90px; resize: both; }
.vg-foot { position: sticky; bottom: 0; z-index: 3; }

.side { border-left: 1px solid var(--line); background: var(--panel); overflow: auto; min-height: 0; }
.side-tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.side-tabs button { min-height: 34px; border: 0; border-radius: var(--r) var(--r) 0 0; padding: 0 12px; background: none; color: var(--muted); }
.side-tabs button:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.side-tabs button.on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); font-weight: 600; }
.side-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.origen { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 12px; margin: 0; }
.origen legend { font-size: 12px; font-weight: 500; color: var(--muted); padding: 0 6px; }
.origen label { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.origen .inactivo { color: var(--muted); font-size: 12px; }
.formula { font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--panel-2); border-radius: var(--r-sm); padding: 2px 6px; }

table.tot { width: 100%; border-collapse: collapse; }
table.tot td { padding: 7px 4px; border-bottom: 1px solid var(--line2); }
table.tot tr.strong td { font-weight: 600; }
table.tot tr.inactiva td { color: var(--faint); }
table.tot tr.inactiva td.num { text-decoration: line-through; }
table.tot tr.total td { font-size: 16px; font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; padding-top: 10px; }
table.tot input { width: 76px; text-align: right; min-height: 28px; padding: 2px 8px; }
.paso { font-size: 11px; color: var(--muted); }
.side-h { margin: 8px 0 0; font-size: 13px; }

.switch-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
  background: var(--mint); border: 1px solid var(--mint-2); border-radius: var(--r-lg); position: relative;
}
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { width: 40px; height: 24px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background-color var(--t) var(--ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform var(--t) var(--ease); }
.switch-row input:checked ~ .switch { background: var(--mint-strong); }
.switch-row input:checked ~ .switch::after { transform: translateX(16px); }
.switch-row input:focus-visible ~ .switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-row input:disabled ~ .switch { opacity: .5; }
.switch-row:has(input:not(:checked)) { background: var(--panel-2); border-color: var(--line); }

.stack { display: flex; flex-direction: column; gap: 8px; }
.stack-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--line2); }
.stack-bar > span { min-width: 3px; }
.stack-leyenda { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--muted); }
.stack-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.stack-leyenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.stack-leyenda b { color: var(--text); font-weight: 600; }
.seg-directo { background: var(--seg-directo); } .seg-ind { background: var(--seg-ind); } .seg-fin { background: var(--seg-fin); }
.seg-util { background: var(--seg-util); } .seg-cargos { background: var(--seg-cargos); } .seg-iva { background: var(--seg-iva); }

.capbars { display: flex; flex-direction: column; gap: 8px; }
.capbar-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.capbar-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capbar.sub .capbar-top { padding-left: 14px; color: var(--muted); }
.capbar-track { height: 6px; background: var(--line2); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.capbar-track > span { display: block; height: 100%; background: var(--mint-strong); border-radius: 999px; }

table.mx { width: 100%; border-collapse: collapse; font-size: 12px; }
table.mx th { background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: 11px; text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); }
table.mx td { padding: 3px 2px; border-bottom: 1px solid var(--line2); vertical-align: top; }
table.mx td.formula-row { border-bottom: 1px solid var(--line); }
table.mx input, table.mx select { width: 100%; min-height: 28px; padding: 2px 6px; font-size: 12px; }
table.mx .num input { text-align: right; }

/* ---------- diálogos ---------- */
dialog {
  border: 1px solid var(--line); border-radius: 12px; padding: 0; max-width: min(1100px, 96vw); max-height: 92vh;
  background: var(--panel); color: var(--text); box-shadow: var(--shadow-pop);
}
dialog[open] { animation: dlg-in 180ms var(--ease); }
dialog::backdrop { background: rgba(17, 24, 39, .40); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }
dialog .dlg { display: flex; flex-direction: column; max-height: 92vh; }
dialog .dlg-head { padding: 16px 20px 12px; font-weight: 650; font-size: 16px; letter-spacing: -.01em; }
dialog .dlg-body { padding: 4px 20px 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
dialog .dlg-foot { padding: 12px 20px; border-top: 1px solid var(--line); background: var(--panel-2); display: flex; gap: 8px; justify-content: flex-end; border-radius: 0 0 12px 12px; }
.errors { color: var(--bad); }
.ok-text { color: var(--ok); }
.warn-text { color: var(--warn); }

.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 1000; }
.toast {
  background: var(--ink); color: var(--on-ink); padding: 10px 14px; border-radius: var(--r-lg); display: flex; gap: 12px; align-items: center;
  box-shadow: var(--shadow-pop); animation: toast-in 180ms var(--ease);
}
.toast.error { background: var(--bad); }
.toast button { min-height: 26px; background: transparent; color: var(--on-ink); border: 1px solid rgba(255, 255, 255, .35); font-weight: 600; padding: 0 10px; }
.toast button:hover:not(:disabled) { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.progress { height: 6px; background: var(--line2); border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); border-radius: 999px; transition: width .2s var(--ease); }

/* ---------- vista previa / comparativa ---------- */
.preview-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 0; height: 100%; }
.preview-wrap aside { padding: 20px; border-right: 1px solid var(--line); background: var(--panel); overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.preview-wrap iframe { width: 100%; height: 100%; border: 0; background: var(--pdf-bg); }
.cmp-table { border-collapse: separate; border-spacing: 0; background: var(--panel); font-size: 12px; }
.cmp-table th, .cmp-table td { border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); padding: 6px 8px; vertical-align: top; }
.cmp-table th { background: var(--panel-2); color: var(--muted); font-weight: 600; text-align: left; position: sticky; top: 0; z-index: 1; border-bottom-color: var(--line); }
.cmp-table td.num { font-family: var(--mono); white-space: nowrap; }
.cmp-table td.agregado { background: var(--add); }
.cmp-table td.eliminado { background: var(--del); }
.cmp-table td.modificado { background: var(--mod); }
.cmp-table tr.nivel1 td { font-weight: 600; background: var(--cap2); }
.cmp-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.cmp-box { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); width: fit-content; max-width: 100%; }
.cmp-box .cmp-table tbody tr:last-child td, .cmp-scroll .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table th:last-child, .cmp-table td:last-child { border-right: 0; }
.cmp-table tbody tr:hover td { background: var(--panel-2); }
.cmp-scroll .cmp-table td:first-child { white-space: nowrap; }
.cmp-scroll .cmp-table td:has(> b:first-child) { min-width: 150px; }
.cmp-table tbody tr:hover td.agregado { background: var(--add); }
.cmp-table tbody tr:hover td.eliminado { background: var(--del); }
.cmp-table tbody tr:hover td.modificado { background: var(--mod); }
.page .row.small:has(> span > b) { margin-bottom: 8px; gap: 16px; }
.variante { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: var(--panel); }
.chg { font-weight: 700; }
.pos { color: var(--bad); }
.neg { color: var(--ok); }
.calib { display: grid; grid-template-columns: 320px 1fr; gap: 16px; min-height: 620px; }
.calib iframe { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--pdf-bg); }
kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-sm); padding: 0 5px; background: var(--panel); }

/* ---------- fondo: mesa de dibujo (lienzo) ---------- */
.fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ---------- Forbes, el gatito ---------- */
.mascota-wrap { position: fixed; left: 0; top: 0; z-index: 70; width: 84px; height: 84px; will-change: transform; }
.forbes-btn {
  width: 84px; height: 84px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; cursor: grab; touch-action: none;
}
.forbes-btn:hover:not(:disabled) { background: none; }
.forbes-btn:active:not(:disabled) { transform: none; }
.forbes-btn.cargado { cursor: grabbing; }
.forbes-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.forbes { width: 100%; height: 100%; display: block; overflow: visible; }
.forbes .f-sombra { fill: rgba(0, 0, 0, .14); }
.forbes .f-pelo, .forbes .f-oreja { fill: var(--gato); }
.forbes .f-pecho { fill: var(--gato-2); }
.forbes .f-pata { fill: var(--gato-2); stroke: var(--gato); stroke-width: 1.4; }
.forbes .f-pierna { fill: none; stroke: var(--gato); stroke-width: 9; stroke-linecap: round; }
.forbes .f-oreja-in { fill: var(--gato-oreja); }
.forbes .f-ojo { fill: var(--gato-ojo); }
.forbes .f-pupila { fill: var(--gato-pupila); }
.forbes .f-feliz, .forbes .f-dormido { fill: none; stroke: var(--gato-2); stroke-width: 2.4; stroke-linecap: round; opacity: 0; }
.forbes .f-nariz { fill: var(--gato-oreja); }
.forbes .f-boca, .forbes .f-bigote { fill: none; stroke: var(--gato-2); stroke-width: 1.4; stroke-linecap: round; }
.forbes .f-bigote { opacity: .7; }
.forbes .f-boca-abierta ellipse { fill: var(--gato-boca); }
.forbes .f-lengua, .forbes .f-lengua-in { fill: var(--gato-lengua); }
.forbes .f-boca-abierta { opacity: 0; transform-origin: 60px 57px; transform: scale(.2); }
.forbes .f-lengua-g { opacity: 0; }
.forbes .f-zzz text { font: 700 9px system-ui, sans-serif; fill: var(--muted); opacity: 0; }
.forbes .f-cola path { fill: none; stroke: var(--gato); stroke-width: 7; stroke-linecap: round; }
.forbes .f-collar path { fill: none; stroke: var(--mint-strong); stroke-width: 3.2; stroke-linecap: round; }
.forbes .f-collar circle { fill: #e6b84a; }
.forbes .f-collar text { font: 700 6px system-ui, sans-serif; fill: #5a4410; }
/* reposo: respira, mueve la cola despacio y parpadea */
.forbes .f-cola { transform-origin: 84px 100px; animation: cola 3.2s ease-in-out infinite; }
.forbes .f-cuerpo { transform-origin: 60px 108px; animation: respira 4s ease-in-out infinite; }
.forbes .f-cabeza, .forbes .f-lengua-g { transform-origin: 60px 66px; transition: transform .6s var(--ease); }
.forbes .f-ojos { transform-box: fill-box; transform-origin: center; animation: parpadeo 5.5s infinite; }
.forbes .f-mirada { transition: transform .25s ease-out; }
.forbes .f-pupila { transform-box: fill-box; transform-origin: center; }
.forbes .f-brazo { transform-origin: 50px 86px; }
.forbes .f-oreja-i { transform-origin: 42px 38px; } .forbes .f-oreja-d { transform-origin: 78px 38px; }
.forbes-btn:hover .f-oreja-i { animation: oreja-i .5s ease-in-out 2; }
/* caricia */
.forbes-btn.ronronea .f-ojos { opacity: 0; }
.forbes-btn.ronronea .f-feliz { opacity: 1; }
.forbes-btn.ronronea .f-cabeza { animation: mimo .4s ease-in-out 4 alternate; }
/* se lame la pata: la sube a la boca, entrecierra los ojos y pasa la lengua */
.forbes-btn.lame .f-brazo { animation: lame-brazo 3.6s ease-in-out; }
.forbes-btn.lame .f-cabeza, .forbes-btn.lame .f-lengua-g { animation: lame-cabeza 3.6s ease-in-out; }
.forbes-btn.lame .f-lengua-g { opacity: 1; }
.forbes-btn.lame .f-lengua { transform-origin: 60px 58px; animation: lengua 3.6s linear; }
.forbes-btn.lame .f-ojos { animation: cierra 3.6s; }
.forbes-btn.lame .f-feliz { animation: abre 3.6s; }
/* mueve la cola con ganas */
.forbes-btn.cola .f-cola { animation: coletazo 2.8s ease-in-out; }
/* mira a un lado y al otro */
.forbes-btn.mira .f-pupila { animation: mira 3.2s ease-in-out; }
.forbes-btn.mira .f-cabeza { animation: mira-cabeza 3.2s ease-in-out; }
/* oreja inquieta */
.forbes-btn.oreja .f-oreja-d { animation: oreja-d .3s ease-in-out 3; }
/* ladea la cabeza, curioso */
.forbes-btn.ladea .f-cabeza { animation: ladea 2.2s ease-in-out; }
/* maúlla: levanta la cara, entrecierra los ojos y abre la boca */
.forbes-btn.maulla .f-cabeza { animation: maulla-cabeza 1.5s ease-in-out; }
.forbes-btn.maulla .f-boca-abierta { animation: boca 1.5s ease-in-out; }
.forbes-btn.maulla .f-boca { opacity: 0; }
.forbes-btn.maulla .f-ojos { animation: entrecierra 1.5s ease-in-out; }
.forbes-btn.maulla .f-oreja-i, .forbes-btn.maulla .f-oreja-d { animation: orejas-atras 1.5s ease-in-out; }
/* bosteza */
.forbes-btn.bosteza .f-cabeza { animation: bosteza-cabeza 2.8s ease-in-out; }
.forbes-btn.bosteza .f-boca-abierta { animation: bostezo 2.8s ease-in-out; }
.forbes-btn.bosteza .f-boca { opacity: 0; }
.forbes-btn.bosteza .f-ojos { animation: cierra 2.8s; }
.forbes-btn.bosteza .f-dormido { animation: abre 2.8s; }
.forbes-btn.bosteza .f-cuerpo { animation: estira 2.8s ease-in-out; }
/* duerme: ojos cerrados, cabeza baja, respiración lenta y zetas */
.forbes-btn.duerme .f-ojos { opacity: 0; animation: none; }
.forbes-btn.duerme .f-dormido { opacity: 1; }
.forbes-btn.duerme .f-cabeza { transform: translateY(4px) rotate(5deg); }
.forbes-btn.duerme .f-cuerpo { animation-duration: 6.5s; }
.forbes-btn.duerme .f-cola { animation: none; transform: rotate(-4deg); }
.forbes-btn.duerme .f-zzz text { animation: zzz 3.6s ease-in-out infinite; }
.forbes-btn.duerme .f-zzz text:nth-child(2) { animation-delay: 1.2s; }
.forbes-btn.duerme .f-zzz text:nth-child(3) { animation-delay: 2.4s; }
.forbes-btn.estira .f-cuerpo { animation: estira 1.8s ease-in-out; }
.forbes-btn.aterriza .forbes { animation: aterriza .5s cubic-bezier(.3, 1.6, .5, 1); }
.forbes-btn.cargado .forbes { transform: rotate(-6deg) scale(1.06); transition: transform .15s; }
.forbes-btn.alerta .f-oreja { fill: var(--bad); }
@keyframes cola { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-12deg); } }
@keyframes coletazo { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-30deg); } 32% { transform: rotate(12deg); } 50% { transform: rotate(-28deg); } 68% { transform: rotate(10deg); } 84% { transform: rotate(-16deg); } }
@keyframes respira { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, 1.03); } }
@keyframes parpadeo { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes oreja-i { 50% { transform: rotate(-12deg); } }
@keyframes oreja-d { 50% { transform: rotate(16deg); } }
@keyframes orejas-atras { 0%, 100% { transform: none; } 25%, 75% { transform: rotate(0) scaleY(.9); } }
@keyframes mimo { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes lame-brazo {
  0%, 100% { transform: none; } 16% { transform: rotate(-146deg); } 28% { transform: rotate(-138deg); } 40% { transform: rotate(-146deg); }
  52% { transform: rotate(-138deg); } 64% { transform: rotate(-146deg); } 84% { transform: rotate(-146deg); }
}
@keyframes lame-cabeza {
  0%, 100% { transform: none; } 16%, 84% { transform: rotate(8deg) translateY(2px); }
  28%, 52% { transform: rotate(10deg) translateY(3.5px); } 40%, 64% { transform: rotate(6deg) translateY(1px); }
}
@keyframes lengua { 0%, 18%, 86%, 100% { opacity: 0; transform: scale(.3); } 22%, 34%, 46%, 58%, 70%, 82% { opacity: 1; transform: scale(1); } 28%, 40%, 52%, 64%, 76% { opacity: 1; transform: scale(.55); } }
@keyframes cierra { 0%, 14%, 88%, 100% { opacity: 1; } 18%, 84% { opacity: 0; } }
@keyframes abre { 0%, 14%, 88%, 100% { opacity: 0; } 18%, 84% { opacity: 1; } }
@keyframes mira { 0%, 100% { transform: none; } 18%, 40% { transform: translateX(-2.4px); } 58%, 82% { transform: translateX(2.4px); } }
@keyframes mira-cabeza { 0%, 100% { transform: none; } 18%, 40% { transform: rotate(-4deg); } 58%, 82% { transform: rotate(4deg); } }
@keyframes ladea { 0%, 100% { transform: none; } 20%, 75% { transform: rotate(13deg); } }
@keyframes maulla-cabeza { 0%, 100% { transform: none; } 22%, 70% { transform: rotate(-5deg) translateY(-3px); } }
@keyframes boca { 0%, 12%, 88%, 100% { opacity: 0; transform: scale(.2); } 28%, 66% { opacity: 1; transform: scale(1); } 46% { opacity: 1; transform: scale(.8, .9); } }
@keyframes entrecierra { 0%, 100% { transform: none; } 22%, 70% { transform: scaleY(.45); } }
@keyframes bosteza-cabeza { 0%, 100% { transform: none; } 25%, 70% { transform: rotate(-8deg) translateY(-3px); } }
@keyframes bostezo { 0%, 10%, 90%, 100% { opacity: 0; transform: scale(.2); } 30%, 72% { opacity: 1; transform: scale(1.35, 1.5); } }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 6px); } 30%, 60% { opacity: .9; } 100% { opacity: 0; transform: translate(6px, -6px); } }
@keyframes estira { 30% { transform: scale(1.12, .86); } 60% { transform: scale(.94, 1.1); } }
@keyframes aterriza { 0% { transform: translateY(-8px); } 100% { transform: none; } }
body.sin-animacion .forbes * { animation: none !important; }
.forbes-globo {
  position: absolute; bottom: calc(100% + 6px); right: 0; width: max-content; max-width: 250px; padding: 10px 14px;
  background: var(--glass-3); color: var(--text); font-size: 13px; line-height: 1.45; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-pop); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  opacity: 0; transform: translateY(4px); transition: opacity 160ms var(--ease), transform 160ms var(--ease); pointer-events: none;
}
.mascota-wrap.globo-abajo .forbes-globo { bottom: auto; top: calc(100% + 6px); }
.mascota-wrap:not(.globo-izq) .forbes-globo { right: auto; left: 0; }
.forbes-globo.visible { opacity: 1; transform: none; }

/* ---------- encabezado de marca (página principal) ---------- */
.hero {
  display: flex; align-items: center; gap: 20px; padding: 18px 20px; margin-bottom: 8px; max-width: 900px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.hero.soltando { border-color: var(--mint-strong); background: var(--mint); }
.hero-logo {
  width: 72px; height: 72px; min-height: 0; flex: none; padding: 6px; border-radius: 10px; overflow: hidden;
  border: 1px dashed var(--line-strong); background: var(--panel-2);
}
.hero-logo:hover:not(:disabled) { border-color: var(--mint-strong); background: var(--mint); }
.hero-logo:has(img) { border-style: solid; border-color: var(--line); background: var(--panel); }
.hero-logo img { width: 100%; height: 100%; object-fit: contain; }
.hero-logo-vacio { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: 11px; }
.hero-logo-vacio b { font-size: 22px; line-height: 1; color: var(--muted); font-weight: 400; }
.hero-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.hero-nombre { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.hero-nombre > span { overflow-wrap: anywhere; }
.hero-lema { margin: 0; color: var(--muted); }
.hero-input { font-size: 16px; font-weight: 600; width: min(520px, 100%); }
.hero-input.lema { font-size: 13px; font-weight: 400; }
.hero-acciones { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.icon-btn { min-height: 32px; width: 32px; padding: 0; border-color: transparent; background: transparent; color: var(--muted); }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover:not(:disabled) { background: var(--mint); color: var(--mint-ink); border-color: transparent; }
.file-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- resumen rápido (tarjetas de indicadores) ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; }
.kpi span { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi b { font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.kpi.menta { background: var(--mint); border-color: var(--mint-2); }
.kpi.menta span { color: var(--mint-ink); }

/* ---------- mini desglose en tarjetas de presupuesto ---------- */
.tcard .stack-bar { height: 8px; }
.tcard .stack-leyenda { font-size: 11px; }

/* ---------- tablas con desglose desplegable ---------- */
table.list tr.expandible { cursor: pointer; }
table.list td.tog { width: 34px; padding-right: 0; }
.tog-btn { min-height: 26px; width: 26px; padding: 0; border-color: transparent; background: transparent; color: var(--muted); border-radius: 7px; }
.tog-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t) var(--ease); }
.tog-btn[aria-expanded='true'] svg { transform: rotate(90deg); }
.tog-btn:hover:not(:disabled) { background: var(--mint); color: var(--mint-ink); border-color: transparent; }
table.list tr.abierta td { background: var(--mint); border-bottom-color: transparent; }
table.list tr.detalle > td { background: var(--panel-2); padding: 0; }
table.list tr.detalle:hover > td { background: var(--panel-2); }
.desglose { padding: 14px 16px 16px 50px; display: flex; flex-direction: column; gap: 12px; animation: abrir 160ms var(--ease); }
@keyframes abrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.desglose-tabla { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.desglose-tabla th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 7px 10px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.desglose-tabla td { padding: 6px 10px; border-bottom: 1px solid var(--line2); }
.desglose-tabla tr:last-child td { border-bottom: 0; }
.desglose-tabla .num { font-family: var(--mono); }
.tipo-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tipo-chip::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .8; }
.tipo-material { background: var(--accent-soft); color: var(--accent); }
.tipo-mano_obra { background: var(--mint); color: var(--mint-ink); }
.tipo-herramienta { background: var(--warn-soft); color: var(--warn); }
.tipo-equipo { background: rgba(94, 92, 230, .15); color: #6b69f0; }
.tipo-subcontrato { background: var(--bad-soft); color: var(--bad); }
.tipo-otro { background: var(--line2); color: var(--muted); }
.fuente-chip { font-size: 11px; color: var(--mint-ink); background: var(--mint); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }

/* ---------- bases externas ---------- */
.pasos-import { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.paso-import { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-weight: 500; }
.paso-import b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--line2); font-size: 12px; }
.paso-import.on { border-color: var(--mint-line); color: var(--mint-ink); background: var(--mint); }
.paso-import.on b { background: var(--mint-strong); color: #fff; }
.paso-import.hecho b { background: var(--mint-2); color: var(--mint-ink); }
.origen-card { display: flex; flex-direction: column; gap: 10px; }
.origen-card .tcard-title { display: flex; align-items: center; gap: 10px; }
.origen-icono { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--mint); color: var(--mint-ink); }
.origen-icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.origen-icono.excel { background: #e3f3e8; color: #1f6b3a; }
.ruta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.subida {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 150px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--panel); padding: 18px; cursor: pointer;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.subida:hover, .subida.soltando { border-color: var(--mint-strong); background: var(--mint); }
.subida b { font-size: 14px; }
.mapeo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; }
.muestra-wrap { overflow: auto; max-height: 280px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.muestra { border-collapse: collapse; font-size: 12px; }
.muestra td, .muestra th { padding: 4px 8px; border-bottom: 1px solid var(--line2); border-right: 1px solid var(--line2); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.muestra th { background: var(--panel-2); color: var(--muted); font-weight: 600; position: sticky; top: 0; }
.muestra tr.enc td { background: var(--mint); font-weight: 600; color: var(--mint-ink); }
.muestra td.mapeada { box-shadow: inset 0 0 0 1px var(--mint-line); }
.resumen-import { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.cifra-fila { display: flex; gap: 14px; flex-wrap: wrap; }
.cifra { display: flex; flex-direction: column; }
.cifra b { font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.cifra span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.cifra.nuevo b { color: var(--mint-ink); } .cifra.cambia b { color: var(--warn); }
.cargando { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.cargando::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--mint-2); border-top-color: var(--mint-strong); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- pantallas angostas ---------- */
@media (max-width: 1440px) { .brand-sub { display: none; } }
@media (max-width: 1220px) {
  .topnav a { padding: 0 10px; }
  .topnav a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .brand-nombre { max-width: 200px; }
}
@media (max-width: 900px) {
  :root { --bar-gap: 8px; }
  .topbar { padding: 6px 8px; gap: 6px; border-radius: 16px; }
  .brand-txt, .demo-badge, .mini { display: none; }
  .topnav { margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .page { padding: 14px 14px 110px; }
  .hero { flex-direction: column; align-items: flex-start; }
  main:has(> .editor), main:has(> .preview-wrap) { padding: var(--bar-space) 6px 6px; }
  .ed-body { grid-template-columns: 1fr; }
  .ed-body .side { border-left: 0; border-top: 1px solid var(--line); max-height: 45vh; }
  .preview-wrap, .calib { grid-template-columns: 1fr; }
  .desglose { padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .forbes * { animation: none !important; }
}
.tcard.elegida { border-color: var(--mint-strong); box-shadow: 0 0 0 3px var(--mint); }
table.tot td:nth-child(2) { white-space: nowrap; width: 1%; }
table.tot td:first-child { padding-right: 8px; }
.desglose-tabla th.num, .desglose-tabla td.num { text-align: right; }
.nw { white-space: nowrap; }
.switch-row.compacto { padding: 10px 12px; gap: 10px; }

/* ---------- capítulos con tono pastel (uno distinto por capítulo) ---------- */
.vg-row.tono-0 { --tc: var(--t0); } .vg-row.tono-1 { --tc: var(--t1); } .vg-row.tono-2 { --tc: var(--t2); } .vg-row.tono-3 { --tc: var(--t3); }
.vg-row.tono-4 { --tc: var(--t4); } .vg-row.tono-5 { --tc: var(--t5); } .vg-row.tono-6 { --tc: var(--t6); } .vg-row.tono-7 { --tc: var(--t7); }
.vg-row[class*='tono-'] > div { background: color-mix(in srgb, var(--tc) 42%, var(--panel)); }
.vg-row[class*='tono-'].cap1 > div { background: var(--tc); }
.vg-row[class*='tono-'].cap2 > div { background: color-mix(in srgb, var(--tc) 72%, var(--panel)); }
.vg-row[class*='tono-']:hover > div { background: color-mix(in srgb, var(--tc) 70%, var(--panel)); }
.vg-row[class*='tono-'].selrow > div { background: color-mix(in srgb, var(--accent) 9%, var(--tc)); }
.vg-row[class*='tono-'] > div.cur { background: var(--panel); }
.vg-row[class*='tono-'].cap1 > div.c-n { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--tc) 40%, var(--text)); }

/* ---------- renglones con texto completo ---------- */
.vg-row.multi > div { line-height: 18px; padding-top: calc((var(--row) - 18px) / 2); }
.vg-row.multi .c-descripcion, .vg-row.multi .c-observaciones { white-space: pre-wrap; text-overflow: clip; overflow-wrap: anywhere; }
.vg-row.multi .c-origen { display: flex; align-items: flex-start; }
#btn-completo[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.img-cuenta { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 650; vertical-align: 1px; }
.img-cuenta svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- selector de unidades en cascada ---------- */
.uni-velo { position: fixed; inset: 0; z-index: 900; }
.uni-pop {
  position: fixed; z-index: 901; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px;
  background: var(--glass-3); border: 1px solid var(--line); box-shadow: var(--shadow-pop); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  animation: entrar .16s var(--ease);
}
.uni-buscar { width: 100%; }
.uni-cols { display: grid; grid-template-columns: 150px 1fr; gap: 8px; height: 230px; }
.uni-tipos, .uni-lista { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.uni-tipos { border-right: 1px solid var(--line); padding-right: 8px; }
.uni-tipos button, .uni-lista button {
  justify-content: flex-start; min-height: 30px; border: 0; border-radius: 9px; background: transparent; box-shadow: none; font-weight: 560; padding: 0 10px; text-align: left;
}
.uni-tipos button:disabled { opacity: .45; }
.uni-tipos button.on, .uni-lista button.on { background: var(--accent-soft); color: var(--accent); }
.uni-lista button b { min-width: 52px; font-family: var(--mono); font-size: 12.5px; }
.uni-lista button span { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.uni-lista button i { margin-left: auto; font-style: normal; font-size: 11px; color: var(--faint); }
.uni-lista button.actual b::after { content: " ✓"; color: var(--ok); }
.uni-pie { padding: 0 4px; }
.uni-boton { justify-content: flex-start; min-width: 90px; border-radius: var(--r); font-family: var(--mono); }

/* ---------- imágenes de muestra del concepto ---------- */
.img-zona { border-radius: var(--r); padding: 2px; transition: background-color var(--t); }
.img-zona.soltando { background: var(--accent-soft); }
.imgs { display: flex; flex-wrap: wrap; gap: 8px; }
.img-mini { position: relative; margin: 0; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.img-mini img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.img-quitar { position: absolute; top: 4px; right: 4px; min-height: 22px; width: 22px; padding: 0; font-size: 14px; line-height: 1; background: rgba(0, 0, 0, .55); color: #fff; border: 0; }
.img-quitar:hover:not(:disabled) { background: var(--bad); }
.img-agregar { width: 84px; height: 84px; min-height: 0; flex-direction: column; gap: 2px; border-radius: 12px; border-style: dashed; font-size: 22px; font-weight: 400; color: var(--muted); }
.img-agregar span { font-size: 11px; font-weight: 600; }
.img-grande { max-width: 100%; max-height: 72vh; display: block; margin: 0 auto; border-radius: 10px; }
.clave-cap { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r); background: var(--panel-2); border: 1px solid var(--line2); }
.nota-integrado { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: 12px; }
/* conceptos dentro de un subcapítulo: sangría y filete, para distinguirlos de los del capítulo */
.vg-row.ensub .c-descripcion { padding-left: 24px; box-shadow: inset 12px 0 0 -10px color-mix(in srgb, var(--tc, var(--line)) 55%, var(--text)); }

/* Edición compartida: quién más está en el presupuesto y qué acaba de cambiar */
.presencia { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.presencia-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--presencia-soft); color: var(--text); border: 1px solid var(--line); white-space: nowrap; }
.presencia-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--presencia); }
.presencia-chip span { color: var(--muted); }
.vg-row.otro::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--presencia); z-index: 2; pointer-events: none; }
.vg-row.otro > div.c-n { background: var(--presencia-soft); color: var(--presencia); font-weight: 700; }
.vg-row.remoto > div { animation: remoto 2.5s var(--ease); }
@keyframes remoto { from { background: var(--remoto); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .vg-row.remoto > div { animation: none; background: var(--remoto); } }