/*
  kit.css · PlazaOS, cara privada «la oficina» (y tokens de la cara pública)
  Kit compartido del mockup v1 · 13 oct 2026. Reglas de uso: ./system.md (léelo antes de tocar).

  Cómo se carga en cada pantalla (pantallas/<id>.html):
    <html lang="es-MX" data-tema="oficina">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
    <link rel="stylesheet" href="../kit/kit.css">
    <script src="../kit/datos.js"></script>
    <script src="../kit/kit.js"></script>
  (kit.js agrega el enlace de fuentes si la pantalla lo olvidó.)

  Orden: 1 tokens del proyecto (copia literal de tokens.css) · 2 tokens del kit · 3 base · 4 marco
         5 estados · 6 controles · 7 datos · 8 estados de pantalla · 9 pasos y línea de tiempo
         10 cotas, bloques m², reloj · 11 mapa y plano · 12 capas · 13 teléfono
  Regla: ningún color suelto fuera de los bloques 1 y 2.
*/

/* ==========================================================================
   1. TOKENS DEL PROYECTO (copia literal de kit/tokens.css, DISENO.md v1)
   ========================================================================== */
:root {
  /* Tipografía: Archivo (texto, con eje de ancho para rótulos) e IBM Plex Mono (claves y cifras) */
  --fuente-texto: 'Archivo Variable', 'Archivo', system-ui, sans-serif;
  --fuente-cifra: 'IBM Plex Mono', ui-monospace, monospace;

  /* Escala tipográfica del boceto, en px → rem (base 16) */
  --tamano-11: 0.6875rem;
  --tamano-12: 0.75rem;
  --tamano-13: 0.8125rem;
  --tamano-14: 0.875rem;
  --tamano-17: 1.0625rem;
  --tamano-22: 1.375rem;
  --tamano-26: 1.625rem;
  --tamano-30: 1.875rem;
  --tamano-32: 2rem;
  --interlineado-texto: 1.45;
  --interlineado-titulo: 1.15;

  /* Espacio */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.25rem;
  --espacio-6: 1.5rem;
  --espacio-7: 1.75rem;
  --espacio-8: 2rem;
  --alto-toque: 2.75rem; /* 44 px: ningún control tocable es más chico */
  --ancho-lateral: 15.5rem; /* 248 px, el menú lateral del boceto */
  --ancho-tarjeta-aerea: 22.5rem; /* 360 px, la tarjeta sobre el render */

  /* Forma */
  --radio-chico: 0.5rem;
  --radio: 0.625rem;
  --radio-tarjeta: 0.875rem;
  --radio-pildora: 999px;
  --borde-vence: 2.5px; /* el marco naranja de "vence en menos de 90 días" */
  --sombra: 0 18px 50px rgba(0, 0, 0, 0.45); /* una sola profundidad: la tarjeta sobre el render */

  /* Movimiento */
  --duracion-zoom: 700ms; /* el zoom hacia un edificio en la vista aérea */
  --duracion-corta: 150ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --opacidad-atenuado: 0.16; /* locales fuera del filtro activo */
  --opacidad-zona: 0.28; /* relleno de una zona del render en reposo */
  --opacidad-zona-activa: 0.5;
}

:root[data-tema='oficina'] {
  --color-fondo: #e9ebe6;
  --color-superficie: #ffffff;
  --color-tarjeta: #ffffff;
  --color-lateral: #15211d;
  --color-lateral-hover: #22302b;
  --color-lateral-activo: #2c3b35;
  --color-borde: #d3d7d1; /* decorativo: contorno de tarjetas */
  --color-borde-campo: #6b7570; /* 4.8:1 sobre superficie: borde de campos y chips */
  --color-tinta: #15211d;
  --color-tinta-suave: #4e5a55;
  --color-tinta-inversa: #e9ebe6;
  --color-tinta-inversa-suave: #9aa59f;
  --color-accion: #15211d;
  --color-accion-texto: #ffffff;
  --color-enlace: #2b55c4;
  --color-enlace-fuerte: #1c3e99;
  --color-acento: #2b55c4;
  --color-disponible: #ffffff;
  --color-disponible-suave: #e3f7ee;
  --color-disponible-texto: #0f5a3e;
  --color-apartado: #f2bc5c;
  --color-apartado-suave: #fcefd6;
  --color-apartado-texto: #7a4b00;
  --color-negociacion: #f2bc5c;
  --color-negociacion-claro: #f8d896;
  --color-negociacion-texto: #15211d;
  --color-firma: #3a6fe0;
  --color-firma-texto: #ffffff;
  --color-arrendado: #1e4d3d;
  --color-arrendado-texto: #ffffff;
  --color-sin-dato: #c6cbc4;
  --color-sin-dato-claro: #eef0ec;
  --color-vence: #c2410c;
  --color-vence-texto: #b03a08;
  --color-vence-suave: #fdf0e8;
  --color-ejemplo-fondo: #fbe7d3;
  --color-ejemplo-texto: #7a3b0c;
  --color-ejemplo-borde: #e8b98f;
}

:root[data-tema='showroom'] {
  --color-fondo: #0e1513;
  --color-superficie: #1b2622;
  --color-tarjeta: #f6f7f4;
  --color-lateral: #15211d;
  --color-lateral-hover: #22302b;
  --color-lateral-activo: #2c3b35;
  --color-borde: #2e3b36; /* decorativo: contorno del segmentado */
  --color-borde-campo: #6b7570; /* 4.4:1 sobre la tarjeta clara */
  --color-tinta: #15211d; /* texto sobre la tarjeta clara */
  --color-tinta-suave: #4e5a55;
  --color-tinta-inversa: #f1f3ef; /* texto sobre el fondo oscuro */
  --color-tinta-inversa-suave: #c3cbc6;
  --color-accion: #0f5a3e;
  --color-accion-texto: #ffffff;
  --color-enlace: #2b55c4;
  --color-enlace-fuerte: #1c3e99;
  --color-acento: #8ff0cd;
  --color-disponible: #2ee6a6;
  --color-disponible-suave: #e3f7ee;
  --color-disponible-texto: #0f5a3e;
  --color-apartado: #f2bc5c;
  --color-apartado-suave: #fcefd6;
  --color-apartado-texto: #7a4b00;
  --color-negociacion: #f2bc5c;
  --color-negociacion-claro: #f8d896;
  --color-negociacion-texto: #15211d;
  --color-firma: #3a6fe0;
  --color-firma-texto: #ffffff;
  --color-arrendado: #7f8b86; /* la zona rentada se pinta además con --opacidad-zona */
  --color-arrendado-texto: #ffffff;
  --color-sin-dato: #c6cbc4;
  --color-sin-dato-claro: #eef0ec;
  --color-vence: #c2410c;
  --color-vence-texto: #f6a672; /* sobre el fondo oscuro (vista de teléfono) */
  --color-vence-suave: #fdf0e8;
  --color-ejemplo-fondo: #fbe7d3;
  --color-ejemplo-texto: #7a3b0c;
  --color-ejemplo-borde: #e8b98f;
}

/* Tema «inquilino» (portal del inquilino): mismos nombres, papel cálido. Agregado por el kit (14 oct 2026). */
:root[data-tema='inquilino'] {
  --color-fondo: #f3f0e9;
  --color-superficie: #ffffff;
  --color-tarjeta: #ffffff;
  --color-lateral: #15211d;
  --color-lateral-hover: #22302b;
  --color-lateral-activo: #2c3b35;
  --color-borde: #e0dbcf; /* decorativo: contorno de tarjetas */
  --color-borde-campo: #6b7570; /* 4.8:1 sobre superficie: borde de campos y chips */
  --color-tinta: #15211d;
  --color-tinta-suave: #4e5a55;
  --color-tinta-inversa: #e9ebe6;
  --color-tinta-inversa-suave: #9aa59f;
  --color-accion: #15211d;
  --color-accion-texto: #ffffff;
  --color-enlace: #2b55c4;
  --color-enlace-fuerte: #1c3e99;
  --color-acento: #2b55c4;
  --color-disponible: #ffffff;
  --color-disponible-suave: #e3f7ee;
  --color-disponible-texto: #0f5a3e;
  --color-apartado: #f2bc5c;
  --color-apartado-suave: #fcefd6;
  --color-apartado-texto: #7a4b00;
  --color-negociacion: #f2bc5c;
  --color-negociacion-claro: #f8d896;
  --color-negociacion-texto: #15211d;
  --color-firma: #3a6fe0;
  --color-firma-texto: #ffffff;
  --color-arrendado: #1e4d3d;
  --color-arrendado-texto: #ffffff;
  --color-sin-dato: #c6cbc4;
  --color-sin-dato-claro: #eef0ec;
  --color-vence: #c2410c;
  --color-vence-texto: #b03a08;
  --color-vence-suave: #fdf0e8;
  --color-ejemplo-fondo: #fbe7d3;
  --color-ejemplo-texto: #7a3b0c;
  --color-ejemplo-borde: #e8b98f;
}

/* ==========================================================================
   2. TOKENS AGREGADOS POR EL KIT (declarados en system.md §1)
   Mismos nombres en los dos temas. Ningún componente escribe un color suelto:
   todo color vive aquí arriba.
   ========================================================================== */
:root {
  --ancho-lateral: 14rem;            /* 224 px (boceto: 248). Da ancho al mapa. */
  --ancho-atencion: 22.25rem;        /* 356 px: columna derecha de "Pide atención" */
  --ancho-panel: 25rem;              /* 400 px: panel lateral de detalle */
  --alto-barra-tel: 3.5rem;          /* 56 px: barra superior en teléfono */
  --radio-marca: 0.3125rem;          /* 5 px: etiquetas chicas (ejemplo, estado) */
  --duracion-toque: 100ms;           /* respuesta al presionar (Apple) */
  --curva-salida: cubic-bezier(0.23, 1, 0.32, 1);
  --escala-toque: 0.97;
  --escala-toque-ancho: 0.985;       /* filas y bloques anchos */
  --opacidad-franja: 0.86;           /* franjas de estado sobre el render */
  --grosor-cota: 1px;
  --ancho-clave: 5.75rem;            /* columna de clave en .fila: cabe «B-119,121» */
}
:root[data-tema='oficina'], :root[data-tema='showroom'], :root[data-tema='inquilino'] {
  --color-velo: rgba(21, 33, 29, 0.62);
  --color-velo-mapa: rgba(14, 21, 19, 0.6);
  --color-foco: #2b55c4;
  --color-cota: rgba(21, 33, 29, 0.55);   /* líneas de cota (gráfico, 3:1+) */
  --color-filete: rgba(21, 33, 29, 0.1);  /* separadores finos dentro de una hoja */
  --color-hundido: #f3f4f1;               /* fondo de citas y filas activas */
  --color-blanco: #ffffff;                /* contorno de zonas sobre el render */
  --color-sombra-chica: rgba(0, 0, 0, 0.35);
  --sombra-panel: -18px 0 50px rgba(21, 33, 29, 0.16);
  --sombra-hoja: 0 -12px 40px rgba(21, 33, 29, 0.22);
  --sombra-aviso: 0 10px 30px rgba(21, 33, 29, 0.28);
  --color-error: var(--color-vence-texto); /* errores de formulario: mismo tono que "vence" */
  --color-error-borde: var(--color-vence);
  --color-ok: var(--color-disponible-texto);
  --color-ok-suave: var(--color-disponible-suave);
  --color-oculto-fondo: #eceee9;          /* monto oculto para Consulta */
  --color-oculto-raya: #d9ddd6;
}
:root[data-tema='showroom'] { --color-foco: #8ff0cd; }
/* Gráficas (skill dataviz, validadas con validate_palette.js): énfasis contra contexto, estados de cobro y rampa ordinal de antigüedad */
:root {
  --graf-enfasis: #15211d;      /* la serie de la historia (tinta) */
  --graf-contexto: #86918c;     /* comparación o el resto (3.3:1 sobre blanco) */
  --graf-bien: #1e4d3d;         /* cobrado / a tiempo (mismo verde que arrendado) */
  --graf-alerta: #f2bc5c;       /* pendiente / por vencer (con etiqueta siempre) */
  --graf-mal: #c2410c;          /* vencido / en mora */
  --graf-edad-1: #df9358; --graf-edad-2: #c9662a; --graf-edad-3: #a3400f; --graf-edad-4: #692609;   /* 1–30 · 31–60 · 61–90 · +90 */
  --graf-rejilla: #e6e8e3; --graf-eje: #4e5a55; --graf-superficie: #ffffff;
}

/* ==========================================================================
   3. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--color-fondo); color: var(--color-tinta);
  font-family: var(--fuente-texto); font-size: var(--tamano-14); line-height: var(--interlineado-texto);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
:root[data-tema='showroom'] body { color: var(--color-tinta-inversa); }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--color-enlace); text-underline-offset: 3px; }
a:hover { color: var(--color-enlace-fuerte); }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--color-apartado-suave); color: var(--color-tinta); }

.cifra { font-family: var(--fuente-cifra); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.rotulo { font-stretch: 125%; font-weight: 700; font-size: var(--tamano-11); letter-spacing: .06em; text-transform: uppercase; color: var(--color-tinta-suave); }
.tenue { color: var(--color-tinta-suave); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: inline-block; }
.ic.chico { width: 15px; height: 15px; }
.ic.grande { width: 24px; height: 24px; }

/* Respuesta al presionar (Apple): todo lo tocable encoge a 0.97 en 100 ms */
button, .boton, .pulsable, a.fila, a.ficha-ed, .bloque-m2 {
  transition: transform var(--duracion-toque) var(--curva-salida), background-color var(--duracion-corta), border-color var(--duracion-corta), box-shadow var(--duracion-corta), opacity var(--duracion-corta);
}
button:active:not(:disabled), .boton:active, .pulsable:active, a.ficha-ed:active { transform: scale(var(--escala-toque)); }
.fila:active, .bloque-m2:active, .ancho:active { transform: scale(var(--escala-toque-ancho)) !important; }

/* ==========================================================================
   4. MARCO: menú lateral oscuro + área de trabajo clara (teléfono: barra + cajón)
   ========================================================================== */
.app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.app.sin-menu { display: block; }
.lateral {
  background: var(--color-lateral); color: var(--color-tinta-inversa);
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--espacio-3); padding: var(--espacio-4) var(--espacio-3) var(--espacio-2);
  scrollbar-width: thin; scrollbar-color: var(--color-lateral-activo) transparent; z-index: 40;
}
.lateral :focus-visible { outline-color: var(--color-tinta-inversa); }
.lat-marca { display: flex; align-items: center; gap: 10px; padding: 2px var(--espacio-2) 0; min-height: 36px; }
.lat-logo { width: 28px; height: 28px; border-radius: 7px; background: var(--color-tinta-inversa); color: var(--color-lateral); display: grid; place-items: center; flex: none; }
.lat-logo .ic { width: 17px; height: 17px; stroke-width: 2.2; }
.lat-marca b { font-size: var(--tamano-17); font-weight: 800; letter-spacing: -.02em; }
.lat-marca small { margin-left: auto; font-size: var(--tamano-11); color: var(--color-tinta-inversa-suave); font-stretch: 125%; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.lat-plaza {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; padding: 10px 12px; border-radius: var(--radio);
  background: var(--color-lateral-hover); color: var(--color-tinta-inversa); text-decoration: none; min-height: var(--alto-toque);
}
.lat-plaza:hover { background: var(--color-lateral-activo); color: var(--color-tinta-inversa); }
.lat-plaza span { grid-column: 1; font-size: var(--tamano-11); color: var(--color-tinta-inversa-suave); line-height: 1.2; }
.lat-plaza strong { grid-column: 1; font-size: var(--tamano-14); line-height: 1.25; }
.lat-plaza .ic { grid-column: 2; grid-row: 1 / span 2; color: var(--color-tinta-inversa-suave); }
.lat-plaza[aria-current='page'] { box-shadow: inset 3px 0 0 var(--color-tinta-inversa); background: var(--color-lateral-activo); }
.lat-nav ul { display: flex; flex-direction: column; gap: 2px; }
.lat-nav a {
  display: flex; align-items: center; gap: 10px; min-height: var(--alto-toque); padding: 0 10px 0 12px; border-radius: var(--radio-chico);
  color: var(--color-tinta-inversa); text-decoration: none; font-size: var(--tamano-14); line-height: 1.2;
}
.lat-nav a:hover { background: var(--color-lateral-hover); color: var(--color-tinta-inversa); }
.lat-nav a .ic { color: var(--color-tinta-inversa-suave); }
.lat-nav a[aria-current='page'] { background: var(--color-lateral-activo); font-weight: 700; box-shadow: inset 3px 0 0 var(--color-tinta-inversa); }
.lat-nav a[aria-current='page'] .ic, .lat-nav a.en-grupo .ic { color: var(--color-tinta-inversa); }
.lat-nav a.en-grupo { font-weight: 700; }
.lat-nav .hijos { margin: 0 0 2px 21px; padding-left: 0; border-left: 1px solid var(--color-lateral-activo); gap: 0; }
.lat-nav .hijos a { font-size: var(--tamano-13); padding-left: 18px; color: var(--color-tinta-inversa-suave); border-radius: 0 var(--radio-chico) var(--radio-chico) 0; }
.lat-nav .hijos a[aria-current='page'] { color: var(--color-tinta-inversa); font-weight: 700; background: var(--color-lateral-activo); box-shadow: inset 2px 0 0 var(--color-tinta-inversa); }
.lat-cuenta { margin-left: auto; font-family: var(--fuente-cifra); font-size: var(--tamano-12); font-weight: 600; background: var(--color-apartado); color: var(--color-tinta); border-radius: 4px; padding: 1px 6px; line-height: 1.4; }
.lat-v2 { display: flex; align-items: flex-start; gap: 6px; padding: 0 10px; color: var(--color-tinta-inversa-suave); font-size: var(--tamano-11); line-height: 1.4; }
.lat-v2 b { color: var(--color-tinta-inversa); font-weight: 700; }
/* Variante en bloque con lista (la usa Superadmin: «Sin acceso · operación») */
div.lat-v2 { display: block; border: 1px dashed var(--color-lateral-activo); border-radius: var(--radio); padding: 8px 10px; }
div.lat-v2 p { display: flex; align-items: center; gap: 6px; color: var(--color-tinta-inversa); font-weight: 700; font-size: var(--tamano-12); margin-bottom: 4px; }
div.lat-v2 p small { margin-left: auto; font-weight: 500; color: var(--color-tinta-inversa-suave); }
div.lat-v2 ul { display: flex; flex-wrap: wrap; gap: 0 4px; }
div.lat-v2 li::after { content: '·'; margin-left: 4px; }
div.lat-v2 li:last-child::after { content: ''; }
.lat-puentes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.lat-puentes .lat-publica { font-size: var(--tamano-12); padding: 0 8px; gap: 6px; line-height: 1.2; }
.lat-v2 .ic { margin-top: 1px; }
.lat-secciones { display: flex; flex-direction: column; gap: 2px; }
.lat-sec { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 10px 0 12px; margin-top: 4px; border: 0; border-radius: var(--radio-chico); background: transparent;
  color: var(--color-tinta-inversa-suave); font-size: var(--tamano-11); font-weight: 700; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.lat-sec:hover { background: var(--color-lateral-hover); color: var(--color-tinta-inversa); }
.lat-sec .ic { margin-left: auto; transition: transform var(--duracion-corta); }
.lat-sec .lat-cuenta { margin-left: auto; letter-spacing: 0; }
.lat-sec .lat-cuenta + .ic { margin-left: 4px; }
.lat-sec[aria-expanded='false'] .ic { transform: rotate(-90deg); }
.lat-seccion > ul { display: flex; flex-direction: column; gap: 2px; }
.lat-pie { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: var(--espacio-3); border-top: 1px solid var(--color-lateral-activo); }
.lat-rol { min-width: 0; }
.lat-rol label { font-size: var(--tamano-12); color: var(--color-tinta-inversa-suave); padding: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.lat-rol-caja { position: relative; display: block; }
.lat-rol select {
  width: 100%; min-height: var(--alto-toque); padding: 0 34px 0 12px; border-radius: var(--radio-chico); border: 1px solid var(--color-tinta-inversa-suave);
  background: var(--color-lateral-hover); color: var(--color-tinta-inversa); font-size: var(--tamano-14); font-weight: 700; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.lat-rol select:hover { background: var(--color-lateral-activo); }
.lat-rol option { background: var(--color-lateral); color: var(--color-tinta-inversa); }
.lat-rol-caja .ic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-tinta-inversa-suave); }
.lat-rol .nota { font-size: var(--tamano-11); color: var(--color-tinta-inversa-suave); margin-top: 6px; line-height: 1.35; }
.lat-soporte { display: flex; align-items: center; gap: 8px; min-height: var(--alto-toque); padding: 0 10px; color: var(--color-tinta-inversa-suave); text-decoration: none; font-size: var(--tamano-12); border-radius: var(--radio-chico); }
.lat-soporte:hover { background: var(--color-lateral-hover); color: var(--color-tinta-inversa); }
.lat-soporte[aria-current='page'] { color: var(--color-tinta-inversa); background: var(--color-lateral-activo); }

.principal { min-width: 0; display: flex; flex-direction: column; }
/* Aviso fijo de demostración (lo pone el kit en cada pantalla de la oficina; se cierra por sesión) */
.pk-demo { display: flex; align-items: center; gap: 10px; padding: 4px var(--espacio-3) 4px var(--espacio-6); min-height: 36px; background: var(--color-hundido); border-bottom: 1px dashed var(--color-borde-campo); font-size: var(--tamano-12); color: var(--color-tinta-suave); line-height: 1.4; }
.pk-demo .ic { flex: none; }
.pk-demo span { flex: 1; min-width: 0; }
.pk-demo b { color: var(--color-tinta); font-weight: 700; }
.pk-demo button { flex: none; width: var(--alto-toque); height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--radio-chico); background: transparent; color: var(--color-tinta-suave); }
.pk-demo button:hover { background: var(--color-superficie); color: var(--color-tinta); }
.app.sin-menu > .pk-demo { position: relative; z-index: 2; }
.lat-publica { display: flex; align-items: center; gap: 8px; min-height: var(--alto-toque); padding: 0 10px; color: var(--color-tinta-inversa); text-decoration: none; font-size: var(--tamano-13); font-weight: 600; border-radius: var(--radio-chico); border: 1px solid var(--color-lateral-activo); }
.lat-publica:hover { background: var(--color-lateral-hover); color: var(--color-tinta-inversa); }
.lat-publica small { margin-left: auto; font-size: var(--tamano-11); color: var(--color-tinta-inversa-suave); font-weight: 500; }
.barra-tel { display: none; }
.trabajo { padding: var(--espacio-5) var(--espacio-6) var(--espacio-8); display: flex; flex-direction: column; gap: var(--espacio-4); min-width: 0; flex: 1; }
.trabajo.angosto { max-width: 60rem; }

/* Encabezado de pantalla: el título RESPONDE la pregunta del usuario (Impeccable). Sin eyebrows. */
.cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espacio-4) var(--espacio-6); flex-wrap: wrap; }
.cabeza-texto { min-width: 0; flex: 1 1 32rem; }
.titulo { font-size: var(--tamano-30); line-height: var(--interlineado-titulo); font-weight: 800; letter-spacing: -.02em; font-stretch: 92%; text-wrap: balance; }
.titulo .tenue { font-weight: 700; }
.titulo.chico { font-size: var(--tamano-26); }
.subtitulo { margin-top: 6px; color: var(--color-tinta-suave); font-size: var(--tamano-14); display: flex; flex-wrap: wrap; gap: 2px 14px; }
.subtitulo b { color: var(--color-tinta); font-weight: 700; }
.cabeza-meta { text-align: right; font-size: var(--tamano-12); color: var(--color-tinta-suave); line-height: 1.4; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cabeza-meta strong { color: var(--color-tinta); font-size: var(--tamano-13); font-weight: 700; }

/* Rejillas */
.rejilla-lateral { display: grid; grid-template-columns: minmax(0, 1fr) var(--ancho-atencion); gap: var(--espacio-5); align-items: start; }
.rejilla-lateral > .pegado { position: sticky; top: var(--espacio-5); }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-3); }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-3); }
.pila { display: flex; flex-direction: column; gap: var(--espacio-3); min-width: 0; }
.renglon-acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); align-items: center; }

/* Hoja (tarjeta). Una sola profundidad: nunca una tarjeta dentro de otra. */
.tarjeta { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-tarjeta); min-width: 0; }
.tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); padding: var(--espacio-4) var(--espacio-5) var(--espacio-3); flex-wrap: wrap; }
.tarjeta-cabeza h2 { font-size: var(--tamano-17); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; display: flex; align-items: center; gap: 8px; }
.tarjeta-cabeza p { flex-basis: 100%; font-size: var(--tamano-13); color: var(--color-tinta-suave); margin-top: -6px; }
.tarjeta-cuerpo { padding: 0 var(--espacio-5) var(--espacio-5); }
.tarjeta-cuerpo.lleno { padding: var(--espacio-4) var(--espacio-5); }
.tarjeta-pie { border-top: 1px solid var(--color-borde); padding: var(--espacio-3) var(--espacio-5); display: flex; gap: var(--espacio-3); align-items: center; flex-wrap: wrap; font-size: var(--tamano-13); color: var(--color-tinta-suave); }
.seccion + .seccion { border-top: 1px solid var(--color-borde); }
.seccion-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: var(--espacio-3) var(--espacio-5) 6px; }
.seccion-cabeza h3 { font-size: var(--tamano-13); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.seccion-cabeza h3 .cifra { color: var(--color-tinta-suave); font-weight: 500; }
.separador { height: 1px; background: var(--color-borde); border: 0; margin: var(--espacio-3) 0; }

/* ==========================================================================
   5. ESTADOS DEL LOCAL (significado fijo, DISENO §5)
   .e-<estado> pinta el relleno; .muestra es el cuadrito de leyenda; .estado es la etiqueta.
   ========================================================================== */
.e-arrendado { background: var(--color-arrendado); color: var(--color-arrendado-texto); }
.e-firma { background: var(--color-firma); color: var(--color-firma-texto); }
.e-negociacion { background: repeating-linear-gradient(135deg, var(--color-negociacion) 0 4px, var(--color-negociacion-claro) 4px 8px); color: var(--color-negociacion-texto); }
.e-apartado { background: var(--color-apartado); color: var(--color-tinta); }
.e-disponible { background: var(--color-disponible); color: var(--color-tinta); }
.e-sin_dato { background: repeating-linear-gradient(135deg, var(--color-sin-dato) 0 4px, var(--color-sin-dato-claro) 4px 8px); color: var(--color-tinta); }
/* Cara pública (D9): */
.e-rentado { background: var(--color-arrendado); color: var(--color-arrendado-texto); }
.muestra { width: 12px; height: 12px; border-radius: 3px; flex: none; display: inline-block; border: 1px solid var(--color-borde-campo); vertical-align: -1px; }
.muestra.e-arrendado { border-color: var(--color-arrendado); }
.muestra.e-firma { border-color: var(--color-firma); }
.estado {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--tamano-12); font-weight: 700; line-height: 1.3;
  padding: 3px 8px 3px 6px; border-radius: var(--radio-marca); border: 1px solid var(--color-borde-campo); background: var(--color-superficie); color: var(--color-tinta); white-space: nowrap;
}
.estado .muestra { width: 10px; height: 10px; }
.estado.vence { border-color: var(--color-vence); color: var(--color-vence-texto); }
.vence-marco { box-shadow: inset 0 0 0 var(--borde-vence) var(--color-vence); }
.t-vence { color: var(--color-vence-texto); font-weight: 700; }
.leyenda { display: flex; flex-wrap: wrap; gap: 4px var(--espacio-4); font-size: var(--tamano-12); color: var(--color-tinta-suave); }
.leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.leyenda .vence-mini { width: 12px; height: 12px; border-radius: 3px; border: var(--borde-vence) solid var(--color-vence); background: var(--color-arrendado); }

/* Etiqueta «ejemplo»: siempre visible junto al dato inventado */
.ejemplo {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--tamano-11); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-stretch: 110%;
  color: var(--color-tinta-suave); background: var(--color-hundido); border: 1px dashed var(--color-borde-campo);
  padding: 0 6px; border-radius: 4px; line-height: 1.5; white-space: nowrap; vertical-align: 1px;
}
.ejemplo.chica { font-size: 10px; padding: 0 4px; }
/* Dato real (del plano): opcional, para contrastar */
.real { display: inline-flex; align-items: center; gap: 4px; font-size: var(--tamano-11); font-weight: 600; color: var(--color-disponible-texto); white-space: nowrap; }

/* ==========================================================================
   6. CONTROLES
   ========================================================================== */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--alto-toque); padding: 0 var(--espacio-4);
  border-radius: var(--radio-chico); border: 1px solid var(--color-accion); background: var(--color-accion); color: var(--color-accion-texto);
  font-weight: 700; font-size: var(--tamano-13); text-decoration: none; white-space: nowrap; line-height: 1.2;
}
.boton:hover { color: var(--color-accion-texto); filter: brightness(1.25); }
.boton.secundario { background: var(--color-superficie); color: var(--color-tinta); border-color: var(--color-borde-campo); }
.boton.secundario:hover { background: var(--color-hundido); filter: none; color: var(--color-tinta); }
.boton.fantasma { background: transparent; border-color: transparent; color: var(--color-enlace); padding: 0 var(--espacio-2); }
.boton.fantasma:hover { background: var(--color-hundido); filter: none; color: var(--color-enlace-fuerte); }
.boton.aviso { background: var(--color-superficie); color: var(--color-vence-texto); border-color: var(--color-vence); }
.boton.aviso:hover { background: var(--color-vence-suave); filter: none; color: var(--color-vence-texto); }
.boton.peligro { background: var(--color-vence); border-color: var(--color-vence); color: var(--color-blanco); }
.boton.ancho { width: 100%; }
.boton.chico { min-height: 36px; font-size: var(--tamano-12); padding: 0 var(--espacio-3); }
.boton:disabled, .boton[aria-disabled='true'] { opacity: .45; cursor: not-allowed; filter: none; }
.boton .ic { width: 16px; height: 16px; }
.boton-icono {
  width: var(--alto-toque); height: var(--alto-toque); display: inline-grid; place-items: center; flex: none; border-radius: var(--radio-chico);
  border: 1px solid var(--color-borde-campo); background: var(--color-superficie); color: var(--color-tinta);
}
.boton-icono:hover { background: var(--color-hundido); }
.boton-icono.sin-borde { border-color: transparent; background: transparent; }

/* Segmentado (una opción de pocas) */
.segmentado { display: inline-flex; border: 1px solid var(--color-borde-campo); border-radius: var(--radio-chico); background: var(--color-superficie); padding: 3px; gap: 2px; }
.segmentado button { min-height: 36px; min-width: 64px; padding: 0 var(--espacio-3); border: 0; border-radius: 6px; background: transparent; font-size: var(--tamano-13); font-weight: 600; color: var(--color-tinta-suave); }
.segmentado button:hover { color: var(--color-tinta); background: var(--color-hundido); }
.segmentado button[aria-pressed='true'], .segmentado button[aria-selected='true'] { background: var(--color-accion); color: var(--color-accion-texto); }
/* 44 px reales: el segmentado mide 36 + 3 + 3 + 2 de borde */

/* Chips de filtro (varias opciones) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--alto-toque); padding: 0 12px; border-radius: var(--radio-chico);
  border: 1px solid var(--color-borde-campo); background: var(--color-superficie); font-size: var(--tamano-13); font-weight: 600; color: var(--color-tinta); white-space: nowrap;
}
.chip:hover { background: var(--color-hundido); }
.chip[aria-pressed='true'] { background: var(--color-accion); border-color: var(--color-accion); color: var(--color-accion-texto); }
.chip .cifra { font-size: var(--tamano-12); font-weight: 500; opacity: .85; }
.chip .muestra { width: 10px; height: 10px; }
.chip[aria-pressed='true'] .muestra { border-color: var(--color-accion-texto); }

/* Pestañas (niveles del plano, secciones) */
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--color-borde); overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  min-height: var(--alto-toque); padding: 0 var(--espacio-4); border: 0; background: transparent; font-size: var(--tamano-13); font-weight: 600; color: var(--color-tinta-suave);
  border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
}
.pestana:hover { color: var(--color-tinta); }
.pestana[aria-selected='true'] { color: var(--color-tinta); border-bottom-color: var(--color-tinta); }
.pestana small { font-size: var(--tamano-11); font-weight: 600; color: var(--color-tinta-suave); }

/* Fichas de edificio con minibarra de estados (filtro sincronizado con el mapa) */
.fichas-ed { display: flex; gap: 4px; min-width: 0; }
.ficha-ed {
  flex: 1 1 0; min-width: 0; min-height: 58px; padding: 6px 4px 7px; border-radius: var(--radio-chico);
  border: 1px solid var(--color-borde-campo); background: var(--color-superficie); text-decoration: none; color: var(--color-tinta);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px;
}
.ficha-ed.todos { flex: 1.5 1 0; }
.ficha-ed .letra { font-family: var(--fuente-cifra); font-weight: 600; font-size: var(--tamano-14); line-height: 1.1; white-space: nowrap; }
.ficha-ed.todos .letra { font-family: var(--fuente-texto); font-weight: 800; }
.ficha-ed .libres { font-family: var(--fuente-cifra); font-size: var(--tamano-11); color: var(--color-tinta-suave); line-height: 1.1; white-space: nowrap; }
.ficha-ed .mini { display: flex; width: 100%; height: 5px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px var(--color-borde); }
.ficha-ed .mini span { height: 100%; }
.ficha-ed:hover { background: var(--color-hundido); }
.ficha-ed[aria-pressed='true'] { background: var(--color-accion); color: var(--color-accion-texto); border-color: var(--color-accion); }
.ficha-ed[aria-pressed='true'] .libres { color: var(--color-tinta-inversa); }
.ficha-ed.toca { box-shadow: 0 0 0 2px var(--color-tinta); }

/* Campos de formulario */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .campo > .etiqueta { font-size: var(--tamano-13); font-weight: 700; color: var(--color-tinta); }
.campo > label small { font-weight: 500; color: var(--color-tinta-suave); }
.entrada, .campo select, .campo textarea {
  width: 100%; min-height: var(--alto-toque); padding: 10px 12px; border-radius: var(--radio-chico); border: 1px solid var(--color-borde-campo);
  background: var(--color-superficie); color: var(--color-tinta); font-size: var(--tamano-14); line-height: 1.3;
}
.campo textarea { min-height: 96px; resize: vertical; }
.entrada::placeholder, .campo textarea::placeholder { color: var(--color-tinta-suave); opacity: 1; }
.entrada:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 0; border-color: var(--color-foco); }
.entrada[aria-invalid='true'], .campo [aria-invalid='true'] { border-color: var(--color-error-borde); box-shadow: inset 0 0 0 1px var(--color-error-borde); }
.campo-ayuda { font-size: var(--tamano-12); color: var(--color-tinta-suave); }
.campo-error { font-size: var(--tamano-12); color: var(--color-error); font-weight: 700; display: flex; gap: 6px; align-items: flex-start; }
.campo-error .ic { width: 14px; height: 14px; margin-top: 1px; }
.campo-error:empty { display: none; }
.entrada.cifra { font-family: var(--fuente-cifra); letter-spacing: .02em; }
.entrada.codigo { font-family: var(--fuente-cifra); font-size: var(--tamano-22); letter-spacing: .4em; text-align: center; }
.casilla { display: flex; gap: 10px; align-items: flex-start; min-height: var(--alto-toque); padding: 10px 0; font-size: var(--tamano-13); cursor: pointer; }
.casilla input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--color-accion); }
.grupo-campos { display: grid; gap: var(--espacio-4); }
.grupo-campos.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.resumen-errores { border: var(--borde-vence) solid var(--color-vence); background: var(--color-vence-suave); color: var(--color-vence-texto); border-radius: var(--radio-chico); padding: 10px 12px; font-size: var(--tamano-13); }
.resumen-errores strong { display: block; margin-bottom: 4px; }
.resumen-errores a { color: var(--color-vence-texto); font-weight: 700; }

/* ==========================================================================
   7. DATOS: tablas, filas, listas de datos
   ========================================================================== */
.tabla-marco { overflow-x: auto; min-width: 0; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--tamano-13); }
.tabla th { text-align: left; font-size: var(--tamano-12); font-weight: 600; color: var(--color-tinta-suave); padding: 8px 12px; border-bottom: 1px solid var(--color-borde-campo); white-space: nowrap; background: var(--color-superficie); position: sticky; top: 0; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--color-filete); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-family: var(--fuente-cifra); white-space: nowrap; }
.tabla .clave { font-family: var(--fuente-cifra); font-weight: 600; white-space: nowrap; }
.tabla tbody tr[data-local], .tabla tbody tr.tocable { cursor: pointer; }
.tabla tbody tr[data-local]:hover, .tabla tbody tr.tocable:hover { background: var(--color-hundido); }
.tabla tbody tr.abierta { background: var(--color-hundido); box-shadow: inset 3px 0 0 var(--color-foco); }
.tabla tfoot td { font-weight: 700; border-top: 1px solid var(--color-borde-campo); padding: 10px 12px; }

/* Fila de lista: clave | cuerpo | dato. Úsala en listas de pendientes, bandejas, resultados. */
.lista { display: flex; flex-direction: column; }
.fila {
  display: grid; grid-template-columns: var(--ancho-clave) minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 52px;
  padding: 8px var(--espacio-5); border: 0; background: transparent; text-align: left; color: var(--color-tinta); text-decoration: none;
  border-left: 3px solid transparent; font-size: var(--tamano-13);
}
.lista > li + li .fila, .lista > .fila + .fila { box-shadow: 0 -1px 0 var(--color-filete); }
button.fila:hover, a.fila:hover, .fila.toca { background: var(--color-hundido); border-left-color: var(--color-tinta); color: var(--color-tinta); }
.fila.abierta { background: var(--color-hundido); border-left-color: var(--color-foco); }
.fila.urge { border-left-color: var(--color-vence); }
.fila .clave { font-family: var(--fuente-cifra); font-weight: 600; font-size: var(--tamano-13); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.fila .clave .muestra { width: 10px; height: 10px; }
.fila .cuerpo { min-width: 0; }
.fila .cuerpo strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila .cuerpo span { display: block; font-size: var(--tamano-12); color: var(--color-tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila .cuerpo .nota { white-space: normal; margin-top: 6px; padding: 7px 9px; background: var(--color-apartado-suave); color: var(--color-apartado-texto); border-radius: 6px; font-size: var(--tamano-12); line-height: 1.4; }
.fila .dato { text-align: right; font-size: var(--tamano-12); color: var(--color-tinta-suave); white-space: nowrap; line-height: 1.3; }
.fila .dato b { display: block; font-family: var(--fuente-cifra); color: var(--color-tinta); font-size: var(--tamano-13); font-weight: 600; }
.fila .dato .t-vence, .fila .dato b.t-vence { color: var(--color-vence-texto); }
.fila.larga { grid-template-columns: var(--ancho-clave) minmax(0, 1fr); }
.fila.larga .cuerpo span { white-space: normal; }
.vacio-lista { padding: 6px var(--espacio-5) 12px; font-size: var(--tamano-13); color: var(--color-tinta-suave); }

dl.datos { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: 0; font-size: var(--tamano-13); border-top: 1px solid var(--color-filete); }
dl.datos dt, dl.datos dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--color-filete); }
dl.datos dt { color: var(--color-tinta-suave); padding-right: var(--espacio-4); }
dl.datos dd { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
dl.datos dd.cifra { font-weight: 500; }
dl.datos dd.falta { color: var(--color-tinta-suave); font-weight: 500; font-style: italic; }

.cifra-grande { font-family: var(--fuente-cifra); font-size: var(--tamano-26); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.cifra-media { font-family: var(--fuente-cifra); font-size: var(--tamano-22); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.unidad { font-family: var(--fuente-texto); font-size: var(--tamano-13); color: var(--color-tinta-suave); font-weight: 500; letter-spacing: 0; }

/* Llamados (avisos dentro de la página) */
.llamado { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radio-chico); font-size: var(--tamano-13); line-height: 1.45; background: var(--color-hundido); color: var(--color-tinta); }
.llamado .ic { margin-top: 1px; }
.llamado.vence { background: var(--color-vence-suave); color: var(--color-vence-texto); box-shadow: inset 0 0 0 var(--borde-vence) var(--color-vence); }
.llamado.ambar { background: var(--color-apartado-suave); color: var(--color-apartado-texto); }
.llamado.ok { background: var(--color-ok-suave); color: var(--color-ok); }
.llamado b { font-weight: 700; }
.cita { background: var(--color-hundido); border-radius: var(--radio-chico); padding: 10px 12px; font-size: var(--tamano-13); line-height: 1.5; }

/* Hueco honesto en línea: "falta dato", "falta plano" */
.hueco { display: flex; gap: 8px; align-items: flex-start; border: 1.5px dashed var(--color-borde-campo); border-radius: var(--radio-chico); padding: 8px 12px; font-size: var(--tamano-12); color: var(--color-tinta-suave); line-height: 1.45; }
.hueco b { color: var(--color-tinta); }
.hueco .ic { width: 16px; height: 16px; margin-top: 1px; }

/* ==========================================================================
   8. ESTADOS DE PANTALLA: vacío, error, sin permiso, monto oculto, cargando
   ========================================================================== */
.vacio { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: var(--espacio-5); border: 1.5px dashed var(--color-borde-campo); border-radius: var(--radio); background: var(--color-superficie); }
.vacio .vacio-icono { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--color-hundido); color: var(--color-tinta-suave); }
.vacio h3, .vacio strong { font-size: var(--tamano-14); font-weight: 700; display: block; }
.vacio p { font-size: var(--tamano-13); color: var(--color-tinta-suave); max-width: 46ch; }
.vacio.centrado { align-items: center; text-align: center; padding: var(--espacio-8) var(--espacio-5); }
.vacio.compacto { flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px 14px; }
.vacio.compacto .vacio-icono { width: 32px; height: 32px; }
.error-estado { display: flex; gap: 12px; align-items: flex-start; padding: var(--espacio-5); border-radius: var(--radio); background: var(--color-vence-suave); box-shadow: inset 0 0 0 var(--borde-vence) var(--color-vence); color: var(--color-vence-texto); }
.error-estado h3 { font-size: var(--tamano-14); font-weight: 800; }
.error-estado p { font-size: var(--tamano-13); margin-top: 2px; color: var(--color-vence-texto); }
.error-estado .renglon-acciones { margin-top: 10px; }
.error-estado code { font-family: var(--fuente-cifra); font-size: var(--tamano-12); }
.sin-permiso { display: flex; gap: 12px; align-items: flex-start; padding: var(--espacio-4) var(--espacio-5); border-radius: var(--radio); background: var(--color-hundido); border: 1px solid var(--color-borde); }
.sin-permiso .vacio-icono { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--color-superficie); border: 1px solid var(--color-borde); flex: none; }
.sin-permiso h3 { font-size: var(--tamano-14); font-weight: 700; }
.sin-permiso p { font-size: var(--tamano-13); color: var(--color-tinta-suave); margin-top: 2px; }
.monto-oculto {
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--fuente-cifra); font-size: .92em; font-weight: 500; color: var(--color-tinta-suave);
  padding: 0 6px; border-radius: 4px; white-space: nowrap; letter-spacing: .08em;
  background: repeating-linear-gradient(135deg, var(--color-oculto-fondo) 0 3px, var(--color-oculto-raya) 3px 5px);
}
.monto-oculto .ic { width: 12px; height: 12px; stroke-width: 2.2; }
/* Dato de contacto que el rol no ve (Consulta): correo, teléfono, quién es el prospecto */
.oculto-rol { display: inline-flex; align-items: center; gap: 6px; color: var(--color-tinta-suave); font-weight: 500; }
.oculto-rol .ic { width: 14px; height: 14px; flex: none; }
.girando { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--color-borde); border-top-color: var(--color-tinta); animation: pk-girar .8s linear infinite; display: inline-block; flex: none; }
@keyframes pk-girar { to { transform: rotate(360deg); } }
.progreso { height: 8px; border-radius: 4px; background: var(--color-hundido); box-shadow: inset 0 0 0 1px var(--color-borde); overflow: hidden; }
.progreso > span { display: block; height: 100%; background: var(--color-accion); border-radius: 4px; transition: width var(--duracion-zoom) var(--curva); }

/* ==========================================================================
   9. PASOS (negociación, asistentes) y LÍNEA DE TIEMPO (expedientes)
   ========================================================================== */
.pasos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; counter-reset: paso; }
.pasos li { position: relative; padding-top: 10px; border-top: 4px solid var(--color-borde); font-size: var(--tamano-12); line-height: 1.3; color: var(--color-tinta-suave); min-width: 0; }
.pasos li b { display: block; font-size: var(--tamano-12); color: inherit; }
.pasos li small { display: block; font-family: var(--fuente-cifra); font-size: var(--tamano-11); margin-top: 2px; }
.pasos li.hecho { border-top-color: var(--color-arrendado); color: var(--color-tinta); }
.pasos li.actual { border-top-color: var(--color-negociacion); color: var(--color-tinta); }
.pasos li.actual b { font-weight: 800; }
.pasos li.actual::before { content: ''; position: absolute; top: -8px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--color-negociacion); box-shadow: 0 0 0 3px var(--color-superficie); }
.pasos li.bloqueado { border-top-style: dashed; }
/* Pasos verticales para asistentes (alta de plaza, subir contrato) */
.pasos.vertical { grid-auto-flow: row; gap: 0; }
.pasos.vertical li { border-top: 0; padding: 0 0 var(--espacio-4) 40px; min-height: 52px; }
.pasos.vertical li::before { content: counter(paso); counter-increment: paso; position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--fuente-cifra); font-size: var(--tamano-12); font-weight: 600; background: var(--color-superficie); border: 1.5px solid var(--color-borde-campo); color: var(--color-tinta-suave); box-shadow: none; }
.pasos.vertical li::after { content: ''; position: absolute; left: 13.5px; top: 30px; bottom: 2px; width: 1.5px; background: var(--color-borde); }
.pasos.vertical li:last-child::after { display: none; }
.pasos.vertical li.hecho::before { background: var(--color-arrendado); border-color: var(--color-arrendado); color: var(--color-arrendado-texto); content: '✓'; font-family: var(--fuente-texto); }
.pasos.vertical li.actual::before { background: var(--color-accion); border-color: var(--color-accion); color: var(--color-accion-texto); top: 0; width: 28px; height: 28px; }
.pasos.vertical li b { font-size: var(--tamano-14); }
.pasos.vertical li span { display: block; font-size: var(--tamano-12); color: var(--color-tinta-suave); margin-top: 2px; }

.linea { position: relative; display: flex; flex-direction: column; }
.linea > li { display: grid; grid-template-columns: 86px 22px minmax(0, 1fr); gap: 0 10px; position: relative; padding-bottom: var(--espacio-4); }
.linea > li::before { content: ''; position: absolute; left: 106px; top: 18px; bottom: 0; width: 1.5px; background: var(--color-borde); }
.linea > li:last-child::before { display: none; }
.linea-fecha { font-family: var(--fuente-cifra); font-size: var(--tamano-12); color: var(--color-tinta-suave); text-align: right; padding-top: 1px; line-height: 1.3; }
.linea-fecha small { display: block; font-size: var(--tamano-11); }
.linea-punto { width: 12px; height: 12px; border-radius: 50%; margin: 3px auto 0; background: var(--color-superficie); border: 2px solid var(--color-tinta-suave); position: relative; z-index: 1; }
.linea > li[data-tipo='contrato'] .linea-punto { background: var(--color-arrendado); border-color: var(--color-arrendado); }
.linea > li[data-tipo='propuesta'] .linea-punto, .linea > li[data-tipo='negociacion'] .linea-punto { background: var(--color-negociacion); border-color: var(--color-apartado-texto); }
.linea > li[data-tipo='aviso'] .linea-punto { background: var(--color-vence); border-color: var(--color-vence); }
.linea > li[data-tipo='apertura'] .linea-punto { border-style: dashed; }
.linea > li[data-tipo='ia'] .linea-punto { background: var(--color-firma); border-color: var(--color-firma); border-radius: 3px; }
.linea-cuerpo strong { display: block; font-size: var(--tamano-13); font-weight: 700; line-height: 1.35; }
.linea-cuerpo p { font-size: var(--tamano-13); color: var(--color-tinta-suave); margin-top: 2px; }
.linea-cuerpo .quien { font-size: var(--tamano-12); color: var(--color-tinta-suave); margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ==========================================================================
   10. VISUALES PROPIOS: cotas (Interface), bloques m² (Control), reloj 48 h
   ========================================================================== */
/* Cota: medida de arquitecto sobre una barra de estados. La arma PlazaKit.cota(). */
.cuadro-areas { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cota { display: flex; width: 100%; height: 20px; }
.cota-seg { position: relative; min-width: 0; display: grid; place-items: center; border-left: var(--grosor-cota) solid var(--color-cota); }
.cota-seg:last-child { border-right: var(--grosor-cota) solid var(--color-cota); }
.cota-seg::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: var(--grosor-cota) solid var(--color-cota); }
.cota-seg span { position: relative; background: var(--color-superficie); padding: 0 5px; font-family: var(--fuente-cifra); font-size: var(--tamano-11); font-weight: 500; color: var(--color-tinta-suave); white-space: nowrap; line-height: 1; }
.cota-seg.no-cabe span { visibility: hidden; }
.cota.sobre-fondo .cota-seg span { background: var(--color-fondo); }
.barra-areas { display: flex; width: 100%; height: 26px; gap: 2px; }
.barra-areas.delgada { height: 12px; }
.barra-areas span { display: block; height: 100%; min-width: 2px; border-radius: 2px; transition: flex-grow var(--duracion-zoom) var(--curva); }
.barra-areas .e-disponible { box-shadow: inset 0 0 0 1px var(--color-borde-campo); }
.barra-areas .hueco-barra { flex: 1; display: grid; place-items: center; border: 1px dashed var(--color-cota); border-radius: 2px; font-size: var(--tamano-12); color: var(--color-tinta-suave); }
.cota-titulo { display: flex; justify-content: space-between; gap: 8px; font-size: var(--tamano-12); color: var(--color-tinta-suave); margin: 2px 0; }
.cota-titulo b { color: var(--color-tinta); font-weight: 600; }

/* Bloques proporcionales a los m² (cada local un bloque; ancho = m²). Los arma PlazaKit.bloquesM2(). */
.bloques-m2 { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.bloque-m2 {
  position: relative; min-height: 56px; min-width: 44px; padding: 5px 6px; border-radius: 5px; border: 1px solid var(--color-borde-campo);
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left; overflow: hidden;
  font-family: var(--fuente-cifra); font-size: var(--tamano-11); line-height: 1.15;
}
.bloque-m2 b { font-weight: 600; font-size: var(--tamano-12); white-space: nowrap; }
.bloque-m2 small { font-size: 10px; opacity: .9; white-space: nowrap; }
.bloque-m2.e-arrendado { border-color: var(--color-arrendado); }
.bloque-m2.e-firma { border-color: var(--color-firma); }
.bloque-m2.sin-m2 { border-style: dashed; border-width: 1.5px; }
.bloque-m2.vence { box-shadow: inset 0 0 0 var(--borde-vence) var(--color-vence); border-color: var(--color-vence); }
.bloque-m2.pend::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-vence); box-shadow: 0 0 0 2px var(--color-blanco); }
.bloque-m2.elegido { outline: 3px solid var(--color-tinta); outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-tarjeta); }
.bloque-m2.atenuado { opacity: var(--opacidad-atenuado); }
.bloque-m2:hover { filter: brightness(.96); }
.tira-m2 { display: flex; gap: 2px; height: 18px; min-width: 0; }
.tira-m2 span { height: 100%; border-radius: 2px; min-width: 3px; }
.tira-m2 .e-disponible { box-shadow: inset 0 0 0 1px var(--color-borde-campo); }
.tira-m2 .sin-m2 { flex: 0 0 8px; border: 1px dashed var(--color-cota); background: transparent; }

/* Reloj de 48 h de un apartado: cuánto lleva; la marca es la mitad (24 h) */
.reloj48 { display: block; position: relative; width: 72px; height: 6px; border-radius: 3px; background: var(--color-apartado-suave); box-shadow: inset 0 0 0 1px var(--color-borde); overflow: hidden; margin: 4px 0 0 auto; }
.reloj48 > span { display: block; height: 100%; background: var(--color-apartado); border-radius: 3px; }
.reloj48.urge > span { background: var(--color-vence); }
.reloj48::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--color-cota); }
.regla90 { position: relative; height: 22px; margin-top: 6px; }
.regla90::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--color-borde); border-radius: 1px; }
.regla90 i { position: absolute; top: 3px; width: 2px; height: 12px; background: var(--color-vence); border-radius: 1px; }

/* ==========================================================================
   11. MAPA DEL RENDER Y PLANO 2D (los arman PlazaKit.mapaRender y PlazaKit.plano2D)
   ========================================================================== */
.mapa-marco { position: relative; overflow: hidden; background: var(--color-lateral); }
.mapa-lienzo { position: relative; width: 100%; aspect-ratio: 2800 / 951; }
.mapa-lienzo > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mz { cursor: pointer; outline: none; }
.mz .franjas { opacity: var(--opacidad-franja); transition: opacity var(--duracion-zoom) var(--curva); }
.mz .borde { fill: none; stroke: var(--color-blanco); stroke-width: 4; vector-effect: non-scaling-stroke; transition: stroke-width var(--duracion-corta); }
.mz .halo { fill: none; stroke: var(--color-blanco); stroke-width: 0; vector-effect: non-scaling-stroke; }
.mz .golpe { fill: transparent; }
.mz:hover .borde, .mz.toca .borde { stroke: var(--color-tinta); stroke-width: 3; }
.mz:hover .halo, .mz.toca .halo { stroke-width: 7; }
.mz:focus-visible .borde { stroke: var(--color-foco); stroke-width: 4; }
.mz:focus-visible .halo { stroke-width: 8; }
.mz.atenuada .franjas { opacity: .25; }
.mz.atenuada .borde { stroke-opacity: .35; stroke-width: 2; }
.mz.atenuada:hover .borde, .mz.atenuada.toca .borde { stroke-opacity: 1; }
.mz.elegida .borde { stroke: var(--color-blanco); stroke-width: 3; }
.mz.elegida .halo { stroke: var(--color-tinta); stroke-width: 6; }
.mz .borde, .mz .halo { stroke-linejoin: round; stroke-linecap: round; }
/* Soriana (ancla): contorno neutro fino, sin relleno */
.mz.ancla { cursor: default; }
.mz.ancla .borde { stroke-width: 1.5; stroke-opacity: .75; }
.mz.ancla .halo { stroke: var(--color-tinta); stroke-width: 3.5; stroke-opacity: .3; }
.mz.ancla.atenuada .borde { stroke-opacity: .3; }
.mz.ancla.atenuada .halo { stroke-opacity: .12; }
/* Sin información (Edificio Q y los edificios sin clave): mismo contorno limpio, punteado claro con filo oscuro, relleno casi nulo */
.mz.sininfo .golpe { fill: var(--color-blanco); fill-opacity: .06; }
.mz.sininfo .borde { stroke-width: 2; stroke-dasharray: 6 6; }
.mz.sininfo .halo { stroke: var(--color-tinta); stroke-width: 4.5; stroke-opacity: .4; stroke-dasharray: 6 6; }
.mz.sininfo:hover .borde, .mz.sininfo.toca .borde { stroke: var(--color-blanco); stroke-width: 2.5; }
.mz.sininfo:hover .halo, .mz.sininfo.toca .halo { stroke-width: 6; stroke-opacity: .6; }
.mz.sin-zona { cursor: help; }
.mz.sin-zona:hover .golpe { fill-opacity: .14; }
.mz.sininfo.atenuada .borde { stroke-opacity: .35; }
.mpin.sininfo .p-letra { font-family: var(--fuente-texto); font-weight: 600; font-size: var(--tamano-11); padding: 3px 6px; background: color-mix(in srgb, var(--color-lateral) 70%, transparent); border: 1px dashed color-mix(in srgb, var(--color-blanco) 60%, transparent); }
.mapa-velo { fill: var(--color-velo-mapa); opacity: 0; transition: opacity var(--duracion-zoom) var(--curva); pointer-events: none; }
.mapa-lienzo.hay-seleccion .mapa-velo { opacity: 1; }
.mapa-pines { position: absolute; inset: 0; pointer-events: none; }
.mpin {
  position: absolute; transform: translate(-50%, -50%); display: flex; align-items: stretch; white-space: nowrap; font-size: var(--tamano-11); line-height: 1;
  border-radius: 5px; overflow: hidden; box-shadow: 0 1px 4px var(--color-sombra-chica); transition: opacity var(--duracion-zoom) var(--curva), transform var(--duracion-corta);
}
.mpin > span { padding: 4px 5px; display: flex; align-items: center; }
.mpin .p-letra { background: var(--color-lateral); color: var(--color-blanco); font-family: var(--fuente-cifra); font-weight: 600; font-size: var(--tamano-12); }
.mpin .p-dato { background: var(--color-blanco); color: var(--color-tinta); font-family: var(--fuente-cifra); font-weight: 500; }
.mpin .p-pend { background: var(--color-vence); color: var(--color-blanco); font-family: var(--fuente-cifra); font-weight: 700; }
/* Soriana es contexto, no un edificio de la plaza: etiqueta más chica y tenue; cede su lugar (acomodarPines) */
.mpin.ancla { box-shadow: none; }
.mpin.ancla .p-letra { font-family: var(--fuente-texto); font-weight: 600; font-size: var(--tamano-11); padding: 3px 5px; background: color-mix(in srgb, var(--color-lateral) 78%, transparent); }
.mpin.fuera { opacity: .3; }
.mpin.elegido { transform: translate(-50%, -50%) scale(1.08); }
.mapa-sello { position: absolute; left: 10px; bottom: 8px; background: var(--color-velo); color: var(--color-tinta-inversa); font-size: var(--tamano-11); padding: 3px 7px; border-radius: 5px; pointer-events: none; }
.mapa-pista { display: none; }

.plano-marco { position: relative; overflow: hidden; background: var(--color-superficie); border-radius: inherit; touch-action: none; user-select: none; -webkit-user-select: none; }
.plano-marco > svg { width: 100%; height: 100%; display: block; cursor: grab; }
.plano-marco.arrastrando > svg { cursor: grabbing; }
.plano-marco.estatico { touch-action: auto; }
.plano-marco.estatico > svg { cursor: default; }
.pl-local { stroke: var(--color-tinta); stroke-width: .8; vector-effect: non-scaling-stroke; cursor: pointer; transition: opacity var(--duracion-corta); }
.pl-local:hover { stroke-width: 2; }
.pl-local.vence { stroke: var(--color-vence); stroke-width: 2.5; }
.pl-local.atenuado { opacity: var(--opacidad-atenuado); }
/* Elegido: tinta gruesa con halo claro (contrasta con todos los estados; el azul es solo «en firma») */
.pl-local.elegido { stroke: var(--color-tinta); stroke-width: 3.5; filter: drop-shadow(0 0 1.5px var(--color-tarjeta)) drop-shadow(0 0 1.5px var(--color-tarjeta)) drop-shadow(0 0 1px var(--color-tarjeta)); }
.pl-local:focus-visible { outline: none; stroke: var(--color-tinta); stroke-width: 3.5; stroke-dasharray: 6 3; }
.pl-etq { font-family: var(--fuente-cifra); font-weight: 600; pointer-events: none; paint-order: stroke; stroke-linejoin: round; }
.pl-controles { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
.pl-controles .boton-icono { box-shadow: 0 1px 3px var(--color-sombra-chica); }
.pl-escala { position: absolute; left: 10px; bottom: 8px; font-family: var(--fuente-cifra); font-size: var(--tamano-11); color: var(--color-tinta-suave); background: var(--color-superficie); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--color-borde); pointer-events: none; }

/* ==========================================================================
   12. CAPAS: panel lateral / hoja inferior, velo, avisos, diálogo
   ========================================================================== */
.velo { position: fixed; inset: 0; background: var(--color-velo); z-index: 45; opacity: 0; pointer-events: none; }
.velo.activo { pointer-events: auto; }
.panel {
  position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: var(--ancho-panel); max-width: 100vw; z-index: 50;
  background: var(--color-superficie); border-left: 1px solid var(--color-borde); box-shadow: var(--sombra-panel);
  display: flex; flex-direction: column; transform: translateX(110%); visibility: hidden; color: var(--color-tinta);
}
.panel[data-visible='si'] { visibility: visible; }
.panel-agarre { display: none; }
.panel-cabeza { display: flex; align-items: flex-start; gap: var(--espacio-3); padding: var(--espacio-5) var(--espacio-5) var(--espacio-3); border-bottom: 1px solid var(--color-borde); }
.panel-cabeza > div { min-width: 0; flex: 1; }
.panel-titulo { font-family: var(--fuente-cifra); font-size: var(--tamano-26); font-weight: 600; line-height: 1.1; outline: none; letter-spacing: -.01em; }
.panel-titulo.texto { font-family: var(--fuente-texto); font-size: var(--tamano-22); font-weight: 800; letter-spacing: -.02em; }
.panel-sub { margin-top: 6px; font-size: var(--tamano-13); color: var(--color-tinta-suave); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.panel-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--espacio-4) var(--espacio-5) var(--espacio-6); display: flex; flex-direction: column; gap: var(--espacio-5); }
.panel-pie { border-top: 1px solid var(--color-borde); padding: var(--espacio-3) var(--espacio-5); display: flex; gap: 8px; flex-wrap: wrap; }
.panel-pie:empty { display: none; }
.panel-seccion h3 { font-size: var(--tamano-13); font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel-seccion > * + * { margin-top: 10px; }
.panel-seccion h3 + * { margin-top: 0; }

.pk-avisos { position: fixed; z-index: 70; left: calc(var(--ancho-lateral) + var(--espacio-6)); bottom: var(--espacio-5); display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: min(420px, calc(100vw - 32px)); }
.pk-aviso {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: var(--radio); min-height: 48px;
  background: var(--color-lateral); color: var(--color-tinta-inversa); box-shadow: var(--sombra-aviso); font-size: var(--tamano-13); line-height: 1.4;
  animation: pk-aviso-entra 260ms var(--curva-salida) both;
}
.pk-aviso.sale { animation: pk-aviso-sale 180ms ease-out both; }
.pk-aviso .ic { color: var(--color-tinta-inversa-suave); }
.pk-aviso.ok .ic { color: var(--color-acento, var(--color-disponible-suave)); }
.pk-aviso.error { background: var(--color-vence); }
.pk-aviso.error .ic { color: var(--color-blanco); }
.pk-aviso button { margin-left: auto; min-height: 36px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--color-lateral-activo); background: transparent; color: var(--color-tinta-inversa); font-weight: 700; font-size: var(--tamano-12); }
.pk-aviso button:hover { background: var(--color-lateral-hover); }
@keyframes pk-aviso-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes pk-aviso-sale { to { opacity: 0; transform: translateY(6px); } }

.dialogo { border: 0; padding: 0; border-radius: var(--radio-tarjeta); background: var(--color-superficie); color: var(--color-tinta); width: min(440px, calc(100vw - 32px)); box-shadow: var(--sombra-aviso); }
.dialogo::backdrop { background: var(--color-velo); }
.dialogo[open] { animation: pk-dialogo 220ms var(--curva-salida) both; }
@keyframes pk-dialogo { from { opacity: 0; transform: scale(.96); } }
.dialogo-cuerpo { padding: var(--espacio-5) var(--espacio-5) var(--espacio-4); display: flex; gap: 14px; }
.dialogo-cuerpo .vacio-icono { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--color-hundido); flex: none; }
.dialogo.peligro .dialogo-cuerpo .vacio-icono { background: var(--color-vence-suave); color: var(--color-vence-texto); }
.dialogo h2 { font-size: var(--tamano-17); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.dialogo p { font-size: var(--tamano-13); color: var(--color-tinta-suave); margin-top: 6px; }
.dialogo-acciones { display: flex; justify-content: flex-end; gap: 8px; padding: var(--espacio-3) var(--espacio-5) var(--espacio-5); flex-wrap: wrap-reverse; }

/* ==========================================================================
   13. TELÉFONO (≤ 760 px): barra superior + cajón; el panel es hoja inferior
   ========================================================================== */
/* ==========================================================================
   12b. FINANZAS: desglose fiscal, por validar
   ========================================================================== */
.desglose-caja { container-type: inline-size; min-width: 0; }
dl.datos.desglose { grid-template-columns: minmax(0, 1fr) auto; }
dl.datos.desglose dd { text-align: right; white-space: nowrap; padding-left: var(--espacio-3); }
dl.datos.desglose dt { padding-right: var(--espacio-2); }
@container (max-width: 300px) {
  dl.datos.desglose { grid-template-columns: minmax(0, 1fr); }
  dl.datos.desglose dt { border-bottom: 0; padding-bottom: 0; }
  dl.datos.desglose dd { text-align: left; padding: 2px 0 8px; }
}
dl.datos.desglose dt b, dl.datos.desglose dd b { font-weight: 800; }
.por-validar { display: inline-flex; align-items: center; font-size: var(--tamano-11); font-weight: 700; color: var(--color-apartado-texto); background: var(--color-apartado-suave); border-radius: 4px; padding: 0 5px; margin-left: 4px; white-space: nowrap; vertical-align: 1px; }
.clabe { font-family: var(--fuente-cifra); font-size: var(--tamano-13); background: var(--color-hundido); border: 1px dashed var(--color-borde-campo); border-radius: var(--radio-chico); padding: 8px 10px; display: inline-block; }

/* ==========================================================================
   12c. GRÁFICAS (PlazaKit.graf) — reglas de la skill dataviz
   ========================================================================== */
.graf { min-width: 0; }
.graf svg { display: block; overflow: visible; }
.graf-rejilla { stroke: var(--graf-rejilla); stroke-width: 1; shape-rendering: crispEdges; }
.graf-base { stroke: var(--graf-eje); stroke-width: 1; opacity: .5; shape-rendering: crispEdges; }
.graf-eje { font-family: var(--fuente-cifra); font-size: 11px; fill: var(--graf-eje); }
.graf-valor { font-family: var(--fuente-cifra); font-size: 12px; font-weight: 600; fill: var(--color-tinta); }
.graf-meta { stroke: var(--color-tinta); stroke-width: 1.5; stroke-dasharray: 4 3; }
.graf-cruz { stroke: var(--graf-eje); stroke-width: 1; opacity: .5; pointer-events: none; }
.graf-golpe { fill: transparent; cursor: default; outline: none; }
.graf-marca { outline: none; transition: opacity var(--duracion-corta), filter var(--duracion-corta); }
.graf-marca:focus-visible { stroke: var(--color-foco); stroke-width: 2; }
svg .graf-enfasis { fill: var(--graf-enfasis); } svg .graf-contexto { fill: var(--graf-contexto); }
svg .graf-bien { fill: var(--graf-bien); } svg .graf-alerta { fill: var(--graf-alerta); } svg .graf-mal { fill: var(--graf-mal); }
svg .graf-edad-1 { fill: var(--graf-edad-1); } svg .graf-edad-2 { fill: var(--graf-edad-2); } svg .graf-edad-3 { fill: var(--graf-edad-3); } svg .graf-edad-4 { fill: var(--graf-edad-4); }
svg .graf-marca.toca { filter: brightness(1.25); }
.graf-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.graf-l-enfasis { stroke: var(--graf-enfasis); } .graf-l-contexto { stroke: var(--graf-contexto); } .graf-l-bien { stroke: var(--graf-bien); } .graf-l-mal { stroke: var(--graf-mal); }
.graf-punto { stroke: var(--graf-superficie); stroke-width: 2; }
.graf-apilada { display: flex; gap: 2px; width: 100%; }
.graf-apilada > span { display: block; height: 100%; min-width: 3px; }
.graf-apilada > span:first-child { border-radius: 4px 0 0 4px; } .graf-apilada > span:last-child { border-radius: 0 4px 4px 0; }
.graf-apilada > span:only-child { border-radius: 4px; }
.graf-apilada .graf-enfasis { background: var(--graf-enfasis); } .graf-apilada .graf-contexto { background: var(--graf-contexto); }
.graf-apilada .graf-bien, .graf-llave.graf-bien { background: var(--graf-bien); } .graf-apilada .graf-alerta, .graf-llave.graf-alerta { background: var(--graf-alerta); } .graf-apilada .graf-mal, .graf-llave.graf-mal { background: var(--graf-mal); }
.graf-apilada .graf-edad-1, .graf-llave.graf-edad-1 { background: var(--graf-edad-1); } .graf-apilada .graf-edad-2, .graf-llave.graf-edad-2 { background: var(--graf-edad-2); }
.graf-apilada .graf-edad-3, .graf-llave.graf-edad-3 { background: var(--graf-edad-3); } .graf-apilada .graf-edad-4, .graf-llave.graf-edad-4 { background: var(--graf-edad-4); }
.graf-apilada > span:hover, .graf-apilada > span:focus-visible { filter: brightness(1.2); outline: 2px solid var(--color-foco); outline-offset: 1px; }
.graf-leyenda { display: flex; flex-wrap: wrap; gap: 4px var(--espacio-4); margin-top: 8px; font-size: var(--tamano-12); color: var(--color-tinta-suave); }
.graf-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.graf-leyenda b { color: var(--color-tinta); font-weight: 600; }
.graf-llave { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.graf-llave.graf-enfasis { background: var(--graf-enfasis); } .graf-llave.graf-contexto { background: var(--graf-contexto); }
.graf-llave.linea { height: 2px; width: 14px; border-radius: 1px; }
.graf-tabla { margin-top: 8px; font-size: var(--tamano-12); }
.graf-tabla summary { cursor: pointer; color: var(--color-enlace); font-weight: 600; min-height: var(--alto-toque); display: inline-flex; align-items: center; }
.graf-tabla .tabla { font-size: var(--tamano-12); }
.graf-tip { position: fixed; z-index: 80; pointer-events: none; background: var(--color-lateral); color: var(--color-tinta-inversa); border-radius: var(--radio-chico); padding: 7px 10px; font-size: var(--tamano-12); box-shadow: var(--sombra-aviso); max-width: 260px; }
.graf-tip-t { color: var(--color-tinta-inversa-suave); margin-bottom: 3px; }
.graf-tip-f { display: flex; align-items: center; gap: 6px; }
.graf-tip-f b { font-family: var(--fuente-cifra); font-weight: 600; }
.graf-tip-k { width: 12px; height: 2px; border-radius: 1px; background: var(--color-tinta-inversa); display: inline-block; }
.graf-chispa { display: inline-block; vertical-align: middle; overflow: visible; }
.graf-bala { min-width: 0; }
.graf-bala-pista { position: relative; display: block; height: 10px; border-radius: 4px; background: var(--color-hundido); box-shadow: inset 0 0 0 1px var(--color-borde); }
.graf-bala-v { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.graf-bala-v.graf-enfasis { background: var(--graf-enfasis); } .graf-bala-v.graf-bien { background: var(--graf-bien); } .graf-bala-v.graf-alerta { background: var(--graf-alerta); } .graf-bala-v.graf-mal { background: var(--graf-mal); } .graf-bala-v.graf-contexto { background: var(--graf-contexto); }
.graf-bala-meta { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--color-tinta); border-radius: 1px; }

/* ==========================================================================
   12d. PORTAL DEL INQUILINO (PlazaKit.montarInquilino): barra superior clara, pestañas abajo en teléfono
   ========================================================================== */
.app.inq { display: block; }
.inq-barra { position: sticky; top: 0; z-index: 30; background: var(--color-superficie); border-bottom: 1px solid var(--color-borde); }
.inq-barra-in { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; gap: var(--espacio-5); padding: 0 var(--espacio-6); min-height: 64px; }
.inq-marca { display: flex; align-items: center; gap: 10px; color: var(--color-tinta); text-decoration: none; flex: none; min-height: var(--alto-toque); }
.inq-marca .lat-logo { background: var(--color-tinta); color: var(--color-superficie); }
.inq-marca b { display: block; font-size: var(--tamano-14); font-weight: 800; line-height: 1.15; }
.inq-marca small { display: block; font-size: var(--tamano-11); color: var(--color-tinta-suave); }
.inq-nav ul { display: flex; gap: 2px; }
.inq-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--alto-toque); padding: 0 12px; border-radius: var(--radio-pildora); color: var(--color-tinta-suave); text-decoration: none; font-size: var(--tamano-13); font-weight: 600; white-space: nowrap; }
.inq-nav a:hover { background: var(--color-hundido); color: var(--color-tinta); }
.inq-nav a[aria-current='page'] { background: var(--color-tinta); color: var(--color-superficie); }
.inq-quien { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.inq-quien b { display: block; font-size: var(--tamano-13); line-height: 1.2; }
.inq-quien small { display: block; font-size: var(--tamano-11); color: var(--color-tinta-suave); }
.inq-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--color-apartado); color: var(--color-tinta); font-weight: 800; font-size: var(--tamano-12); }
.app.inq .pk-demo { padding-left: max(var(--espacio-6), calc((100vw - 72rem) / 2 + var(--espacio-6))); }
.inq-trabajo { max-width: 72rem; margin: 0 auto; padding: var(--espacio-6) var(--espacio-6) var(--espacio-8); display: flex; flex-direction: column; gap: var(--espacio-4); }
.inq-hola { font-size: var(--tamano-14); color: var(--color-tinta-suave); }
.inq-tabs { display: none; }

@media (max-width: 1180px) {
  .rejilla-lateral { grid-template-columns: minmax(0, 1fr); }
  .rejilla-lateral > .pegado { position: static; }
  .rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) { .inq-nav span { display: none; } .inq-nav a { padding: 0 12px; } }
@media (max-width: 760px) {
  .inq-barra-in { padding: 0 var(--espacio-4); min-height: 56px; }
  .inq-nav, .inq-quien span:not(.inq-avatar) { display: none; }
  .inq-trabajo { padding: var(--espacio-4) var(--espacio-4) calc(84px + env(safe-area-inset-bottom)); }
  .inq-tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--color-superficie); border-top: 1px solid var(--color-borde); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .inq-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; color: var(--color-tinta-suave); text-decoration: none; font-size: 10.5px; font-weight: 600; border-radius: var(--radio-chico); }
  .inq-tabs a[aria-current='page'] { color: var(--color-tinta); }
  .inq-tabs a[aria-current='page'] .ic { stroke-width: 2.4; }
  .app.inq .pk-demo { padding-left: var(--espacio-4); }
  .app.inq ~ .pk-avisos, .app.inq .pk-avisos { bottom: 84px; }
}
@media (max-width: 760px) {
  /* Toques de 44 px en teléfono aunque en escritorio sean compactos */
  .boton.chico, .segmentado button, .chip, .pestana { min-height: var(--alto-toque); }
  .segmentado { padding: 2px; }
  .pk-demo { padding: 4px var(--espacio-2) 4px var(--espacio-4); font-size: var(--tamano-11); }
  .pk-demo button { height: var(--alto-toque); }
  .app { display: block; }
  .lateral { position: fixed; left: 0; top: 0; width: min(300px, 86vw); transform: translateX(-105%); visibility: hidden; box-shadow: none; z-index: 55; }
  .lateral[data-visible='si'] { visibility: visible; box-shadow: 12px 0 40px var(--color-sombra-chica); }
  .barra-tel {
    display: flex; align-items: center; gap: var(--espacio-2); position: sticky; top: 0; z-index: 30; height: var(--alto-barra-tel);
    background: var(--color-lateral); color: var(--color-tinta-inversa); padding: 0 var(--espacio-4) 0 var(--espacio-1);
  }
  .barra-tel .boton-icono { background: transparent; border-color: transparent; color: var(--color-tinta-inversa); }
  .barra-tel .boton-icono:hover { background: var(--color-lateral-hover); }
  .barra-tel .bt-texto { min-width: 0; line-height: 1.2; }
  .barra-tel .bt-texto strong { display: block; font-size: var(--tamano-14); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra-tel .bt-texto span { display: block; font-size: var(--tamano-12); color: var(--color-tinta-inversa-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra-tel .bt-extra { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
  .barra-tel .bt-pend { font-family: var(--fuente-cifra); font-size: var(--tamano-12); font-weight: 600; background: var(--color-vence); color: var(--color-blanco); padding: 0 10px; border-radius: 6px; text-decoration: none; min-height: var(--alto-toque); min-width: var(--alto-toque); display: inline-flex; align-items: center; justify-content: center; }
  .barra-tel .bt-extra > a, .barra-tel .bt-extra > button { min-height: var(--alto-toque); display: inline-flex; align-items: center; }
  .barra-tel .bt-rol { font-size: var(--tamano-11); color: var(--color-tinta); background: var(--color-apartado); padding: 2px 6px; border-radius: 4px; font-weight: 700; }
  .trabajo { padding: var(--espacio-4) var(--espacio-4) var(--espacio-8); gap: var(--espacio-3); }
  .titulo { font-size: var(--tamano-22); }
  .titulo.chico { font-size: var(--tamano-22); }
  .subtitulo { font-size: var(--tamano-13); }
  .cabeza-meta { align-items: flex-start; text-align: left; }
  .rejilla-2, .rejilla-3, .grupo-campos.dos { grid-template-columns: minmax(0, 1fr); }
  .tarjeta-cabeza, .seccion-cabeza { padding-left: var(--espacio-4); padding-right: var(--espacio-4); }
  .tarjeta-cuerpo { padding: 0 var(--espacio-4) var(--espacio-4); }
  .tarjeta-cuerpo.lleno { padding: var(--espacio-4); }
  .tarjeta-pie { padding: var(--espacio-3) var(--espacio-4); }
  .fila { padding: 8px var(--espacio-4); }
  :root { --ancho-clave: 4.5rem; }
  .fila .clave { white-space: normal; overflow-wrap: anywhere; align-items: flex-start; line-height: 1.25; }
  .fila .clave .muestra { margin-top: 3px; }
  .vacio-lista { padding-left: var(--espacio-4); padding-right: var(--espacio-4); }
  .fichas-ed { overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; }
  .fichas-ed::-webkit-scrollbar { display: none; }
  .ficha-ed { flex: 0 0 54px; min-height: 60px; }
  .ficha-ed.todos { flex: 0 0 74px; }
  /* Tabla apilable: cada renglón se vuelve bloque con sus etiquetas (data-etq en cada td) */
  .tabla.apilable thead { display: none; }
  .tabla.apilable, .tabla.apilable tbody, .tabla.apilable tr, .tabla.apilable td { display: block; width: 100%; }
  .tabla.apilable tr { padding: 10px var(--espacio-4); border-bottom: 1px solid var(--color-filete); }
  .tabla.apilable td { border: 0; padding: 2px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .tabla.apilable td::before { content: attr(data-etq); color: var(--color-tinta-suave); font-family: var(--fuente-texto); font-size: var(--tamano-12); text-align: left; }
  .tabla.apilable td:first-child { font-size: var(--tamano-14); }
  .tabla.apilable td:first-child::before { content: none; }
  .mapa-marco { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .mapa-marco::-webkit-scrollbar { display: none; }
  .mapa-lienzo { width: auto; height: 240px; aspect-ratio: 2800 / 951; }
  .mapa-pista { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px var(--espacio-4); font-size: var(--tamano-12); color: var(--color-tinta-suave); background: var(--color-superficie); border-bottom: 1px solid var(--color-borde); }
  .mapa-pista .ic { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
  .mapa-sello { display: none; }
  /* Panel → hoja inferior que sigue al dedo */
  .panel { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto; max-height: calc(100dvh - 24px); border-left: 0; border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0; transform: translateY(110%); box-shadow: var(--sombra-hoja); }
  .panel-agarre { display: grid; place-items: center; height: var(--alto-toque); margin-bottom: -12px; flex: none; cursor: grab; touch-action: none; border: 0; background: transparent; width: 100%; padding: 0; position: relative; z-index: 1; }
  .panel-agarre span { width: 40px; height: 5px; border-radius: 3px; background: var(--color-borde-campo); }
  .panel-cabeza { padding: 0 var(--espacio-4) var(--espacio-3); touch-action: none; }
  .panel-cuerpo { padding: var(--espacio-4) var(--espacio-4) var(--espacio-6); }
  .panel-pie { padding: var(--espacio-3) var(--espacio-4) calc(var(--espacio-3) + env(safe-area-inset-bottom)); }
  .pk-avisos { left: var(--espacio-4); right: var(--espacio-4); bottom: var(--espacio-4); max-width: none; }
  .linea > li { grid-template-columns: 64px 20px minmax(0, 1fr); gap: 0 8px; }
  .linea > li::before { left: 81px; }
  .pasos { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .pasos.vertical { grid-template-columns: minmax(0, 1fr); }
}

/* Movimiento apagado si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  button:active, .boton:active, .fila:active, .bloque-m2:active, .pulsable:active { transform: none !important; }
  .girando { animation: pk-girar 2s linear infinite !important; animation-duration: 2s !important; animation-iteration-count: infinite !important; }
}
@media (forced-colors: active) {
  .e-negociacion, .e-sin_dato { forced-color-adjust: none; }
}
@media print {
  .lateral, .barra-tel, .panel, .velo, .pk-avisos, .pk-demo, .inq-tabs, .graf-tip { display: none !important; }
  .app { display: block; }
}

/* ════════ 16. CALMA v2 (piloto, 14 oct 2026) ════════
   Solo aplica a pantallas con <html data-calma>. Si Bismarck lo aprueba, se quita el alcance y vale para todas.
   1) Arriba, el NOMBRE de la pantalla en grande (lo pone el kit). 2) Debajo, la respuesta en una frase.
   3) Cada bloque con título grande y una línea que dice qué es. 4) Primer vistazo: máximo 3 bloques.
   5) Lo demás detrás de «Ver más» (details.mas). */
[data-calma] .nombre-pantalla { font-size: var(--tamano-32); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; font-stretch: 92%; color: var(--color-tinta); margin: 0 0 6px; text-wrap: balance; }
[data-calma] .nombre-pantalla .np-seccion { color: var(--color-tinta-suave); font-weight: 700; }
[data-calma] .titulo { font-size: var(--tamano-22); font-weight: 700; letter-spacing: -.01em; font-stretch: 100%; color: var(--color-tinta); }
[data-calma] .titulo.chico { font-size: var(--tamano-22); }
[data-calma] .subtitulo { font-size: var(--tamano-14); margin-top: 4px; }
[data-calma] .tarjeta-cabeza { padding-top: var(--espacio-5); }
[data-calma] .tarjeta-cabeza h2 { font-size: var(--tamano-22); line-height: 1.2; }
[data-calma] .tarjeta-cabeza p { font-size: var(--tamano-14); margin-top: -2px; }
[data-calma] .seccion-cabeza h3 { font-size: var(--tamano-17); font-weight: 800; }
/* Qué tipo de cosa es el bloque (Gráfica, Lista, Resumen…): rótulo chico encima del título */
.tipo-bloque { display: block; flex-basis: 100%; font-size: var(--tamano-12); font-weight: 700; font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase; color: var(--color-tinta-suave); margin-bottom: -4px; }
/* «Ver más»: details nativo con forma de renglón tocable */
details.mas { border-top: 1px solid var(--color-borde); }
details.mas > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--alto-toque); padding: 6px var(--espacio-5); font-size: var(--tamano-14); font-weight: 700; color: var(--color-enlace); cursor: pointer; }
details.mas > summary::-webkit-details-marker { display: none; }
details.mas > summary .ic { transition: transform 220ms var(--curva-salida); color: var(--color-tinta-suave); }
details.mas[open] > summary .ic { transform: rotate(90deg); }
details.mas > summary:focus-visible { outline: 2px solid var(--color-enlace); outline-offset: -2px; }
details.mas .mas-cuerpo { display: grid; gap: var(--espacio-4); padding: 0 var(--espacio-5) var(--espacio-5); }
details.mas.suelto > summary, details.mas.suelto .mas-cuerpo { padding-left: 0; padding-right: 0; }
.cifra-respuesta { font-family: var(--fuente-cifra); font-variant-numeric: tabular-nums; font-size: var(--tamano-32); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
@media (max-width: 760px) {
  [data-calma] .nombre-pantalla { font-size: var(--tamano-26); }
  [data-calma] .titulo, [data-calma] .titulo.chico { font-size: var(--tamano-17); }
  [data-calma] .tarjeta-cabeza h2 { font-size: var(--tamano-17); }
  details.mas > summary { padding-left: var(--espacio-4); padding-right: var(--espacio-4); }
  details.mas .mas-cuerpo { padding-left: var(--espacio-4); padding-right: var(--espacio-4); }
}