/* ==========================================================================
   NASTA HABITAT — theme-classic.css
   Mismos tokens visuales que el demo de referencia (demo_completo_ref.html):
   navy #1a1852, acento dorado #c3b27a en login, tipografias Bricolage
   Grotesque / Onest / DM Mono, tarjetas "sheet" con borde fino y radio 2px.
   ========================================================================== */

:root {
  color-scheme: light;
  --color-marca: #1a1852;
  --color-marca-soft: #e8e7f2;
  --color-ink: #14152e;
  --color-ink-70: #4b4c66;
  --color-ink-50: #6a6b85;
  --color-ink-30: #9799ad;
  --color-paper: #eceef5;
  --color-mist: #f2f3f9;
  --color-sheet: #fff;
  --color-rule: #d5d7e4;
  --color-rule-soft: #e7e9f2;
  --color-azul: #0b6ba5;
  --color-azul-soft: #e2eef7;
  --color-verde: #2c8a4b;
  --color-verde-soft: #e4f1e8;
  --color-ocre: #8a6c22;
  --color-ocre-soft: #f3eddc;
  --color-morado: #5b4a9b;
  --color-morado-soft: #eae7f5;
  --color-alerta: #b23a10;
  --color-alerta-soft: #fae7de;
  --color-gold: #c3b27a;
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Onest", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, monospace;
  --color-zebra: #fafbfe;      /* fila alterna de las tablas */
  --color-hover: #f4f5fa;      /* hover de botones y filas */
  --color-topbar: #1a1852;     /* barra superior */
  --color-topbar-ink: #ecebf5;
  --grid-line: #14152e08;      /* cuadrícula de fondo (papel milimetrado) */
  --sheet-shadow: 0 1px 2px #14152e0d;
  --radius-sm: 2px;
  --radius-xs: 1px;
  --nav-w: 224px;
  --topbar-h: 56px;

  /* Tonos de las gráficas (el tema oscuro los redefine). */
  --color-marca-fuerte: #4a4795;
  --color-marca-suave: #8b88c9;
  --color-surface: #ffffff;
  --color-grafica-texto: #8b8ca3;
  --color-grafica-linea: #e2e4ee;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   Escala de la interfaz
   Todo el sistema está medido en píxeles (es un diseño de plano, no de texto
   fluido), así que en vez de tocar cientos de tamaños se amplía el lienzo
   completo: tipografía, cajas, bordes y separaciones crecen juntos y las
   proporciones se mantienen exactas. Equivale al zoom del navegador, pero
   viene puesto de fábrica y el usuario no tiene que hacer nada.
   -------------------------------------------------------------------------- */
html { zoom: var(--ui-zoom, 1); }
body { font-family: var(--font-sans); color: var(--color-ink); background: var(--color-paper); font-size: 15px; line-height: 1.5; position: relative; }
body:before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), linear-gradient(var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; }
#app { position: relative; z-index: 1; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
button { font-family: inherit; }
.flex-1 { flex: 1; }
.block { display: block; }
.ic { flex-shrink: 0; }

/* --------------------------------- Shell -------------------------------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { background: var(--color-topbar); color: var(--color-topbar-ink); height: var(--topbar-h); position: sticky; top: 0; z-index: 30; }
.topbar-inner { height: 100%; display: flex; align-items: center; gap: 18px; padding: 0 20px; }
.brand { background: none; border: 0; cursor: pointer; padding: 0; display: flex; }
.logo { display: flex; align-items: center; gap: 8px; color: #fff; }
.logo-bg { fill: var(--color-gold); }
.logo-mark { fill: var(--color-marca); }
.logo-text { font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.logo-text em { font-style: normal; color: var(--color-gold); }
.crumbnav { display: flex; align-items: center; gap: 8px; font-size: 14.5px; padding-left: 14px; border-left: 1px solid #ffffff26; height: 22px; }
.crumb { background: none; border: 0; color: #ecebf58c; cursor: pointer; font: inherit; padding: 0; }
.crumb-current { font-weight: 500; color: #fff; }
.crumb-sep { color: #ecebf558; display: flex; }
.usermenu { position: relative; }
.userchip { display: inline-flex; align-items: center; gap: 8px; background: #ffffff0f; border: 1px solid #ffffff26; color: #ecebf5; border-radius: var(--radius-sm); height: 34px; padding: 0 10px 0 6px; cursor: pointer; }
.avatar { width: 22px; height: 22px; border-radius: 2px; background: #ffffff26; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.uname { font-size: 14px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu-pop { display: none; position: absolute; right: 0; top: calc(100% + 6px); width: 260px; z-index: 40; }
.usermenu-pop.open { display: block; }
.usermenu-head { padding: 12px 14px; border-bottom: 1px solid var(--color-rule); background: var(--color-sheet); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.uname-lg { font-size: 15px; font-weight: 500; color: var(--color-ink); }
.urole { font-size: 13px; color: var(--color-ink-50); margin-top: 2px; }
.usermenu-item { width: 100%; display: flex; align-items: center; gap: 9px; background: var(--color-sheet); border: 0; border-top: 1px solid var(--color-rule-soft); text-align: left; padding: 9px 14px; font-size: 14px; color: var(--color-ink); cursor: pointer; }
.usermenu-item:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.usermenu-item:hover { background: var(--color-hover); }
.usermenu-pop { box-shadow: 0 16px 40px -20px rgba(20, 21, 46, .35); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); overflow: hidden; }

.shellbody { display: flex; flex: 1; }
.sidenav { width: var(--nav-w); flex-shrink: 0; padding: 22px 12px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--color-rule); }
.shellbody.no-sidenav .sidenav { display: none; }
.navlink { display: flex; align-items: center; gap: 10px; background: none; border: 0; text-align: left; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14.5px; color: var(--color-ink-70); cursor: pointer; }
.navlink:hover { background: var(--color-mist); color: var(--color-ink); }
.navlink.active { background: var(--color-marca-soft); color: var(--color-marca); font-weight: 500; }
.content { flex: 1; min-width: 0; }
.content-inner { max-width: 1320px; margin: 0 auto; padding: 0 20px; }

/* --------------------------------- Page --------------------------------- */
.page { padding: 14px 0 56px; }
.page-narrow { max-width: 760px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 26px; margin-top: 6px; }
.page-head .sub { color: var(--color-ink-50); font-size: 14.5px; margin-top: 4px; max-width: 60ch; }
.page-head-tags { display: flex; align-items: center; gap: 8px; }
.sub { color: var(--color-ink-50); font-size: 14.5px; margin-top: 4px; max-width: 60ch; }
.eyebrow { font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-50); font-size: 11px; font-weight: 500; }
.section-eyebrow { margin: 26px 0 10px; }
.section-eyebrow:first-child { margin-top: 0; }
.code { font-family: var(--font-mono); letter-spacing: .01em; font-size: 12px; color: var(--color-ink-50); }
.back-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--color-ink-50); font-size: 13.5px; cursor: pointer; margin-bottom: 10px; padding: 0; }

/* --------------------------------- Sheet --------------------------------- */
/* La hoja trae su propio espacio interior. Antes solo lo tenían los
   formularios y el resto lo ponía a mano en cada sitio, así que en varias
   pantallas el contenido quedaba pegado al borde. */
.sheet { background: var(--color-sheet); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); box-shadow: var(--sheet-shadow); padding: 16px 18px; }

/* Lo que va a sangre: tablas, tableros y franjas que ya traen su propio
   espaciado por dentro. Con padding se verían con un doble margen. */
.sheet-flush { padding: 0; }
/* El paginador que va al pie de una tabla ya trae su propio espacio. */
.sheet-flush .paginador { border-top: 1px solid var(--color-rule); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------------------------------- KPI ---------------------------------- */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
@media (max-width: 860px) { .kpi-row { grid-template-columns: 1fr 1fr; } }
.kpi { padding: 15px 16px 13px; position: relative; }
.kpi-value { font-family: var(--font-mono); font-size: 26px; margin-top: 8px; }
.kpi-note { font-size: 13px; color: var(--color-ink-50); margin-top: 5px; }

/* ------------------------------- App grid (Hub) --------------------------- */
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 960px) { .app-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .app-grid { grid-template-columns: 1fr; } }
.appcard { text-align: left; padding: 16px; position: relative; cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.appcard-active { border-color: var(--color-marca); }
.appcard-active:hover { box-shadow: 0 8px 22px -12px rgba(26, 24, 82, .35); }
.appcard-bar { position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--color-marca); }
.appcard-muted { cursor: not-allowed; opacity: .55; filter: grayscale(65%); background: var(--color-mist); box-shadow: none; }
.appcard-muted .appcard-icon { background: var(--color-rule-soft); color: var(--color-ink-30); }
.appcard-muted h3 { color: var(--color-ink-50); }
.appcard-off { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-family: var(--font-mono); color: var(--color-ink-30); }
.appcard-top { display: flex; align-items: center; justify-content: space-between; }
.appcard-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--color-mist); color: var(--color-marca); }
.appcard h3 { font-size: 17px; }
.appcard-desc { font-size: 13.5px; color: var(--color-ink-70); line-height: 1.5; }
.appcard-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--color-rule-soft); }
.appcard-open { font-size: 13.5px; font-weight: 500; color: var(--color-marca); display: inline-flex; align-items: center; gap: 4px; }

/* --------------------------------- Tags ----------------------------------- */
.tag { border: 1px solid var(--color-rule); border-radius: var(--radius-xs); height: 22px; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-50); background: none; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; font-size: 11px; font-weight: 500; }
.tag-azul { color: var(--color-azul); border-color: #0b6ba54d; background: var(--color-azul-soft); }
.tag-ocre { color: var(--color-ocre); border-color: #8a6c224d; background: var(--color-ocre-soft); }
.tag-alerta { color: var(--color-alerta); border-color: #b23a104d; background: var(--color-alerta-soft); }
.tag-verde { color: var(--color-verde); border-color: #2c8a4b4d; background: var(--color-verde-soft); }
.tag-morado { color: var(--color-morado); border-color: #5b4a9b4d; background: var(--color-morado-soft); }
.tag-marca { color: var(--color-marca); border-color: #1a18524d; background: var(--color-marca-soft); }
.tag-gris { color: var(--color-ink-50); border-color: var(--color-rule); }

/* --------------------------------- Buttons -------------------------------- */
.btn { border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-sheet); height: 38px; color: var(--color-ink); white-space: nowrap; cursor: pointer; align-items: center; gap: 6px; padding: 0 15px; font-size: 14.5px; font-weight: 500; transition: background-color .12s, border-color .12s, color .12s; display: inline-flex; }
.btn:hover { background: var(--color-hover); border-color: var(--color-ink-30); }
.btn-primary { background: var(--color-marca); border-color: var(--color-marca); color: #fff; }
.btn-primary:hover { background: #262369; border-color: #262369; }
.btn-ghost { color: var(--color-ink-70); background: none; border-color: transparent; }
.btn-ghost:hover { background: var(--color-mist); }
.btn-sm { height: 32px; padding: 0 11px; font-size: 13.5px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.linklike { background: none; border: 0; color: var(--color-marca); font-weight: 500; cursor: pointer; padding: 0; font: inherit; }

/* --------------------------------- Fields --------------------------------- */
.field-label { display: block; font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; font-size: 11px; font-weight: 500; color: var(--color-ink-50); margin-bottom: 6px; }
.field { width: 100%; height: 42px; border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: 0 10px; font-size: 15px; font-family: inherit; color: var(--color-ink); background: var(--color-sheet); }
.field:focus { outline: none; border-color: var(--color-marca); box-shadow: inset 0 -2px 0 -1px var(--color-marca); }
.field::placeholder { color: var(--color-ink-30); }
textarea.field { resize: vertical; height: auto; padding: 9px 10px; line-height: 1.5; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.filters-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }
@media (max-width: 760px) { .filters-row { grid-template-columns: 1fr; } }
.inline-add { display: flex; gap: 8px; margin-top: 12px; }
.inline-add .field { flex: 1; }

/* -------------------------------- Wizard ----------------------------------- */
.wizard-steps { display: flex; align-items: center; margin-bottom: 20px; }
.wstep { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-ink-30); white-space: nowrap; }
.wstep.active { color: var(--color-marca); font-weight: 500; }
.wstep.done { color: var(--color-verde); }
.wstep-n { width: 20px; height: 20px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-size: 11px; }
.wstep-line { flex: 1; height: 1px; background: var(--color-rule); margin: 0 8px; min-width: 12px; }
.wizard-sheet { padding: 24px; }
.wizard-nav { display: flex; align-items: center; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--color-rule-soft); }

/* Paso 6 · Documentación */
.doc-lista { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--color-rule-soft); border-radius: var(--radius-sm); overflow: hidden; }
.doc-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--color-sheet); }
.doc-fila + .doc-fila { border-top: 1px solid var(--color-rule-soft); }
.doc-fila-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.doc-fila-titulo { font-size: 14.5px; font-weight: 500; }
.doc-fila-archivo { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--color-verde); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-fila-archivo.doc-pendiente { color: var(--color-ink-30); }
.doc-fila-accion { display: flex; gap: 8px; flex: none; }
.auto-panel { margin-top: 16px; background: var(--color-mist); border-radius: var(--radius-sm); padding: 14px 16px; }
.auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 8px; }
.auto-field { display: flex; flex-direction: column; gap: 3px; }
.auto-field strong { font-size: 14.5px; }
.auto-inline .auto-value { font-size: 14.5px; font-weight: 500; padding: 9px 0; }
.auto-badge { font-family: var(--font-mono); color: var(--color-marca); }

/* --------------------------------- Table ----------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-50); font-weight: 500; padding: 10px 14px; border-bottom: 1px solid var(--color-rule); }
.table td { padding: 13px 15px; border-bottom: 1px solid var(--color-rule-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tfoot td { font-weight: 600; border-top: 1px solid var(--color-rule); border-bottom: 0; }
.table .num { text-align: right; font-family: var(--font-mono); }
.row-click { cursor: pointer; }
.row-click:hover { background: var(--color-mist); }
.trunc { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-mini { padding: 26px; text-align: center; color: var(--color-ink-50); font-size: 14px; }

/* --------------------------------- Tabs ------------------------------------ */
.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--color-rule); margin-bottom: 18px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.tabs::-webkit-scrollbar { height: 6px; }
.tabs::-webkit-scrollbar-thumb { background: var(--color-rule); border-radius: 3px; }
.tabs::-webkit-scrollbar-track { background: transparent; }
.tab { position: relative; display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0 2px 9px; font-size: 15px; font-weight: 500; color: var(--color-ink-50); cursor: pointer; white-space: nowrap; }
.tab:hover, .tab.active { color: var(--color-ink); }
/* El subrayado se apoya en el borde del contenedor, no un pixel por debajo:
   ese pixel de más era lo que hacía aparecer una barra de desplazamiento
   vertical en miniatura junto a las pestañas. */
.tab.active:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1.5px; background: var(--color-marca); }
.habitat-tabs { margin-top: 12px; margin-bottom: 0; }

/* --------------------------- Habitat shared header -------------------------- */
.habitat-head { padding-top: 16px; }
.habitat-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.habitat-head h1 { font-size: 23px; margin-top: 2px; }
/* Regreso al hub, en espejo del botón "Abrir Hábitat" del hub */
/* Aire arriba y abajo: el botón queda entre la miga y el título. */
.btn-back { display: flex; width: max-content; margin: 9px 0; }
.habitat-head-actions { display: flex; gap: 8px; }
.cartouche { border: 1px solid var(--color-rule); background: var(--color-mist); border-radius: var(--radius-sm); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
.cartouche > div { border-left: 1px solid var(--color-rule); min-width: 0; padding: 7px 12px; display: flex; flex-direction: column; justify-content: center; }
.cartouche > div:first-child { border-left: 0; }
.cartouche-val { font-size: 14px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Selector de proyecto dentro del cartucho (filtro global de Hábitat) */
.cartouche-select { border: 0; background: none; font-family: inherit; font-size: 14px; color: var(--color-ink); padding: 1px 22px 1px 0; margin-top: 1px; width: 100%; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a6b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right center; }
.cartouche-select:focus { outline: none; box-shadow: inset 0 -2px 0 -1px var(--color-marca); }
.cartouche-select:hover { color: var(--color-marca); }
@media (max-width: 640px) { .cartouche { grid-template-columns: 1fr; } .cartouche > div { border-left: 0; border-top: 1px solid var(--color-rule); } .cartouche > div:first-child { border-top: 0; } }

/* ------------------------------ Panorama sections ---------------------------- */
.panorama-section { margin-top: 34px; }
.panorama-section:first-of-type { margin-top: 4px; }
.panorama-section:first-child { margin-top: 18px; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-head h2 { font-size: 21px; margin-top: 4px; }
.section-head-right { font-size: 14px; color: var(--color-ink-50); padding-bottom: 3px; }

.task-list { padding: 4px 0; }
.task-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--color-rule-soft); cursor: pointer; text-align: left; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; }
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--color-hover); }
.task-num { font-family: var(--font-mono); font-size: 13px; color: var(--color-ink-30); width: 22px; flex-shrink: 0; }
.task-bar { width: 4px; height: 44px; flex-shrink: 0; border-radius: 2px; }
.task-main { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.task-title { font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-more { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--color-rule); background: var(--color-mist); }

.kpi-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .kpi-row-4 { grid-template-columns: 1fr 1fr; } }
.kpi-row-4 > .kpi { border-right: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.kpi-row-4 > .kpi:nth-child(4n) { border-right: 0; }
.kpi-alerta .kpi-note, .kpi-alerta .kpi-value { color: var(--color-alerta); }

.chart-card { padding: 18px; }
.bar-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; height: 180px; }
.bar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; height: 100%; justify-content: flex-end; }
.bar-val { font-size: 11px; }
.bar-track { width: 100%; max-width: 34px; height: 120px; display: flex; align-items: flex-end; background: var(--color-mist); border-radius: 2px 2px 0 0; overflow: hidden; }
.bar-fill { width: 100%; background: var(--color-marca); border-radius: 2px 2px 0 0; min-height: 3px; }
.bar-label { text-transform: uppercase; }
.avance-list { display: flex; flex-direction: column; gap: 14px; }
.avance-row { display: flex; align-items: center; gap: 12px; }
.avance-name { font-size: 13.5px; width: 150px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avance-pct { width: 36px; text-align: right; flex-shrink: 0; }

/* ------------------------------ Info blocks -------------------------------- */
.infoblock { padding: 16px 18px; }
.info-rows { display: flex; flex-direction: column; gap: 9px; }
.info-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; border-bottom: 1px dashed var(--color-rule-soft); padding-bottom: 9px; }
.info-row span { color: var(--color-ink-50); }
.info-row strong { font-weight: 500; text-align: right; }

/* -------------------------------- Pipeline ---------------------------------- */
.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.pipeline-step { background: none; border: 0; border-right: 1px solid var(--color-rule-soft); padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.pipeline-step:hover { background: var(--color-mist); }
.pipeline-count { font-family: var(--font-mono); font-size: 20px; }
.pipeline-label { font-size: 12.5px; font-weight: 500; }
.pipeline-owner { font-size: 10.5px; }

/* --------------------------------- Alerts ----------------------------------- */
.alert-list { padding: 6px; }
.alert-row { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px; background: none; border: 0; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.alert-row:hover { background: var(--color-mist); }
.alert-icon { width: 24px; height: 24px; border-radius: var(--radius-sm); display: grid; place-items: center; flex-shrink: 0; }
.alert-icon.alert-alta { background: var(--color-alerta-soft); color: var(--color-alerta); }
.alert-icon.alert-media { background: var(--color-ocre-soft); color: var(--color-ocre); }
.alert-text { font-size: 13.5px; padding-top: 2px; }

/* --------------------------------- Meter ------------------------------------ */
.meter { background: var(--color-rule); height: 5px; overflow: hidden; border-radius: 3px; flex: 1; }
.meter > span { background: var(--color-marca); height: 100%; display: block; }
.counter-row { display: flex; align-items: center; gap: 12px; }

/* ------------------------------- Escalera ------------------------------------ */
.escalera { display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; gap: 0; margin-top: 6px; scrollbar-width: thin; }
.escalon { flex: 1; min-width: 108px; background: none; border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; text-align: left; }
.escalon .code { font-size: 10px; }
.escalon-n { font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-30); }
.escalon-name { font-size: 13.5px; font-weight: 500; }
.escalon.done { background: var(--color-marca-soft); border-color: var(--color-marca); }
.escalon.done .escalon-n { color: var(--color-marca); }
.escalon.active { background: var(--color-marca); border-color: var(--color-marca); color: #fff; }
.escalon.active .code, .escalon.active .escalon-n { color: #ffffffbb; }
.escalera-line { width: 10px; flex-shrink: 0; }
.hint-note { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--color-ink-50); margin-top: 14px; }
.hint-ok { color: var(--color-verde); }
.hint-warn { color: var(--color-alerta); }

/* -------------------------------- Contrato ------------------------------------ */
.contract-sheet { padding: 20px; }
.contract-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.contract-text { white-space: pre-wrap; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; background: var(--color-mist); padding: 18px; border-radius: var(--radius-sm); }

/* --------------------------------- Timeline ------------------------------------ */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--color-rule-soft); }
.timeline-row:last-child { border-bottom: 0; }
.timeline-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-marca); margin-top: 6px; flex-shrink: 0; }
.timeline-row p { font-size: 14px; }

/* ------------------------------- Catálogos --------------------------------- */
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr; } }
.catcard { padding: 16px 18px 18px; }
.catcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.catcard .chip-list { gap: 8px; }
.catcard .inline-add { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-rule-soft); gap: 10px; }
.catcard .inline-add .field { height: 38px; }
.catcard-empty { font-size: 13.5px; color: var(--color-ink-30); padding: 4px 0 2px; }

/* ---------------------------------- Chips --------------------------------------- */
.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip-list li { display: inline-flex; align-items: center; gap: 8px; background: var(--color-mist); border: 1px solid var(--color-rule-soft); border-radius: var(--radius-sm); padding: 6px 8px 6px 11px; font-size: 13.5px; line-height: 1.2; }
.chip-list li button { background: none; border: 0; color: var(--color-ink-30); cursor: pointer; display: flex; padding: 2px; }
.chip-list li button:hover { color: var(--color-alerta); }

/* ----------------------------------- Modal ---------------------------------------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20, 21, 46, .4); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; }
.modal-sheet { background: var(--color-sheet); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); width: 100%; margin: auto; box-shadow: 0 24px 60px -24px rgba(20, 21, 46, .4); max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--color-rule); flex-shrink: 0; }
.modal-head h3 { font-size: 18px; margin-top: 2px; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--color-rule); display: flex; justify-content: flex-end; gap: 8px; background: var(--color-zebra); flex-shrink: 0; }
.wizard-modal .wizard-steps { margin-bottom: 18px; }

/* ------------------------------------ Toast ----------------------------------------- */
.toasthost { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; width: min(92vw, 420px); }
.toastcard { background: var(--color-sheet); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); box-shadow: 0 12px 32px -16px rgba(20, 21, 46, .4); padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.toastcard p { font-size: 14px; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-marca { background: var(--color-marca); }
.dot-verde { background: var(--color-verde); }
.dot-ocre { background: var(--color-ocre); }
.dot-alerta { background: var(--color-alerta); }
.dot-azul { background: var(--color-azul); }

/* --------------------------------- Success panel ------------------------------------- */
.success-panel { text-align: center; }
.success-rows { text-align: left; margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.success-row { display: flex; justify-content: space-between; font-size: 14px; border-bottom: 1px dashed var(--color-rule-soft); padding-bottom: 7px; }
.success-note { font-size: 13px; color: var(--color-ink-50); margin-top: 16px; text-align: left; }

/* La proforma ya no se imprime desde el navegador: se descarga como PDF
   generado en el servidor (proforma_pdf.php), que sale idéntico en cualquier
   equipo. Esta regla solo cuida un Ctrl+P accidental. */
@media print {
  .topbar, .sidenav, .page-head, .tabs, .toasthost, .synchost, .appfoot, .modal-foot { display: none !important; }
  body { background: #fff; }
  .proforma-doc { border: 0; padding: 0; }
  @page { margin: 18mm 16mm; }
}

/* ==========================================================================
   PARIDAD CON EL DEMO DE REFERENCIA (demo_completo_ref.html)
   Tokens, cromo global, hub, panorama, listas, cierres, cobranza y postventa.
   ========================================================================== */

/* Marca cuadrada delante de los eyebrows de sección */
.eyebrow-mark { display: inline-flex; align-items: center; gap: 7px; }
.eyebrow-mark:before { content: ""; width: 6px; height: 6px; flex: none; background: var(--mark, var(--color-marca)); }

/* --------------------------- Topbar: herramientas ------------------------- */
.topbar-tools { display: flex; align-items: center; gap: 8px; }
.tb-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: var(--radius-sm); background: #ffffff0f; border: 1px solid #ffffff26; color: #ecebf5; font: 500 14px var(--font-sans); cursor: pointer; }
.tb-btn:hover { background: #ffffff21; border-color: #ffffff4d; }
.tb-kbd { font-family: var(--font-mono); font-size: 11px; color: #ecebf58c; border: 1px solid #ffffff26; border-radius: 2px; padding: 1px 4px; }
.tb-select { height: 34px; border-radius: var(--radius-sm); background: #ffffff0f; border: 1px solid #ffffff26; color: #ecebf5; font: 14px var(--font-sans); padding: 0 8px; cursor: pointer; max-width: 210px; }
.tb-select option { color: var(--color-ink); }
@media (max-width: 1080px) { .tb-search-label, .tb-kbd, .tb-select { display: none; } }

/* Botón de tema (claro / oscuro) */
.tb-theme { width: 34px; padding: 0; justify-content: center; }

/* --------------------------------- Footer --------------------------------- */
.appfoot { border-top: 1px solid var(--color-rule); margin-top: 40px; }
.appfoot-inner { max-width: 1320px; margin: 0 auto; padding: 16px 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------------------------- KPI con filete ------------------------------- */
.kpi-accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--color-marca); }
.kpi-row-4 > .kpi, .kpi-row-3 > .kpi { position: relative; }
.kpi-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.kpi-row-3 > .kpi { border-right: 1px solid var(--color-rule); }
.kpi-row-3 > .kpi:last-child { border-right: 0; }
@media (max-width: 760px) { .kpi-row-3 { grid-template-columns: 1fr; } .kpi-row-3 > .kpi { border-right: 0; border-bottom: 1px solid var(--color-rule); } }
.kpi-foot { border-top: 1px solid var(--color-rule-soft); margin: 12px -16px -13px; padding: 9px 16px; background: var(--color-zebra); font-size: 13px; color: var(--color-ink-50); }
.kpi-alerta .kpi-foot { color: var(--color-alerta); }

/* --------------------------------- Hub ------------------------------------ */
.hub-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
@media (max-width: 1100px) { .hub-grid { grid-template-columns: 1fr; } }
.hub-side { display: flex; flex-direction: column; gap: 26px; }
.act-row { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--color-rule-soft); padding: 11px 14px; }
.act-row:last-child { border-bottom: 0; }
.act-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.act-title { font-size: 14.5px; margin-top: 3px; }
.nucleo-row { width: 100%; display: flex; align-items: center; gap: 11px; background: var(--color-sheet); border: 0; border-bottom: 1px solid var(--color-rule-soft); padding: 11px 14px; text-align: left; cursor: pointer; }
.nucleo-row:last-child { border-bottom: 0; }
.nucleo-row:hover { background: var(--color-mist); }
.nucleo-ic { width: 26px; height: 26px; display: grid; place-items: center; color: var(--color-marca); background: var(--color-marca-soft); border-radius: var(--radius-sm); flex: none; }
.nucleo-main { flex: 1; min-width: 0; }
.nucleo-main strong { display: block; font-size: 14.5px; font-weight: 500; }
.appcard-avail { font-size: 12px; font-family: var(--font-mono); color: var(--color-ink-50); }

/* -------------------------- Recorrido (pipeline) --------------------------- */
.recorrido { display: grid; grid-template-columns: repeat(10, 1fr); }
@media (max-width: 1100px) { .recorrido { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 640px) { .recorrido { grid-template-columns: repeat(2, 1fr); } }
.rec-cell { background: none; border: 0; border-right: 1px solid var(--color-rule-soft); border-bottom: 1px solid var(--color-rule-soft); padding: 12px 12px 0; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.rec-cell:hover { background: var(--color-mist); }
.rec-head { display: flex; align-items: center; gap: 5px; color: var(--color-ink-30); }
.rec-n { font-family: var(--font-mono); font-size: 11px; }
.rec-count { font-family: var(--font-mono); font-size: 25px; line-height: 1; letter-spacing: -.02em; }
.rec-bar { height: 3px; background: var(--color-rule-soft); }
.rec-bar > span { display: block; height: 100%; }
.rec-foot { border-top: 1px solid var(--color-rule-soft); margin: 4px -12px 0; padding: 8px 12px; font-size: 13px; font-weight: 500; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 10px 14px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-ink-50); }
.legend-item i { width: 8px; height: 8px; display: block; }

/* ------------------------------- Área chart -------------------------------- */
.areachart { width: 100%; height: 210px; display: block; }
.areachart .grid-line { stroke: var(--color-rule-soft); stroke-width: 1; }
.areachart .axis { font-family: var(--font-mono); font-size: 10px; fill: var(--color-ink-30); }

/* ---------------------------- Avance por proyecto -------------------------- */
.proj-row { padding: 13px 16px; border-bottom: 1px solid var(--color-rule-soft); }
.proj-row:last-child { border-bottom: 0; }
.proj-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.proj-top h4 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0; }
.proj-pct { font-family: var(--font-mono); font-size: 17px; }
.proj-bar { height: 3px; background: var(--color-rule-soft); margin: 9px 0 7px; }
.proj-bar > span { display: block; height: 100%; background: var(--color-verde); }

/* Tarjetas de proyecto (obra) */
.projcard { padding: 16px 18px 14px; }
.projcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.projcard-head h3 { font-size: 18px; }
.projcard-pct { font-family: var(--font-mono); font-size: 22px; }
.projcard-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.projcard-stats > div span { display: block; font-size: 12px; color: var(--color-ink-50); }
.projcard-stats > div strong { font-family: var(--font-mono); font-size: 18px; font-weight: 400; }
.projcard-foot { border-top: 1px solid var(--color-rule-soft); margin-top: 13px; padding-top: 10px; }

/* --------------------------- Tabla estilo referencia ------------------------ */
.table thead th { background: var(--color-mist); border-bottom: 1px solid var(--color-ink-70); font-family: var(--font-mono); letter-spacing: .1em; font-size: 11px; }
.table tbody tr:nth-child(2n) td { background: var(--color-zebra); }
.table tbody tr.row-click:hover td { background: var(--color-marca-soft); }
.exp-name { font-size: 15px; font-weight: 500; line-height: 1.25; }
.cell-sub { display: flex; align-items: center; gap: 9px; margin-top: 5px; }
.meter-sm { display: inline-block; width: 54px; height: 4px; background: var(--color-rule); overflow: hidden; flex: none; vertical-align: middle; }
.meter-sm > span { display: block; height: 100%; }
.etapa-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.etapa-mark { width: 5px; height: 16px; flex: none; }
.esc-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.esc-n { font-family: var(--font-mono); color: var(--color-ink-30); }
.filters-ref { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.search-wrap { position: relative; flex: 1; min-width: 240px; }
.search-wrap .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--color-ink-30); }
.search-wrap .field { padding-left: 34px; }
.filters-ref .field { height: 42px; }
.filters-ref select.field { width: auto; min-width: 168px; }
.btn-toggle.on { background: var(--color-marca); border-color: var(--color-marca); color: #fff; }
.list-count { margin: 0 0 10px; }

/* -------------------------------- Cierres ---------------------------------- */
.funnel { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 8px; padding: 20px 18px 14px; }
.funnel-col { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 190px; }
.funnel-n { font-family: var(--font-mono); font-size: 22px; line-height: 1; }
.funnel-amount { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-50); }
.funnel-bar { border: 1px solid var(--color-marca); display: flex; align-items: flex-end; justify-content: space-between; padding: 4px 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--color-ink-50); }
.funnel-label { font-size: 13px; padding-top: 6px; border-top: 1px solid var(--color-rule); }
.kanban { display: grid; grid-template-columns: repeat(7, minmax(200px, 1fr)); gap: 12px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scrollbar-width: thin; }
.kcol { background: var(--color-sheet); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); display: flex; flex-direction: column; min-width: 200px; }
.kcol-head { padding: 12px 13px; border-bottom: 1px solid var(--color-rule); border-top: 3px solid var(--color-marca); }
.kcol-head .row { display: flex; align-items: baseline; justify-content: space-between; }
.kcol-n { font-family: var(--font-mono); font-size: 17px; }
.kcol-name { font-size: 14.5px; font-weight: 500; margin-top: 2px; }
.kcol-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; max-height: 620px; overflow-y: auto; }
.kcard { border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: 10px 11px; background: var(--color-sheet); }
.kcard.late { border-color: #b23a1066; background: var(--color-alerta-soft); }
.kcard-name { font-size: 14px; font-weight: 500; line-height: 1.3; }
.kcard-foot { margin-top: 9px; display: flex; gap: 6px; }
.kcol-empty { padding: 14px 12px; }

/* -------------------------------- Cobranza --------------------------------- */
.progress-thin { display: inline-block; width: 84px; height: 4px; background: var(--color-rule); vertical-align: middle; }
.progress-thin > span { display: block; height: 100%; background: var(--color-marca); }
.falta { color: var(--color-alerta); font-family: var(--font-mono); }

/* -------------------------------- Postventa -------------------------------- */
.tk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .tk-grid { grid-template-columns: 1fr; } }
.tk-card { display: flex; flex-direction: column; padding: 14px 16px 0; }
.tk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tk-card h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 8px 0 2px; }
.tk-desc { font-size: 14.5px; color: var(--color-ink-70); margin: 12px 0 14px; }
.tk-foot { border-top: 1px solid var(--color-rule-soft); margin: 0 -16px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tag-dot:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

/* ------------------------- Paleta de búsqueda (⌘K) -------------------------- */
.palette-backdrop { position: fixed; inset: 0; background: rgba(20,21,46,.32); z-index: 120; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.palette { width: 100%; max-width: 540px; background: var(--color-sheet); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); box-shadow: 0 24px 60px -24px rgba(20,21,46,.4); overflow: hidden; }
.palette-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--color-rule); }
.palette-search input { flex: 1; border: 0; outline: none; height: 50px; font: 15.5px var(--font-sans); color: var(--color-ink); background: none; }
.palette-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.palette-item { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; text-align: left; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14.5px; }
.palette-item:hover { background: var(--color-marca-soft); }
.palette-foot { border-top: 1px solid var(--color-rule); padding: 8px 14px; background: var(--color-zebra); }

/* ----------------------------- Asistente (panel) ---------------------------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(20,21,46,.3); z-index: 120; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--color-sheet); border-left: 1px solid var(--color-rule); z-index: 121; display: flex; flex-direction: column; box-shadow: -24px 0 60px -30px rgba(20,21,46,.5); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--color-rule); }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.drawer-foot { border-top: 1px solid var(--color-rule); padding: 12px 14px; }
.chip { border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-sheet); padding: 5px 9px; font-size: 13px; cursor: pointer; color: var(--color-ink-70); }
.chip:hover { border-color: var(--color-ink-30); background: var(--color-mist); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.msg { max-width: 85%; padding: 9px 12px; font-size: 14.5px; line-height: 1.55; white-space: pre-line; border-radius: 3px; }
.msg-bot { background: var(--color-mist); border: 1px solid var(--color-rule-soft); align-self: flex-start; }
.msg-user { background: var(--color-marca); color: #fff; align-self: flex-end; }
.drawer-send { display: flex; gap: 8px; }

/* Formularios embebidos en una hoja: mismo respiro que el resto de tarjetas */
/* form.sheet hereda el padding de .sheet */
.kpi-value { font-size: 26px; white-space: nowrap; }
/* Con la interfaz ampliada el ancho útil baja: los importes largos se ajustan
   un punto para no partirse en dos líneas. */
@media (max-width: 1250px) { .kpi-value { font-size: 23px; } }
@media (max-width: 1050px) { .kpi-value { font-size: 21px; } }
.task-title { font-size: 15.5px; }
.section-head h2 { font-size: 22px; }

/* Selects compactos dentro de tablas (estado de trámites y tickets) */
.table select.field { height: 34px; padding: 0 8px; font-size: 13.5px; min-width: 132px; }
.table .block { display: block; }

/* --------------------------- Detalle del expediente ------------------------- */
.det-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.esc-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 10px 0 6px; }
.esc-seg { height: 22px; background: var(--color-rule); }
.esc-seg.done { background: var(--color-marca); }
.esc-seg.active { background: var(--color-marca); box-shadow: inset 0 0 0 2px var(--color-sheet), inset 0 0 0 3px var(--color-marca); }
.esc-nums { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.esc-nums span { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-30); text-align: center; }

/* ------------------- Aviso de sincronización con la base ------------------- */
.synchost { position: fixed; right: 18px; bottom: 18px; z-index: 210; }
.syncbar { display: flex; align-items: center; gap: 8px; background: var(--color-sheet); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13.5px; color: var(--color-ink-70); box-shadow: 0 12px 32px -18px rgba(20, 21, 46, .4); }
.syncbar-error { border-color: #b23a1055; background: var(--color-alerta-soft); color: var(--color-alerta); }


/* ==========================================================================
   MODO OSCURO
   Mismo lenguaje del diseño: papel cuadriculado, hojas rectangulares, borde
   fino y radio de 2px. Solo cambia el papel: de blanco de plano impreso a
   azul de plano nocturno, con la cuadrícula en positivo.
   ========================================================================== */
html[data-theme="dark"] {
  /* Le avisa al navegador que estamos en oscuro: los controles nativos
     (calendario, barras de desplazamiento, autocompletado) se adaptan solos. */
  color-scheme: dark;
  --color-marca: #8f8ad8;
  --color-marca-soft: #23214d;
  --color-ink: #eceef8;
  --color-ink-70: #c9cbdd;
  --color-ink-50: #a6aac4;
  --color-ink-30: #8286a4;
  --color-paper: #0e0e1c;
  --color-mist: #16172a;
  --color-sheet: #14152a;
  --color-rule: #2b2d47;
  --color-rule-soft: #232538;
  --color-zebra: #171829;
  --color-hover: #1d1f33;
  --color-topbar: #0a0a16;
  --color-topbar-ink: #e8e9f5;
  --grid-line: #ffffff14;
  --sheet-shadow: 0 1px 2px #00000040;

  --color-azul: #6cb6e4;
  --color-azul-soft: #12293a;
  --color-verde: #63bd83;
  --color-verde-soft: #122a1c;
  --color-ocre: #d4b465;
  --color-ocre-soft: #2e2612;
  --color-morado: #a596e0;
  --color-morado-soft: #221d3a;
  --color-alerta: #ef8a63;
  --color-alerta-soft: #331810;

  /* Tonos que usan las gráficas. En oscuro la marca se aclara para que las
     barras se despeguen del fondo, y el "papel" de las porciones deja de ser
     blanco: si no, cada rebanada llevaría un borde luminoso. */
  --color-marca-fuerte: #6b66b8;
  --color-marca-suave: #453f7d;
  --color-surface: #14152a;
  --color-grafica-texto: #a6aac4;
  --color-grafica-linea: #2b2d47;
}

/* La barra superior ya es oscura: se separa del papel con una línea fina. */
html[data-theme="dark"] .topbar { border-bottom: 1px solid var(--color-rule); }
html[data-theme="dark"] .userchip,
html[data-theme="dark"] .tb-btn,
html[data-theme="dark"] .tb-select { background: #ffffff0d; border-color: #ffffff1f; }
html[data-theme="dark"] .tb-btn:hover { background: #ffffff1a; border-color: #ffffff33; }

/* El botón primario mantiene el contraste sobre el papel oscuro. */
html[data-theme="dark"] .btn-primary { background: var(--color-marca); border-color: var(--color-marca); color: #12122a; }
html[data-theme="dark"] .btn-primary:hover { background: #a29de2; border-color: #a29de2; }
html[data-theme="dark"] .btn-toggle.on { color: #12122a; }
html[data-theme="dark"] .escalon.active { color: #12122a; }
html[data-theme="dark"] .escalon.active .code,
html[data-theme="dark"] .escalon.active .escalon-n { color: #12122acc; }
html[data-theme="dark"] .msg-user { color: #12122a; }
html[data-theme="dark"] .nucleo-ic { color: var(--color-marca); background: var(--color-marca-soft); }
html[data-theme="dark"] .appcard-bar { background: var(--color-marca); }
html[data-theme="dark"] .appcard-muted { opacity: .45; }
html[data-theme="dark"] .logo-mark { fill: #0a0a16; }
html[data-theme="dark"] .kcol-head { border-top-color: var(--color-marca); }
html[data-theme="dark"] .funnel-bar { border-color: var(--color-marca); }
html[data-theme="dark"] .cartouche-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238d90aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
/* Los <select> nativos necesitan que el color se herede explícitamente. */
html[data-theme="dark"] select.field option,
html[data-theme="dark"] .cartouche-select option { background: var(--color-sheet); color: var(--color-ink); }

/* Formularios en oscuro: el valor escrito va en tinta plena y la pista en
   un gris que sí se lee sobre el papel oscuro. */
html[data-theme="dark"] .field,
html[data-theme="dark"] select.field,
html[data-theme="dark"] textarea.field { color: var(--color-ink); background: var(--color-sheet); }
html[data-theme="dark"] .field::placeholder { color: var(--color-ink-30); opacity: 1; }
html[data-theme="dark"] .field-label { color: var(--color-ink-50); }
html[data-theme="dark"] .palette-search input { color: var(--color-ink); }
html[data-theme="dark"] .palette-search input::placeholder { color: var(--color-ink-30); opacity: 1; }
html[data-theme="dark"] .auto-panel { background: var(--color-mist); }
html[data-theme="dark"] .wstep-n { border-color: currentColor; }
html[data-theme="dark"] .chip-list li { background: var(--color-mist); border-color: var(--color-rule); }
html[data-theme="dark"] .contract-text { background: var(--color-mist); color: var(--color-ink-70); }

/* --------------------- Control de tamaño (menú de usuario) ------------------ */
.usermenu-escala { padding: 11px 14px 12px; border-top: 1px solid var(--color-rule-soft); background: var(--color-sheet); }
.escala-opts { display: flex; gap: 6px; margin-top: 8px; }
.escala-opt { flex: 1; border: 1px solid var(--color-rule); background: var(--color-sheet); border-radius: var(--radius-sm); padding: 5px 0; font: 500 12.5px var(--font-mono); color: var(--color-ink-50); cursor: pointer; }
.escala-opt:hover { border-color: var(--color-ink-30); color: var(--color-ink); }
.escala-opt.on { background: var(--color-marca); border-color: var(--color-marca); color: #fff; }
html[data-theme="dark"] .escala-opt.on { color: #12122a; }

/* -------------------------- Portal del cliente ----------------------------- */
.portal-box { background: var(--color-sheet); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: 14px 16px 12px; margin-bottom: 18px; }
.portal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.portal-box .success-rows { margin: 0; }
.portal-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.portal-nota { font-size: 13px; color: var(--color-ink-50); line-height: 1.55; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--color-rule-soft); }
/* El QR real necesita fondo claro siempre: los lectores esperan módulos
   oscuros sobre claro, así que en modo oscuro se enmarca en blanco. */
.qr-box { display: flex; justify-content: center; margin-bottom: 10px; }
.qr-svg { width: 190px; height: 190px; background: #fff; padding: 0; }
.qr-svg rect { fill: #14152e; }
html[data-theme="dark"] .qr-svg { background: #fff; }
html[data-theme="dark"] .qr-svg rect { fill: #14152e; }


/* ============================ PROFORMA FORMAL ==============================
   Vista previa del documento que se descarga en PDF. Se ve igual en pantalla
   y en papel: tipografía con serifa, márgenes de carta y montos alineados a
   la derecha con línea de puntos, como el machote que usa hoy la promotora.
   ========================================================================== */
.proforma-doc { background: #fff; color: #14152e; font-family: Georgia, "Times New Roman", serif; font-size: 13.5px; line-height: 1.6; padding: 34px 40px; border: 1px solid var(--color-rule); }
.proforma-doc p { margin: 0 0 12px; text-align: justify; }
.pf-head { text-align: center; border-bottom: 1.5px solid #14152e; padding-bottom: 12px; margin-bottom: 22px; }
.pf-head h1 { font-size: 19px; letter-spacing: .02em; margin: 0 0 3px; }
.pf-head p { margin: 1px 0; text-align: center; font-size: 12px; }
.pf-italic { font-style: italic; }
.pf-mail { color: #0b6ba5; }
.pf-fecha { text-align: right !important; margin-bottom: 20px !important; }
.pf-subt { margin-top: 18px !important; }
.pf-tabla { width: 100%; border-collapse: collapse; margin: 6px 0 16px; }
.pf-tabla td { padding: 4px 0; border-bottom: 1px dotted #9799ad; font-size: 13.5px; }
.pf-monto { text-align: right; white-space: nowrap; padding-left: 20px !important; }
.pf-firmas { margin-top: 46px; }
.pf-firmas-2 { display: flex; gap: 60px; }
.pf-firma { flex: 1; }
.pf-linea { display: block; width: 230px; border-top: 1px solid #14152e; margin-bottom: 4px; }
.pf-firma strong { display: block; font-size: 13.5px; }
.pf-firma span { font-size: 12.5px; }
/* En oscuro el documento se mantiene blanco: es una hoja, no una pantalla. */
html[data-theme="dark"] .proforma-doc { background: #fff; color: #14152e; }

/* --------------------- Enlace con la plataforma de separadores -------------- */
.sep-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; flex-wrap: wrap; }
.sep-panel-main { display: flex; align-items: flex-start; gap: 11px; }
.sep-panel-acciones { display: flex; gap: 8px; }
.sep-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; }
.sep-dot.on { background: var(--color-verde); box-shadow: 0 0 0 3px var(--color-verde-soft); }
.sep-dot.off { background: var(--color-ink-30); box-shadow: 0 0 0 3px var(--color-rule-soft); }
.sep-detalle { font-size: 14.5px; margin: 2px 0 2px; }

/* -------------------- Filtros y paginación del inventario ------------------ */
.legend-filtro { background: none; border: 0; padding: 0; cursor: pointer; opacity: .75; }
.legend-filtro:hover { opacity: 1; }
.legend-filtro.on { opacity: 1; box-shadow: 0 2px 0 0 var(--color-marca); }
.paginador { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--color-rule); background: var(--color-zebra); }
.paginador .btn[disabled] { opacity: .4; cursor: not-allowed; }
.row-prospecto td { background: var(--color-mist) !important; }
.row-prospecto .exp-name { color: var(--color-ink-70); }

/* Traer un cliente que ya existe, dentro del formulario de alta */
.wiz-traer { background: var(--color-mist); border: 1px solid var(--color-rule-soft); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; }
.wiz-traer .code { margin: 7px 0 0; }

/* ----------------------------- Usuarios y roles ---------------------------- */
.rol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.rol-card { padding: 15px 16px 16px; }
.rol-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rol-head h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0; }
.rol-desc { font-size: 13.5px; color: var(--color-ink-70); line-height: 1.5; margin: 6px 0 12px; }
.rol-card .chip-list li { font-family: var(--font-mono); font-size: 11.5px; padding: 4px 7px; }
.as-link { background: none; border: 0; padding: 0; font: inherit; color: var(--color-marca); cursor: pointer; }
.as-link:hover { text-decoration: underline; }

/* Campo de catálogo con alta rápida en línea */
.campo-alta { position: relative; }
.campo-alta .btn-alta {
  position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-marca);
}
.campo-alta .btn-alta:hover { text-decoration: underline; }

/* ------------------------------ Configuración ------------------------------ */
.config-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.config-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  background: var(--color-surface); border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm); padding: 18px 18px 20px; cursor: pointer; text-align: left;
  transition: border-color .12s, transform .12s;
}
.config-card:hover { border-color: var(--color-marca); transform: translateY(-1px); }
.config-icon { color: var(--color-marca); margin-bottom: 6px; }
.config-nombre { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--color-ink); }
.config-desc { font-size: 13.5px; color: var(--color-ink-50); line-height: 1.45; }
.campo-alta.abierto .alta-fila { display: flex; gap: 8px; align-items: center; }
.campo-alta.abierto .alta-fila .field { flex: 1; }
.field-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink-50); margin-bottom: 6px; }

/* ------------------------- Catálogos: edición en línea --------------------- */
.chip-list .chip-texto { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.chip-list .chip-texto:hover { text-decoration: underline dotted; }
.chip-list li.chip-editando { padding: 2px 4px 2px 6px; gap: 4px; }
.field-chip { height: 26px; padding: 0 6px; font-size: 13px; min-width: 120px; }
.chip-ok { color: var(--color-verde) !important; }

/* --------------------------------- Proyectos ------------------------------- */
.proy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.proy-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm); padding: 18px 20px 16px;
  transition: border-color .12s, transform .12s;
}
.proy-card:hover { border-color: var(--color-marca); transform: translateY(-1px); }
.proy-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.proy-top h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 0 0 2px; color: var(--color-ink); }
.proy-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.proy-cifras > div { display: flex; flex-direction: column; gap: 1px; }
.proy-num { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--color-ink); line-height: 1.1; }
.proy-barra { height: 4px; background: var(--color-rule-soft); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.proy-barra span { display: block; height: 100%; background: var(--color-marca); }
.proy-pie { display: flex; align-items: center; justify-content: space-between; }
.proy-abrir { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-marca); }

/* Acciones al pie de una tarjeta de catálogo */
.catcard-acciones { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-rule-soft); }
.page-head-acciones { display: flex; align-items: center; gap: 10px; }

/* ==========================================================================
   CONFIGURACIÓN › FONDO DE ACCESO
   La vista previa es un marco con login.php dentro, escalado a la anchura
   disponible: lo que se ve ahí es exactamente la pantalla de entrada.
   ========================================================================== */
.fondo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .fondo-layout { grid-template-columns: 1fr; } }

.fondo-marco { padding: 0; overflow: hidden; position: relative; }
.fondo-marco iframe { width: 1280px; height: 800px; border: 0; display: block; transform-origin: 0 0; }

.ajustes { display: grid; gap: 14px; }
.ajustes-grupo { display: grid; gap: 8px; }
.ajustes-linea { border-top: 1px solid var(--color-rule-soft); }
.ajustes-acciones { display: flex; gap: 8px; }
.ajustes-acciones .btn { flex: 1; justify-content: center; }

/* Pastillas de dos columnas: con cuatro opciones se pliegan en dos filas. */
.seg { display: grid; border: 1px solid var(--color-rule); border-radius: var(--radius-sm); overflow: hidden; }
.seg-2 { grid-template-columns: 1fr 1fr; }
.seg button { background: var(--color-sheet); border: 0; border-right: 1px solid var(--color-rule); padding: 8px 4px; font: 400 12.5px var(--font-sans); color: var(--color-ink-70); cursor: pointer; }
.seg button:nth-child(2n) { border-right: 0; }
.seg-2 button:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
.seg button:hover { background: var(--color-hover); }
.seg button.on { background: var(--color-marca); color: #fff; font-weight: 500; }
html[data-theme="dark"] .seg button.on { color: #12122a; }

.metrica { display: grid; gap: 5px; }
.metrica-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.metrica-valor { color: var(--color-ink-70); }
.metrica input[type="range"] { width: 100%; margin: 0; accent-color: var(--color-marca); }

.fondo-nota { font-size: 12.5px; color: var(--color-ink-50); line-height: 1.45; }
.fondo-estado { min-height: 16px; text-align: right; margin: 0; }

/* --------------------- CONFIGURACIÓN › INTERFAZ --------------------------- */
/* La pastilla de tres opciones (la forma que abre el cambio de tema). */
.seg-3 { grid-template-columns: 1fr 1fr 1fr; }
.seg-3 button:nth-child(3n) { border-right: 0; }
.seg-3 button:nth-child(2n) { border-right: 1px solid var(--color-rule); }
.seg-3 button:last-child { border-right: 0; }

/* Los botones del dock de muestra: sin fondo propio ni borde, porque el
   redondel y el tamaño se los pone el motor del dock. */
.dock-demo-btn {
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-ink-50);
  font-family: inherit;
  cursor: default;
}

/* Formatos permitidos: activos y apagados */
.chip-list li.chip-off { opacity: .45; }
.chip-list li.chip-on { border-color: var(--color-marca); }
.chip-list .chip-texto { display: inline-flex; align-items: center; gap: 4px; }

/* Catálogos con prioridad: se distinguen a simple vista */
.catcard-prioridad { border-color: var(--color-ocre-borde, #e6d3a8); }
.chip-list li.chip-prioridad { background: #fdf8ec; border-color: #edd9ae; }
.chip-list li.chip-prioridad .chip-texto { color: #8a6a1f; }

/* Pie de la actividad del hub */
.act-mas {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  background: none; border: 0; border-top: 1px solid var(--color-rule-soft); cursor: pointer;
  padding: 12px; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-marca);
}
.act-mas:hover { background: var(--color-mist); }

/* El asistente escribe su respuesta */
.msg-escribiendo { min-height: 1.5em; }
.msg-cursor {
  display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  background: var(--color-marca); vertical-align: -2px;
  animation: parpadeo .9s steps(2, start) infinite;
}
@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .msg-cursor { animation: none; } }

/* ================================ Gráficas ================================= */
.gr { width: 100%; height: auto; display: block; }
.gr-guias line { stroke: var(--color-rule); stroke-width: 1; }
.gr-base { stroke: var(--color-rule); stroke-width: 1; }
.gr-eje { font-family: var(--font-mono); font-size: 10.5px; fill: var(--color-ink-50); }
.gr-eje-fila { font-family: var(--font-sans); font-size: 12px; fill: var(--color-ink-70); }
.gr-valor { font-family: var(--font-mono); font-size: 11px; fill: var(--color-ink-70); }
.gr-carril { fill: var(--color-rule-soft); }
.gr-barra, .gr-porcion, .gr-punto { transition: opacity .12s; cursor: default; }
.gr-barra:hover, .gr-porcion:hover, .gr-punto:hover { opacity: .78; }
.gr-dona-total { font-family: var(--font-display); font-size: 26px; font-weight: 600; fill: var(--color-ink); }
.gr-dona-pie { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; fill: var(--color-ink-50); }
.gr-leyenda { font-family: var(--font-sans); font-size: 12px; fill: var(--color-ink-70); }
.gr-vacio {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-40); font-size: 13.5px;
}
.gr-tip {
  position: fixed; z-index: 200; pointer-events: none; opacity: 0;
  background: var(--color-ink); color: #fff; font-size: 12.5px;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.22); transition: opacity .12s;
}
.gr-tip.visible { opacity: 1; }

/* Tarjetas del panel */
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel-grid .ancho-total { grid-column: 1 / -1; }
@media (max-width: 900px) { .panel-grid { grid-template-columns: 1fr; } }
.panel-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-card-head h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0; }

/* Perfil del comprador: cuatro miniaturas en fila */
.panel-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
@media (max-width: 700px) { .panel-minis { grid-template-columns: 1fr; } }
.panel-mini .eyebrow { display: block; margin-bottom: 6px; }

/* Perfil del comprador: cuatro miniaturas en rejilla */
.panel-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.panel-minis .eyebrow { display: block; margin-bottom: 6px; }
.panel-mini svg { max-height: 130px; }
@media (max-width: 720px) { .panel-minis { grid-template-columns: 1fr; } }

/* Leyenda bajo una gráfica */
.gr-leyendas { display: flex; gap: 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-rule-soft); }
.gr-marca { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--color-ink-70); }
.gr-marca::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.gr-marca-linea::before { background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 9px); }

/* Las tarjetas del panel no se estiran para igualar a su vecina */
.panel-grid { align-items: start; }

/* Leyenda clicable: enciende y apaga series */
.gr-leyenda-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; justify-content: center; }
.gr-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--color-mist); border: 1px solid var(--color-rule);
  border-radius: 100px; padding: 5px 11px; font: inherit; font-size: 12.5px;
  color: var(--color-ink-70); transition: opacity .12s, border-color .12s;
}
.gr-chip:hover { border-color: var(--color-marca); }
.gr-chip b { font-weight: 600; color: var(--color-ink); }
.gr-chip-punto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.gr-chip.apagada { opacity: .4; }
.gr-chip.apagada .gr-chip-punto { background: var(--color-ink-40) !important; }
.gr-chip.apagada b { text-decoration: line-through; }

.gr-pct { font-family: var(--font-mono); font-size: 11px; fill: #fff; font-weight: 500; pointer-events: none; }
.gr-host .gr-lienzo { min-height: 40px; }

/* La dona no se estira al ancho de su columna: se queda a su tamaño y se centra */
.gr-dona { max-width: 260px; margin: 0 auto; }

/* ========================= Tarjetas del panel ============================== */
.gcard { padding: 20px 22px; }
.gcab { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
        padding-bottom: 14px; border-bottom: 1px solid var(--color-rule-soft); }
.gcab dl { margin: 0; }
.gcab dt { font-size: 13.5px; color: var(--color-ink-70); margin: 0; }
.gcab dd { margin: 2px 0 0; font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.gtitulo h5 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0; }
.gsub { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-ink-40); margin: 3px 0 0; }

.ginsignia { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
             font-size: 11.5px; font-weight: 600; padding: 3px 7px; border-radius: 5px;
             background: #e6f4ea; color: #1e6b39; border: 1px solid #c6e5d0; }
.ginsignia.baja { background: #fbe9e7; color: #a5340f; border-color: #f2cec4; }

.gapoyo { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 0 2px; }
.gapoyo dl { margin: 0; }
.gapoyo dt { font-size: 13px; color: var(--color-ink-70); margin: 0; }
.gapoyo dd { margin: 1px 0 0; font-size: 16px; font-weight: 600; }
.gapoyo .verde { color: var(--color-verde); }
.gapoyo .rojo { color: var(--color-alerta); }

.gpie { display: flex; justify-content: space-between; align-items: center;
        border-top: 1px solid var(--color-rule-soft); padding-top: 14px; margin-top: 8px; }
.gperiodo { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-ink-40); }
.genlace { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
           cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500;
           color: var(--color-marca); padding: 6px 10px; border-radius: 8px; }
.genlace:hover { background: var(--color-mist); }

/* Prioridad en listas ordenables */
.prio-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-mist); color: var(--color-marca);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
}

/* ============================== Permisos =================================== */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; align-items: start; }
.perm-area-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                  padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--color-rule-soft); }
.btn-todos { background: none; border: 0; cursor: pointer; font-family: var(--font-mono);
             font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-marca); }
.btn-todos:hover { text-decoration: underline; }
.perm-lista { list-style: none; margin: 0; padding: 0; }
.perm-lista li { border-bottom: 1px solid var(--color-rule-soft); }
.perm-lista li:last-child { border-bottom: 0; }
.perm-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; cursor: pointer; }
.perm-item.es-fijo { cursor: default; opacity: .7; }
.perm-item input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--color-marca); }
.perm-titulo { display: block; font-size: 14px; }
.perm-clave { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--color-ink-40); margin-top: 1px; }
.tab-cuenta { display: inline-block; margin-left: 6px; font-family: var(--font-mono); font-size: 10.5px;
              background: var(--color-mist); color: var(--color-ink-50); padding: 1px 6px; border-radius: 100px; }
.aviso-bloqueado { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px;
                   color: var(--color-ocre); font-size: 13.5px; line-height: 1.5; }

/* Fichas en columna (preguntas del asistente) */
.chip-list-col { display: flex; flex-direction: column; gap: 6px; }
.chip-list-col li { width: 100%; justify-content: space-between; }
.catcard-acciones-min { display: inline-flex; align-items: center; gap: 8px; }
.btn-icono { background: none; border: 0; cursor: pointer; color: var(--color-ink-40); padding: 2px; line-height: 0; }
.btn-icono:hover { color: var(--color-alerta); }

/* Pestañas de segundo nivel (roles dentro de Permisos) */
.tabs-suave { margin-bottom: 16px; gap: 2px; }
.chip-list-col .perm-clave { display: block; font-family: var(--font-mono); font-size: 10px;
                             color: var(--color-ink-40); margin-top: 1px; }
.chip-list-col .chip-texto { display: block; text-align: left; flex: 1; }

/* ==========================================================================
   EL SEPARADOR DENTRO DE NASTA

   Los colores del plano son los del separador, no los de la aplicación: el
   verde de "disponible" es el que el cliente ya reconoce en la vista pública,
   y cambiarlo aquí haría que la misma unidad se viera de dos colores según
   quién la mire.
   ========================================================================== */
:root {
  --sep-disponible:  #277C6A;
  --sep-inmediata:   #3AAB8E;
  --sep-vendido:     #7d7d7d;
  --sep-construccion:#D97333;
  --sep-verde:       #2F4A44;
  --sep-calle:       #E8E6E1;
  --sep-oro:         #C8A96E;
}
/* En oscuro solo cambia el asfalto: los colores de estado son los de la
   marca del proyecto y deben leerse igual en los dos temas. */
html[data-theme="dark"] { --sep-calle: #24263a; }

/* -------------------------- Barra de filtros ------------------------------ */
.sep-barra { display: flex; align-items: center; justify-content: space-between;
             gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.sep-estados { display: flex; gap: 6px; flex-wrap: wrap; }
.sep-chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--color-sheet); border: 1px solid var(--color-rule); border-radius: 100px;
  padding: 6px 13px; font-family: inherit; font-size: 13px; color: var(--color-ink-70); }
.sep-chip:hover { background: var(--color-hover); }
.sep-chip span { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-30); }
.sep-chip.on { background: var(--color-marca); border-color: var(--color-marca); color: #fff; }
.sep-chip.on span { color: #ffffffbf; }
html[data-theme="dark"] .sep-chip.on { color: #12122a; }
html[data-theme="dark"] .sep-chip.on span { color: #12122abf; }

.sep-vistas { display: inline-flex; border: 1px solid var(--color-rule);
              border-radius: var(--radius-sm); overflow: hidden; }
.sep-vista { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--color-sheet); border: 0; border-right: 1px solid var(--color-rule);
  padding: 8px 15px; font-family: inherit; font-size: 13px; color: var(--color-ink-70); }
.sep-vista:last-child { border-right: 0; }
.sep-vista:hover { background: var(--color-hover); }
.sep-vista.on { background: var(--color-marca); color: #fff; }
html[data-theme="dark"] .sep-vista.on { color: #12122a; }

.sep-busca { flex: 1; min-width: 180px; max-width: 280px; }
.sep-busca input { width: 100%; font-family: inherit; font-size: 13.5px; padding: 8px 13px;
  border: 1px solid var(--color-rule); border-radius: var(--radius-sm);
  background: var(--color-sheet); color: var(--color-ink); }

/* ------------------------------- El plano --------------------------------- */
.sep-plano-caja { position: relative; padding: 0; overflow: hidden; }
.sep-lienzo { width: 100%; height: 64vh; min-height: 420px; overflow: hidden;
              cursor: grab; background: var(--color-mist); touch-action: none; }
.sep-lienzo.arrastrando { cursor: grabbing; }
.sep-plano { width: 100%; height: 100%; display: block; background: #d8d8d8;}

.sep-calle { fill: var(--sep-calle); stroke: none; }
.sep-verde { fill: var(--sep-verde); stroke: var(--color-sheet); stroke-width: .5; pointer-events: none; }
.sep-zona  { stroke-width: 1.5; pointer-events: none; }

/* Las piezas: un color por estado. Solo lo que se puede tocar cambia el
   cursor; lo vendido se pinta y no responde. */
.sep-pieza { cursor: pointer; stroke: var(--color-sheet); stroke-width: .5;
             transition: fill .16s ease, opacity .18s ease; }
.sep-pieza.es-disponible   { fill: var(--sep-disponible); }
.sep-pieza.es-inmediata    { fill: var(--sep-inmediata); }
.sep-pieza.es-separado     { fill: var(--sep-vendido); }
.sep-pieza.es-vendido      { fill: var(--sep-vendido); }
.sep-pieza.es-construccion { fill: var(--sep-construccion); }
.sep-pieza.es-area_verde   { fill: var(--sep-verde); }
.sep-pieza.es-bloqueado    { fill: var(--sep-vendido); opacity: .5; }
.sep-pieza:hover { fill: var(--sep-oro); stroke-width: 1; }
.sep-pieza.sel { stroke: var(--sep-oro); stroke-width: 2.4; }
/* Sin publicar: sigue en el plano, pero se ve que está fuera de juego. */
.sep-pieza.sin-publicar { stroke-dasharray: 2 2; opacity: .55; }
/* Al filtrar, lo que no encaja se atenúa en vez de esconderse: así se sigue
   viendo dónde está lo que sí encaja dentro del conjunto. */
.sep-pieza.apagada { opacity: .16; cursor: default; pointer-events: none; }

.sep-g-textos { pointer-events: none; }
.sep-num { font-family: var(--font-display); font-size: 11px; font-weight: 600;
           fill: #fff; text-anchor: middle; }
.sep-num-area { font-size: 7px; font-weight: 400; fill: #ffffffcc; }
.sep-rotulo.apagada { opacity: .16; }

/* La etiqueta de calle lleva un halo por detrás (paint-order) para leerse
   sobre el asfalto sin necesitar una caja de fondo. */
.sep-calle-txt { font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: .5px; fill: #25463F; paint-order: stroke; stroke: #fff;
  stroke-width: 2.5px; stroke-linejoin: round; text-anchor: middle; }
html[data-theme="dark"] .sep-calle-txt { fill: #dfe3ea; stroke: #0e0e1c; }

.sep-zona-txt { font-family: var(--font-display); font-weight: 600; fill: #fff;
                text-anchor: middle; letter-spacing: .04em; }

/* Zoom, sobre el plano y sin taparlo. */
.sep-zoom { position: absolute; left: 14px; bottom: 60px; display: inline-flex;
  align-items: center; gap: 2px; background: var(--color-sheet);
  border: 1px solid var(--color-rule); border-radius: 100px; padding: 4px 6px;
  box-shadow: 0 4px 18px #14152e1a; }
.sep-zoom-btn { display: grid; place-items: center; width: 30px; height: 30px; cursor: pointer;
  background: none; border: 0; border-radius: 50%; color: var(--color-ink-70); }
.sep-zoom-btn:hover { background: var(--color-mist); }
.sep-zoom-lee { font-family: var(--font-mono); font-size: 12px; min-width: 46px;
                text-align: center; color: var(--color-ink-70); }
.sep-zoom-div { width: 1px; height: 18px; background: var(--color-rule); margin: 0 3px; }

.sep-leyenda { display: flex; gap: 16px; flex-wrap: wrap; padding: 13px 16px;
               border-top: 1px solid var(--color-rule-soft); }
.sep-marca { display: inline-flex; align-items: center; gap: 7px;
             font-size: 12.5px; color: var(--color-ink-50); }
.sep-marca::before { content: ""; width: 11px; height: 11px; border-radius: 2px;
                     background: var(--sep-vendido); }
.sep-marca.es-disponible::before   { background: var(--sep-disponible); }
.sep-marca.es-inmediata::before    { background: var(--sep-inmediata); }
.sep-marca.es-separado::before     { background: var(--sep-vendido); }
.sep-marca.es-vendido::before      { background: var(--sep-vendido); }
.sep-marca.es-construccion::before { background: var(--sep-construccion); }
.sep-marca.es-area_verde::before   { background: var(--sep-verde); }
.sep-marca.sin-publicar::before { background: transparent; border: 1.5px dashed var(--color-ink-30); }

/* El armazón del renderer de apartamentos vive dentro de una tarjeta, no a
   pantalla completa como en el separador público. */
.apt-host { min-height: 520px; }
.apt-host .map-wrap { position: relative; height: 64vh; min-height: 420px; }

/* --------------------------- Rejilla y tabla ------------------------------ */
.sep-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
               gap: 8px; margin-bottom: 14px; }
.sep-celda { display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  cursor: pointer; padding: 10px 12px; border: 1px solid var(--color-rule);
  border-left: 3px solid var(--sep-vendido); border-radius: var(--radius-sm);
  background: var(--color-sheet); font-family: inherit; text-align: left; }
.sep-celda:hover { background: var(--color-hover); }
.sep-celda.es-disponible   { border-left-color: var(--sep-disponible); }
.sep-celda.es-inmediata    { border-left-color: var(--sep-inmediata); }
.sep-celda.es-separado     { border-left-color: var(--sep-vendido); }
.sep-celda.es-vendido      { border-left-color: var(--sep-vendido); }
.sep-celda.es-construccion { border-left-color: var(--sep-construccion); }
.sep-celda.es-area_verde   { border-left-color: var(--sep-verde); }
.sep-celda.sin-publicar { border-left-style: dashed; opacity: .7; }
.sep-celda-t { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--color-ink); }
.sep-celda-s { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-30); }
.sep-celda-c { font-size: 12px; color: var(--color-ink-50); }

/* ------------------------------ El cajón ---------------------------------- */
/* Vive fuera de `#app` para sobrevivir a los repintados; por debajo de los
   modales (z-index 100), que sí deben poder abrirse encima. */
.sep-cajon-fondo { position: fixed; inset: 0; background: #14152e6b; z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .24s ease; }
.sep-cajon-fondo.abierto { opacity: 1; pointer-events: auto; }
.sep-cajon { position: fixed; top: 0; right: 0; bottom: 0; width: 430px; max-width: 94vw;
  z-index: 91; background: var(--color-sheet); border-left: 1px solid var(--color-rule);
  display: flex; flex-direction: column; font-family: var(--font-sans);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.22,.61,.36,1);
  box-shadow: -20px 0 50px -24px #14152e66; }
.sep-cajon.abierto { transform: none; }

.sep-cajon-cabeza { position: relative; padding: 20px 22px;
                    background: var(--color-topbar); color: var(--color-topbar-ink); }
.sep-cajon-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
                     text-transform: uppercase; color: #ffffff8c; }
.sep-cajon-cabeza h3 { font-family: var(--font-display); font-size: 26px; font-weight: 600;
                       margin: 4px 0 8px; color: #fff; }
.sep-cajon-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  background: #ffffff24; border: 1px solid #ffffff33; padding: 3px 10px; border-radius: 100px; }
.sep-cajon-cerrar { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px;
  display: grid; place-items: center; cursor: pointer; border-radius: 50%;
  background: #ffffff24; border: 0; color: #fff; }
.sep-cajon-cerrar:hover { background: #ffffff3d; }

.sep-cajon-cuerpo { flex: 1; overflow-y: auto; padding: 20px 22px; }
.sep-cajon-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px;
                 border-top: 1px solid var(--color-rule); }

.sep-sec { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-ink-30); margin: 22px 0 12px;
  padding-top: 16px; border-top: 1px solid var(--color-rule-soft); }
.sep-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.sep-campo { margin-bottom: 14px; }
/* Solo el rótulo propio del campo va en versalitas: el texto de una casilla
   de verificación es una frase y debe leerse como tal. */
.sep-campo > label:not(.sep-check) { display: block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-30); margin-bottom: 6px; }
.sep-campo input, .sep-campo select, .sep-campo textarea { width: 100%; font-family: inherit;
  font-size: 14px; padding: 9px 12px; border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm); background: var(--color-sheet); color: var(--color-ink); }
.sep-campo input[readonly] { background: var(--color-mist); color: var(--color-ink-50); }
.sep-fila  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sep-fila3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.sep-campo-check { display: flex; align-items: flex-end; padding-bottom: 10px; }

.sep-nota { font-size: 12.5px; color: var(--color-ink-30); line-height: 1.5; margin: 6px 0 0; }
.sep-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; cursor: pointer; }
.sep-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--color-marca); }
.sep-check-linea { font-size: 13.5px; margin-bottom: 0; }

/* El aviso de solicitudes va lo primero: es lo que decide si este lote se
   puede tocar o hay alguien esperando por él. */
.sep-aviso-sol { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--color-ocre-soft); border: 1px solid var(--color-ocre);
  color: var(--color-ocre); border-radius: var(--radius-sm);
  padding: 10px 13px; font-size: 13px; margin-bottom: 18px; }

.sep-tarjeta-cliente { background: var(--color-mist); border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-marca); border-radius: var(--radius-sm);
  padding: 11px 13px; margin-bottom: 12px; }
.sep-tc-nombre { font-weight: 600; font-size: 14.5px; }
.sep-tc-datos { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-ink-30); margin-top: 3px; }

.sep-modelos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sep-modelo { display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--color-rule); border-radius: var(--radius-sm);
  padding: 9px 11px; font-size: 13.5px; }
.sep-modelo input { width: 15px; height: 15px; accent-color: var(--color-marca); }
.sep-modelo.on { border-color: var(--color-marca); background: var(--color-mist); }

.sep-precio { border: 1px solid var(--color-rule); border-radius: var(--radius-sm); overflow: hidden; }
.sep-precio-fila { display: flex; justify-content: space-between; gap: 12px; padding: 9px 13px;
  font-size: 13.5px; border-bottom: 1px solid var(--color-rule-soft); }
.sep-precio-fila:last-child { border-bottom: 0; }
.sep-precio-fila span { color: var(--color-ink-70); }
.sep-precio-fila.destacada { background: var(--color-mist); font-weight: 600; }

.sep-tabla-precios { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.sep-tabla-precios th { text-align: left; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-30);
  padding: 7px 0; border-bottom: 1px solid var(--color-rule); }
.sep-tabla-precios th:not(:first-child),
.sep-tabla-precios td:not(:first-child) { text-align: right; }
.sep-tabla-precios td { padding: 8px 0; border-bottom: 1px solid var(--color-rule-soft); }

.sep-historial { list-style: none; margin: 0; padding: 0; }
.sep-historial li { padding: 9px 0; border-bottom: 1px solid var(--color-rule-soft); font-size: 13px; }
.sep-historial li:last-child { border-bottom: 0; }
.sep-historial time { display: block; font-family: var(--font-mono); font-size: 11px;
                      color: var(--color-ink-30); margin-top: 2px; }

/* --------------------- Bandeja de solicitudes ----------------------------- */
/* Las no leídas llevan fondo crema y punto rojo: se distinguen de un vistazo
   sin tener que leer la columna de estado. */
.ban-tabla tbody tr.ban-sin-leer td { background: #FFFCEF; }
html[data-theme="dark"] .ban-tabla tbody tr.ban-sin-leer td { background: #1e1d33; }
.ban-tabla tbody tr.ban-sin-leer .ban-nombre span { font-weight: 600; color: var(--color-marca); }
.ban-nombre { display: flex; align-items: center; gap: 9px; }
.ban-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--color-alerta); flex: none; }

.ban-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--color-rule-soft); }
.ban-pag { display: flex; gap: 6px; }

.ban-resumen { display: flex; align-items: center; gap: 14px; background: var(--color-mist);
  border-left: 3px solid var(--sep-disponible); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 20px; }
.ban-resumen-num { font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.ban-resumen b { display: block; font-size: 14.5px; }
.ban-resumen span { font-size: 13px; color: var(--color-ink-50); }

.ban-grupo { margin-bottom: 22px; }
.ban-grupo h5 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-ink-30); margin: 0 0 12px;
  padding-bottom: 9px; border-bottom: 1px solid var(--color-rule-soft); }
.ban-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ban-rd.ancho { grid-column: 1 / -1; }
.ban-rd label { display: block; font-size: 11.5px; color: var(--color-ink-30); margin-bottom: 4px; }
.ban-rd input, .ban-rd select { width: 100%; font-family: inherit; font-size: 13.5px;
  padding: 8px 11px; border: 1px solid var(--color-rule); border-radius: var(--radius-sm);
  background: var(--color-sheet); color: var(--color-ink); }
.ban-rd input[readonly] { background: var(--color-mist); color: var(--color-ink-50); }

.ban-foot { flex-wrap: wrap; }
.ban-meta { flex: 1; min-width: 180px; }

/* Cancelar una solicitud no se deshace: el botón lo dice sin gritarlo. */
.btn-peligro { border-color: #b23a1059; color: var(--color-alerta); }
.btn-peligro:hover { background: var(--color-alerta-soft); border-color: var(--color-alerta); }

@media (max-width: 720px) {
  .sep-fila, .sep-fila3, .sep-modelos, .ban-rejilla { grid-template-columns: 1fr; }
  .sep-lienzo { height: 52vh; }
}

/* ==========================================================================
   LA VISTA CLIENTE

   Lo que ve el visitante, dentro de la plataforma. El plano conserva los
   colores del separador; lo que cambia es el marco, que sí es de NASTA para
   que quede claro que se está mirando desde dentro.
   ========================================================================== */
.sep-cliente-marco { border: 1px solid var(--color-rule); border-radius: var(--radius-md);
                     overflow: hidden; background: var(--color-sheet); }
.sep-cliente-cabeza { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-bottom: 1px solid var(--color-rule-soft);
  background: var(--color-mist); }
.sep-cliente-cabeza h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600;
                         margin: 4px 0 5px; }
.sep-cliente-cabeza p { font-size: 13px; color: var(--color-ink-50); margin: 0; max-width: 62ch; }
.sep-cliente-marco .sep-plano-caja { border: 0; border-radius: 0; }

/* El cajón del cliente lleva la cabecera en el verde del separador, no en el
   azul de la aplicación: quien mira la pantalla tiene que reconocer la marca
   del proyecto, no la de la herramienta. */
.sep-cabeza-cliente { background: var(--sep-verde); }
.sep-cajon-ancho { width: 760px; }

.sep-datos-lote { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 4px; }
.sep-datos-lote > div { border: 1px solid var(--color-rule); border-top: 3px solid var(--sep-oro);
  border-radius: var(--radius-sm); padding: 11px 12px; }
.sep-datos-lote span { display: block; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-30); margin-bottom: 4px; }
.sep-datos-lote b { font-family: var(--font-display); font-size: 17px; font-weight: 600; }

.sep-modelos-cliente { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sep-modelo-cliente { border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: 11px 13px; }
.sep-modelo-cliente b { display: block; font-size: 14px; }
.sep-modelo-cliente span { display: block; font-family: var(--font-display); font-size: 17px;
                           font-weight: 600; color: var(--sep-disponible); margin-top: 3px; }
.sep-modelo-cliente small { display: block; font-family: var(--font-mono); font-size: 10.5px;
                            color: var(--color-ink-30); margin-top: 2px; }

/* Errores del formulario. Los del servidor se pintan debajo del campo que
   los provocó, igual que en el formulario público. */
.sol-req { color: var(--color-alerta); }
.sol-err { font-size: 11.5px; color: var(--color-alerta); margin: 4px 0 0; }
.sol-pista { font-size: 11.5px; color: var(--color-ink-30); margin: 4px 0 0; }
.ban-rd.malo input, .ban-rd.malo select { border-color: var(--color-alerta); }
.sep-aviso-error { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px;
  background: var(--color-alerta-soft); border: 1px solid var(--color-alerta);
  color: var(--color-alerta); border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 18px; }

@media (max-width: 900px) {
  .sep-cajon-ancho { width: 430px; }
  .sep-datos-lote, .sep-modelos-cliente { grid-template-columns: 1fr; }
}

/* Aviso de recálculo: aparece solo cuando lo guardado no cuadra con la
   fórmula, para que nadie cambie un precio sin verlo. */
.sep-aviso-recalculo { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px;
  line-height: 1.5; background: var(--color-ocre-soft); border: 1px solid var(--color-ocre);
  color: var(--color-ocre); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 10px; }
.sep-aviso-recalculo b { font-weight: 600; }

/* La rejilla del cliente va agrupada por nivel: es el orden en que la gente
   pregunta ("¿qué hay en la planta alta?"). */
.sep-cliente-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sep-cliente-rejilla { border: 0; border-radius: 0; }
.sep-nivel { margin-bottom: 22px; }
.sep-nivel:last-of-type { margin-bottom: 8px; }
.sep-nivel-t { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display);
  font-size: 15px; font-weight: 600; margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--color-rule-soft); }
.sep-nivel-t span { font-family: var(--font-mono); font-size: 11px; font-weight: 400;
                    color: var(--color-ink-30); }
.sep-celda[disabled] { cursor: default; opacity: .55; }
.sep-celda[disabled]:hover { background: var(--color-sheet); }

/* ==========================================================================
   EL SEPARADOR PÚBLICO  (/cliente/)

   Sin barra superior ni miga de pan: quien entra aquí no viene a gestionar,
   viene a elegir. El plano conserva los colores del separador; el marco es
   sobrio para que no compita con él.
   ========================================================================== */
body.es-publico { background: var(--color-paper); }
.pub-marco { max-width: 1320px; margin: 0 auto; padding: 26px 22px 40px; }

.pub-cabecera { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.pub-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
               text-transform: uppercase; color: var(--color-ink-30); }
.pub-marca h1 { font-family: var(--font-display); font-size: 34px; font-weight: 400;
                margin: 6px 0 8px; letter-spacing: -.01em; }
.pub-marca h1 b { font-weight: 600; color: var(--sep-disponible); }
.pub-marca p { font-size: 14.5px; color: var(--color-ink-50); margin: 0; max-width: 62ch; line-height: 1.6; }

.pub-derecha { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pub-cifras { display: flex; gap: 18px; }
.pub-cifras b { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 600;
                line-height: 1; color: var(--sep-disponible); }
.pub-cifras span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
                   text-transform: uppercase; color: var(--color-ink-30); }

.pub-pie { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-rule-soft);
  font-size: 12.5px; color: var(--color-ink-30); }

.pub-vacio, .pub-gracias { max-width: 520px; margin: 90px auto; text-align: center;
  background: var(--color-sheet); border: 1px solid var(--color-rule);
  border-radius: var(--radius-md); padding: 40px 32px; }
.pub-vacio h2, .pub-gracias h2 { font-family: var(--font-display); font-size: 24px;
                                 font-weight: 600; margin: 12px 0 8px; }
.pub-vacio p, .pub-gracias p { font-size: 14.5px; color: var(--color-ink-50);
                               line-height: 1.6; margin: 0 0 20px; }
.pub-gracias svg { color: var(--sep-disponible); }

/* El enlace a la vista pública, dentro del gestor. */
.sep-abrir-publico { text-decoration: none; }

@media (max-width: 720px) {
  .pub-marco { padding: 18px 14px 30px; }
  .pub-marca h1 { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   La puerta pública a sangre.

   El plano ocupa la pantalla y la cabecera flota encima, como en el separador
   de siempre. El diseño de esa cabecera lo pone `separadores/assets/separador.css`;
   aquí solo se ajusta lo que cambia por vivir dentro de NASTA.
   -------------------------------------------------------------------------- */
body.es-publico #app { height: 100vh; }
body.es-publico .sep-section { height: 100vh; }
.pub-plano { position: absolute; inset: 0; border: 0; border-radius: 0; background: #fff; }
.pub-plano .sep-lienzo { height: 100%; background: #fff; }

/* La brújula: el plano está girado y sin ella cuesta situarse. */
.pub-brujula { position: absolute; top: 24px; right: 26px; z-index: 25;
  display: grid; place-items: center; width: 52px; height: 52px;
  color: var(--tvb-main, #25463F); pointer-events: none; }
.pub-brujula svg { width: 44px; height: 44px; }
.pub-brujula span { position: absolute; top: -4px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; }

/* El cajón del cliente por encima de la cabecera flotante. */
body.es-publico .sep-cajon, body.es-publico .sep-cajon-fondo { z-index: 60; }

@media (max-width: 720px) {
  .pub-brujula { display: none; }
}

/* El plano de PH a sangre en la puerta pública. */
.apt-host-pub { position: absolute; inset: 0; border: 0; border-radius: 0;
                min-height: 0; background: #fff; }
.apt-host-pub .map-wrap { position: absolute; inset: 0; height: auto; min-height: 0; }

/* Aviso con acceso directo: una tarjeta con su acción a la derecha. */
.sheet-aviso { display: flex; align-items: center; justify-content: space-between;
               gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 18px; }
.sheet-aviso b { font-size: 15px; }
.sheet-aviso .sub { font-size: 13px; color: var(--color-ink-50); margin: 3px 0 0; }

/* ==========================================================================
   ACTIVIDAD DEL DÍA (Resumen)
   Tres columnas: lo que llegó, lo que se movió y lo que quedó registrado.
   ========================================================================== */
.act-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.act-caja { padding: 0; overflow: hidden; }

.act-cabeza { display: flex; align-items: center; gap: 9px; padding: 14px 16px;
  border-bottom: 1px solid var(--color-rule-soft); }
.act-cabeza b { font-size: 14px; flex: 1; }
.act-cabeza svg { color: var(--color-ink-30); }
.act-total { font-family: var(--font-display); font-size: 22px; font-weight: 600;
             line-height: 1; color: var(--color-marca); }

.act-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 11px 16px; cursor: pointer; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--color-rule-soft);
  font-family: inherit; font-size: 13.5px; color: var(--color-ink); }
.act-fila:last-of-type { border-bottom: 0; }
.act-fila:hover { background: var(--color-hover); }
.act-fila-plana { cursor: default; }
.act-fila-plana:hover { background: none; }
.act-fila-t { display: flex; align-items: center; gap: 8px; }
.act-fila-t svg { color: var(--color-ink-30); }
.act-fila-n { font-family: var(--font-display); font-weight: 600; font-size: 15px;
              display: flex; align-items: baseline; gap: 8px; }
.act-fila-n em { font-family: var(--font-mono); font-size: 10.5px; font-style: normal;
                 font-weight: 400; color: var(--color-alerta); }

.act-niveles { display: flex; gap: 6px; flex-wrap: wrap; padding: 11px 16px 4px; }
.act-nivel { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 9px;
             border-radius: 100px; border: 1px solid var(--color-rule); color: var(--color-ink-50); }
.act-nivel.es-alerta { color: var(--color-alerta); border-color: var(--color-alerta); background: var(--color-alerta-soft); }
.act-nivel.es-ocre   { color: var(--color-ocre);   border-color: var(--color-ocre);   background: var(--color-ocre-soft); }

.act-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 11px 16px; cursor: pointer; text-align: left;
  background: var(--color-mist); border: 0; border-top: 1px solid var(--color-rule-soft);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--color-ink-50); }
.act-pie:hover { background: var(--color-hover); color: var(--color-marca); }

@media (max-width: 900px) { .act-rejilla { grid-template-columns: 1fr; } }

/* El conmutador Plano / Lista dentro de la cabecera del separador. */
.pub-conmutador { border-color: rgba(255,255,255,.28); }
.pub-conmutador .sep-vista { background: rgba(255,255,255,.10); color: #fff;
                             border-right-color: rgba(255,255,255,.22); }
.pub-conmutador .sep-vista:hover { background: rgba(255,255,255,.2); }
.pub-conmutador .sep-vista.on { background: var(--tvb-offwhite, #EFEFEF); color: var(--tvb-main, #25463F); }
.pub-lista { height: auto; min-height: 100vh; overflow: auto; background: var(--color-paper); }
.pub-lista .overlay-wrap { position: static; }
.pub-lista .sep-cliente-rejilla { max-width: 1280px; margin: 22px auto; padding: 20px; }

/* ==========================================================================
   LA INVITACIÓN PRIVADA  (/cliente/#/separar/{token})

   Quien llega aquí no viene a elegir: le apartaron una unidad y viene a dar
   sus datos. Así que no hay plano ni inventario, solo su ficha centrada.
   Se usan los márgenes de la plataforma —`content-inner` centra a 1320px con
   20px de aire— pero acotados a una columna de lectura: un formulario de una
   sola unidad no necesita todo el ancho de una pantalla.
   ========================================================================== */
.inv-marco { max-width: 640px; margin: 0 auto; padding: 48px 20px 60px; }

.inv-cabecera { margin-bottom: 24px; }
.inv-cabecera .pub-eyebrow { display: block; margin-bottom: 10px; }
.inv-cabecera h1 { font-family: var(--font-display); font-size: 32px; font-weight: 400;
                   line-height: 1.15; margin: 0 0 10px; letter-spacing: -.01em; }
.inv-cabecera h1 b { font-weight: 600; color: var(--sep-disponible); }
.inv-cabecera p { font-size: 14.5px; color: var(--color-ink-50); line-height: 1.6; margin: 0; }

.inv-ficha { background: var(--color-sheet); border: 1px solid var(--color-rule);
             border-radius: var(--radius-md); padding: 22px; margin-bottom: 22px; }
.inv-num { font-family: var(--font-display); font-size: 34px; font-weight: 600;
           line-height: 1; color: var(--sep-verde); margin-bottom: 18px; }
.inv-ficha .sep-datos-lote { grid-template-columns: repeat(3, 1fr); }

.inv-abrir { width: 100%; justify-content: center; padding: 13px; font-size: 15px; }
.inv-pie { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-ink-30);
           text-align: center; margin: 14px 0 0; }

/* Ni el aviso de enlace caducado ni el de gracias deben salir pegados
   arriba: son la única cosa en pantalla y se leen mejor centrados. */
body.es-publico .pub-vacio, body.es-publico .pub-gracias { margin: 12vh auto; }

@media (max-width: 620px) {
  .inv-marco { padding: 28px 16px 40px; }
  .inv-cabecera h1 { font-size: 25px; }
  .inv-ficha .sep-datos-lote { grid-template-columns: 1fr; }
}

/* Panel de sincronización con el separador de producción. */
.sincro-panel { padding: 0; margin-bottom: 18px; overflow: hidden; }
.sincro-cabeza { display: flex; align-items: center; gap: 11px; padding: 15px 18px;
                 border-bottom: 1px solid var(--color-rule-soft); flex-wrap: wrap; }
.sincro-cabeza > svg { color: var(--color-ink-30); }
.sincro-cabeza b { font-size: 14.5px; }
.sincro-cabeza .code { font-size: 11.5px; color: var(--color-ink-30); margin: 2px 0 0; }
.sincro-acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sincro-cuerpo { padding: 15px 18px; }

.sincro-lista { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.sincro-lista li { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--color-rule-soft); font-size: 13px; }
.sincro-lista li:last-child { border-bottom: 0; }
.sincro-lista em { font-family: var(--font-mono); font-size: 11px; font-style: normal;
                   color: var(--color-ink-30); }
.sincro-tipo { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 100px; flex: none;
  border: 1px solid var(--color-rule); color: var(--color-ink-50); }
.sincro-tipo.es-nuevo  { color: var(--color-verde); border-color: var(--color-verde); }
.sincro-tipo.es-cambio { color: var(--color-ocre); border-color: var(--color-ocre); }

/* Comparación de las tres capas de la sincronización. */
.sincro-tabla { width: 100%; font-size: 13px; }
.sincro-tabla th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em;
                   text-transform: uppercase; color: var(--color-ink-30); }
.sincro-tabla .num { font-family: var(--font-mono); font-size: 12.5px; }
.sincro-tabla tr.sincro-mal td { background: var(--color-alerta-soft); }

/* En la vista del cliente, lo que no se puede solicitar se ve pero no
   responde: ni cursor de mano ni resalte al pasar por encima. */
.sep-pieza.no-clicable { cursor: default; }
.sep-pieza.no-clicable:hover { fill: inherit; stroke-width: .5; }
.sep-pieza.es-vendido.no-clicable:hover { fill: var(--sep-vendido); }
.sep-pieza.es-separado.no-clicable:hover { fill: var(--sep-vendido); }
.sep-pieza.es-construccion.no-clicable:hover { fill: var(--sep-construccion); }
.sep-pieza.es-area_verde.no-clicable:hover { fill: var(--sep-verde); }

/* ==========================================================================
   EL PLANO, SIEMPRE SOBRE BLANCO

   Los planos vienen del separador y están dibujados para fondo blanco: el
   asfalto es gris claro, los rótulos de calle llevan halo blanco y la foto
   del parque tiene sus propios tonos. Sobre el tema oscuro de NASTA el
   conjunto se ensucia y las calles casi desaparecen.

   Así que el lienzo se queda en blanco en los dos temas —es el lienzo del
   plano, no el de la aplicación— y solo el marco alrededor sigue al tema.
   Es lo mismo que hace el separador público, donde el plano nunca cambia.
   ========================================================================== */
.sep-lienzo,
.apt-host .map-wrap,
.apt-host .svg-outer { background: #FFFFFF; }

html[data-theme="dark"] .sep-lienzo,
html[data-theme="dark"] .apt-host .map-wrap,
html[data-theme="dark"] .apt-host .svg-outer { background: #FFFFFF; }

/* Las calles y sus rótulos vuelven a los tonos del separador, no a los
   del tema: son parte del dibujo. */
html[data-theme="dark"] .sep-calle { fill: #E8E6E1; }
html[data-theme="dark"] .sep-calle-txt { fill: #25463F; stroke: #ffffff; }

/* La leyenda y el zoom sí siguen al tema: son controles de NASTA. */

/* ==========================================================================
   PERMISOS POR USUARIO
   Módulos con casilla, y el detalle a un clic para quien lo necesite.
   ========================================================================== */
.perm-bloque { border: 1px solid var(--color-rule); border-radius: var(--radius-sm);
               margin-top: 16px; overflow: hidden; }
.perm-titulo { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 14px; background: var(--color-mist);
  border-bottom: 1px solid var(--color-rule-soft); }
.perm-titulo b { font-size: 14px; }
.perm-dif { display: flex; align-items: center; gap: 7px; margin: 0;
  padding: 9px 14px; font-size: 12.5px; color: var(--color-ocre);
  background: var(--color-ocre-soft); border-bottom: 1px solid var(--color-rule-soft); }
.perm-dif.ok { color: var(--color-ink-30); background: none; }

.perm-modulo { border-bottom: 1px solid var(--color-rule-soft); }
.perm-modulo:last-child { border-bottom: 0; }
.perm-modulo.apagado .perm-cabeza b { color: var(--color-ink-30); }
.perm-cabeza { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.perm-check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; flex: 1; }
.perm-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--color-marca); }
.perm-check b { display: block; font-size: 13.5px; }
.perm-check em { display: block; font-style: normal; font-size: 11.5px; color: var(--color-ink-30); margin-top: 1px; }
.perm-cuenta { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-30); flex: none; }
.perm-cuenta.parcial { color: var(--color-ocre); }
.perm-mas { background: none; border: 0; cursor: pointer; flex: none;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--color-marca);
  text-decoration: underline; text-underline-offset: 3px; }

.perm-detalle { padding: 4px 14px 12px 37px; background: var(--color-mist); }
.perm-item { display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; font-size: 13px; }
.perm-item input { width: 15px; height: 15px; accent-color: var(--color-marca); }
.perm-item code { display: block; font-family: var(--font-mono); font-size: 10.5px;
                  color: var(--color-ink-30); margin-top: 1px; }
.perm-marca { font-family: var(--font-mono); font-size: 9.5px; font-style: normal;
  margin-left: auto; padding: 2px 7px; border-radius: 100px; border: 1px solid; }
.perm-marca.añadido { color: var(--color-verde); border-color: var(--color-verde); }
.perm-marca.quitado { color: var(--color-alerta); border-color: var(--color-alerta); }

/* ==========================================================================
   LA REJILLA DE CADA PROYECTO

   El diseño lo pone la hoja del propio separador; aquí solo se ajusta lo que
   cambia por vivir dentro de NASTA: el marco, el ancho y los controles que
   son nuestros y no suyos.
   ========================================================================== */
/* Sin `overflow: hidden`: recortaba la rejilla por abajo cuando el
   contenido era más alto que el marco, y en la vista del cliente eso
   escondía las amenidades y media ficha. */
.rej-caja { padding: 0; overflow: visible; }
.rej-host .main { min-height: 0; }
.rej-host { max-width: none; padding: 18px; }
/* Su cabecera de marca sobra: en el gestor ya está la del proyecto y en la
   puerta pública la pone la cabecera flotante. */
/* La cabecera del separador se esconde solo en la vista del cliente: ahí ya
   está la portada del proyecto y serían dos títulos seguidos. En gestión sí
   va, y es la misma que usa su panel. */
.rej-host .topbar, .rej-host .ayuda { display: none; }
.pub-lista .rej-host .head { display: none; }

/* En la lista pública el conmutador se apretaba contra el logo de la marca.
   Se le da su sitio y el fondo de la cabecera, que es oscura. */
.pub-lista .pub-conmutador { margin-left: 12px; }
.pub-lista .overlay-content { padding-bottom: 16px; }
.pub-lista .plan-bar { flex-wrap: wrap; gap: 10px; }

/* Acceso por proyecto, dentro de la ficha del usuario. */
.proy-check { padding: 6px 14px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
@media (max-width: 620px) { .proy-check { grid-template-columns: 1fr; } }

/* Los modelos de la ficha son elegibles: el que se toca llega puesto al
   formulario. */
.sep-modelo-cliente.elegible { cursor: pointer; text-align: left; width: 100%;
                               font-family: inherit; background: var(--color-sheet); }
.sep-modelo-cliente.elegible:hover { border-color: var(--sep-disponible); }
.sep-modelo-cliente.elegido { border-color: var(--sep-disponible); border-width: 2px;
                              background: var(--color-mist); }
.sep-modelo-cliente.elegido b { display: flex; align-items: center; justify-content: space-between;
                                color: var(--sep-disponible); }

/* La ficha del apartamento: plano, galería y lo que incluye. */
.apt-media { margin-bottom: 16px; }
.apt-plano-img { background: #fff; border: 1px solid var(--color-rule);
                 border-radius: var(--radius-sm); padding: 10px; }
.apt-plano-img img { width: 100%; height: auto; display: block; }
.apt-galeria { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.apt-galeria img { width: 100%; height: 52px; object-fit: cover; border-radius: 6px;
                   border: 1px solid var(--color-rule); }
.apt-amenidades { display: flex; flex-wrap: wrap; gap: 6px; }
.apt-amenidades span { font-size: 12px; padding: 5px 11px; border-radius: 100px;
  background: var(--color-mist); border: 1px solid var(--color-rule); color: var(--color-ink-70); }

/* --------------------------------------------------------------------------
   El conmutador Plano / Lista, dentro de la cabecera del separador.

   `apt-plano.css` trae su propio reset —`.sep-section *, ... { padding:0 }`—
   y se carga después que esta hoja, así que con la misma especificidad ganaba
   él y los botones salían sin relleno ni forma. Se sube la especificidad lo
   justo para que el conmutador conserve la suya.
   -------------------------------------------------------------------------- */
.sep-section .pub-conmutador,
.pub-lista .pub-conmutador { border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-sm);
                             overflow: hidden; display: inline-flex; }
.sep-section .pub-conmutador .sep-vista,
.pub-lista .pub-conmutador .sep-vista {
  padding: 8px 15px; display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 13px; line-height: 1; cursor: pointer;
  background: rgba(255,255,255,.10); color: #fff; border: 0;
  border-right: 1px solid rgba(255,255,255,.22);
}
.sep-section .pub-conmutador .sep-vista:last-child,
.pub-lista .pub-conmutador .sep-vista:last-child { border-right: 0; }
.sep-section .pub-conmutador .sep-vista.on,
.pub-lista .pub-conmutador .sep-vista.on { background: #EFEFEF; color: #25463F; }
.sep-section .pub-conmutador .sep-vista svg,
.pub-lista .pub-conmutador .sep-vista svg { flex: none; }

/* Pestañas de la ficha de usuario: módulos y proyectos, sin apilar. */
.perm-tabs { display: flex; gap: 4px; margin: 16px 0 0; border-bottom: 1px solid var(--color-rule); }
.perm-tab { background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: 13.5px; padding: 9px 14px; color: var(--color-ink-50);
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.perm-tab:hover { color: var(--color-ink); }
.perm-tab.on { color: var(--color-marca); border-bottom-color: var(--color-marca); font-weight: 600; }
.perm-tabs + .perm-bloque { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

/* --------------------------------------------------------------------------
   Las solicitudes de una unidad.
   Un cajón sobre el de la unidad, como en el panel del separador.
   -------------------------------------------------------------------------- */
#sepSolHost .sep-cajon-fondo { z-index: 92; }
#sepSolHost .solu-cajon { z-index: 93; }
.solu-cajon { width: 400px; }
.solu-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  cursor: pointer; padding: 12px 14px; margin-bottom: 8px; font-family: inherit;
  background: var(--color-sheet); border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm); color: var(--color-ink); }
.solu-card:hover { background: var(--color-hover); border-color: var(--color-marca); }
.solu-card.sin-leer { border-left: 3px solid var(--color-alerta); background: #FFFCEF; }
html[data-theme="dark"] .solu-card.sin-leer { background: #1e1d33; }
.solu-ini { display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 50%; background: var(--color-mist); color: var(--color-marca);
  font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.solu-datos { flex: 1; min-width: 0; }
.solu-datos b { display: block; font-size: 14px; }
.solu-datos em { display: block; font-family: var(--font-mono); font-size: 10.5px;
                 font-style: normal; color: var(--color-ink-30); margin-top: 2px; }

/* ==========================================================================
   SISTEMA — explorador de la base
   Lista de tablas a un lado y las filas al otro. Solo lectura.
   ========================================================================== */
.sis-marco { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.sis-lista { background: var(--color-sheet); border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm); padding: 8px; max-height: 70vh; overflow-y: auto; }
.sis-grupo { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-ink-30); padding: 12px 8px 6px; }
.sis-tabla { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 7px 9px; border: 0; background: none; cursor: pointer;
  border-radius: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--color-ink); }
.sis-tabla:hover { background: var(--color-hover); }
.sis-tabla.on { background: var(--color-marca); color: #fff; }
.sis-tabla em { font-style: normal; font-size: 10.5px; opacity: .6; }

.sis-barra { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.sis-barra b { font-family: var(--font-mono); font-size: 14px; }
.sis-buscar { flex: 1; min-width: 220px; max-width: 380px; }
.sis-tabla-caja { padding: 0; overflow: auto; max-height: 62vh; }
.sis-tablon { font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; }
.sis-tablon th { position: sticky; top: 0; background: var(--color-mist); z-index: 1; }
.sis-tablon td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) { .sis-marco { grid-template-columns: 1fr; } }

/* Cabecera de lista con su acción a la derecha (exportar, etc.). */
.lista-cabeza { display: flex; align-items: center; justify-content: space-between;
                gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.lista-cabeza .list-count { margin: 0; }

/* --------------------------------------------------------------------------
   Proyectos ocultos.
   Un proyecto oculto no se borra: se aparta. Se ve apagado y con su etiqueta,
   igual que en el panel del separador.
   -------------------------------------------------------------------------- */
.proy-ver-ocultos { display: inline-flex; align-items: center; gap: 9px;
  margin: -6px 0 16px; cursor: pointer; font-size: 13px; color: var(--color-ink-50); }
.proy-ver-ocultos input { width: 15px; height: 15px; accent-color: var(--color-marca); }

.proy-card.es-oculto { opacity: .62; background: var(--color-mist); }
.proy-card.es-oculto:hover { opacity: .85; }
.proy-card.es-oculto .proy-num { color: var(--color-ink-30); }
.proy-card.es-oculto .proy-barra span { background: var(--color-ink-30); }

.proy-ocultar { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  margin-left: auto; margin-right: 14px; padding: 3px 9px; border-radius: 100px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--color-ink-30);
  border: 1px solid transparent; }
.proy-ocultar:hover { color: var(--color-marca); border-color: var(--color-rule);
                      background: var(--color-sheet); }

/* --------------------------------------------------------------------------
   Cajón de confirmación.

   Se apoya sobre el de la unidad. Los colores van declarados y no heredados:
   antes, un diálogo abierto desde aquí tomaba los del contenedor donde
   cayera, y en algunas combinaciones de tema el título quedaba en azul
   oscuro sobre fondo casi negro.
   -------------------------------------------------------------------------- */
#sepConfirmHost .sep-cajon-fondo { z-index: 96; }
/* La capa va con el id por delante.

   En la vista pública hay una regla `body.es-publico .sep-cajon` que baja
   todos los cajones a 60, y le ganaba a `.conf-cajon` por especificidad: el
   aviso quedaba por debajo de su propio fondo. Se veía, pero no se podía
   pulsar ninguno de sus botones, y el clic caía en el fondo y lo cerraba. */
#sepConfirmHost .conf-cajon { z-index: 97; }
.conf-cajon { width: 400px; }
/* Azul de marca fijo en los dos temas. Con `--color-marca` la cabecera se
   aclaraba en oscuro hasta dejar el texto blanco casi ilegible: es una
   superficie pequeña y conviene que el contraste no dependa del tema. */
.conf-cajon .sep-cajon-cabeza { background: #1A1852; border-bottom-color: #1A1852; }
.conf-cajon .sep-cajon-cabeza h3,
.conf-cajon .sep-cajon-eyebrow,
.conf-cajon .sep-cajon-cerrar { color: #FFFFFF; }
.conf-cajon .sep-cajon-eyebrow { opacity: .72; }
.conf-cajon .sep-cajon-cuerpo { background: var(--color-sheet); }
.conf-texto { font-size: 14.5px; line-height: 1.6; color: var(--color-ink); margin: 0; }
.conf-cajon .sep-cajon-pie { background: var(--color-mist); }

/* ==========================================================================
   CONFIGURACIONES DEL PROYECTO
   Menú a la izquierda, catálogo a la derecha.
   ========================================================================== */
.cfg-marco { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: start; }
.cfg-menu { background: var(--color-marca); border-radius: var(--radius-sm); padding: 10px; }
.cfg-menu-rot { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.5); padding: 8px 10px 10px; }
.cfg-menu-item { display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: none; color: rgba(255,255,255,.72); font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 11px; border-radius: 6px; }
.cfg-menu-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.cfg-menu-item.on { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }

.cfg-cabeza { display: flex; align-items: flex-start; justify-content: space-between;
              gap: 16px; margin-bottom: 14px; }
.cfg-cabeza h2 { font-size: 20px; margin: 0 0 2px; }
.cfg-cabeza .sub { margin: 0; }
.cfg-barra { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.cfg-buscar { max-width: 260px; }
.cfg-ver { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
           font-size: 13px; color: var(--color-ink-50); }
.cfg-ver input { width: 15px; height: 15px; accent-color: var(--color-marca); }
.cfg-cuenta { margin-left: auto; }

.cfg-inactivo td { opacity: .55; }
.cfg-usos { display: inline-grid; place-items: center; min-width: 30px; height: 22px;
  padding: 0 8px; border-radius: 100px; background: var(--color-mist);
  font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-30); }
.cfg-usos.con { background: var(--color-marca); color: #fff; }

.cfg-acciones { display: inline-flex; gap: 4px; }
.cfg-acc { display: grid; place-items: center; width: 30px; height: 30px; cursor: pointer;
  border: 1px solid transparent; border-radius: 6px; background: none; color: var(--color-ink-30); }
.cfg-acc:hover { color: var(--color-marca); border-color: var(--color-rule); background: var(--color-sheet); }
.cfg-acc.peligro:hover { color: var(--color-alerta); border-color: var(--color-alerta); }

.cfg-check { display: flex; align-items: center; gap: 9px; cursor: pointer;
             margin: 4px 0 10px; font-size: 14px; }
.cfg-check input { width: 16px; height: 16px; accent-color: var(--color-marca); }

@media (max-width: 900px) { .cfg-marco { grid-template-columns: 1fr; } }

/* Configuraciones: pestañas en vez de menú lateral. */
.cfg-tabs { display: flex; gap: 2px; margin: 4px 0 18px; border-bottom: 1px solid var(--color-rule);
            overflow-x: auto; }
.cfg-tab { background: none; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap;
  font-size: 14px; padding: 10px 16px; color: var(--color-ink-50);
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cfg-tab:hover { color: var(--color-ink); }
.cfg-tab.on { color: var(--color-marca); border-bottom-color: var(--color-marca); font-weight: 600; }

/* Encabezado de grupo dentro de una tabla (amenidades del edificio y de la unidad). */
.cfg-grupo td { background: var(--color-mist); font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-30);
  padding: 8px 14px !important; }

/* ==========================================================================
   PRECIOS · TEXTOS · PUBLICACIÓN
   ========================================================================== */

/* La matriz de precios. */
.pre-caja { overflow-x: auto; }
.pre-tabla th { white-space: nowrap; }
.pre-calle { text-align: left !important; font-size: 12px; white-space: nowrap;
             background: var(--color-mist); position: sticky; left: 0; }
.pre-celda { padding: 6px 8px !important; white-space: nowrap; }
.pre-signo { font-family: var(--font-mono); font-size: 11px; color: var(--color-marca);
             margin-right: 4px; }
.pre-input { width: 108px; padding: 6px 8px; font-family: var(--font-mono); font-size: 12px;
  text-align: right; border: 1px solid var(--color-rule); border-radius: 6px;
  background: var(--color-sheet); color: var(--color-ink); }
.pre-input:focus { outline: none; border-color: var(--color-marca); }
.pre-input.pre-ok { border-color: var(--color-verde); background: var(--color-verde-soft); }

/* El formulario de textos. */
.cfg-textos { padding: 4px 18px 18px; }
.cfg-sec { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-ink-30);
  padding: 18px 0 10px; border-bottom: 1px solid var(--color-rule-soft); margin-bottom: 14px; }
.cfg-campo { margin-bottom: 14px; }
.cfg-campo .field-label { display: block; margin-bottom: 5px; }
.cfg-ayuda { font-size: 12px; color: var(--color-ink-30); margin: 5px 0 0; line-height: 1.5; }
.cfg-pie { display: flex; justify-content: flex-end; margin-top: 14px; }

/* La rejilla de publicación. */
.pub-barra { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; flex-wrap: wrap; }
.pub-filtro { max-width: 210px; }
.pub-buscar { max-width: 230px; }
.pub-cuenta { margin-left: auto; }
.pub-acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 12px; background: var(--color-mist);
  border: 1px solid var(--color-rule); border-radius: var(--radius-sm); }
.pub-todo { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.pub-todo input { width: 15px; height: 15px; accent-color: var(--color-marca); }
.pub-sep { flex: 1; }

.pub-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
               gap: 8px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.pub-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--color-sheet); border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm); }
.pub-item.blo { background: var(--color-mist); }
.pub-item input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--color-marca); flex: none; }
.pub-datos { flex: 1; min-width: 0; }
.pub-datos b { display: block; font-size: 14px; }
.pub-datos em { display: block; font-family: var(--font-mono); font-size: 10px;
                font-style: normal; color: var(--color-ink-30); margin-top: 2px;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pub-sw { width: 40px; height: 22px; flex: none; cursor: pointer; padding: 0;
  border: 0; border-radius: 100px; background: var(--color-rule); position: relative;
  transition: background .15s ease; }
.pub-sw i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .15s ease; }
.pub-sw.on { background: var(--color-verde); }
.pub-sw.on i { left: 21px; }

/* --------------------------------------------------------------------------
   Pie de tabla con paginación. El mismo en todas las listas.
   -------------------------------------------------------------------------- */
.tab-pie { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 12px 2px 0; }
.tab-pie-btn { display: flex; gap: 8px; }
.tab-pie .btn[disabled] { opacity: .4; cursor: default; }

/* Distintivo de lote en esquina, como en el panel del separador. */
.lote-esquina { display: inline-block; margin-left: 5px; padding: 0 5px;
  border-radius: 4px; background: var(--color-ocre); color: #1F3530;
  font-size: 11px; font-weight: 700; line-height: 1.4; vertical-align: middle; }

/* Botón de WhatsApp en el pie de la ficha, con su verde de siempre. */
.btn-whatsapp { display: inline-flex; align-items: center; gap: 7px;
  background: #25D366; border-color: #25D366; color: #0B3D22;
  font-weight: 600; text-decoration: none; }
.btn-whatsapp:hover { background: #1FBA59; border-color: #1FBA59; color: #06331B; }
.btn-whatsapp svg { flex: none; }

/* El fondo de los cajones con formulario ya no responde al clic. */
.sep-cajon-fondo:not([data-action]) { cursor: default; }

/* En gestión la vista Lista enseña solo las rejillas de edificios: el detalle
   lo abre el cajón de NASTA, no el panel del separador. */
.rej-solo-rejilla .main { display: block; }
.rej-solo-rejilla .detalle { display: none; }
.rej-solo-rejilla .edificios { max-width: none; }

/* ==========================================================================
   EL CAJÓN EN PANTALLAS ESTRECHAS

   Con tres botones —Cerrar, WhatsApp y Llenar solicitud— en una sola fila,
   en un teléfono de 390 px el primero se salía por la izquierda y quedaba
   fuera de alcance. Se dejan envolver y ocupan el ancho por filas.
   ========================================================================== */
@media (max-width: 620px) {
  .sep-cajon-pie { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .sep-cajon-pie > * { flex: 1 1 auto; justify-content: center; min-width: 0; }
  /* La acción principal se lleva la fila entera: es la que se busca. */
  .sep-cajon-pie .btn-primary { flex: 1 1 100%; order: -1; }
  .sep-cajon-pie .sep-nota { flex: 1 1 100%; text-align: center; }

  /* El cajón ocupa el ancho completo: dejar un margen lateral en un teléfono
     solo resta sitio al contenido. */
  .sep-cajon, .sep-cajon-ancho, .solu-cajon, .conf-cajon { width: 100%; }
}

/* --------------------------------------------------------------------------
   La marca de agua de la portada, contenida.

   Su hoja la dibuja al 230 % de alto y desbordando por la derecha. En la
   página original la cabecera es alta y el logo queda al fondo, decorativo;
   nuestra cabecera es más compacta, así que el mismo logo caía justo detrás
   de las pastillas de filtro y de los niveles, y se leían mal.

   Se le baja el tamaño y la opacidad para que siga siendo marca de agua sin
   competir con los controles. El resto de la portada no se toca.
   -------------------------------------------------------------------------- */
.sep-section .sep-wm-logo,
.pub-lista .sep-wm-logo,
.apt-host-pub .sep-wm-logo {
  height: 130%;
  max-height: 190px;
  right: 24px;
  opacity: .035;
}
.sep-section .sep-wm-lines,
.pub-lista .sep-wm-lines,
.apt-host-pub .sep-wm-lines { opacity: .10; }

/* Y los controles van por delante de ella, no al revés. */
.sep-section .sep-header,
.sep-section .plan-bar,
.pub-lista .sep-header,
.pub-lista .plan-bar,
.apt-host-pub .sep-header,
.apt-host-pub .plan-bar { position: relative; z-index: 1; }

@media (max-width: 620px) {
  /* En un teléfono la cabecera se apila y el logo estorba más todavía. */
  .sep-section .sep-wm-logo,
  .pub-lista .sep-wm-logo,
  .apt-host-pub .sep-wm-logo { max-height: 120px; opacity: .028; }
}

/* --------------------------------------------------------------------------
   La leyenda dentro de la portada del separador.

   La regla general de NASTA le pone relleno y un hueco de 16 px, que van
   bien en el gestor —donde la leyenda es una barra aparte— pero dentro de la
   cabecera del separador la separan de más y la desalinean del resto. Ahí
   valen los valores del separador: sin relleno y 8 px.
   -------------------------------------------------------------------------- */
.sep-section .legend,
.pub-lista .legend,
.apt-host-pub .legend { padding: 0; gap: 8px; }
/* ── Plano propio del proyecto, empotrado ──────────────────────────────────
   Altos de Casa Mía trae su vista de plano entera y NASTA la muestra en un
   marco. Va aparte y no incrustada porque así su hoja de estilos y la de la
   plataforma no se pisan: es la misma precaución que hizo falta cuando
   `separador.css` de The View se coló en las vistas de Volcancito.

   La altura se fija en viewport y no en píxeles para que el plano respire
   igual en un portátil que en la pantalla del escritorio. */
.sep-empotrado {
  position: relative;
  width: 100%;
  height: clamp(420px, 68vh, 900px);
  border-radius: var(--radio, 14px);
  overflow: hidden;
  background: var(--fondo-2, #e9ecf5);
}
.sep-empotrado-marco {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 760px) {
  .sep-empotrado { height: clamp(360px, 60vh, 560px); }
}