/* CASAPORTE PULSE · EL SISTEMA (🎨 28-sep-2026). La vara es Apple (Configuración, Salud, Mail) y Linear:
   la jerarquía la hacen la letra, el espacio y la alineación; no las cajas ni los colores.

   · UNA familia (SF / la del sistema) y CUATRO tamaños: 28 (título de pantalla y cifra) · 17 (título de
     sección) · 15 (cuerpo) · 13 (lo secundario). Pesos 400 · 500 · 600 (700 sólo el título y la cifra).
   · Color sólo cuando significa: `--acento` = lo que se toca; `--error` = lo urgente, UNA vez y agrupado
     («15 vencidos» arriba, no una pastilla roja por fila); `--dato` = la serie de los gráficos. Lo demás es
     tinta (`--etiqueta`) o tinta segunda (`--secundaria`), ambas AA sobre su fondo en claro y en oscuro.
   · Estados en TEXTO («Vendida», «Bloqueado», «Contactado · Residencia 802»), no en pastillas: `.chip` es
     un rótulo de texto y los rótulos seguidos se separan con « · ».
   · Listas agrupadas: una superficie, filas de 44 px o más, separador fino que empieza donde empieza el
     texto. Sin avatares de iniciales, sin barras de color al costado, sin sombras, sin gradientes, sin
     iconos de adorno (los de la barra lateral sí: son navegación) y sin la nota gris bajo cada título.
   · Cifras tabulares siempre. Espaciado en múltiplos de 4 (4 · 8 · 12 · 16 · 24 · 32 · 48).
   · Oscuro de verdad: lienzo negro, superficie #1c1c1e, tinta #f5f5f7; nada de gris sobre gris.
   Es de Casaporte y no de un desarrollo: nada aquí nombra uno. Cada pantalla trae su `.css` con SU
   prefijo y usa estos tokens y piezas; el sistema completo, en `Backend/Panel · Diseño.md`. */
:root {
  --lienzo: #f5f5f7;
  --superficie: #ffffff;
  --etiqueta: #1d1d1f;
  --secundaria: #6e6e73; /* 5.1:1 sobre blanco, 4.7:1 sobre el lienzo */
  --terciaria: #8e8e93; /* sólo lo que no es texto: iconos, marcas, lo deshabilitado */
  --separador: rgba(60, 60, 67, 0.14);
  --relleno: rgba(120, 120, 128, 0.12);
  --relleno-fuerte: rgba(120, 120, 128, 0.2);
  --material: rgba(250, 250, 252, 0.8);
  --acento: #0071e3; /* texto que se toca */
  --accion: #0071e3; /* el fondo del botón primario (tinta blanca encima: 4.7:1) */
  --sobre-acento: #ffffff;
  --dato: #0071e3; /* la serie única de los gráficos */
  --segmento: #ffffff; /* el botón activo del control segmentado */
  --bueno: #1d7a36;
  --error: #d70015;
  --sombra: none;
  --elevacion: 0 12px 40px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.06); /* sólo hojas y menús que flotan */
  --curva: cubic-bezier(0.32, 0.72, 0, 1);
  --demo: #ffcc00; /* 🎭 la banda de la demo: que nadie tome estos datos por reales */
  --sobre-demo: #1d1d1f;
  --t-titulo: 28px;
  --t-seccion: 17px;
  --t-cuerpo: 15px;
  --t-nota: 13px;
  --radio: 12px;
  --radio-control: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --lienzo: #000000;
    --superficie: #1c1c1e;
    --etiqueta: #f5f5f7;
    --secundaria: #a1a1a6; /* 6.6:1 sobre #1c1c1e */
    --terciaria: #636366;
    --separador: rgba(84, 84, 88, 0.55);
    --relleno: rgba(120, 120, 128, 0.24);
    --relleno-fuerte: rgba(120, 120, 128, 0.36);
    --material: rgba(22, 22, 24, 0.82);
    --acento: #2997ff; /* 5.6:1 sobre #1c1c1e */
    --accion: #0071e3;
    --dato: #409cff;
    --segmento: #636366;
    --bueno: #30d158;
    --error: #ff453a;
    --elevacion: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.1);
    --demo: #ffd60a;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --lienzo: #000000;
  --superficie: #1c1c1e;
  --etiqueta: #f5f5f7;
  --secundaria: #a1a1a6;
  --terciaria: #636366;
  --separador: rgba(84, 84, 88, 0.55);
  --relleno: rgba(120, 120, 128, 0.24);
  --relleno-fuerte: rgba(120, 120, 128, 0.36);
  --material: rgba(22, 22, 24, 0.82);
  --acento: #2997ff;
  --accion: #0071e3;
  --dato: #409cff;
  --segmento: #636366;
  --bueno: #30d158;
  --error: #ff453a;
  --elevacion: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  --demo: #ffd60a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--lienzo);
  color: var(--etiqueta);
  font: var(--t-cuerpo)/1.4 -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
a { color: var(--acento); }

/* ── Controles ─────────────────────────────────────────────────────────────── */
button { cursor: pointer; border: 0; background: none; }
.primario {
  background: var(--accion); color: var(--sobre-acento); border-radius: var(--radio-control);
  min-height: 36px; padding: 0 16px; font-size: var(--t-cuerpo); font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: opacity 0.2s;
}
.primario:hover { opacity: 0.88; }
.primario:active { opacity: 0.75; }
.primario:disabled { opacity: 0.35; cursor: not-allowed; }
.primario svg { display: none; }
.gris {
  background: var(--relleno); border-radius: var(--radio-control); min-height: 32px; padding: 0 12px; font-size: var(--t-nota); font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--etiqueta); text-decoration: none; flex: none;
  transition: background 0.2s;
}
.gris:hover { background: var(--relleno-fuerte); }
.gris:disabled { opacity: 0.4; cursor: not-allowed; }
/* El botón dice lo que hace con palabras: sin icono de adorno. */
.gris svg { display: none; }
.enlace { color: var(--acento); padding: 0; font-size: var(--t-nota); font-weight: 500; }
.enlace:hover { text-decoration: underline; text-underline-offset: 2px; }
.peligro, .enlace.peligro, .gris.peligro { color: var(--error); }
/* Un botón primario repetido en cada renglón no es «la» acción de la pantalla: dentro de una fila es
   texto que se toca (Mail, Configuración). El primario lleno queda para los formularios. */
.item .primario, td .primario, .lista .primario {
  background: none; color: var(--acento); min-height: 32px; padding: 0; font-size: var(--t-nota); font-weight: 500;
}
.item .primario:hover, td .primario:hover, .lista .primario:hover { opacity: 1; text-decoration: underline; text-underline-offset: 2px; }
/* Igual el botón gris repetido fila por fila («Cerrar», «Copiar», «Descargar CSV»): texto que se toca. */
.item .gris { background: none; color: var(--acento); padding: 0 4px; min-height: 28px; }
.item .gris:hover { background: none; text-decoration: underline; text-underline-offset: 2px; }
/* Lo destructivo repetido en cada fila («Dar De Baja», «Retirar») no pinta la lista de rojo: tinta segunda,
   y rojo al pasar encima. Su hoja de confirmación sí lo dice en rojo. */
.item .peligro, .item .enlace.peligro, .item .gris.peligro { color: var(--secundaria); }
.item .peligro:hover { color: var(--error); }
input, select {
  background: var(--relleno); border: 0; border-radius: var(--radio-control); min-height: 36px; padding: 0 12px; min-width: 0;
  outline: none; transition: box-shadow 0.2s;
}
input::placeholder, textarea::placeholder { color: var(--secundaria); opacity: 1; }
input[type='checkbox'], input[type='radio'] { min-height: 0; accent-color: var(--acento); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 45%, transparent); outline: none;
}
select { appearance: none; padding-right: 30px; font-weight: 400;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
.segmentado { display: inline-flex; background: var(--relleno); border-radius: var(--radio-control); padding: 2px; gap: 2px; }
.segmentado button {
  min-height: 28px; padding: 0 12px; border-radius: 6px; font-size: var(--t-nota); font-weight: 400; color: var(--etiqueta);
  transition: background 0.3s var(--curva), box-shadow 0.3s var(--curva); white-space: nowrap;
}
.segmentado button[aria-checked='true'] { background: var(--segmento); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); font-weight: 500; }
.segmentado button .n { color: var(--secundaria); margin-left: 6px; }

/* ── Entrar ────────────────────────────────────────────────────────────────── */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.hoja-entrar {
  background: var(--superficie); border-radius: 16px; padding: 40px 32px 32px; width: min(380px, 100%);
  display: grid; gap: 16px;
}
.hoja-entrar h1 { margin: 0; font-size: var(--t-titulo); line-height: 34px; font-weight: 700; letter-spacing: -0.02em; }
.hoja-entrar .sub { margin: -8px 0 8px; color: var(--secundaria); }
.hoja-entrar label { display: grid; gap: 6px; color: var(--secundaria); font-size: var(--t-nota); }
.hoja-entrar input { min-height: 44px; font-size: var(--t-cuerpo); color: var(--etiqueta); }
.hoja-entrar .primario { min-height: 44px; }
.error { color: var(--error); margin: 0; min-height: 1.2em; font-size: var(--t-nota); }
.olvide { justify-self: center; }
.hoja-entrar .mas.legal { font-size: var(--t-nota); }

/* 🎭 La demo: el boton del login y la banda fija de arriba. */
.demo-entrar { display: grid; gap: 8px; justify-items: center; padding-top: 16px; border-top: 1px solid var(--separador); }
.demo-entrar .gris { width: 100%; min-height: 44px; font-size: var(--t-cuerpo); }
.demo-entrar .nota { margin: 0; text-align: center; }
.banda-demo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 28px; padding: 0 16px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: var(--demo); color: var(--sobre-demo); font-size: var(--t-nota); font-weight: 500; letter-spacing: 0;
}
.banda-demo button { color: var(--sobre-demo); font-size: var(--t-nota); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; padding: 0; }
body.con-banda { padding-top: 28px; }
@media (min-width: 861px) { body.con-banda .lateral { top: 28px; height: calc(100vh - 28px); } }
body.con-banda .entrar { min-height: calc(100vh - 28px); }

/* ── La app ────────────────────────────────────────────────────────────────── */
/* 🧩 La columna de la barra lateral se pinta en la app, no sólo en la barra: la barra es `sticky` de
   100vh y, en una página más larga (o en una captura de página completa), su fondo se acababa a media
   página. Con la columna pintada, su fondo y su borde llegan al fondo siempre. */
.app {
  display: grid; grid-template-columns: 224px 1fr; min-height: 100vh;
  background: linear-gradient(to right, var(--material) 223px, var(--separador) 223px 224px, transparent 224px);
}
body.con-banda .app { min-height: calc(100vh - 28px); }
.lateral {
  position: sticky; top: 0; height: 100vh; padding: 20px 12px; display: flex; flex-direction: column; gap: 1px;
  overflow-y: auto;
  /* Su fondo y su borde los pinta `.app` (arriba), de arriba abajo. */
}
.marca { font-weight: 600; font-size: var(--t-seccion); padding: 0 10px 16px; letter-spacing: -0.02em; }
.lateral a {
  display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; border-radius: 6px;
  color: var(--etiqueta); text-decoration: none; font-size: var(--t-nota); font-weight: 400;
  transition: background 0.2s;
}
.lateral a svg { width: 17px; height: 17px; color: var(--secundaria); flex: none; }
.lateral a:hover { background: var(--relleno); }
.lateral a[aria-current='page'] { background: var(--relleno-fuerte); font-weight: 600; }
.lateral a[aria-current='page'] svg { color: var(--etiqueta); }
/* La cuenta de la barra: una cifra, no una pastilla (Mail). */
.badge {
  margin-left: auto; color: var(--secundaria); font-size: var(--t-nota); font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.pie-lateral { margin-top: auto; padding: 16px 10px 0; display: grid; gap: 4px; justify-items: start; }
.quien { color: var(--secundaria); font-size: var(--t-nota); word-break: break-all; }
.quien .org { display: block; word-break: normal; color: var(--etiqueta); font-weight: 500; }
.lateral .pie-lateral a { display: inline; min-height: 0; padding: 0; color: var(--secundaria); font-size: var(--t-nota); }
.lateral .pie-lateral a:hover { background: none; text-decoration: underline; text-underline-offset: 2px; }

.contenido { padding: 32px 48px 64px; max-width: 1280px; width: 100%; min-width: 0; }
.cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cabecera h1 { margin: 0; font-size: var(--t-titulo); line-height: 34px; font-weight: 700; letter-spacing: -0.02em; }
.sobretitulo { margin: 0 0 2px; color: var(--secundaria); font-size: var(--t-nota); font-weight: 400; }
.controles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.controles select { font-size: var(--t-nota); min-height: 32px; }
.vista { animation: entra 0.3s var(--curva); }
@keyframes entra { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vista, .aviso { animation: none; } }

/* ── Secciones (la «tarjeta»: un grupo, sin sombra) ─────────────────────────── */
.rejilla { display: grid; gap: 16px; }
.rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tarjeta { background: var(--superficie); border-radius: var(--radio); padding: 20px 24px; box-shadow: none; min-width: 0; }
.tarjeta.ancha { grid-column: 1 / -1; }
.tarjeta h2 { margin: 0 0 12px; font-size: var(--t-seccion); line-height: 22px; font-weight: 600; letter-spacing: -0.01em; }
.tarjeta h3 { font-size: var(--t-cuerpo); font-weight: 600; }
.tarjeta .nota { margin: -8px 0 16px; color: var(--secundaria); font-size: var(--t-nota); }
/* La entrada gris bajo el título de la pantalla, igual: la pantalla se explica sola. */
.sa-intro, .pr-intro, .ent-intro, #v-bitacora > .nota:not([id]) { display: none; }
/* La explicación gris bajo cada título es relleno: el título y lo que hay debajo se explican solos. Una
   nota con `id` la escribe una pantalla (un estado, un resultado) y esa sí se ve. */
.tarjeta > h2 + .nota:not([id]), .titulo-con-accion + .nota:not([id]) { display: none; }
.subgrafico { margin: 24px 0 8px; font-size: var(--t-nota); font-weight: 500; color: var(--secundaria); }
.titulo-con-accion { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.titulo-con-accion h2 { margin: 0; }
.mas { color: var(--acento); text-decoration: none; font-size: var(--t-nota); font-weight: 500; }
.mas:hover { text-decoration: underline; text-underline-offset: 2px; }
.tarjeta > .mas { display: inline-block; margin-top: 12px; }

/* Las cifras: UNA franja con separadores finos, no siete cajas (Finanzas, Salud). */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin-bottom: 16px;
  background: var(--superficie); border-radius: var(--radio); overflow: hidden;
}
/* El separador de cada cifra con la de su izquierda y la de arriba; el borde exterior lo recorta la franja. */
.kpi { background: var(--superficie); padding: 16px 20px; min-width: 0; box-shadow: -1px 0 0 var(--separador), 0 -1px 0 var(--separador); }
.kpi .r { color: var(--secundaria); font-size: var(--t-nota); font-weight: 400; }
.kpi .n { font-size: var(--t-titulo); line-height: 34px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .d { display: block; font-size: var(--t-nota); color: var(--secundaria); margin-top: 2px; }
.kpi .d.sube { color: var(--secundaria); }
.kpi .vivo::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bueno); margin-right: 6px; vertical-align: 2px; animation: late 2s infinite; }
@keyframes late { 50% { opacity: 0.35; } }

/* ── Gráficos (serie única, `--dato`; ver skill dataviz) ─────────────────────── */
.grafico { height: 160px; position: relative; }
.grafico.bajo { height: 64px; }
.grafico svg { width: 100%; height: 100%; overflow: visible; stroke: none; }
.grafico .barra { fill: var(--dato); }
.grafico .barra.leads { fill: var(--dato); opacity: 0.5; }
.grafico .golpe { fill: transparent; }
.grafico .golpe:hover + .barra, .grafico g:hover .barra { opacity: 0.75; }
.grafico .rejilla-linea { stroke: var(--separador); stroke-width: 1; }
.grafico text { fill: var(--secundaria); font-size: 11px; stroke: none; font-variant-numeric: tabular-nums; }

.barras { display: grid; gap: 10px; }
.barras.separado { margin-top: 24px; }
.fila-barra { display: grid; grid-template-columns: minmax(84px, 34%) 1fr auto; align-items: center; gap: 12px; font-size: var(--t-nota); }
.fila-barra .et { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-barra .et .chip { color: var(--etiqueta); }
.fila-barra .pista { height: 6px; background: var(--relleno); border-radius: 3px; overflow: hidden; }
.fila-barra .lleno { height: 100%; background: var(--dato); border-radius: 3px; transition: width 0.5s var(--curva); }
.fila-barra .v { color: var(--secundaria); min-width: 48px; text-align: right; }

.ranking { list-style: none; margin: 0; padding: 0; display: grid; }
.ranking li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--separador); }
.ranking li:last-child { border-bottom: 0; }
.ranking .pos { color: var(--secundaria); font-weight: 400; }
.ranking .nombre { font-weight: 500; }
.ranking .detalle { color: var(--secundaria); font-size: var(--t-nota); }
.ranking .v { font-size: var(--t-nota); color: var(--secundaria); text-align: right; }

.calor { display: grid; grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 2px; font-size: 11px; color: var(--secundaria); }
.calor .celda { aspect-ratio: 1; border-radius: 2px; background: var(--relleno); }
.calor .dia { align-self: center; }
.calor .hora { text-align: center; }

/* ── Tablas ────────────────────────────────────────────────────────────────── */
.tabla-envoltura { overflow-x: auto; margin: 0 -8px; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-nota); }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--separador); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
th { color: var(--secundaria); font-weight: 400; font-size: var(--t-nota); }
td.n, th.n { text-align: right; }
td.fuerte { font-weight: 600; }
.intensidad { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: 0; background: var(--dato); }
.vacio { color: var(--secundaria); font-size: var(--t-nota); padding: 16px 0; }

/* ── Listas agrupadas (prospectos, enlaces, todo lo que es fila) ──────────── */
.barra-herramientas { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 16px; }
.barra-herramientas input[type='search'] { flex: 1 1 240px; min-height: 32px; }
.barra-herramientas .segmentado { overflow-x: auto; max-width: 100%; }
.lista { display: grid; gap: 0; background: var(--superficie); border-radius: var(--radio); overflow: hidden; }
.tarjeta .lista { border-radius: 0; margin: 0 -24px; }
.item {
  background: var(--superficie); padding: 12px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: center;
  position: relative; min-height: 44px;
}
/* El separador fino empieza donde empieza el texto. */
.item + .item::before, .lista > * + .item::before {
  content: ''; position: absolute; top: 0; left: 24px; right: 0; height: 1px; background: var(--separador);
}
/* Sin avatares de iniciales: el nombre ya dice quién es. */
.avatar { display: none; }
.item .linea1 { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.item .nombre { font-weight: 500; font-size: var(--t-cuerpo); }
.item a.nombre, .item .nombre a { color: var(--etiqueta); text-decoration: none; }
.item a.nombre:hover, .item .nombre a:hover { color: var(--acento); }
.item .tenue { color: var(--secundaria); font-size: var(--t-nota); }
.item .linea2 { margin-top: 2px; display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; color: var(--secundaria); font-size: var(--t-nota); }
/* EL RÓTULO: estado, canal, residencia… en texto, sin pastilla. Seguidos, con « · » entre ellos. */
.chip {
  display: inline; background: none; padding: 0; height: auto; border-radius: 0; font-size: var(--t-nota); font-weight: 400;
  color: var(--secundaria); white-space: nowrap; font-variant-numeric: tabular-nums; border: 0;
}
.chip svg { display: none; }
/* El punto va al final del rótulo que tiene otro detrás: si el renglón se parte, queda colgando al final
   y no empieza el siguiente. */
.chip:has(+ .chip:not(:empty), + .tenue:not(:empty))::after, .tenue:not(:empty):has(+ .chip:not(:empty))::after { content: '·'; margin-left: 6px; color: var(--secundaria); font-weight: 400; }
/* En columna (la derecha de una fila) cada rótulo va en su renglón: sin punto. */
.derecha > .chip::after, .derecha > .tenue::after { content: none !important; }
.chip.principal { color: var(--etiqueta); font-weight: 400; }
button.chip { cursor: pointer; color: var(--acento); }
button.chip:hover { text-decoration: underline; text-underline-offset: 2px; }
.item .mensaje { margin: 4px 0 0; color: var(--secundaria); font-size: var(--t-nota); font-style: normal; }
.item .derecha { display: grid; gap: 4px; justify-items: end; text-align: right; color: var(--secundaria); font-size: var(--t-nota); }
.item select { min-height: 28px; font-size: var(--t-nota); }
.lista .vacio { background: var(--superficie); padding: 32px 24px; text-align: center; }

.enlaces .item { grid-template-columns: minmax(0, 1fr) auto; }
.url { display: flex; gap: 8px; align-items: center; margin-top: 4px; min-width: 0; }
.url code {
  font: 12px ui-monospace, 'SF Mono', Menlo, monospace; color: var(--secundaria); background: none; padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto;
}
.url .gris { min-height: 26px; padding: 0 4px; font-size: var(--t-nota); background: none; color: var(--acento); }
.url .gris:hover { background: none; text-decoration: underline; text-underline-offset: 2px; }
.cifras { display: flex; gap: 24px; text-align: right; }
.cifras b { display: block; font-size: var(--t-cuerpo); font-weight: 500; font-variant-numeric: tabular-nums; }
.cifras span { color: var(--secundaria); font-size: var(--t-nota); }
.acciones { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: flex-end; margin-top: 8px; }
.en-linea { display: flex; flex-wrap: wrap; gap: 8px; }
.en-linea input { flex: 1 1 180px; min-height: 36px; }

/* El estado de una cuenta, en texto; sólo lo que se cortó va en rojo. */
.chip.cuenta { align-self: baseline; }
.chip.cuenta.activa, .chip.cuenta.invitada { color: var(--secundaria); font-weight: 400; background: none; }
.chip.cuenta.bloqueada, .chip.cuenta.caducada { color: var(--error); font-weight: 400; background: none; }
.item.bloqueada .url code { text-decoration: line-through; }
.invitacion-lista {
  margin-top: 16px; padding: 16px 0 0; display: grid; gap: 10px; border-top: 1px solid var(--separador);
}
.invitacion-lista[hidden] { display: none; }
.invitacion-lista .linea1 { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.invitacion-lista .tenue { color: var(--secundaria); font-size: var(--t-nota); }
.invitacion-lista .url { margin: 0; }
.invitacion-lista .url code { white-space: normal; word-break: break-all; flex: 1 1 100%; color: var(--etiqueta); }
.invitacion-lista .nota { margin: 0; }
.botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.botones .enlace { margin-left: auto; }
#aceptar-campos:not([hidden]) { display: grid; gap: 16px; }
#aceptar-campos .nota { margin: -6px 0 0; }
.hoja-entrar input[readonly] { color: var(--secundaria); }

.tip {
  position: fixed; z-index: 10; pointer-events: none; background: var(--material); backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: var(--radio-control); padding: 6px 10px; font-size: 12px;
  box-shadow: var(--elevacion); white-space: pre; font-variant-numeric: tabular-nums;
}
.aviso {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); background: var(--etiqueta); color: var(--lienzo);
  border-radius: 22px; padding: 10px 18px; font-size: var(--t-nota); font-weight: 500; animation: entra 0.3s var(--curva); z-index: 20;
}

/* Las hojas que flotan (`<dialog>`): la única sombra del panel. */
dialog { color: var(--etiqueta); }
dialog::backdrop { background: rgba(0, 0, 0, 0.32); }

/* ── Teléfono: la barra lateral se vuelve barra de pestañas ─────────────────── */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; background: none; }
  .lateral {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 5; flex-direction: row; overflow: visible;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid var(--separador);
    background: var(--material); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    justify-content: space-around;
  }
  .marca, .pie-lateral { display: none; }
  .lateral a { flex-direction: column; gap: 2px; font-size: 10px; font-weight: 500; min-height: 48px; padding: 4px 8px; justify-content: center; position: relative; color: var(--secundaria); }
  .lateral a svg { width: 22px; height: 22px; color: inherit; }
  .lateral a:hover { background: none; }
  .lateral a[aria-current='page'] { background: none; color: var(--acento); font-weight: 600; }
  .lateral a[aria-current='page'] svg { color: var(--acento); }
  /* En la pestaña, la cuenta sí es un globo (iOS): chico y del color de acción; el rojo es de lo urgente. */
  .lateral a .badge {
    position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; height: 16px; min-width: 16px; padding: 0 4px; border-radius: 8px;
    font-size: 11px; font-weight: 600; background: var(--accion); color: var(--sobre-acento); display: grid; place-items: center;
  }
  .contenido { padding: 16px 16px 104px; }
  .cabecera { margin-bottom: 16px; gap: 12px; }
  .cabecera h1 { font-size: var(--t-titulo); }
  .controles { width: 100%; }
  .controles select { flex: 1 1 140px; }
  /* El dueño con varios desarrollos: su selector en renglón propio, el de inmobiliaria no se corta. */
  #desarrollo { flex-basis: 100%; }
  .rejilla.dos { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 12px 16px; }
  .kpi .n { font-size: 22px; line-height: 28px; }
  .tarjeta { padding: 16px; }
  .tarjeta .lista { margin: 0 -16px; }
  .item { padding: 12px 16px; grid-template-columns: minmax(0, 1fr); }
  .item + .item::before, .lista > * + .item::before { left: 16px; }
  .item .derecha { justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 12px; }
  .enlaces .item { grid-template-columns: 1fr; }
  .cifras { text-align: left; }
  .acciones { justify-content: flex-start; }
}

/* ── Formularios (la nota, el texto largo, la fila de acciones) ───────────── */
.nota { color: var(--secundaria); font-size: var(--t-nota); margin: 4px 0 16px; }
textarea {
  font: inherit; color: var(--etiqueta); background: var(--relleno); border: 0; border-radius: var(--radio-control); padding: 10px 12px;
  resize: vertical; outline: none; width: 100%; letter-spacing: inherit;
}
.acciones-form { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.acciones-form .nota { margin: 0; }
@media (max-width: 860px) {
  .acciones-form { flex-direction: column-reverse; align-items: stretch; }
  .acciones-form .primario { width: 100%; min-height: 44px; }
}

#error-aceptar:empty { min-height: 0; }