/* ══════════════════════════════════════════════════════════════════════
   Paréntesis Hub 2.0 — hoja de estilos

   Identidad: el azul tinta y el rosado son de marca y se usan con cuentagotas.
   La superficie de trabajo es blanca y gris muy claro, para que el dato sea
   lo único con color. La navegación es clara, no un panel oscuro, porque así
   el logo oficial se lee sin tener que alterarle un solo color.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --ink:        #002D40;   /* azul petróleo de marca */
  --ink-deep:   #001B26;
  --accent:     #FB0858;   /* rosado Paréntesis: CTA y foco, nada más */
  --accent-soft:#FFEBF1;

  --canvas:     #F5F7F8;
  --surface:    #FFFFFF;
  --surface-2:  #FAFBFC;
  --line:       #E2E8EB;
  --line-soft:  #EDF1F3;

  --text:       #002D40;
  --text-mid:   #4E6670;
  --muted:      #7C8F98;

  --ok:         #0B7A55;
  --ok-bg:      #E4F4EE;
  --warn:       #9A6300;
  --warn-bg:    #FCF1DC;
  --danger:     #B3261E;
  --danger-bg:  #FBE9E7;
  --info:       #14607F;
  --info-bg:    #E2EFF4;
  --idle:       #6B7C84;
  --idle-bg:    #EEF1F3;

  --r-card:  10px;
  --r-field: 8px;
  --r-pill:  6px;
  --shadow:  0 1px 2px rgba(0,45,64,.05);
  --shadow-pop: 0 12px 32px rgba(0,45,64,.14);
  --nav-w:   236px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
/* Nunca debería hacer falta, pero si algo adentro se resiste a encogerse
   (Safari es especialmente propenso a esto dentro de flex/grid), que se
   desborde para adentro de su propia caja con scroll, no empuje la
   página entera de lado. */
html, body { overflow-x: hidden; }

body {
  background: var(--canvas);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1;
}

.num { font-variant-numeric: tabular-nums; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.hide { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Acceso ─────────────────────────────────────────────────────────── */

#login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1200px 600px at 50% -20%, #FFFFFF 0%, var(--canvas) 60%);
}
.login-box { width: 100%; max-width: 372px; }
.login-mark { display: block; width: 176px; margin: 0 auto 40px; }
.login-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px 26px 24px; box-shadow: var(--shadow);
}
.login-card h1 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 4px; }
.login-card p.lede { color: var(--muted); font-size: 13.5px; margin-bottom: 22px; }
.login-card label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-mid); margin-bottom: 6px; }
.login-card .field + .field { margin-top: 14px; }
.login-msg { min-height: 20px; font-size: 13px; margin-top: 12px; color: var(--danger); }
.login-foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 22px; }

/* ── Estructura ─────────────────────────────────────────────────────── */

/* .app-body hace lo que .app hacía sola antes (la fila nav+main); .app
   ahora es columna para poder apilar la barra de celular arriba de todo
   eso. En escritorio da exactamente lo mismo, porque .mobile-bar no
   ocupa espacio (display:none) hasta que la pantalla es angosta. */
.app { display: flex; flex-direction: column; min-height: 100vh; }
.app-body { display: flex; flex: 1; min-width: 0; }
.mobile-bar { display: none; }

.nav {
  width: var(--nav-w); flex: 0 0 var(--nav-w); min-width: 0;
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; z-index: 40;
}
.nav-mark { padding: 22px 20px 18px; }
.nav-mark img#nav-logo { width: 132px; display: block; }
.nav-mark img#nav-logo-mark { display: none; }
.nav-scroll { flex: 1; overflow-y: auto; padding: 4px 12px 12px; }
.nav-group { margin-top: 16px; }
.nav-group:first-child { margin-top: 0; }
.nav-group > span {
  display: block; font-size: 11.5px; font-weight: 500; color: var(--muted);
  padding: 0 10px 7px;
}
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-field);
  color: var(--text-mid); text-decoration: none; font-size: 13.5px; font-weight: 500;
  position: relative; transition: background .14s, color .14s;
}
.nav a svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.nav a.on::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; background: var(--accent); border-radius: 0 3px 3px 0;
}
.nav-foot { border-top: 1px solid var(--line-soft); padding: 12px; }
.nav-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.nav-user b { display: block; font-size: 13px; font-weight: 600; }
.nav-user small { display: block; font-size: 11.5px; color: var(--muted); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
}

main { flex: 1; min-width: 0; padding: 26px 30px 80px; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-head h1 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.page-head p { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Botones ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-field);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13.5px; font-weight: 500; color: var(--text);
  transition: background .14s, border-color .14s, opacity .14s;
}
.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.btn:hover { background: var(--surface-2); border-color: #D3DBDF; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #E00650; border-color: #E00650; }
.btn.ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.ink:hover { background: var(--ink-deep); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--text-mid); }
.btn.quiet:hover { background: var(--surface-2); }
.btn.danger { color: var(--danger); border-color: #F0CFCC; }
.btn.danger:hover { background: var(--danger-bg); }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ── Tarjetas y métricas ────────────────────────────────────────────── */

.grid { display: grid; gap: 14px; margin-bottom: 16px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g-2-1 { grid-template-columns: 1.7fr 1fr; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow);
}
.card-pad { padding: 18px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--line-soft);
}
.card-head h2 { font-size: 14.5px; font-weight: 600; }
.card-head p { font-size: 12.5px; color: var(--muted); margin-top: 1px; }

.metric { padding: 16px 18px; }
.metric span { display: block; font-size: 12.5px; color: var(--text-mid); font-weight: 500; }
.metric b {
  display: block; font-size: 25px; font-weight: 600; letter-spacing: -.025em;
  line-height: 1.2; margin-top: 6px; font-variant-numeric: tabular-nums;
}
.metric small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.metric.alert b { color: var(--danger); }

/* El corchete del logotipo, usado una sola vez, en la cifra principal. */
.headline { padding: 30px 22px 26px; text-align: center; }
.headline span { display: block; font-size: 13px; color: var(--text-mid); font-weight: 500; }
.headline .figure {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 2vw, 22px); margin-top: 14px;
}
.headline .bracket {
  font-size: clamp(46px, 7vw, 76px); line-height: .8; color: var(--accent);
  font-weight: 300; transform: translateY(-.04em);
}
.headline .amount {
  font-size: clamp(32px, 5.4vw, 54px); font-weight: 600; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.headline .split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.headline .split div b {
  display: block; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.headline .split div span { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ── Barras de proporción (cartera por antigüedad) ──────────────────── */

.bars { padding: 6px 18px 18px; }
.bar-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.bar-row > span:first-child { width: 116px; flex: none; font-size: 13px; color: var(--text-mid); }
.bar-track { flex: 1; height: 8px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.bar-row > b { width: 96px; text-align: right; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Filtros y buscador ─────────────────────────────────────────────── */

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.chip {
  padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--surface); font-size: 13px; color: var(--text-mid);
  transition: background .14s, color .14s, border-color .14s;
}
.chip:hover { border-color: #CFD9DE; }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.search {
  flex: 1; min-width: 200px; max-width: 340px;
  padding: 8px 12px 8px 34px; border: 1px solid var(--line);
  border-radius: var(--r-field); background: var(--surface) no-repeat 11px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8F98' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-size: 15px; outline: none;
}
.search:focus { border-color: var(--accent); }

/* ── Tablas ─────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--muted);
  padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
  background: var(--surface-2);
}
table.data th.r, table.data td.r { text-align: right; }
table.data td {
  padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr.clickable { cursor: pointer; }
table.data tbody tr.clickable:hover { background: var(--surface-2); }
table.data td .primary-cell { font-weight: 500; display: block; }
table.data td .sub-cell { font-size: 12.5px; color: var(--muted); display: block; margin-top: 2px; }
table.data tfoot td {
  padding: 12px 14px; border-top: 1px solid var(--line); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.badge {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.badge.ok     { background: var(--ok-bg);     color: var(--ok); }
.badge.warn   { background: var(--warn-bg);   color: var(--warn); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }
.badge.info   { background: var(--info-bg);   color: var(--info); }
.badge.idle   { background: var(--idle-bg);   color: var(--idle); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }

.row-menu { position: relative; }
.row-menu > button { padding: 4px 8px; border-radius: 6px; color: var(--muted); line-height: 1; }
.row-menu > button:hover { background: var(--line-soft); color: var(--ink); }
.row-menu .menu {
  position: absolute; right: 0; top: 100%; margin-top: 4px; z-index: 30;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-field);
  box-shadow: var(--shadow-pop); min-width: 172px; padding: 5px; text-align: left;
}
.row-menu .menu button {
  display: block; width: 100%; text-align: left; padding: 7px 10px;
  border-radius: 6px; font-size: 13px; color: var(--text);
}
.row-menu .menu button:hover { background: var(--surface-2); }
.row-menu .menu button.danger { color: var(--danger); }

/* ── Estados vacíos y carga ─────────────────────────────────────────── */

.empty { padding: 52px 24px; text-align: center; }

/* Zona de arrastre del cotizador con IA. En reposo es invisible: se ve igual
   que el estado vacío de siempre. Solo al arrastrar un archivo encima aparece
   el borde y el fondo, con el rosado de marca. */
.dropzone {
  border: 1.5px dashed transparent;
  border-radius: var(--r-card);
  transition: background .14s, border-color .14s;
}
.dropzone.over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dropzone.over * { pointer-events: none; }
.empty h3 { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.empty p { color: var(--muted); font-size: 13.5px; max-width: 400px; margin: 0 auto 18px; }
.empty .btn { margin: 0 auto; }

.skeleton {
  background: linear-gradient(90deg, var(--line-soft) 25%, #F7F9FA 50%, var(--line-soft) 75%);
  background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 5px;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.spinner {
  width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite;
}
.spinner.dark { border-color: var(--line); border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Formularios ────────────────────────────────────────────────────── */

.form-section { padding: 18px; border-bottom: 1px solid var(--line-soft); }
.form-section:last-child { border-bottom: none; }
.form-section > h3 { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.form-section > p.hint { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.form-grid { display: grid; gap: 13px; grid-template-columns: repeat(2, 1fr); }
.form-grid.one { grid-template-columns: 1fr; }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.field.wide { grid-column: 1 / -1; }
.field label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-mid); margin-bottom: 5px; }
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 8px 11px; border: 1px solid var(--line);
  border-radius: var(--r-field); background: var(--surface); outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.field textarea { min-height: 74px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(251,8,88,.09);
}
.field input.num, .field input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }
.field input:disabled, .field select:disabled { background: var(--surface-2); color: var(--muted); }
.field small.help { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }
.field small.err { display: block; font-size: 12px; color: var(--danger); margin-top: 5px; }
.field.bad input, .field.bad select { border-color: var(--danger); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

/* Líneas de documento */
/* table-layout: fixed + <colgroup> con anchos explícitos: el ancho de cada
   columna lo decide la columna, nunca el contenido. Un total de 7 dígitos no
   puede volver a empujar ni comprimir cantidad, precio o descuento. */
.lines-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lines { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.lines th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--muted);
  padding: 0 8px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lines th.r { text-align: right; }
.lines td { padding: 4px 4px; vertical-align: middle; overflow: hidden; }
.lines input, .lines select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 7px; outline: none; background: var(--surface);
}
.lines input:focus, .lines select:focus { border-color: var(--accent); }
.lines input.num { text-align: right; font-variant-numeric: tabular-nums; }
/* La celda de total nunca se edita y nunca reparte espacio: si el número no
   cabe, se encoge la tipografía en vez de tocar el layout, y el valor
   completo siempre queda disponible en el title (tooltip). */
.lines td.total {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 500;
  padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: clamp(11.5px, 1.4vw, 13px);
}
.lines .del { color: var(--muted); padding: 6px; border-radius: 6px; line-height: 1; }
.lines .del:hover { color: var(--danger); background: var(--danger-bg); }

/* Pantallas estrechas: en vez de comprimir seis inputs hasta volverlos
   inservibles, cada línea se reorganiza en una tarjeta de dos columnas. */
@media (max-width: 720px) {
  .lines-wrap { overflow-x: visible; }
  .lines, .lines thead, .lines tbody { display: block; width: auto; min-width: 0; }
  .lines thead { display: none; }
  .lines tbody tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px;
    border: 1px solid var(--line); border-radius: var(--r-field);
    padding: 10px; margin-bottom: 8px; position: relative;
  }
  /* Los <td> quedan como ítems de grid: se estiran al ancho de su celda
     (comportamiento por defecto), nunca a auto/fit-content. */
  .lines tbody tr td { display: block; width: 100%; padding: 0; }
  .lines tbody tr td:first-child { grid-column: 1 / -1; }  /* descripción, siempre la primera columna */
  .lines tbody tr td.total {
    grid-column: 1 / -1; text-align: left; font-size: 15px;
    padding-top: 4px; border-top: 1px dashed var(--line-soft);
  }
  .lines tbody tr td.total::before { content: "Total: "; font-weight: 400; color: var(--muted); }
  .lines tbody tr td:last-child { position: absolute; top: 8px; right: 8px; grid-column: unset; }
}

.totals { margin-left: auto; width: 100%; max-width: 320px; margin-top: 16px; }
.totals div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; }
.totals div span { color: var(--text-mid); }
.totals div b { font-variant-numeric: tabular-nums; font-weight: 500; }
.totals div.grand {
  border-top: 1px solid var(--line); margin-top: 6px; padding-top: 11px;
  font-size: 16px;
}
.totals div.grand b { font-weight: 600; }

/* ── Panel lateral (detalle / edición) ──────────────────────────────── */

.scrim {
  position: fixed; inset: 0; background: rgba(0,27,38,.34);
  z-index: 90; display: none; opacity: 0; transition: opacity .18s;
}
.scrim.open { display: block; opacity: 1; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100vw);
  background: var(--canvas); z-index: 91; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .24s cubic-bezier(.3,.8,.3,1);
  box-shadow: var(--shadow-pop);
}
.panel.open { transform: none; }
.panel.narrow { width: min(520px, 100vw); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.panel-head p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.panel-body { flex: 1; overflow-y: auto; padding: 18px 20px 30px; }
.panel-body > .card { margin-bottom: 14px; }
.panel-foot {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 13px 20px; background: var(--surface); border-top: 1px solid var(--line);
}
.panel-foot .left { margin-right: auto; }
.icon-btn { padding: 6px; border-radius: 7px; color: var(--muted); line-height: 1; }
.icon-btn:hover { background: var(--line-soft); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; display: block; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button {
  padding: 9px 13px; font-size: 13.5px; font-weight: 500; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tabs button.off { opacity: .38; cursor: default; }
.tabs button.off:hover { color: var(--muted); }

/* Lista descriptiva de la ficha */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 20px; padding: 18px; }
.facts > div span { display: block; font-size: 12.5px; color: var(--muted); }
.facts > div b { display: block; font-weight: 500; margin-top: 2px; word-break: break-word; }
.facts > div.wide { grid-column: 1 / -1; }

/* ── Confirmación ───────────────────────────────────────────────────── */

.dialog {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
  background: rgba(0,27,38,.34);
}
.dialog .box {
  background: var(--surface); border-radius: 12px; padding: 22px;
  width: 100%; max-width: 400px; box-shadow: var(--shadow-pop);
}
.dialog h3 { font-size: 16px; font-weight: 600; margin-bottom: 7px; }
.dialog p { color: var(--text-mid); font-size: 13.5px; margin-bottom: 18px; }
.dialog .acts { display: flex; justify-content: flex-end; gap: 9px; }

/* Estados enlazados: el diálogo dice qué más va a cambiar antes de tocarlo.
   Cuando hay varias opciones de la misma cotización, se elige cuál fue la
   que ganó en vez de adivinarlo. */
.dialog p + .sync-list, .dialog p + .sync-opts { margin-top: -8px; }
.sync-list { list-style: none; margin: 0 0 18px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-field); }
.sync-list li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.sync-list li + li { margin-top: 6px; }
.sync-list li::before { content: ""; position: absolute; left: 3px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.sync-opts { display: grid; gap: 7px; margin-bottom: 18px; max-height: 42vh; overflow-y: auto; }
.sync-opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface);
  transition: border-color .14s, background .14s; }
.sync-opt:hover { border-color: #CFD9DE; background: var(--surface-2); }
.sync-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.sync-opt input { margin-top: 2px; accent-color: var(--accent); flex: none; }
.sync-opt b { display: block; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sync-opt small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }

/* ── Avisos ─────────────────────────────────────────────────────────── */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 90px);
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 9px;
  font-size: 13.5px; z-index: 200; box-shadow: var(--shadow-pop);
  max-width: min(520px, 92vw); line-height: 1.45; cursor: pointer;
  /* Oculto de verdad al cerrarse: con solo mover el transform, el borde del
     recuadro seguía asomando abajo de la pantalla. */
  opacity: 0; visibility: hidden;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .2s, visibility .2s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast.bad { background: var(--danger); }
/* Un error hay que poder leerlo: se le da más aire y se cierra al tocarlo. */
.toast.bad { padding: 13px 20px; }
.toast .cerrar { opacity: .7; font-size: 12px; margin-left: 10px; }

.notice {
  display: flex; gap: 10px; padding: 12px 15px; border-radius: var(--r-card);
  background: var(--info-bg); color: var(--info); font-size: 13px; margin-bottom: 14px;
}
.notice.warn { background: var(--warn-bg); color: var(--warn); }

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g-2-1, .g3 { grid-template-columns: 1fr; }
}

/* Tableta: el riel se angosta a solo íconos. Se detiene en 641px porque
   abajo de eso el menú deja de ser un riel fijo — se vuelve el cajón que
   se abre con el botón de la barra superior (ver el bloque de celular,
   más abajo), y ahí el nav vuelve a mostrarse completo. */
@media (max-width: 900px) and (min-width: 641px) {
  :root { --nav-w: 64px; }
  .nav-mark { padding: 18px 0; text-align: center; }
  .nav-mark img#nav-logo { display: none; }
  .nav-mark img#nav-logo-mark { display: block; width: 28px; margin: 0 auto; }
  .nav-group > span, .nav a span, .nav-user > div { display: none; }
  .nav a { justify-content: center; padding: 10px 0; }
  .nav-user { justify-content: center; }
  main { padding: 20px 18px 70px; }
}

@media (max-width: 640px) {
  .grid.g2, .grid.g4 { grid-template-columns: 1fr; }
  .form-grid, .form-grid.three { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 21px; }
  .panel { width: 100vw; }
  table.data { font-size: 13px; }
  table.data th, table.data td { padding: 10px; }
}

/* ── Celular: menú de cajón ────────────────────────────────────────────
   Abajo de 641px no hay ancho para un riel fijo, ni angosto (ver el
   bloque de tableta arriba). El nav se vuelve un cajón que entra desde
   la izquierda sobre el contenido, disparado por la barra superior. */
@media (max-width: 640px) {
  .mobile-bar {
    display: flex; align-items: center; gap: 12px;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 60;
  }
  .mobile-bar-mark { width: 22px; height: 22px; object-fit: contain; flex: none; }

  .nav {
    position: fixed; inset: 0 auto 0 0; width: min(84vw, 300px);
    transform: translateX(-100%); transition: transform .22s ease;
    z-index: 95; box-shadow: var(--shadow-pop);
    padding-top: env(safe-area-inset-top);
  }
  .nav.open { transform: translateX(0); }
  /* Adentro del cajón hay ancho de sobra: se ve igual que en escritorio,
     completo, nada de íconos solos. */
  .nav-mark { padding: 22px 20px 18px; text-align: left; }
  .nav-mark img#nav-logo { display: block; }
  .nav-mark img#nav-logo-mark { display: none; }
  .nav-group > span, .nav a span, .nav-user > div { display: block; }
  .nav a { justify-content: flex-start; padding: 8px 10px; }
  .nav-user { justify-content: flex-start; }

  main { padding: 18px 16px 70px; }

  /* Mismo resguardo del principio del archivo, puntual acá para lo que
     más lo necesita: una tarjeta o una tabla no deberían poder empujar
     la página entera de lado nunca, ni siquiera en Safari. */
  .card, .table-wrap, .lines-wrap { min-width: 0; }
}

/* ── Armado de la cotización con IA ──────────────────────────────────────
   Tarjetas por concepto en vez de una fila de tabla: cada concepto tiene
   título editable, viñetas y su costeo, y hay que poder leerlo de un vistazo
   antes de mandárselo a un cliente. Usa los mismos tokens de siempre. */

.concepto {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  margin-bottom: 10px;
  overflow: hidden;
}
.concepto.dudoso { border-color: #E8CFA8; }

.concepto-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px 10px;
}
.concepto-head .idx {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-2); color: var(--muted);
  font-size: 11.5px; font-weight: 600;
  display: grid; place-items: center; margin-top: 3px;
}
.concepto-head input.titulo {
  flex: 1; border: 1px solid transparent; background: transparent;
  font-size: 14.5px; font-weight: 600; color: var(--text);
  padding: 5px 8px; border-radius: var(--r-field); outline: none; min-width: 0;
}
.concepto-head input.titulo:hover { border-color: var(--line); }
.concepto-head input.titulo:focus { border-color: var(--accent); background: var(--surface); }

.concepto-body { padding: 0 14px 12px 46px; }

.vinetas { list-style: none; margin: 0 0 8px; padding: 0; }
.vinetas li { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.vinetas li::before {
  content: "·"; color: var(--accent); font-weight: 700;
  font-size: 17px; line-height: 1; flex: none;
}
.vinetas input {
  flex: 1; border: 1px solid transparent; background: transparent;
  font-size: 13px; color: var(--text-mid);
  padding: 3px 6px; border-radius: 6px; outline: none; min-width: 0;
}
.vinetas input:hover { border-color: var(--line); }
.vinetas input:focus { border-color: var(--accent); background: var(--surface); }
.vinetas .quitar {
  flex: none; color: var(--muted); padding: 2px 5px; border-radius: 5px; line-height: 1;
  opacity: 0; transition: opacity .12s;
}
.vinetas li:hover .quitar, .vinetas .quitar:focus { opacity: 1; }
.vinetas .quitar:hover { color: var(--danger); background: var(--danger-bg); }

.concepto-costeo {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px dashed var(--line-soft);
}
.concepto-costeo .campo { display: flex; flex-direction: column; gap: 3px; }
.concepto-costeo .campo > span { font-size: 11.5px; color: var(--muted); }
.concepto-costeo input {
  width: 88px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 7px; outline: none; text-align: right;
  font-variant-numeric: tabular-nums; background: var(--surface);
}
.concepto-costeo input:focus { border-color: var(--accent); }
.concepto-costeo .precio {
  margin-left: auto; text-align: right; white-space: nowrap;
}
.concepto-costeo .precio span { display: block; font-size: 11.5px; color: var(--muted); }
.concepto-costeo .precio b {
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
}

.concepto-avisos { padding: 0 14px 12px 46px; }
.aviso-linea {
  display: flex; gap: 7px; align-items: flex-start;
  background: var(--warn-bg); color: var(--warn);
  border-radius: var(--r-field); padding: 8px 11px; font-size: 12.5px;
}
.aviso-linea b { font-weight: 600; }

.concepto-original {
  font-size: 12px; color: var(--muted); margin-top: 8px;
  border-left: 2px solid var(--line); padding-left: 10px;
  white-space: pre-wrap; display: none;
}
.concepto-original.abierto { display: block; }

.grupo-tag {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--info-bg); color: var(--info);
  font-size: 11.5px; font-weight: 500; margin-left: 46px; margin-bottom: 6px;
}

/* Caja de "Ajustar con IA" */
.ajuste-ia { display: flex; gap: 8px; align-items: flex-start; }
.ajuste-ia textarea {
  flex: 1; min-height: 62px; resize: vertical;
  padding: 9px 11px; border: 1px solid var(--line);
  border-radius: var(--r-field); outline: none; font-size: 13.5px;
}
.ajuste-ia textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(251,8,88,.09); }

@media (max-width: 640px) {
  .concepto-body, .concepto-avisos { padding-left: 14px; }
  .grupo-tag { margin-left: 14px; }
  .concepto-costeo .precio { margin-left: 0; width: 100%; text-align: left; }
}

/* Acordeón de cálculo avanzado: cerrado por defecto, para que la tarjeta
   muestre primero lo que ve el cliente y no los parámetros de costeo. */
.avanzado { display: none; }
.avanzado.abierto { display: block; }
.check-inline { display: flex; align-items: center; gap: 7px; padding: 6px 0; }
.check-inline input { width: auto; }
.check-inline small { font-size: 12px; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════
   Cotizador
   Es una pantalla más del Hub, no una app injertada: usa el mismo
   page-head, las mismas pestañas, las mismas tarjetas y los mismos
   campos. Lo único propio son las tarjetas de renglón, la hoja de vista
   previa y la barra de total, porque no existen en ninguna otra sección.
   ══════════════════════════════════════════════════════════════════════ */

.cot { padding-bottom: 88px; }
.cot-wrap { max-width: 940px; margin-inline: auto; }
.cot-corr {
  font-size: 11.5px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px; white-space: nowrap;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}

/* Los campos sueltos del Cotizador viven fuera de un .field, así que
   heredan acá el mismo tratamiento que en el resto del Hub. */
.cot textarea, .cot input, .cot select {
  width: 100%; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-field); padding: 9px 11px; color: var(--text); font-size: 14px;
}
.cot textarea { min-height: 74px; resize: vertical; line-height: 1.5; }
.cot textarea:focus, .cot input:focus, .cot select:focus {
  outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent;
}
.cot input.num { text-align: right; font-variant-numeric: tabular-nums; }
.cot input::placeholder, .cot textarea::placeholder { color: #A8BAC2; }
.cot small.err { display: block; font-size: 12px; color: var(--danger); margin-top: 5px; }

/* ── Zona de archivo ─────────────────────────────────────────────── */
.cot-zone {
  background: var(--surface); border: 1.5px dashed rgba(251, 8, 88, .45);
  border-radius: var(--r-card); padding: 38px 24px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cot-zone.over { border-color: var(--accent); background: var(--accent-soft); }
.cot-zone .k { font-weight: 700; font-size: 21px; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 7px; }
.cot-zone .s { color: var(--muted); font-size: 13.5px; line-height: 1.55; max-width: 420px; margin-inline: auto; }
.cot-zone.flat {
  border: 1px solid var(--line); padding: 13px 15px; text-align: left;
  display: flex; align-items: center; gap: 11px;
}
.cot-zone.flat .k, .cot-zone.flat .s { display: none; }
.cot-zone .nm { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cot-zone .st { font-size: 12px; color: var(--ok); white-space: nowrap; }
.cot-zone .st.bad { color: var(--accent); }

.cot-or {
  display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em; margin: 20px 0; font-weight: 600;
}
.cot-or::before, .cot-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.cot-mic-row { display: flex; gap: 10px; align-items: center; margin-top: 11px; }
.cot-mic {
  width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 16px; flex: none; display: flex; align-items: center; justify-content: center;
}
.cot-mic[data-on="1"] { animation: cot-pulse 1.2s ease-in-out infinite; }
@keyframes cot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 8, 88, .5); }
  50%      { box-shadow: 0 0 0 12px rgba(251, 8, 88, 0); }
}
.cot-mic-row span { color: var(--muted); font-size: 12.5px; line-height: 1.4; }

/* ── Pasos ───────────────────────────────────────────────────────── */
.cot-step { margin-top: 26px; }
.cot-step:first-child { margin-top: 0; }
.cot-step-h { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; }
.cot-n { font-size: 12px; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.cot-n::before { content: "( "; } .cot-n::after { content: " )"; }
.cot-t { font-weight: 600; font-size: 16px; letter-spacing: -.015em; }
.cot-h3 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.cot-hint { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-top: 9px; }
.cot-hint b { color: var(--text); font-weight: 500; }
.cot-vacio { color: var(--muted); font-size: 13.5px; text-align: center; padding: 22px 0; }

/* ── Avisos ──────────────────────────────────────────────────────── */
.cot-alert {
  background: var(--accent-soft); border: 1px solid rgba(251, 8, 88, .28);
  border-radius: var(--r-card); padding: 13px 15px; font-size: 13.5px;
  line-height: 1.55; margin-bottom: 14px; color: var(--text);
}
.cot-alert.info { background: var(--ok-bg); border-color: rgba(11, 122, 85, .28); }
.cot-alert b { display: block; margin-bottom: 3px; font-size: 14px; }
.cot-alert pre {
  white-space: pre-wrap; word-break: break-word; font-size: 11px;
  color: var(--text-mid); margin-top: 8px; max-height: 150px; overflow: auto;
}
.cot-alert details { margin-top: 8px; }
.cot-alert summary { cursor: pointer; font-size: 12.5px; color: var(--text-mid); }
.cot-alert-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }

/* ── Renglones ───────────────────────────────────────────────────── */
.cot-line {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 15px; margin-bottom: 10px;
}
.cot-line.mal { border-color: rgba(251, 8, 88, .55); }
.cot-line-top { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 11px; }
.cot-line-top textarea { min-height: 52px; font-weight: 500; }
.cot-line .field { margin-bottom: 0; }
.cot-det { font-size: 13px; }
.cot-x { color: var(--muted); padding: 6px; border-radius: 6px; line-height: 0; flex: none; }
.cot-x:hover { background: var(--surface-2); color: var(--danger); }
.cot-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cot-nums { display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 10px; align-items: end; margin-top: 12px; }
.cot-pv { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cot-pv span { color: var(--muted); font-size: 12.5px; }
.cot-pv b { color: var(--accent); font-weight: 600; font-size: 15px; }
.cot-lerr { color: var(--accent); font-size: 12px; margin-top: 8px; line-height: 1.4; }
.cot-dudoso {
  color: var(--warn); background: var(--warn-bg); border-radius: 6px;
  padding: 7px 9px; font-size: 12px; margin-top: 9px; line-height: 1.4;
}

/* ── Interruptores ───────────────────────────────────────────────── */
.cot-sw {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0 0; margin-top: 11px; border-top: 1px solid var(--line-soft);
  font-size: 13.5px; cursor: pointer;
}
.cot-sw small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; margin-top: 2px; }
.cot-tog {
  width: 44px; height: 26px; border-radius: 999px; background: #DCE4E8;
  position: relative; flex: none; border: 1px solid var(--line);
}
.cot-tog::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .16s;
}
.cot-tog[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.cot-tog[aria-checked="true"]::after { left: 21px; }

/* ── Hoja de vista previa ────────────────────────────────────────── */
.cot-sheet {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 28px 26px; box-shadow: 0 10px 30px rgba(0, 45, 64, .08);
}
.cot-sheet .sh-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  padding-bottom: 15px; border-bottom: 3px solid var(--accent);
}
.cot-sheet .sh-top img { height: 34px; width: auto; }
.cot-sheet .sh-top div { text-align: right; font-size: 11px; color: var(--muted); line-height: 1.5; }
.cot-sheet .sh-top div b { display: block; color: var(--text); font-size: 12.5px; letter-spacing: .06em; }
.cot-sheet .sh-meta { display: flex; gap: 24px; flex-wrap: wrap; margin: 18px 0; }
.cot-sheet .sh-meta div { min-width: 110px; }
.cot-sheet .sh-meta span {
  display: block; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}
.cot-sheet .sh-meta b { font-weight: 500; font-size: 13.5px; }
.cot-sheet .sh-tbl { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
.cot-sheet .sh-tbl th {
  background: var(--ink); color: #fff; font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; padding: 8px; text-align: left; font-weight: 600;
}
.cot-sheet .sh-tbl th:last-child, .cot-sheet .sh-tbl td:last-child { text-align: right; }
.cot-sheet .sh-tbl td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.cot-sheet .sh-tbl td em {
  display: block; font-style: normal; font-size: 11px; color: var(--muted);
  line-height: 1.55; margin-top: 5px;
}
.cot-sheet .sh-tot { margin: 14px 0 0 auto; width: min(280px, 100%); }
.cot-sheet .sh-tot div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.cot-sheet .sh-tot div.f {
  border-top: 2px solid var(--ink); margin-top: 5px; padding-top: 9px;
  font-weight: 700; font-size: 18px;
}
.cot-sheet .sh-son { font-size: 10.5px; color: var(--muted); margin-top: 13px; }
.cot-sheet .sh-cond { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 12px; }
.cot-sheet .sh-cond p { display: flex; gap: 8px; padding: 3px 0; }
.cot-sheet .sh-cond p span {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); min-width: 120px; padding-top: 2px;
}
.cot-sheet .sh-terms { margin-top: 15px; font-size: 11px; line-height: 1.6; }
.cot-sheet .sh-terms h4 {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); margin-bottom: 6px; font-weight: 500;
}
.cot-sheet .sh-terms li { list-style: none; display: flex; gap: 6px; padding: 1.5px 0; }
.cot-sheet .sh-terms li::before { content: "·"; color: var(--accent); font-weight: 700; }
.cot-sheet .sh-foot {
  margin-top: 20px; background: var(--ink); color: #A9C0C9; border-radius: 8px;
  padding: 12px 15px; font-size: 9.5px; line-height: 1.6;
}
.cot-sheet .sh-free {
  background: var(--canvas); border-radius: 9px; padding: 13px 16px; margin-top: 15px;
  display: flex; justify-content: space-between; align-items: center;
}
.cot-sheet .sh-free span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.cot-sheet .sh-free b { font-size: 17px; color: var(--accent); font-weight: 600; }

/* ── Barra de total ───────────────────────────────────────────────────
   Es lo único fijo de todo el Hub. Se gana el lugar: mientras se arma,
   el total al cliente tiene que verse sin tener que subir a buscarlo. */
.cot-bar {
  position: fixed; left: var(--nav-w); right: 0; bottom: 0; z-index: 30;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0, 45, 64, .07);
  padding: 11px 30px calc(11px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px;
}
.cot-bar-tot { flex: 1; min-width: 0; }
.cot-bar-tot small {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}
.cot-bar-tot strong {
  font-size: 22px; font-weight: 700; display: block; line-height: 1.2;
  color: var(--text); letter-spacing: -.02em;
}
.cot-bar-tot strong i { color: var(--accent); font-style: normal; }
.cot-bar-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cot-bar .btn { flex: none; padding: 11px 18px; font-size: 14.5px; }
@media (max-width: 900px) { .cot-bar { padding-left: 18px; padding-right: 18px; } }
@media (max-width: 640px) {
  .cot-bar { flex-wrap: wrap; }
  .cot-bar-acts { width: 100%; }
  .cot-bar-acts .btn { flex: 1; justify-content: center; }
}

/* Rango personalizado del Resumen. */
.rango { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rango label { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.rango input {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-field);
  padding: 7px 10px; font-size: 13px; color: var(--text);
}
.rango input:focus { outline: 2px solid var(--accent); border-color: transparent; }


/* ── Asistente ──────────────────────────────────────────────────────────
   Botón flotante: está en todas las pantallas porque uno le pregunta desde
   donde esté, no desde una sección. Se aparta del borde lo suficiente para
   no chocar con el pie de los paneles. */
.asistente-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(251, 8, 88, .32);
  transition: transform .12s ease, box-shadow .12s ease;
}
.asistente-fab:hover  { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(251, 8, 88, .40); }
.asistente-fab:active { transform: translateY(0); }
.asistente-fab svg {
  width: 21px; height: 21px; fill: currentColor; stroke: none;
}
@media (max-width: 720px) { .asistente-fab { right: 16px; bottom: 16px; } }

/* ── Piezas que faltaban ────────────────────────────────────────────────
   Varias pantallas resolvían estos casos con estilos escritos a mano, o con
   clases que nunca existieron, y el resultado eran textos pegados al borde
   de la tarjeta y tarjetas pegadas entre sí. Acá quedan como piezas del
   sistema, para usarlas igual en todos lados. */

/* Tarjetas y avisos apilados dentro de pestañas (paneles y Configuración):
   fuera de las pestañas ya tenían su espacio, adentro no. */
#tabbody > .card, #tabbody > .notice { margin-bottom: 14px; }

/* Texto secundario: la nota al pie, el "dijiste", la aclaración. */
.muted { color: var(--muted); font-size: 13px; }
.card-pad > * + * { margin-top: 8px; }

/* Botones de acción dentro de una tarjeta, con su aire y su separación. */
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 18px 18px; }

/* Aviso de error, hermano de .notice (información) y .notice.warn. */
.notice.danger { background: var(--danger-bg); color: var(--danger); }
.notice > div > * + * { margin-top: 6px; }

/* Rojo para una fecha vencida o un número en contra dentro de una tabla. */
.text-danger { color: var(--danger); }

/* ── Asistente: la conversación ─────────────────────────────────────────
   Mismos colores, radios y campos que el resto del Hub. Lo que escribe Kev
   va en azul petróleo a la derecha; lo del asistente en blanco con borde a
   la izquierda, como cualquier tarjeta. Los planes van a ancho completo,
   porque son tarjetas con tabla y no caben en una burbuja. */
.chat { display: flex; flex-direction: column; gap: 12px; }
.chat-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--muted); padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft); margin-bottom: 4px;
}
.chat-bar label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chat-bar .btn { font-size: 12px; }
.msg {
  max-width: 86%; padding: 10px 13px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.msg.user { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.msg.bot {
  align-self: flex-start; background: var(--surface); border: 1px solid var(--line);
  border-bottom-left-radius: 4px; box-shadow: var(--shadow);
}
.msg .msg-meta { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); white-space: normal; }
.msg.user .msg-meta { color: rgba(255,255,255,.65); }
.msg.cargando { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); }
.chat > .card { align-self: stretch; }
.chat-intro { text-align: center; padding: 26px 10px 8px; }
.chat-intro h3 { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.chat-intro p { color: var(--muted); font-size: 13px; }

/* El redactor vive en el pie del panel. */
.panel-foot .chat-composer { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.chat-composer .fila { display: flex; gap: 8px; align-items: flex-end; }
.chat-composer textarea {
  flex: 1; min-height: 42px; max-height: 140px; resize: none;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-field);
  background: var(--surface); outline: none; font: inherit; font-size: 13.5px;
  transition: border-color .14s, box-shadow .14s;
}
.chat-composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(251,8,88,.09); }
.chat-composer .adjunto { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.chat-composer .adjunto button { color: var(--muted); }

.chat-bar .acciones { display: inline-flex; gap: 12px; align-items: center; }
.card-pad > .notice:last-child { margin-bottom: 0; }

/* Respuestas del asistente con formato: párrafos, listas y tablas chicas. */
.msg.md { white-space: normal; }
.msg.md.ancho { max-width: 100%; align-self: stretch; }
.msg.md > * + * { margin-top: 8px; }
.msg.md ul, .msg.md ol { padding-left: 20px; }
.msg.md li + li { margin-top: 3px; }
.msg.md b { font-weight: 600; }
.msg.md code {
  font-size: 12px; background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 4px; padding: 0 4px;
}
.msg.md .tabla { overflow-x: auto; margin-left: -4px; margin-right: -4px; }
.msg.md table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.msg.md th {
  text-align: left; font-weight: 500; color: var(--muted); font-size: 11.5px;
  padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.msg.md td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.msg.md tr:last-child td { border-bottom: 0; }
.msg.md td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Por registrar (Bóveda → Hub) ───────────────────────────────────── */
.nav a .nav-count {
  margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; line-height: 1;
  background: var(--accent); color: #fff; border-radius: 999px; padding: 3px 7px; min-width: 20px; text-align: center;
}
table.data th input[type=checkbox], table.data td input[type=checkbox] {
  width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; vertical-align: middle;
}
table.data td .badge + .badge { margin-left: 4px; }
@media (max-width: 900px) and (min-width: 641px) {
  .nav a .nav-count { position: absolute; margin: -14px 0 0 14px; padding: 2px 5px; min-width: 0; font-size: 10px; }
  .nav a { position: relative; }
}
table.data.bandeja .m-only { display: none; }
@media (max-width: 640px) {
  table.data.bandeja .m-hide { display: none; }
  table.data.bandeja .m-only { display: block; }
  table.data.bandeja td:first-child, table.data.bandeja th:first-child { padding-right: 4px; }
}

/* ── Pendientes, búsqueda, tablero y avance de proyectos ───────────── */
.nav-search {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-field);
  background: var(--surface); color: var(--muted); font-size: 13px; text-align: left; cursor: pointer;
}
.nav-search:hover { border-color: #CFD9DE; color: var(--ink); }
.nav-search svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.nav-search kbd { margin-left: auto; font: 500 10.5px/1 inherit; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 3px 5px; }
@media (max-width: 900px) and (min-width: 641px) { .nav-search span, .nav-search kbd { display: none; } .nav-search { justify-content: center; } }

.buscar { position: fixed; inset: 0; z-index: 90; background: rgba(0,27,38,.32); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.buscar-caja { width: 100%; max-width: 620px; background: var(--surface); border-radius: var(--r-card); box-shadow: 0 18px 50px rgba(0,27,38,.25); overflow: hidden; }
.buscar-caja input { width: 100%; border: 0; border-bottom: 1px solid var(--line-soft); padding: 16px 18px; font-size: 15px; outline: none; background: transparent; color: var(--text); }
.buscar-lista { max-height: 56vh; overflow-y: auto; padding: 6px; }
.buscar-lista a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-field); color: var(--text); text-decoration: none; }
.buscar-lista a.on, .buscar-lista a:hover { background: var(--accent-soft); }
.buscar-lista a svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--text-mid); stroke-width: 1.7; }
.buscar-lista a b { display: block; font-size: 13.5px; font-weight: 500; }
.buscar-lista a small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 110px); }
.buscar-vacio { padding: 18px; color: var(--muted); font-size: 13px; text-align: center; }
.buscar-pie { border-top: 1px solid var(--line-soft); padding: 8px 14px; font-size: 11.5px; color: var(--muted); }
@media (max-width: 640px) { .buscar { padding-top: 12px; } .buscar-pie { display: none; } }

button.metric { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
button.metric:hover { border-color: #CFD9DE; }
.metric.active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.nowrap { white-space: nowrap; }
.notice .btn.sm { margin-left: 8px; }

.parahoy { padding: 4px 8px 8px; }
.parahoy-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r-field); color: var(--text); text-decoration: none; }
.parahoy-item + .parahoy-item { border-top: 1px solid var(--line-soft); }
.parahoy-item:hover { background: var(--surface-2); }
.parahoy-item b { display: block; font-size: 13.5px; font-weight: 500; }
.parahoy-item small { display: block; font-size: 12px; color: var(--muted); }
.parahoy-item em { font-style: normal; font-weight: 600; font-size: 13.5px; }
@media (max-width: 640px) { .parahoy-item { grid-template-columns: 1fr auto; } .parahoy-item .badge { display: none; } }

.cyc { display: flex; align-items: center; gap: 3px; margin-top: 5px; }
.cyc i { width: 14px; height: 4px; border-radius: 2px; background: var(--line); }
.cyc i.on { background: var(--ok); }
.cyc small { margin-left: 6px; font-size: 11px; color: var(--muted); }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: transparent; padding: 6px 12px; font-size: 13px; color: var(--text-mid); cursor: pointer; }
.seg button.on { background: var(--ink); color: #fff; }

.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.kanban-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); min-height: 160px; display: flex; flex-direction: column; }
.kanban-col.sobre { border-color: var(--accent); background: var(--accent-soft); }
.kanban-col header { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.kanban-col header span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.kanban-list { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.kanban-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-field); padding: 10px 11px; cursor: pointer; box-shadow: var(--shadow); }
.kanban-card[draggable=true] { cursor: grab; }
.kanban-card:hover { border-color: #CFD9DE; }
.kanban-card.arrastrando { opacity: .45; }
.kanban-card b { display: block; font-size: 12.5px; }
.kanban-card span { display: block; font-size: 13px; margin-top: 2px; }
.kanban-card small { display: block; font-size: 12px; color: var(--muted); margin: 3px 0 4px; }
.kanban-card .badge { font-size: 11px; padding: 2px 7px; margin-right: 4px; }
.kanban-vacio { color: var(--muted); font-size: 12px; text-align: center; padding: 14px 0; }
@media (max-width: 640px) { .kanban { grid-template-columns: repeat(4, 78vw); scroll-snap-type: x mandatory; } .kanban-col { scroll-snap-align: start; } }
a.btn { text-decoration: none; }
.kanban-card .badge { display: inline-block; }
@media (max-width: 640px) {
  .grid.g4.m2 { grid-template-columns: 1fr 1fr; }
  .grid.g4.m2 .metric { padding: 12px 14px; }
  .grid.g4.m2 .metric b { font-size: 21px; }
}

/* ── Resumen: alertas de hoy, gráficos y métricas ──────────────────── */
.alertas-hoy { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 12px 14px 14px; }
.alertas-hoy a { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-field);
  color: var(--text); text-decoration: none; background: var(--surface); }
.alertas-hoy a:hover { border-color: var(--ink); background: var(--surface-2); }
.alertas-hoy b { font-size: 18px; font-weight: 600; color: var(--accent); }
.alertas-hoy span { font-size: 12.5px; color: var(--text-mid); line-height: 1.25; }

.graficos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.graficos .card { margin-bottom: 0; }
@media (max-width: 1100px) { .graficos { grid-template-columns: 1fr; } }
.g-caja { padding: 10px 12px 12px; min-height: 230px; }
.g-lienzo { position: relative; }
.g-lienzo svg { display: block; }
.g-eje { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.g-zona { cursor: crosshair; }
.g-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-mid); margin: 0 0 6px 4px; }
.g-leyenda span, .g-globo span { display: inline-flex; align-items: center; gap: 6px; }
.g-leyenda i, .g-globo i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.g-globo { position: absolute; top: 0; pointer-events: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-field); box-shadow: 0 6px 18px rgba(0,27,38,.12); padding: 8px 10px; font-size: 12px; min-width: 150px; z-index: 2; }
.g-globo b { display: block; font-size: 12px; margin-bottom: 4px; text-transform: capitalize; }
.g-globo span { display: flex; width: 100%; color: var(--text-mid); }
.g-globo em { font-style: normal; margin-left: auto; padding-left: 10px; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.g-globo small { display: block; color: var(--muted); margin-top: 4px; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { padding: 14px 18px; border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); color: var(--text); text-decoration: none; }
.kpi:nth-child(4n+1) { border-left: 0; }
.kpi:nth-child(-n+4) { border-top: 0; }
a.kpi:hover { background: var(--surface-2); }
.kpi span { display: block; font-size: 12.5px; color: var(--text-mid); font-weight: 500; }
.kpi b { display: block; font-size: 21px; font-weight: 600; margin-top: 4px; letter-spacing: -.02em; }
.kpi small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.kpi.mal b { color: var(--danger); }
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(n) { border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft); }
  .kpi:nth-child(2n+1) { border-left: 0; }
  .kpi:nth-child(-n+2) { border-top: 0; }
}
.card.con-aire { margin-bottom: 14px; }
.card-head .btn { white-space: nowrap; }