/* Toast del kit de fluidez: en escritorio no hay barra superior, así que va
   pegado arriba. En móvil (movil.css) baja para no tapar la barra. */
:root { --ux-toast-top: 20px; }

/* Tintas de estado para texto chico. --warn (#d1810c) da 3,1:1 sobre blanco y
   2,7:1 sobre su fondo teñido, y --ok 4,3:1 sobre el suyo: por debajo del
   4,5:1 de WCAG AA en píldoras de 12 px («Estancado · 28 días», «Pendiente»,
   «Activo»). Estas pasan en blanco, crema y su tinte (≥ 4,8:1). --warn y --ok
   siguen en bordes, franjas, iconos y cifras grandes. */
:root {
  --warn-ink: #945700;
  --ok-ink:   #1a7540;
}

/* ============================================================================
   Leads — estilos propios. La base (tokens, shell B, botones, tarjetas, tablas,
   avisos, modales) es ciso-ui.css de guia-estilos, sin tocar. Aquí van las
   piezas del diseño de Leads que no están en el sistema común.
   Sin style="" en las vistas (CSP sin 'unsafe-inline'): los anchos y alturas
   dinámicos viajan en data-w / data-h / data-l / data-top / data-b y los
   aplica public/js/app.js.
   Regla 1 del estándar: ningún color de marca fuera de :root (ciso-ui.css).
   ========================================================================== */

/* Inter variable 400–800, latin + latin-ext. Archivos de rat@master
   (lamp/public/fonts), SIL OFL 1.1 — ver fonts/LICENSE.txt. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body { margin: 0; background: var(--cream); }

/* Lo que pinta el navegador también lleva la paleta: el texto seleccionado se
   tiñe de dorado suave en vez del azul del sistema, el cursor de escritura es
   dorado como el borde del campo enfocado, y las casillas nativas, navy. */
::selection { background: color-mix(in srgb, var(--gold) 22%, transparent); }
:root { accent-color: var(--navy); caret-color: var(--gold); }

/* Avisos: caja con borde de 1 px y fondo teñido, sin barra lateral de color
   (estándar §13.4). La nota informativa traía un filo navy de 3 px a la
   izquierda; ahora todo su borde lleva el mismo tinte navy. */
.note-box { border: 1px solid color-mix(in srgb, var(--navy) 16%, transparent); }
/* Esquinas concéntricas: dentro de un modal de radio 10 y 32 px de acolchado,
   los avisos llevaban también radio 10 y se veían más redondos que el marco. */
.modal-box .err-box, .modal-box .ok-box, .modal-box .warn-box { border-radius: var(--r); }
.cv a { color: var(--navy); text-decoration: none; }
.cv a:hover { color: var(--gold); }
/* Enlaces con forma de botón: el color de .cv a (navy, dorado al pasar) les
   ganaba al de su variante. «Ir a Inicio» (aviso de pantalla solo escritorio
   en el teléfono) y «Ver la integración» (Carga proyectada) quedaban navy
   sobre navy, invisibles, y «Reintentar» se volvía dorado sobre dorado al
   pasar. Cada variante recupera su letra, igual que en un <button>. */
.cv a.btn-primary, .cv a.btn-primary:hover,
.cv a.btn-ghost-invert, .cv a.btn-ghost-invert:hover { color: var(--navy-on); }
.cv a.btn-gold, .cv a.btn-gold:hover { color: var(--gold-on); }
.cv a.btn-prev, .cv a.btn-prev:hover { color: var(--navy); }
.cv a.btn-ghost { color: var(--sub); }
.cv a.btn-ghost:hover { color: var(--navy); }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 2000; background: var(--gold); color: var(--gold-on); padding: 8px 14px; border-radius: var(--r); font-weight: 700; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Los campos de texto llevan el foco en su borde, más un halo suave del mismo
   color. El navegador los marca focus-visible también al hacer clic, y el
   anillo separado encima del borde dorado se veía como un borde doble. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-focus) 22%, transparent);
}

/* Cifras de ancho fijo donde se comparan montos, horas, porcentajes y fechas.
   Con las cifras proporcionales de Inter un «1» ocupa menos que un «0»: las
   columnas de UF de la tabla y del kanban no quedaban alineadas y las cifras
   cambiaban de ancho entre filas. Solo cambia el ancho de los dígitos. */
.data-table,
.kb-sums, .kb-count, .kb-uf, .kb-money, .kb-next,
.ag-count, .mini-pct, .occ-pct,
.prob-value, .data-v, .kv-row, .tl-top, .step-p,
.co-stat, .chart-tick, .chart-over, .chart-yr, .mchart-lbl,
.funnel-bar, .funnel-row, .hbar-row, .stage-times,
.fl-input, .composer-date, .svc-h, .num-input {
  font-variant-numeric: tabular-nums;
}

/* Cortes de línea. Los títulos reparten sus palabras en líneas parecidas en
   vez de dejar una colgando, y los textos de apoyo evitan la viuda de una
   palabra al final. Donde el navegador no lo entiende, corta como siempre. */
.lead-title, .co-title, .l-title, .modal-title, .card-title,
.kb-card-t, .empty-state strong, .ux-dialogo-titulo {
  text-wrap: balance;
}
.card-sub, .modal-sub, .form-help, .l-sub, .l-help, .kb-hint,
.funnel-foot, .ag-sub, .lead-sub, .empty-state, .note-box, .warn-box,
.err-box, .ok-box, .tl-text, .sb-mob-note, .ux-dialogo-texto {
  text-wrap: pretty;
}

/* ── Utilidades ─────────────────────────────────────────────────────────── */
.grow { flex: 1; min-width: 0; }
.min0 { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.page > .stack { gap: 18px; }
.t11 { font-size: 11px; } .t12 { font-size: 12px; } .t13 { font-size: 13px; }
.sub { color: var(--sub); }
.fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.c-navy { color: var(--navy); } .c-err { color: var(--err); } .c-ok { color: var(--ok); }
.fuerte-navy { font-weight: 700; color: var(--navy); }
.ta-r { text-align: right; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-155 { line-height: 1.55; }
.self-start { align-self: flex-start; }
.ml-auto { margin-left: auto; }
.mt-2 { margin-top: 2px; } .mt-3 { margin-top: 3px; } .mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; }
.mt-10 { margin-top: 10px; } .mt-14 { margin-top: 14px; }
.mb-0 { margin-bottom: 0; } .mb-6 { margin-bottom: 6px; } .mb-8 { margin-bottom: 8px; } .mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; } .mb-14 { margin-bottom: 14px; } .mb-16 { margin-bottom: 16px; }
.w-110 { width: 110px !important; } .w-140 { width: 140px !important; }
.lbl-navy { color: var(--navy); }
.err-trace { overflow-x: auto; text-align: left; font-size: 12px; margin-top: 16px; }
.mob-only { display: none; }

/* ── Shell: extras del diseño ───────────────────────────────────────────── */
.shell-op .sb-demo { margin: 0 6px; padding: 7px 10px; border: 1px dashed color-mix(in srgb, var(--navy-on) 25%, transparent); border-radius: var(--r); font-size: 11px; line-height: 1.4; color: color-mix(in srgb, var(--navy-on) 65%, transparent); }
.shell-op .sb-demo strong { color: var(--gold-light); }
.shell-op .sb-pill-wrap { padding: 0 6px; }
.shell-op .sb-pill-wrap .user-pill { cursor: default; white-space: normal; text-align: left; }
.shell-op .sb-mob-note { font-size: 11px; color: color-mix(in srgb, var(--navy-on) 45%, transparent); padding: 14px 12px; line-height: 1.5; }
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(25, 47, 80, .5); z-index: 55; }
.app-badge-sm { font-size: 11px; padding: 4px 8px; }
.topbar-title { font-weight: 700; font-size: 15px; flex: 1; }
.topbar-rol { font-size: 11px; color: var(--gold-light); font-weight: 700; }

/* ── Login / 2FA ────────────────────────────────────────────────────────── */
.l-help { font-size: 12px; color: var(--sub); text-align: center; margin-top: 18px; line-height: 1.5; }
.l-help-top { margin: 0 0 16px; text-align: left; }
.l-foot { text-align: center; margin-top: 18px; }
.qr-box { display: grid; place-items: center; min-height: 180px; margin-bottom: 12px; }
.qr-box img, .qr-box canvas { width: 180px; height: 180px; }
.qr-secret { text-align: center; margin-bottom: 18px; display: flex; flex-direction: column; gap: 4px; }
.qr-secret code { font-size: 13px; color: var(--navy); word-break: break-all; }

/* ── Grillas de página ──────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 14px; align-items: start; }
.grid-2-460 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.kpi-foot-flat { border-top: 0; padding-top: 0; margin-top: 6px; }
.card-more { padding: 10px 18px; }
.card-760 { max-width: 760px; }
.empty-lg { padding: 56px 20px; }
.empty-sm { padding: 22px 18px; }
.pill-xs { font-size: 11px; padding: 2px 9px; }
.pill-sm { font-size: 11px; padding: 4px 11px; }
.pill-warn, .kpi-foot .warn { color: var(--warn-ink); }
.pill-ok, .tag-ok { color: var(--ok-ink); }
.sel-btn-xs { padding: 5px 10px; font-size: 11px; text-decoration: none; }
a.sel-btn { color: var(--sub); }
a.sel-btn.active { color: var(--sel-ink, #fff); }
.btn-lg { padding: 14px; font-size: 14px; }
.btn-icon { padding: 4px 8px; }
.fl-input-sm { width: auto; padding: 6px 10px; font-size: 12px; background-color: var(--white); }
.fl-textarea-sm { min-height: 64px; }
.chk-lg { accent-color: var(--navy); width: 16px; height: 16px; cursor: pointer; }
.row-off td { opacity: .55; }
.row-link { cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* Filtros */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filter-bar .fl-select { background-color: var(--white); }
.search-box { position: relative; flex: 1 1 240px; max-width: 340px; }
.search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sub); font-size: 14px; display: flex; }
.search-box .fl-input { padding: 7px 12px 7px 34px; font-size: 13px; background-color: var(--white); }
.range-form { display: flex; gap: 6px; align-items: center; }

/* Pestañas */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--gray); overflow-x: auto; }
.tab { border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--sub) !important; white-space: nowrap; }
.tab.active { border-bottom-color: var(--gold); color: var(--navy) !important; }
.tab { transition: color .15s var(--ux-ease), border-color .15s var(--ux-ease); }

/* Series de gráficos (paleta categórica, estándar §gráficos) */
.c1 { background: var(--c1); } .c2 { background: var(--c2); } .c3 { background: var(--c3); }
.c4 { background: var(--c4); } .c5 { background: var(--c5); } .c6 { background: var(--c6); } .c-otros { background: var(--c-otros); }
.legend { display: flex; flex-wrap: wrap; gap: 12px 16px; font-size: 11px; color: var(--sub); align-items: center; }
.legend span { display: flex; align-items: center; gap: 5px; }
.sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.sw-line { width: 16px; height: 0; border-top: 2.5px solid var(--navy); display: inline-block; }
.sw-over { background: var(--err-soft); border: 1px solid var(--err); }

/* ── Inicio ─────────────────────────────────────────────────────────────── */
.ag-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 18px; background: var(--cream); border-bottom: 1px solid var(--gray); }
.ag-head.tone-err .lbl, .ag-head.tone-err .ag-count { color: var(--err); }
.ag-head.tone-navy .lbl, .ag-head.tone-navy .ag-count { color: var(--navy); }
.ag-count { font-size: 11px; font-weight: 700; color: var(--sub); }
.ag-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 18px; border-bottom: 1px solid var(--gray); }
.ag-check { width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid var(--gray-2); border-radius: 3px; background: var(--white); cursor: pointer; padding: 0; flex: none; }
.ag-check:hover { border-color: var(--navy); background: var(--navy-soft); }
.ag-ic { color: var(--navy-light); font-size: 15px; display: flex; margin-top: 1px; }
.ag-t { font-size: 13px; font-weight: 600; color: var(--text); }
.ag-sub { font-size: 12px; color: var(--sub); margin-top: 2px; }
.mini-wl { display: flex; flex-direction: column; gap: 12px; }
.mini-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 46px; gap: 10px; align-items: center; }
.mini-m { font-size: 12px; font-weight: 700; color: var(--navy); text-transform: capitalize; }
.mini-bar { position: relative; height: 12px; background: var(--cream-2); border-radius: 3px; display: flex; }
.mini-bar .seg:first-child { border-radius: 3px 0 0 3px; }
.mini-bar .seg-end { border-radius: 0 3px 3px 0; }
.mini-cap { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--navy); }
.mini-pct { font-size: 12px; font-weight: 700; text-align: right; color: var(--navy); }
.mini-pct.is-over { color: var(--err); }
.flag-row { display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 15px; border-bottom: 1px solid var(--gray); border-left: 3px solid transparent; }
.flag-err { border-left-color: var(--err); }
.flag-warn { border-left-color: var(--warn); }

/* ── Pipeline ───────────────────────────────────────────────────────────── */
.th-sort { color: inherit !important; display: inline-flex; align-items: center; gap: 4px; }
.next-err { color: var(--err); font-weight: 700; }
.next-today { color: var(--navy); font-weight: 700; }
.next-none { color: var(--sub); }
.idle-stale { color: var(--warn-ink); font-weight: 700; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: 252px; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.kb-col { background: var(--cream-2); border-radius: var(--r-card); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 460px; outline: none; }
.kb-col.is-over, .kb-zone.is-over { outline: 2px dashed var(--gold); outline-offset: -2px; }
.kb-head { padding: 2px 4px 9px; border-bottom: 2px solid var(--gray-2); }
.kb-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.kb-count { font-size: 11px; font-weight: 700; color: var(--sub); background: var(--white); border-radius: 10px; padding: 1px 8px; }
.kb-sums { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--sub); margin-top: 6px; }
.kb-sums strong { color: var(--text); }
.kb-empty { border: 1.5px dashed var(--gray-2); border-radius: var(--r); padding: 18px 10px; text-align: center; font-size: 11px; color: var(--sub); }
.kb-card { background: var(--white); border-radius: var(--r); box-shadow: var(--shadow-card); padding: 11px 12px 10px; border-left: 3px solid transparent; display: flex; flex-direction: column; gap: 7px; color: var(--text) !important; transition: box-shadow .2s; }
.kb-card:hover { box-shadow: 0 4px 16px rgba(25, 47, 80, .16); }
.kb-card[draggable="true"] { cursor: grab; }
.kb-card.is-dragging { opacity: .45; }
.kb-card.stripe-err { border-left-color: var(--err); }
.kb-card.stripe-warn { border-left-color: var(--warn); }
.kb-card-t { font-size: 13px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.kb-money { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kb-uf { font-size: 14px; font-weight: 700; }
.kb-foot { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--gray); }
.kb-next { display: flex; align-items: center; gap: 5px; font-size: 11px; flex: 1; min-width: 0; }
.kb-avatar { width: 24px; height: 24px; border-radius: 7px; background: var(--navy-mid); color: var(--white); font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: none; }
.kb-zones { display: flex; flex-direction: column; gap: 8px; }
.kb-zones-title { padding: 4px 4px 2px; }
.kb-zone { border: 1.5px dashed var(--gray-2); background: var(--white); border-radius: var(--r-card); padding: 14px 12px; display: flex; align-items: center; gap: 10px; min-height: 72px; }
.kb-zone.is-over { background: var(--gold-soft); border-color: var(--gold); }
.kb-zone-ic { font-size: 18px; display: flex; }
.tone-ok { color: var(--ok); } .tone-err { color: var(--err); } .tone-sub { color: var(--sub); }
.kb-hint { font-size: 11px; color: var(--sub); padding: 2px 4px; line-height: 1.5; }

/* ── Ficha del lead ─────────────────────────────────────────────────────── */
.lead-head { flex-wrap: wrap; align-items: flex-start; }
.lead-head-main { min-width: 0; flex: 1 1 320px; }
.lead-title { font-size: 21px; line-height: 1.25; }
.lead-sub { font-size: 13px; margin-top: 4px; }
.link-gold { color: var(--gold-light) !important; font-weight: 600; }
.tag-on-navy { background: var(--navy-mid); color: var(--white); }
.lead-head-side { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.prob { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.prob-value { font-size: 30px; }
.lead-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.steps-body { padding: 18px 14px 16px; }
.steps { display: flex; align-items: flex-start; overflow-x: auto; list-style: none; margin: 0; padding: 0; }
.step { flex: 1 1 0; min-width: 96px; position: relative; }
.step form { margin: 0; }
.step-btn { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; padding: 0; font-family: inherit; cursor: default; position: relative; }
button.step-btn { cursor: pointer; }
.step:not(:last-child)::after { content: ''; position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--gray-2); }
.step-done:not(:last-child)::after { background: var(--navy); }
.step-dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: var(--white); border: 2px solid var(--gray-2); color: var(--sub); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.step-done .step-dot { background: var(--navy); border-color: var(--navy); color: var(--white); }
.step-cur .step-dot { background: var(--gold); border-color: var(--gold); color: var(--white); }
button.step-btn:hover .step-dot { border-color: var(--gold); }
.step-name { font-size: 11px; font-weight: 500; color: var(--sub); text-align: center; line-height: 1.3; padding: 0 4px; }
.step-done .step-name { color: var(--text); }
.step-cur .step-name { color: var(--navy); font-weight: 700; }
.step-p { font-size: 10px; color: var(--sub); }
.lead-cols { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.lead-side { flex: 1 1 260px; max-width: 320px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lead-main { flex: 3 1 420px; min-width: 0; }
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.data-v { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 2px; }
.kv-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--gray); font-size: 13px; }
.kv-total { font-weight: 700; color: var(--navy); border-bottom: 0; }
.composer-wrap { padding: 16px 18px; border-bottom: 1px solid var(--gray); background: var(--field-bg); }
.composer fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.composer .sel-btn { cursor: pointer; }
.composer .sel-btn:has(input:checked) { border-color: var(--navy); background: var(--navy); color: #fff; }
.composer .sel-btn:focus-within { outline: 2px solid var(--gold); outline-offset: 1px; }
.composer-text { min-height: 70px; background-color: var(--white); }
.composer-lbl { margin: 12px 0 6px; }
.composer-next { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.composer-date { flex: 0 0 150px; padding: 7px 10px; font-size: 13px; background-color: var(--white); }
.composer-nt { flex: 1 1 200px; width: auto; padding: 7px 10px; font-size: 13px; background-color: var(--white); }
.composer-next .btn { padding: 8px 14px; }
.timeline { list-style: none; margin: 0; padding: 4px 18px 16px; }
.tl-item { display: flex; gap: 12px; padding-top: 12px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.tl-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--navy-soft); color: var(--navy); display: grid; place-items: center; font-size: 14px; }
.tl-stage .tl-dot { background: var(--cream-2); color: var(--sub); }
.tl-line { flex: 1; width: 2px; background: var(--gray); margin-top: 4px; min-height: 10px; }
.tl-body { flex: 1; min-width: 0; padding-bottom: 6px; }
.tl-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tl-t { font-size: 13px; font-weight: 700; color: var(--navy); }
.tl-stage .tl-t { font-weight: 600; color: var(--sub); }
.tl-text { font-size: 13px; color: var(--text); margin-top: 6px; line-height: 1.55; }
.contact-card { display: flex; flex-direction: column; gap: 8px; }
.contact-name { font-size: 14px; font-weight: 700; color: var(--navy); }
.contact-line { display: flex; align-items: center; gap: 8px; font-size: 13px; overflow-wrap: anywhere; }
.link-ic { display: flex; align-items: center; gap: 4px; }
.prop-row { display: flex; gap: 10px; align-items: flex-start; padding: 11px 18px; border-bottom: 1px solid var(--gray); color: var(--text) !important; }
.prop-row:hover { background: var(--cream); }
.prop-ic { font-size: 16px; color: var(--navy-light); display: flex; margin-top: 1px; }
.cdh-code { font-size: 13px; font-weight: 700; color: var(--navy); margin: 2px 0 10px; }

/* Modales del lead */
.modal-section { margin: 6px 0 10px; padding-top: 14px; border-top: 1px solid var(--gray); }
.nl-search { position: relative; }
.nl-results { position: absolute; left: 0; right: 0; top: 100%; margin-top: -10px; background: var(--white); border: 1px solid var(--gray); border-radius: var(--r); box-shadow: var(--shadow-card); z-index: 5; overflow: hidden; }
.nl-result { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 13px; border: 0; border-bottom: 1px solid var(--gray); background: var(--white); text-align: left; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--text); }
.nl-result:hover, .nl-result:focus { background: var(--cream); outline: none; }
.nl-result-create { color: var(--navy); font-weight: 700; justify-content: flex-start; align-items: center; gap: 8px; border-bottom: 0; }
.nl-picked { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--gray); border-radius: var(--r); margin-bottom: 12px; }
.nl-picked-ic { font-size: 18px; color: var(--navy-light); display: flex; }
.nl-newco { border: 1.5px dashed var(--gray-2); border-radius: var(--r); padding: 16px 16px 0; margin-bottom: 16px; background: var(--field-bg); }
.nl-newco-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.chk-row { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 4px; }
.nl-next { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0 16px; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.svc-item { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1.5px solid var(--gray); border-radius: var(--r); background: var(--white); }
.svc-item.is-on { border-color: var(--navy); background: var(--navy-soft); }
.svc-h { width: 64px !important; padding: 5px 8px !important; font-size: 13px !important; text-align: right; }
.reason-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; margin: 0; padding: 0; }
.reason-btn { justify-content: flex-start; }
.reason-btn:has(input:checked) { border-color: var(--navy); background: var(--navy); color: #fff; }
.reason-btn:focus-within { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ── Carga proyectada ───────────────────────────────────────────────────── */
.legend-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 16px; }
.chart { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 8px; }
.chart-y, .chart-plot { position: relative; height: 300px; }
.chart-tick { position: absolute; right: 0; transform: translateY(-50%); font-size: 10px; color: var(--sub); }
.chart-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--gray); }
.chart-cols { position: absolute; inset: 0; display: flex; }
.chart-col { flex: 1; position: relative; display: flex; justify-content: center; }
.chart-col.is-over { background: var(--err-soft); }
.chart-over { position: absolute; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 700; color: var(--err); padding-bottom: 4px; }
.chart-stack { width: 56%; max-width: 44px; height: 100%; display: flex; flex-direction: column-reverse; }
.chart-stack > div { flex: none; }
.seg-top { border-radius: 3px 3px 0 0; }
.chart-cap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.chart-cap polyline { fill: none; stroke: var(--navy); stroke-width: 2.5; }
.chart-x { display: flex; padding-top: 8px; border-top: 2px solid var(--gray); }
.chart-x > div { flex: 1; text-align: center; }
.chart-m { font-size: 12px; font-weight: 700; color: var(--navy); text-transform: capitalize; }
.chart-m.is-over { color: var(--err); }
.chart-yr { font-size: 10px; color: var(--sub); min-height: 15px; }
.col-occ { width: 200px; }
.cap-first { text-transform: capitalize; }
.occ { display: flex; align-items: center; gap: 10px; }
.occ-pct { font-size: 12px; font-weight: 700; min-width: 40px; text-align: right; }

/* ── Empresas ───────────────────────────────────────────────────────────── */
.co-head { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.co-head-main { flex: 1 1 320px; }
.co-title { font-size: 21px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.co-stats { display: flex; gap: 28px; }
.co-stat { font-size: 24px; font-weight: 800; color: var(--navy); }
.co-cols { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.co-main { flex: 2 1 520px; }
.co-side { flex: 1 1 260px; max-width: 340px; }
.link-form { display: flex; gap: 8px; margin-top: 12px; }
.link-form .fl-input { padding: 6px 10px; font-size: 13px; }

/* ── Reportes ───────────────────────────────────────────────────────────── */
.funnel { display: flex; flex-direction: column; gap: 7px; }
.funnel-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 44px; gap: 10px; align-items: center; }
.funnel-track { display: flex; justify-content: center; }
.funnel-bar { min-width: 28px; height: 22px; background: var(--c5); border-radius: 3px; color: var(--white); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.funnel-foot { font-size: 11px; color: var(--sub); margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--gray); line-height: 1.5; }
.mchart { position: relative; height: 200px; display: flex; align-items: flex-end; border-bottom: 2px solid var(--gray); margin-top: 16px; }
.mchart-max { position: absolute; left: 0; right: 0; top: 0; border-top: 1px dashed var(--gray); }
.mchart-lbl { position: absolute; left: 0; top: -16px; font-size: 10px; color: var(--sub); }
.mchart-col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.mchart-col > div { width: 30%; border-radius: 2px 2px 0 0; }
.mchart-x { display: flex; padding-top: 6px; }
.mchart-x span { flex: 1; text-align: center; font-size: 11px; color: var(--sub); text-transform: capitalize; }
.hbars { display: flex; flex-direction: column; gap: 9px; }
.hbar-row { display: grid; gap: 10px; align-items: center; }
.hbar-120 { grid-template-columns: 120px minmax(0, 1fr) 28px; }
.hbar-170 { grid-template-columns: 170px minmax(0, 1fr) 40px; }
.hbar-track { height: 12px; background: var(--cream-2); border-radius: 3px; }
.hbar-track > div { height: 100%; border-radius: 3px; }
.hbar-thin { height: 8px; }
.col-38 { width: 38%; }
.stage-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 9px 32px; }

/* ── Administración ─────────────────────────────────────────────────────── */
.num-input { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.num-input .fl-input { width: 64px; padding: 5px 8px; font-size: 13px; text-align: right; }
.inline-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--gray); background: var(--field-bg); }
.inline-add .fl-input { width: auto; flex: 1 1 200px; padding: 7px 10px; font-size: 13px; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 20px; margin-bottom: 18px; }

/* ── Hoja móvil (la activan los estilos de movil.css) ───────────────────── */
.mob-sheet { position: fixed; inset: 0; z-index: 600; background: var(--cream); display: flex; flex-direction: column; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--navy); color: var(--white); }
.sheet-close { background: none; border: 0; color: var(--white); font-size: 21px; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px; cursor: pointer; }
.sheet-title { font-size: 15px; font-weight: 700; }
.sheet-sub { font-size: 12px; color: var(--gold-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-body { flex: 1; overflow-y: auto; padding: 18px 16px 0; }
.sheet-foot { position: sticky; bottom: 0; margin: 18px -16px 0; padding: 12px 16px; background: var(--white); border-top: 1px solid var(--gray); }
.type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.qd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.sel-btn-tall { min-height: 52px; justify-content: center; flex-direction: column; gap: 2px; font-size: 12px; }
.qd-sub { font-size: 10px; font-weight: 500; opacity: .8; }
.composer-mob .composer-text { min-height: 140px; font-size: 15px; }
.composer-mob .composer-date, .composer-mob .composer-nt { flex: 1 1 100%; min-height: 48px; font-size: 15px; }

/* ── Estados e interacción (estándar §13.5) ─────────────────────────────── */
/* Piezas clicables que no contestaban al ratón: las pestañas de
   Administración y los encabezados ordenables del pipeline en tabla (su
   color va con !important, así que el hover dorado general no les llegaba). */
@media (hover: hover) {
  .tab:not(.active):hover { color: var(--navy) !important; border-bottom-color: var(--gray-2); }
  .th-sort:hover { color: var(--navy) !important; }
}
.th-sort { transition: color .15s var(--ux-ease); }

/* La flecha de contraer la barra lateral da media vuelta mientras la barra se
   pliega, en vez de aparecer ya girada al final. */
.shell-op .sidebar-toggle { transition: background-color .2s, color .2s, transform .25s var(--ux-ease); }

/* El punto de cada etapa cambia de borde con un fundido, no de golpe. */
.step-dot { transition: border-color .15s var(--ux-ease); }

/* Campos: el borde se oscurece un paso al pasar el ratón, y se marca en rojo
   solo cuando la persona ya interactuó y el valor no es válido (nunca al
   cargar). El error que manda el servidor (.has-error) no cambia. */
@media (hover: hover) {
  .fl-input:hover:not(:focus):not(:disabled):not(:user-invalid),
  .fl-select:hover:not(:focus):not(:disabled):not(:user-invalid),
  .fl-textarea:hover:not(:focus):not(:disabled):not(:user-invalid),
  :where(.fl input:not([type=checkbox]):not([type=radio]), .fl select, .fl textarea):hover:not(:focus):not(:disabled):not(:user-invalid) {
    border-color: var(--gray-2);
  }
}
.fl-input:user-invalid, .fl-select:user-invalid, .fl-textarea:user-invalid,
:where(.fl input:not([type=checkbox]):not([type=radio]), .fl select, .fl textarea):user-invalid {
  border-color: var(--err);
}

/* Movimiento con los tokens del estándar: lo que aparece entra en 250 ms y lo
   que se va sale en 150 ms. */
/* La tarjeta del kanban sube su sombra al pasar en 250 ms y la baja en 150. */
.kb-card { transition: box-shadow .15s var(--ux-ease); }
.kb-card:hover { transition-duration: .25s; }
/* Zonas de soltar (columnas y Ganado/Perdido/En pausa): el resalte al
   arrastrar encima entra con un fundido corto en vez de parpadear. */
.kb-zone { transition: background-color .15s var(--ux-ease), border-color .15s var(--ux-ease); }
/* Resultados del buscador de empresa (Nuevo lead): se abren con un fundido
   corto; al cerrarse desaparecen al instante. Solo opacidad. */
@keyframes lead-funde { from { opacity: 0; } }
.nl-results:not([hidden]) { animation: lead-funde .15s var(--ux-ease); }

/* Deshabilitado se ve deshabilitado: además de atenuado, el cursor lo dice
   (horas de un servicio no marcado, opciones de solo lectura). */
.fl-input:disabled, .fl-select:disabled, .fl-textarea:disabled,
.sel-btn:disabled, .chk-lg:disabled { cursor: not-allowed; }

@media print {
    .shell-op .sidebar, .topbar-mobile, .page-top-acts, .filter-bar, .composer-wrap, .mob-bar, .toasts { display: none !important; }
    .shell-op .app-main { margin-left: 0 !important; }
    body, .cv { background: #fff; }
}

/* La hoja móvil la gestiona ux.js (foco, sin scroll de fondo): sin la animación de caja, que solo movería la cabecera. */
.mob-sheet > .ux-modal-caja { animation: none; }


/* ============================================================================
   Licitaciones con el lenguaje de Cronos (Control de Horas)
   ----------------------------------------------------------------------------
   Las medidas salen de Control-de-Horas/assets/css/style.css: cabecera de
   página con título grande, KPI blancos con la etiqueta debajo de la cifra,
   paneles de radio 12 con título en frase, tablas de 14 px con cabecera
   espaciada, píldoras redondas y buscador y segmentos de 10 px de radio.
   Todo es apariencia: las vistas solo cambian clases y envoltorios.
   ========================================================================== */
:root {
  --gold-deep: #E0721C;
  /* Gris de etiquetas y subtítulos de Cronos: 5,2:1 sobre blanco, 4,6 sobre crema. */
  --sub-2: #686c79;
  --ok-bg:   #e3f1e7;
  --warn-bg: #fbf0dc;
  --err-bg:  #fbe8e6;
  --r-panel: 12px;
  --shadow-panel: 0 2px 12px rgba(25, 47, 80, .05);
  --row-hover: #fbf9f5;
}

/* ── Marco y botones ─────────────────────────────────────────────────────── */
.shell-op .page { padding: 34px 40px 48px; gap: 22px; }
.shell-op .sidebar-link { font-size: 14px; padding: 11px 14px; gap: 14px; }
.shell-op .sidebar-link .ic { font-size: 18px; }
.shell-op .btn-logout { font-size: 13px; letter-spacing: 0; padding: 11px 12px; }
.btn { font-size: 14px; letter-spacing: 0; padding: 11px 18px; border-radius: 8px; }
.btn-sm { font-size: 13px; padding: 8px 14px; }
.btn-link { font-size: 13px; letter-spacing: 0; }

/* ── Cabecera de página ──────────────────────────────────────────────────── */
.page-top { align-items: flex-start; min-height: 0; gap: 16px; }
.page-top-text { flex: 1 1 22rem; min-width: 0; }
.crumbs { font-size: 14px; color: var(--sub-2); gap: 7px; }
.crumbs a { color: var(--sub-2); }
.crumb-current { font-weight: 600; }
.page-title { margin-top: 6px; font-size: 36px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: var(--navy); text-wrap: balance; }
.page-sub { margin-top: 8px; font-size: 15px; color: var(--sub); text-wrap: pretty; }
.page-top.has-title { margin-bottom: 4px; }
.page-top.has-title .page-top-acts { padding-top: 22px; }

/* ── KPI ─────────────────────────────────────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.stat { min-width: 0; background: var(--white); border: 1px solid var(--gray); border-radius: 11px; box-shadow: var(--shadow-panel); padding: 20px 22px; }
.stat-gold { border-left: 4px solid var(--gold-deep); }
.stat-value { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--navy); font-variant-numeric: tabular-nums; }
.stat-label { margin-top: 7px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; line-height: 1.4; color: var(--sub-2); }
.stat-foot { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--sub-2); text-wrap: pretty; }
.stat-bar { margin-top: 10px; }

/* ── Paneles ─────────────────────────────────────────────────────────────── */
.card { border: 1px solid var(--gray); border-radius: var(--r-panel); box-shadow: var(--shadow-panel); }
.card-table { overflow: hidden; }
.card-head { padding: 20px 24px 0; border-bottom: 0; align-items: flex-start; }
.card-title { font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; text-transform: none; color: var(--navy); }
.card-sub { margin-top: 2px; font-size: 13px; color: var(--sub-2); }
.card-body { padding: 16px 24px 24px; }
.card-body.flush { padding: 0; }
.lbl, .data-table thead th, .fl > label { letter-spacing: 1.4px; color: var(--sub-2); }
.card-body:not(.flush) .kv-row { padding-left: 0; padding-right: 0; }
.kv-row { font-size: 14px; padding-top: 12px; padding-bottom: 12px; }
.kv-list { padding-top: 6px; padding-bottom: 12px; }
.kv-list .kv-row:last-child { border-bottom: 0; }
.tenue { color: var(--sub-2); }

/* Avisos y estados vacíos a la escala de Cronos. */
.note-box, .warn-box, .err-box { font-size: 13px; padding: 12px 16px; border-radius: 10px; }
.empty-state { padding: 46px 20px; font-size: 14px; color: var(--sub-2); }
.empty-state strong { font-size: 16px; }
.vacio-sm { font-size: 14px; color: var(--sub-2); text-wrap: pretty; }

/* ── Píldoras ────────────────────────────────────────────────────────────── */
.pill, .dec { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.pill-ok, .dec-apply      { background: var(--ok-bg);   color: var(--ok-ink); }
.pill-warn, .dec-later    { background: var(--warn-bg); color: var(--warn-ink); }
.pill-err, .dec-discard   { background: var(--err-bg);  color: var(--err); }
.pill-navy                { background: rgba(25, 47, 80, .08); color: var(--navy); }
.pill-on-navy             { background: rgba(255, 255, 255, .12); color: var(--navy-on); }

/* Puntaje de la IA: la cifra manda; el tinte dice el tramo. */
.score { display: inline-grid; place-items: center; min-width: 44px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.score-hi { background: var(--ok-bg); color: var(--ok-ink); }
.score-mid { background: var(--warn-bg); color: var(--warn-ink); }
.score-lo { background: var(--cream-2); color: var(--sub); }
.score-none { background: transparent; color: var(--sub-2); }
.score-lbl { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--sub-2); flex: none; }

/* ── Filtros: buscador y desplegables como los de Cronos ─────────────────── */
.filter-bar { gap: 12px; }
.search-box { flex: 1 1 280px; max-width: 440px; }
.search-ic { left: 16px; color: var(--sub-2); font-size: 16px; }
.search-box .fl-input { padding: 12px 16px 12px 44px; font-size: 15px; border: 1px solid var(--gray); border-radius: 10px; }
.search-box .fl-input::placeholder { color: var(--sub-2); }
.filter-bar .fl-select.sm { padding: 12px 38px 12px 14px; font-size: 14px; font-weight: 600; color: var(--navy); border: 1px solid var(--gray); border-radius: 10px; background-position: right 14px center; }

/* Segmentos (pestañas de Administración). */
.segmento { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--white); border: 1px solid var(--gray); border-radius: 10px; }
.cv .segmento a { padding: 8px 16px; border-radius: 6px; color: var(--sub); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background-color var(--ux-dur-fast) var(--ux-ease), color var(--ux-dur-fast) var(--ux-ease); }
.cv .segmento a:hover { color: var(--navy); }
.cv .segmento a.active { background: var(--navy); color: var(--navy-on); }

/* ── Tablas ──────────────────────────────────────────────────────────────── */
.data-table { font-size: 14px; }
.data-table thead th { padding: 14px 16px; font-size: 10px; border-bottom: 1px solid var(--gray); }
.data-table tbody td { padding: 16px; }
.data-table th:first-child, .data-table td:first-child { padding-left: 24px; }
.data-table th:last-child, .data-table td:last-child { padding-right: 24px; }
.data-table tbody tr:hover td { background: transparent; }
@media (hover: hover) {
  .data-table tbody tr:hover td { background: var(--row-hover); transition: background-color var(--ux-dur-fast) var(--ux-ease); }
  .row-link:hover .td-name { color: var(--navy-light); }
}
.data-table .fuerte { color: var(--navy); }
.td-score { vertical-align: top; }
.data-table .td-score { padding-top: 15px; }
.td-tender { min-width: 320px; max-width: 640px; }
.cv a.td-name { display: block; font-weight: 700; color: var(--navy); line-height: 1.35; text-decoration: none; text-wrap: pretty; }
.td-meta { margin-top: 4px; font-size: 12.5px; color: var(--sub-2); }
.td-meta > span + span::before, .hero-sub > span + span::before { content: '·'; margin: 0 6px; }
.td-code { font-weight: 600; color: var(--sub); font-variant-numeric: tabular-nums; }
.td-why { margin-top: 8px; max-width: 75ch; font-size: 13px; line-height: 1.5; color: var(--sub); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.td-amount { font-weight: 600; }
.td-close { font-weight: 600; color: var(--navy); }
.td-stage { font-weight: 600; color: var(--text); }
.td-days { margin-top: 3px; font-size: 12px; font-weight: 500; }
.close-err { color: var(--err); font-weight: 700; }
.close-warn { color: var(--warn-ink); font-weight: 700; }
.close-ok, .close-past { color: var(--sub-2); }

/* ── Ficha ───────────────────────────────────────────────────────────────── */
/* La banda navy de «Mi día» en Cronos: título blanco y la cifra en un recuadro. */
.hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px; padding: 26px 28px; border-radius: 14px; background: var(--navy); color: var(--navy-on); }
.hero-main { flex: 1 1 420px; min-width: 0; }
.hero-chips { margin-bottom: 12px; gap: 6px; }
.hero-title { max-width: 62ch; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--navy-on); text-wrap: balance; overflow-wrap: anywhere; }
.hero-sub { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.hero-code { font-weight: 600; color: rgba(255, 255, 255, .88); font-variant-numeric: tabular-nums; }
.hero-side { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.hero-tile { min-width: 124px; padding: 14px 22px; border-radius: 10px; background: var(--navy-mid); text-align: center; }
.hero-tile-v { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--gold-light); }
.hero-tile-of { margin-left: 2px; font-size: 14px; font-weight: 700; letter-spacing: 0; color: rgba(255, 255, 255, .62); }
.hero-tile-l { margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions form { margin: 0; }

.ficha-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.ficha-main, .ficha-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ficha-side { order: 2; position: sticky; top: 24px; }
.ficha-data { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.data-v { margin-top: 3px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.ficha-data .sub { color: var(--sub-2); }

.why { max-width: 75ch; margin: 0; font-size: 15px; line-height: 1.65; color: var(--text); text-wrap: pretty; }
.sec-lbl { margin: 24px 0 8px; }
.excl { max-width: 75ch; margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.excl li + li { margin-top: 6px; }
.excl li::marker { color: var(--sub-2); }
.pre-wrap { white-space: pre-wrap; max-width: 75ch; margin: 0; font-size: 14px; line-height: 1.6; }
.d-block { display: block; }
form.inline { display: inline; }

/* Bases y anexos: cada archivo es una fila; la subida, una franja punteada. */
.docs { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gray); }
.docs > .t12 { font-size: 13px; line-height: 1.55; color: var(--sub); max-width: 75ch; }
.doc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 10px 14px; border: 1px solid var(--gray); border-radius: 10px; background: var(--field-bg); font-size: 14px; }
.cv .doc-row a { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.doc-row a .ic { font-size: 16px; color: var(--sub-2); }
.doc-meta { display: flex; align-items: center; gap: 14px; flex: none; font-size: 12px; color: var(--sub-2); white-space: nowrap; }
.doc-up { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border: 1.5px dashed var(--gray-2); border-radius: 10px; }
.doc-up .fl-input { flex: 1 1 220px; padding: 2px 0; border: 0; background: transparent; box-shadow: none; font-size: 13px; color: var(--sub); }
.doc-up input[type=file]::file-selector-button { margin-right: 12px; padding: 7px 12px; border: 1px solid var(--gray-2); border-radius: 6px; background: var(--white); color: var(--navy); font: inherit; font-weight: 600; cursor: pointer; }

/* ── Administración ──────────────────────────────────────────────────────── */
.kw { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 13px; border: 1px solid var(--gray); border-radius: 999px; background: var(--white); color: var(--navy); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; cursor: default; }
button.kw { cursor: pointer; transition: border-color var(--ux-dur-fast) var(--ux-ease), background-color var(--ux-dur-fast) var(--ux-ease); }
.kw-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cream-2); color: var(--sub); font-size: 11px; font-weight: 700; }
.kw-off { border-style: dashed; background: transparent; color: var(--sub-2); text-decoration: line-through; }
.kw-off .kw-n { background: transparent; text-decoration: none; }
@media (hover: hover) { button.kw:hover { border-color: var(--navy); } button.kw-off:hover { background: var(--white); } }
.chips { gap: 8px; }
.kw-add { display: flex; gap: 8px; max-width: 560px; }
.kw-add .fl-input { flex: 1; padding: 9px 14px; font-size: 14px; border-radius: 8px; }
.profile-text { width: 100%; min-height: 460px; font-size: 13px; line-height: 1.6; border-radius: 10px; }

/* ── Teléfono ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ficha-cols { grid-template-columns: minmax(0, 1fr); }
  .ficha-side { order: 0; position: static; }
}
@media (max-width: 800px) {
  .shell-op .page { padding: 20px 16px 32px; gap: 18px; }
  .page-title { font-size: 28px; }
  .page-sub { font-size: 14px; }
  .page-top-text { flex: none; width: 100%; }
  .page-top.has-title .page-top-acts { padding-top: 0; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat { padding: 16px; }
  .stat-value { font-size: 22px; }
  .card-head { padding: 16px 18px 0; }
  .card-body { padding: 14px 18px 18px; }
  .data-table th:first-child, .data-table td:first-child { padding-left: 16px; }
  .data-table th:last-child, .data-table td:last-child { padding-right: 16px; }
  .search-box { max-width: none; flex-basis: 100%; }
  .filter-bar .fl-select.sm { flex: 1 1 140px; min-width: 0; }
  .hero { padding: 20px; border-radius: 12px; gap: 18px; }
  .hero-title { font-size: 20px; }
  .hero-side { width: 100%; }
  .hero-tile { padding: 12px 18px; min-width: 0; }
  .hero-tile-v { font-size: 26px; }
  .ficha-data { grid-template-columns: 1fr 1fr; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .hero-actions > :only-child, .hero-actions > form:first-child:not(:only-child) { grid-column: 1 / -1; }
  .hero-actions .btn { width: 100%; }
  .doc-row { flex-wrap: wrap; }
}

/* En el teléfono la tabla de licitaciones pasa a tarjetas: puntaje a la
   izquierda, nombre a lo ancho y debajo servicio, monto y cierre, en vez de
   obligar a desplazar de lado una tabla de cinco columnas. */
@media (max-width: 800px) {
  .tender-table thead { display: none; }
  .tender-table, .tender-table tbody { display: block; }
  .tender-table tbody tr { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px 12px; padding: 16px; border-bottom: 1px solid var(--gray); }
  .tender-table tbody tr:last-child { border-bottom: 0; }
  .data-table.tender-table tbody td { display: block; width: auto; padding: 0; border: 0; white-space: normal; text-align: left; }
  .tender-table .td-score { grid-row: 1 / span 4; }
  .data-table.tender-table .td-score { padding-top: 0; }
  .tender-table .td-tender { grid-column: 2 / -1; min-width: 0; max-width: none; }
  .tender-table td:nth-child(3) { grid-column: 2 / -1; }
  .tender-table .td-amount { grid-column: 2; align-self: start; }
  .tender-table .td-close { grid-column: 3; text-align: right; }
  .tender-table td:nth-child(n+6) { grid-column: 2 / -1; }
  .tender-table .td-why { -webkit-line-clamp: 3; }
}