/* Colegio Conectado · hoja de estilos.
   ORIGEN: copiada de /opt/matrix/property/app/estilo.css @ 9f5aa63 (8-sep-2026),
   identidad visual de Matrix Property (plan §4). Se conserva íntegra; los ajustes
   de marca de Colegio viven en colegio.css, que se carga después. */
/* Matrix Property — la paleta y el armazón del producto.
   UNA voz tipográfica propia, las cifras en ella y los controles en píldora.
   Cambiar aquí cambia las treinta pantallas de golpe.

   ── Por qué dejó de ser azul (22-ago-2026) ────────────────────────────────
   La versión anterior de este comentario justificaba el acento azul diciendo
   que era «el de los documentos que este sistema imprime». No lo era: el
   acento de `report/estado-cuenta-pdf.js` y `contrato-pdf.js` —el papel que de
   verdad le llega al propietario— es DORADO #b08d4a sobre papel #e8e4dc con
   tinta navy #1c2b3a. El panel iba por un lado y el papel por otro, y encima
   ninguno de los dos se parecía al producto hermano.

   Hospitality ya había hecho este ejercicio y lo dejó escrito en su
   tailwind.config: «la identidad ganadora ya existía —landing + PDF—: noche
   cálida, ámbar/champagne, serif ceremonial». Property se quedó fuera. Esto lo
   mete: papel, navy y champagne, que es su propia paleta impresa.

   ── Y por qué el acento NO es el ámbar de Hospitality ─────────────────────
   📏 **Un color de marca no siempre puede ser el color de las acciones.** El
   ámbar #DD8F2D da 2.61 de contraste con texto blanco y el champagne #B08D4A
   da 3.11 — el mínimo legible es 4.5, y aquí se leen cifras todo el día.
   `--acento` es un bronce #7A5C28 que cumple en los TRES usos donde se usa:
   6.20 con texto blanco encima (botones), 5.35 sobre el papel (enlaces) y 2.65
   contra la tinta (que un enlace se distinga del texto de al lado). El ámbar
   vive donde no carga texto: `--marca`, el sello del logo, igual que el
   hermano. */

/* ── La imagen de 2026: producto, no formulario (José, 3-sep-2026) ─────────
   José miró tres direcciones sobre las pantallas reales y descartó dos por la
   misma razón: «no veo diferencia con lo que tenemos». Lo que eligió es un
   lenguaje de producto de consumo —el de un portal de hospedaje— y no una
   afinación del panel de antes:

     · UNA sola voz tipográfica, propia y redonda, con las cifras en el mismo
       tipo que el texto. La monoespaciada deja de ser el vestido de todo dato:
       una cifra en mono se lee «reporte de sistema», y esto vende casas.
     · Piezas grandes de esquina generosa y sombra suave, en vez de cajas de
       borde duro pegadas unas a otras.
     · Los controles son PÍLDORAS. Un botón de esquina redonda a 8 px es el
       vestido por defecto de cualquier admin; a 999 px es una decisión.
     · Blanco cálido de fondo y blanco puro en la pieza, para que la tarjeta
       flote en vez de recortarse contra el papel.

   Las llaves de este bloque NO cambian de nombre a propósito: cambiar aquí
   cambia las treinta pantallas de golpe, que es justo lo que este archivo
   promete desde su primera línea. */

/* La fuente viaja con el producto (49 KB, variable 200-800): un panel que
   depende de fonts.googleapis.com se queda sin tipografía el día que esa
   petición falle o la bloquee la red del cliente. Ruta RELATIVA a propósito —
   `estilo.css` se sirve también bajo `/v-<huella>/`, y una ruta absoluta se
   saldría de la carpeta versionada. */
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("fuentes/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("fuentes/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  color-scheme:light;
  --fondo:#FCFBF9; --tarjeta:#FFFFFF; --hundido:#F7F5F1; --piso:#F0EDE7;
  --tinta:#1C1B1A; --suave:#57544E; --tenue:#78746C;
  --linea:#EBE8E2; --linea-2:#DDD9D1;
  /* ── Por qué el acento se movió de #7A5C28 a #9E5514 ───────────────────
     El bronce viejo cumplía de sobra (6.20 con blanco encima) pero se leía
     apagado al lado de piezas blancas y aire: era el acento de un documento
     impreso, no el de un producto que quiere que le den clic. El nuevo es el
     mismo linaje ámbar, un paso más vivo, y sigue pasando los TRES usos
     medidos: 5.58 con texto blanco encima (botones), 5.40 sobre el fondo
     (enlaces) y 3.08 contra la tinta —que un enlace se distinga del texto de
     al lado, donde el anterior daba 2.65. */
  --acento:#9E5514; --acento-2:#7C4110; --acento-suave:#F7F0E6; --sobre-acento:#FFF;
  /* El sello del logo, y sólo eso: es el ámbar del hermano, que NO tiene
     contraste para cargar texto. Nunca se use de fondo con letras encima. */
  --marca:#DD8F2D; --champan:#B08D4A;
  --mal:#A03636; --mal-suave:#FBEAEA; --ojo:#8C5D18; --ojo-suave:#F7EFE1;
  --bien:#1F6B45; --bien-suave:#E6F3EC;
  /* Sombra de pieza que flota, no de caja con relieve: casi nada de contacto
     y una difusión larga y baja. */
  --sombra:0 1px 2px rgba(28,27,26,.03),0 8px 24px -14px rgba(28,27,26,.16);
  /* Los radios son parte de la identidad, no un detalle: la pieza a 18, lo
     que se toca a píldora, y 12 para lo que vive DENTRO de una pieza. */
  --r-pieza:18px; --r-control:999px; --r-chico:12px;
  /* CONTRATO TIPOGRÁFICO (D, 3-sep-2026) — UNA voz, con dos excepciones:
   *   · --sans: TODO. Texto de trabajo, títulos y también LAS CIFRAS, con
   *     `font-variant-numeric:tabular-nums` para que las columnas cuadren.
   *   · --prosa: existe por compatibilidad con las treinta pantallas que ya
   *     la piden para su display. Hoy apunta al mismo sans en peso grueso: el
   *     serif se retiró con la dirección D. No se borra la llave porque
   *     borrarla obliga a tocar 19 módulos para no ganar nada.
   *   · --mono: SOLO códigos y folios —un SKU, un UUID, una llave técnica—
   *     donde la anchura fija de verdad ayuda a leer. YA NO viste importes ni
   *     fechas: eso era lo que hacía que el panel se leyera como una consola. */
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --prosa:var(--sans);
  /* Pago en el calendario (TCal-2): pares claro/oscuro heredados de la paleta
     Madrugada de Hospitality — pagado=jade · parcial=ámbar · debe=vino. */
  --gpag-bg:#DFF0E8; --gpag-bd:#177E5E; --gpag-tx:#115E46;
  --gpar-bg:#FAECD7; --gpar-bd:#DD8F2D; --gpar-tx:#7A4A10;
  --gdeb-bg:#F4E1E5; --gdeb-bd:#8E3B4C; --gdeb-tx:#6E2536;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --fondo:#16171A; --tarjeta:#1D1F23; --hundido:#24262B; --piso:#2C2F34;
  --tinta:#F4F2EE; --suave:#B0ADA6; --tenue:#8B8880;
  --linea:#2A2C31; --linea-2:#3A3D43;
  /* En oscuro el ámbar SUBE de luz en vez de bajar: el mismo acento de día no
     tiene contraste contra un fondo casi negro. Y el texto que va encima del
     botón pasa a ser la tinta, no el blanco. */
  --acento:#E5A85A; --acento-2:#F0C48C; --acento-suave:#2A2119; --sobre-acento:#16171A;
  --marca:#DD8F2D; --champan:#C9A35E;
  --mal:#E28787; --mal-suave:#33201F; --ojo:#D6A458; --ojo-suave:#2E2617;
  --bien:#74BC8E; --bien-suave:#1B2D23;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px -14px rgba(0,0,0,.85);
  --gpag-bg:#103127; --gpag-bd:#2FBE8F; --gpag-tx:#8FE0C3;
  --gpar-bg:#33270F; --gpar-bd:#DD8F2D; --gpar-tx:#EFC489;
  --gdeb-bg:#331920; --gdeb-bd:#B25A6C; --gdeb-tx:#E8A9B4;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --fondo:#16171A; --tarjeta:#1D1F23; --hundido:#24262B; --piso:#2C2F34;
  --tinta:#F4F2EE; --suave:#B0ADA6; --tenue:#8B8880;
  --linea:#2A2C31; --linea-2:#3A3D43;
  /* En oscuro el ámbar SUBE de luz en vez de bajar: el mismo acento de día no
     tiene contraste contra un fondo casi negro. Y el texto que va encima del
     botón pasa a ser la tinta, no el blanco. */
  --acento:#E5A85A; --acento-2:#F0C48C; --acento-suave:#2A2119; --sobre-acento:#16171A;
  --marca:#DD8F2D; --champan:#C9A35E;
  --mal:#E28787; --mal-suave:#33201F; --ojo:#D6A458; --ojo-suave:#2E2617;
  --bien:#74BC8E; --bien-suave:#1B2D23;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px -14px rgba(0,0,0,.85);
  --gpag-bg:#103127; --gpag-bd:#2FBE8F; --gpag-tx:#8FE0C3;
  --gpar-bg:#33270F; --gpar-bd:#DD8F2D; --gpar-tx:#EFC489;
  --gdeb-bg:#331920; --gdeb-bd:#B25A6C; --gdeb-tx:#E8A9B4;
}

*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
/* Toda cifra alinea por columna aunque ya no viva en monoespaciada: es lo que
   hace que $184,300.00 y $9,200.00 sigan cuadrando uno debajo del otro. */
.num,.dato>b,tbody td,.importe{font-variant-numeric:tabular-nums}
a{color:var(--acento)}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[hidden]{display:none!important}

/* ───────── armazón ─────────
 *
 * Columna fija a la izquierda con las secciones agrupadas, y una barra superior
 * que sólo dice dónde estás y quién eres. La navegación pasó de horizontal a
 * vertical por la misma razón que ya obligó a mover Configuración: una fila de
 * pestañas aguanta cinco destinos y se rompe a los doce, y este panel va en
 * quince. En vertical caben con sus rótulos de grupo y sin abreviar nada.
 */
/* ── La banda de la demo (22-ago-2026) ──────────────────────────────────────
   Va arriba del panel y empuja, no flota: tapar la primera fila de la pantalla
   con una barra fija es cambiar «no hay salida» por «no se ve lo de arriba».
   En teléfono se apila para que los dos botones sigan siendo del tamaño de un
   pulgar. */
.banda-demo{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.6rem 1rem;background:var(--acento-suave);border-bottom:1px solid var(--linea);
  color:var(--tinta);font-size:.88rem;position:sticky;top:0;z-index:40}
.banda-demo-txt{flex:1 1 18rem;line-height:1.45;color:var(--suave)}
.banda-demo-txt b{color:var(--tinta)}
.banda-demo .btn{flex:none;text-decoration:none;display:inline-flex;align-items:center}
@media (max-width:640px){
  .banda-demo{padding:.7rem .85rem}
  .banda-demo .btn{flex:1 1 auto;justify-content:center;min-height:2.6rem}
}

/* Dos FILAS, no dos columnas (D, 3-sep-2026): la navegación arriba y la hoja
   debajo, a todo lo ancho. La columna de 15 rem se llevaba una sexta parte de
   cada pantalla para repetir siempre lo mismo. */
.app{display:flex;flex-direction:column;min-height:100vh}
/* `minmax(0,1fr)` y este `min-width:0` son la misma cura: sin ellos una columna
   de grid nunca se encoge por debajo del ancho de su contenido, y una tabla
   ancha empuja la pantalla entera hasta sacar el botón de Salir del borde. */
.main{min-width:0;display:flex;flex-direction:column}

/* La cabecera es UNA sola banda: la navegación a la izquierda y quién eres a
   la derecha. El fondo, la raya y el `sticky` viven aquí y ya no en `.side`,
   porque son de la banda entera —si se quedaran en el menú, el bloque de la
   cuenta flotaría sobre la hoja sin fondo al hacer scroll. */
.cabecera{background:var(--tarjeta);border-bottom:1px solid var(--linea);
  display:flex;align-items:center;gap:.5rem;padding:.7rem 1.15rem;
  position:sticky;top:0;z-index:30}
/* `sticky` ya crea contexto de posición, pero se declara `relative` en el
   elemento interior — la hoja del menú cuelga de aquí con `top:100%`. */
.side{display:flex;flex-direction:row;align-items:center;gap:.35rem;
  flex:1 1 auto;min-width:0;height:auto;overflow:visible}
.marca{display:flex;align-items:center;gap:.65rem;padding:0 .85rem 0 0;flex:none}
/* El sello lleva la MARCA, no el acento: es el mismo ámbar del hermano, para
   que quien salta de un producto al otro vea el mismo logo. La «M» va en blanco
   sobre el gradiente y es un glifo grande, no texto de lectura. */
.marca .sello{width:2.25rem;height:2.25rem;border-radius:11px;
  background:linear-gradient(140deg,#C67420,var(--marca));color:#FFF;
  display:grid;place-items:center;font-family:var(--sans);font-weight:800;font-size:1.15rem;flex:none}
.marca .nombre{font-weight:800;font-size:1.02rem;line-height:1.1;letter-spacing:-.02em}
.marca small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acento);font-weight:700}

.side h2{font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tenue);font-weight:700;padding:.9rem .55rem .35rem;margin:0;border:0}

/* ── El grupo como PÍLDORA con desplegable (D, 3-sep-2026) ─────────────────
   El rótulo dejó de plegar una lista en sitio: ahora abre sus destinos en un
   panel flotante. `.nav-grupo` existe SÓLO para anclarlo — el desplegable se
   posiciona contra su padre, y sin un padre posicionado se iría al borde de la
   ventana. */
.nav-grupo{position:relative;flex:none}
.side-grupo{font-family:var(--sans);font-size:.94rem;letter-spacing:-.01em;text-transform:none;
  color:var(--suave);font-weight:500;padding:0 .85rem;margin:0;border:0;background:none;border-radius:var(--r-control);
  cursor:pointer;text-align:left;width:auto;min-height:2.75rem;display:flex;align-items:center;gap:.4rem;
  white-space:nowrap;transition:background .15s,color .15s}
/* El relleno de las píldoras bajó de 1rem a .85rem cuando la cuenta subió a
   esta misma fila (3-sep): son seis piezas, y ese cuarto de rem por lado es lo
   que separa una fila que cabe de una que se pinta encima de «Salir». */
.side-grupo:hover{background:var(--hundido);color:var(--tinta)}
.side-grupo .chev{font-size:.6rem;color:var(--tenue);transition:transform .15s}
.nav-grupo.abierto>.side-grupo{background:var(--hundido);color:var(--tinta);font-weight:700}
.nav-grupo.abierto>.side-grupo .chev{transform:rotate(180deg)}
/* El grupo que CONTIENE la pantalla abierta se marca aunque esté cerrado: si
   no, la barra deja de decir dónde estás parado en cuanto se cierra el menú. */
.nav-grupo.contiene-activa>.side-grupo{color:var(--acento);font-weight:700}

.nav-desplegable{display:none;position:absolute;top:calc(100% + .5rem);left:0;min-width:16rem;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r-pieza);
  box-shadow:0 4px 8px rgba(28,27,26,.05),0 22px 48px -20px rgba(28,27,26,.34);
  padding:.5rem;flex-direction:column;gap:.1rem;z-index:40}
.nav-grupo.abierto>.nav-desplegable{display:flex}
.side h2:first-of-type{padding-top:.2rem}
.navbtn{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:none;
  border:0;border-radius:var(--r-chico);padding:.6rem .7rem;cursor:pointer;font:inherit;font-size:.92rem;
  color:var(--suave);min-height:2.6rem}
.navbtn .ic{width:1rem;text-align:center;font-size:.78rem;color:var(--tenue);flex:none}
.navbtn:hover{background:var(--hundido);color:var(--tinta)}
.navbtn[aria-current="page"]{background:var(--acento-suave);color:var(--acento);font-weight:600}
.navbtn[aria-current="page"] .ic{color:var(--acento)}
/* ── El destino con su descripción (3-sep-2026) ────────────────────────────
   Diecinueve destinos con nombre propio —«Conciliación», «Preparar para
   publicar»— obligaban a entrar para saber qué hay dentro. La descripción va
   SÓLO donde hay sitio (el desplegable y la hoja del teléfono); en la píldora
   de la barra no cabe y no se pinta. La jerarquía se lee sin color: el nombre
   en tinta y su peso, la línea de abajo un punto más chica y tenue. */
.navbtn .navbtn-txt{display:flex;flex-direction:column;gap:.08rem;min-width:0}
.navbtn.con-desc{align-items:flex-start;min-height:0;padding-top:.5rem;padding-bottom:.5rem}
.navbtn.con-desc .ic{margin-top:.15rem}
.navbtn .navbtn-desc{font-size:.74rem;line-height:1.25;color:var(--tenue);white-space:normal}
.navbtn:hover .navbtn-desc{color:var(--suave)}
/* La descripción NO se tiñe de acento en el activo: si se pintaran las dos
   líneas del color de marca, el nombre dejaría de destacar sobre su propia
   explicación y el destino activo se leería como un bloque de color. */
.navbtn[aria-current="page"] .navbtn-desc{color:var(--acento);opacity:.72}
.nav-desplegable{min-width:19rem}

.navbtn .pill{margin-left:auto;font-family:var(--sans);font-size:.62rem;background:var(--mal);
  color:var(--tarjeta);border-radius:999px;padding:0 .4rem;line-height:1.5}
.navbtn.futuro{color:var(--tenue)}
.navbtn.futuro:hover{color:var(--suave)}
.navbtn .marca-sf{margin-left:auto;font-size:.58rem}
/* El submenú de la entrada abierta. Va indentado bajo su padre y sin icono: la
   jerarquía se lee por la sangría, no por otro adorno. */
.submenu{display:flex;flex-direction:column;gap:.05rem;margin:.1rem 0 .35rem 1.55rem;
  border-left:1px solid var(--linea);padding-left:.5rem}
.subbtn{background:none;border:0;text-align:left;cursor:pointer;font:inherit;font-size:.82rem;
  color:var(--suave);padding:.28rem .4rem;border-radius:6px;display:flex;align-items:center;gap:.4rem}
.subbtn:hover{background:var(--hundido);color:var(--tinta)}
.subbtn[aria-current="page"]{color:var(--acento);font-weight:600}
.subbtn.futuro{color:var(--tenue)}
.subbtn .marca-sf{margin-left:auto;font-size:.58rem}

/* Inicio no está dentro de un desplegable: se viste como los rótulos de grupo,
   o rompería la fila con un rectángulo a lo ancho. */
.side>.navbtn{width:auto;min-height:2.75rem;padding:0 .85rem;
  border-radius:var(--r-control);font-size:.94rem;font-weight:500;white-space:nowrap}
/* El engrane de Configuración: cuadrado, sin rótulo y con el mismo marco que
   los demás controles de la fila, para que se lea como botón y no como adorno.
   Su nombre viaja en `title` y `aria-label`.
   🔑 El selector lleva `.btn.engrane` por la cascada, en dos pasos que costaron
   una vuelta cada uno: unas líneas más abajo vive
   `.cabecera .yo .btn{padding:.45rem 1rem}`, así que `.cabecera .engrane` (dos
   clases) perdía, y `.cabecera .yo .engrane` (tres) EMPATABA y perdía igual por
   ir antes en el archivo. Con el relleno de `.btn` puesto, al icono le quedaban
   4 px de los 38 y se pintaba como un punto. Medido, no supuesto — la misma
   trampa que ya costó tres vueltas en esta hoja. */
.cabecera .yo .btn.engrane{width:2.4rem;padding:0;flex:none;color:var(--suave)}
/* Las tres barras viven fuera de `.yo`, a la izquierda de la marca, y sólo
   existen cuando la fila de destinos ya no cabe (ver el tramo de 900). */
.cabecera .btn.barras{display:none;width:2.4rem;padding:0;flex:none;color:var(--suave)}
.cabecera .btn.barras svg{display:block;flex:none}
.cabecera .btn.barras:hover{color:var(--tinta)}
/* Y la medida del icono va en los ATRIBUTOS del `<svg>`, como en los demás
   iconos del panel; aquí sólo se le impide encoger dentro del flex. */
.cabecera .yo .btn.engrane svg{display:block;flex:none}
.cabecera .yo .btn.engrane:hover{color:var(--tinta)}
.cabecera .yo .btn.engrane[aria-current="page"]{background:var(--acento-suave);
  border-color:var(--acento);color:var(--acento)}

/* Con la navegación arriba, ESTA deja de ser un segundo cromo pegado al
   primero —dos barras llenas una debajo de otra— y pasa a ser el encabezado de
   la hoja: sin fondo, sin raya y sin pegarse al borde superior. */
.barra{position:static;z-index:20;background:none;border-bottom:0;
  display:flex;align-items:center;gap:.9rem;padding:1.15rem 1.5rem 0;flex-wrap:wrap;
  max-width:80rem;width:100%;margin:0 auto}
.barra .donde{font-family:var(--sans);font-weight:600;font-size:.88rem;margin:0;min-width:0;
  color:var(--tenue);letter-spacing:0}
/* El bloque de la cuenta, ya en la cabecera. `flex:none` para que no lo
   encoja el menú, y el nombre con su tope: «Visitante · Administradora Demo
   Durango» no puede empujar a Salir fuera del borde. */
/* La cuenta y el sistema NO son navegación (3-sep-2026): novedades, Preguntar,
   Configuración y Salir vivían pegados a los grupos, en la misma fila y con el
   mismo peso, y el ojo los leía como cinco destinos más. Un filo los separa —
   a la izquierda se va a algún sitio, a la derecha se hace algo. */
.cabecera .yo{margin-left:auto;display:flex;align-items:center;gap:.55rem;font-size:.82rem;
  color:var(--tenue);flex:none;white-space:nowrap;
  padding-left:.85rem;border-left:1px solid var(--linea)}
.cabecera .yo .btn{min-height:2.4rem;padding:.45rem 1rem}

/* ── Qué se suelta cuando el ancho aprieta ─────────────────────────────────
   Con la cuenta en esta misma fila, el menú y ella compiten por el ancho; y si
   no cabe, el menú se pinta ENCIMA —lleva `overflow:visible` porque sus
   desplegables lo necesitan— en vez de encogerse. Al irse el nombre y la
   organización (José: «es redundante») se liberaron ~250 px y la fila entera
   cabe CON TEXTO hasta los 900, donde ya empieza el menú deslizable de tableta.
   Así que aquí sólo queda el último escalón, medido: por debajo de 1000 el
   contador de novedades pasa a su forma corta. Comprobado de 320 a 1920 sin una
   sola superposición ni scroll horizontal, en Inicio y en una pantalla con
   «Preguntar» a la vista, que es la fila más llena. */
@media (max-width:1000px){
  .cabecera .sofia-boton .sofia-txt{display:none}
  .cabecera .novedades .largo{display:none}
  .cabecera .novedades .corto{display:inline}
}
@media (max-width:1100px){
  /* Aquí la fila de destinos deja de caber, así que deja de ser una fila: se
     esconde y se abre con las tres barras, en la MISMA hoja que ya usaba el
     teléfono. Antes llevaba `overflow-x:auto` y se DESLIZABA, escondiendo
     destinos sin decirlo —medido: a 768 px «Finanzas» quedaba fuera de la
     vista, a 660 también «Ventas»—. Un menú que esconde sin avisar es peor que
     uno que se pliega: nadie busca lo que no sabe que está.
     El umbral es 1100 y no 900 porque la fila más llena no es la de Inicio: en
     las demás pantallas está también «Preguntar», y con él un destino se salía
     ya a 1024. Se mide contra el caso peor, no contra el primero que se mira. */
  .cabecera{padding:.6rem .9rem;gap:.4rem}
  .cabecera .btn.barras{display:inline-flex}
  .side{display:none;gap:.15rem}
  /* La hoja cuelga del BORDE de la cabecera —`absolute` + `top:100%` dentro de
     ella—, no de una altura fija: con `top:3.9rem` se pintaba ENCIMA de la
     propia cabecera en cuanto algo la empujaba hacia abajo, y la banda de demo
     la empuja 130 px. Un número mágico ahí es una regresión esperando su
     caso. */
  .side.abierta{display:flex;position:absolute;left:0;right:0;top:100%;bottom:auto;
    max-height:min(76vh,36rem);overflow:auto;z-index:39;flex-direction:column;
    background:var(--tarjeta);border-bottom:1px solid var(--linea);
    box-shadow:0 18px 34px -12px rgb(0 0 0 / .22);padding:.6rem .9rem 1rem}
  .side.abierta .navbtn{width:100%;white-space:normal;padding:.6rem .7rem;
    border-radius:var(--r-chico);font-size:.92rem}
  /* Dentro de la hoja no hay desplegable que valga: los quince destinos se
     enseñan completos, agrupados y en columna. */
  .side.abierta .nav-grupo{width:100%}
  .side.abierta .side-grupo{width:100%;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--tenue);font-weight:700;min-height:0;padding:.85rem .55rem .3rem;background:none}
  .side.abierta .side-grupo .chev{display:none}
  /* La descripción se queda en ESCRITORIO y sale de la hoja del teléfono
     (José, 3-sep-2026). Medido: con ella la hoja pasaba de 1082 a 1387 px —un
     28% más— sobre una pantalla de 844, y de «Finanzas» sólo se llegaba
     scrolleando. En escritorio el panel cabe entero y la explicación se lee de
     un golpe; en el teléfono la hoja es una LISTA para llegar rápido, y ahí el
     texto de más se paga en scroll. El dato sigue en el DOM: lo lee el lector
     de pantalla y vuelve con cambiar esta línea. */
  .side.abierta .navbtn-desc{display:none}
  .side.abierta .navbtn.con-desc{align-items:center;min-height:2.6rem;
    padding-top:.6rem;padding-bottom:.6rem}
  .side.abierta .navbtn.con-desc .ic{margin-top:0}
  .side.abierta .nav-desplegable{display:flex;position:static;min-width:0;border:0;box-shadow:none;
    background:none;padding:0;border-radius:0}
  .side.abierta .submenu{flex-direction:column;margin:.1rem 0 .3rem .9rem;
    border-left:2px solid var(--linea);padding-left:.6rem}
  /* Acotado al menú: `.marca` también la usan las páginas que abre el
     propietario —la firma, su estado de cuenta, su portal— y ahí la palabra
     PROPERTY es la marca, no un adorno de la navegación. Sin el `.side`
     delante, esta regla se la borraba en cualquier teléfono. */
  .side h2, .cabecera .marca small{display:none}
  .marca{padding:0 .7rem 0 .1rem}
  .side-grupo,.side>.navbtn{padding:0 .75rem;font-size:.9rem}
  .navbtn .pill, .navbtn .marca-sf{margin-left:.35rem}
  .barra{padding:.9rem 1rem 0}
}
@media (max-width:480px){
  /* Teléfono: el cromo a una línea y la hoja con aire justo. */
  .barra{padding:.5rem .8rem;gap:.5rem}
  .barra .donde{font-size:1rem}
  .barra .yo{font-size:.74rem;gap:.4rem}
  .hoja{padding:1rem .8rem 3.5rem;gap:1.1rem}
}

/* El contador de pendientes. Rojo sólo cuando hay algo crítico: si siempre
   grita, deja de decir nada. */
.pendientes{background:var(--acento-suave);color:var(--acento);border:0;font:inherit;font-size:.8rem;
  font-weight:600;padding:.3rem .65rem;border-radius:999px;cursor:pointer;white-space:nowrap}
.pendientes:hover{filter:brightness(.95)}
/* Las novedades avisan de algo bueno; los pendientes reclaman. Comparten forma
   —las dos son "míralo cuando puedas"— y no color, para que no se confundan. */
.novedades{background:var(--hundido);color:var(--suave);border:1px solid var(--linea);font:inherit;
  font-size:.8rem;padding:.28rem .65rem;border-radius:999px;cursor:pointer;white-space:nowrap}
.novedades:hover{background:var(--tarjeta);color:var(--tinta)}

/* Severidades separadas (last-mile 19-ago): la píldora se queda neutra y sólo
   el fragmento crítico habla en rojo — pintar todo el header de emergencia
   permanente le quitaba significado al rojo. */
.pendientes .crit{color:var(--mal);font-weight:700}
.hoja{max-width:80rem;width:100%;margin:0 auto;padding:.9rem 1.5rem 4.5rem;display:flex;flex-direction:column;gap:1.9rem}

/* El título manda por PESO y tamaño, no por cambiar de familia: una sola voz
   tipográfica con 800 arriba y 400 abajo se lee como producto; dos familias
   peleándose, como plantilla. El h2 pierde la raya de abajo —separaba
   secciones a costa de rayar la pantalla entera— y se queda con el aire. */
h1{margin:0;font-family:var(--sans);font-weight:800;font-size:clamp(1.6rem,2.8vw,2.15rem);
  line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
h3,h4{margin:0;font-family:var(--sans);font-weight:700;font-size:1rem;letter-spacing:-.01em}
h2{margin:0;font-family:var(--sans);font-size:1.35rem;letter-spacing:-.025em;font-weight:800;padding-bottom:.2rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.apunte{font-family:var(--sans);font-size:.82rem;font-weight:500;color:var(--tenue);letter-spacing:0}
.nota{margin:0;color:var(--suave);font-size:.9rem;max-width:52rem}
/* Tres estados que NO son lo mismo y hasta hoy vestían igual (auditoría 13.5):
   "no hay nada" es información, "cargando" es espera y "falló" exige acción. */
.vacio{margin:0;color:var(--suave);font-style:italic}
.cargando{margin:0;color:var(--tenue);font-style:italic;animation:respira 1.6s ease-in-out infinite}
@keyframes respira{50%{opacity:.45}}
.fallo{margin:0;border-radius:8px;padding:.6rem .85rem;font-size:.89rem;
  background:var(--mal-suave);color:var(--mal);border:1px solid var(--mal)}
.fallo button{margin-left:.6rem}
/* La explicación secundaria, a demanda: la prosa didáctica que antes era
   permanente vive plegada y a un clic (progressive disclosure). */
details.ayuda{font-size:.85rem;color:var(--suave);max-width:52rem}
details.ayuda summary{cursor:pointer;color:var(--tenue);font-size:.8rem;user-select:none}
details.ayuda summary:hover{color:var(--acento)}
details.ayuda[open] summary{margin-bottom:.3rem}
section{display:flex;flex-direction:column;gap:.9rem}

/* ───────── engrane de configuración ───────── */
.engrane{background:none;border:1px solid var(--linea);color:var(--suave);font:inherit;
  font-size:.85rem;padding:.3rem .65rem;border-radius:8px;cursor:pointer;white-space:nowrap}
.engrane:hover{background:var(--hundido);color:var(--tinta)}
.engrane[aria-current="page"]{background:var(--acento-suave);color:var(--acento);
  border-color:transparent;font-weight:600}

/* ───────── configuración: navegación vertical ─────────
   Dos columnas en escritorio y una sola apilada en móvil. La lista de la
   izquierda está preparada para crecer: al pasar de ~20 opciones lo que salva
   la pantalla no es más espacio sino los encabezados de grupo y el buscador,
   que ya están puestos. */
.config{display:grid;grid-template-columns:15.5rem 1fr;gap:1.6rem;align-items:start}
/* `flex-wrap:nowrap` es obligatorio aquí: la regla de elemento `nav` de la barra
   principal trae `wrap`, y una columna que envuelve reparte las secciones en una
   segunda columna fuera de la caja en cuanto el alto está acotado. */
.config-nav{position:sticky;top:4.2rem;display:flex;flex-direction:column;flex-wrap:nowrap;
  gap:.15rem;margin-left:0;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;padding:.7rem}
.config-nav h2{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--suave);
  font-weight:600;border:0;padding:.7rem .55rem .2rem;margin:0}
.config-nav h2:first-of-type{padding-top:.2rem}
.config-nav button{background:none;border:0;color:var(--tinta);font:inherit;font-size:.88rem;
  text-align:left;padding:.42rem .55rem;border-radius:7px;cursor:pointer;display:flex;
  align-items:center;justify-content:space-between;gap:.5rem}
/* Sin esto el texto de una sección larga no envuelve y se sale de la caja del
   menú: en escritorio no se veía, con el menú apilado sí. */
.config-nav button>span:first-child{min-width:0;overflow-wrap:anywhere}
.config-nav button:hover{background:var(--hundido)}
.config-nav button[aria-current="page"]{background:var(--acento-suave);color:var(--acento);font-weight:600}
.config-nav .marca-sf{font-size:.62rem}
.config-nav input{width:100%;padding:.4rem .55rem;border:1px solid var(--linea);border-radius:8px;
  background:var(--hundido);color:var(--tinta);font:inherit;font-size:.85rem;margin-bottom:.3rem}
.config-cuerpo{display:flex;flex-direction:column;gap:1.5rem;min-width:0}
@media (max-width:860px){
  .config{grid-template-columns:1fr}
  /* Apilado, las diez secciones ocupaban la pantalla entera y el contenido
     empezaba ~700 px más abajo: entrar a Configuración obligaba a hacer scroll
     antes de leer nada. Con su propio alto, el menú sigue completo y el cuerpo
     de la sección se ve sin bajar. */
  .config-nav{position:static;max-height:38vh;overflow-y:auto;overflow-x:hidden}
}

/* ───────── filtros de listado ───────── */
.filtros{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.filtros input[type="search"]{flex:1 1 16rem;min-width:12rem}
.filtros input,.filtros select{padding:.4rem .6rem;border:1px solid var(--linea);border-radius:8px;
  background:var(--tarjeta);color:var(--tinta);font:inherit;font-size:.88rem}
/* El `width:100%` que traen los campos por defecto —correcto dentro de un
   formulario— aquí ponía cada filtro en su propio renglón a todo lo ancho: tres
   listas desplegables apiladas donde caben las tres en una línea. */
.filtros select{width:auto;flex:0 1 auto;max-width:min(22rem,100%)}
.filtros .conteo{margin-left:auto;font-family:var(--sans);font-size:.78rem;color:var(--suave);
  font-variant-numeric:tabular-nums}

/* ───────── tiras de resumen ───────── */
/* Las tiras dejan de ser UNA caja partida en rebanadas de 1 px y pasan a ser
   PIEZAS sueltas con aire entre ellas (D, 3-sep): cuatro rebanadas idénticas
   pegadas es exactamente lo que hacía que la pantalla se leyera como una
   tabla de sistema y no como un tablero. */
.tiras{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.85rem;
  background:none;border:0;border-radius:0;overflow:visible}
.dato{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r-pieza);
  box-shadow:var(--sombra);padding:1.05rem 1.15rem;display:flex;flex-direction:column;gap:.15rem;
  text-align:left;font:inherit;color:inherit;transition:box-shadow .15s,transform .15s}
button.dato{cursor:pointer}
button.dato:hover{background:var(--tarjeta);border-color:var(--linea-2);
  box-shadow:0 2px 4px rgba(28,27,26,.05),0 14px 32px -16px rgba(28,27,26,.28);transform:translateY(-1px)}
/* La tira que filtra: cuando está activa se ve elegida, no sólo distinta —
   sin esto, filtrar por un número dejaba la pantalla sin decir por cuál. */
button.dato.activa{background:var(--acento-suave);border-color:var(--acento);
  box-shadow:inset 0 0 0 1px var(--acento)}
/* La cifra en el MISMO tipo que el texto, gorda y grande: era el cambio que
   José quería ver. En mono a .73rem de rótulo se leía «salida de consola».
   HIJO DIRECTO a propósito: la cifra de un KPI siempre cuelga de `.dato`, pero
   el texto de ayuda usa `<b>` para enfatizar una palabra —«todo lo que entró
   NO es lo mismo que tu ingreso»— y con el selector descendiente esa palabra
   salía a 1.7rem en mitad de la frase. Medido en 14 pantallas: 58 cifras, las
   58 hijas directas; los 4 `<b>` anidados son énfasis de prosa. */
.dato>b{font-family:var(--sans);font-size:1.7rem;font-weight:800;letter-spacing:-.035em;
  line-height:1.12;font-variant-numeric:tabular-nums}
.dato span{font-size:.82rem;color:var(--suave);line-height:1.35}
.dato.alerta>b{color:var(--mal)} .dato.ojo>b{color:var(--ojo)} .dato.ok>b{color:var(--bien)}
/* El affordance del KPI navegable: lo clicable se NOTA sin hover (13.5). */
.dato .ir{font-size:.68rem;color:var(--acento);font-weight:600}
/* La BASE de la cifra (H-088): de dónde sale y de qué periodo habla. Va
   debajo del rótulo, en letra chica — un número sin base obliga a adivinar. */
.dato .base{font-size:.66rem;color:var(--suave);opacity:.85;line-height:1.25}
/* Una nota DENTRO de una celda (la traba del cierre, la comparación de lo
   firmado con lo vivo — H-051) explica en dos líneas y no puede ensanchar la tabla — sin tope, empujaba la columna de acciones
   fuera de la pantalla y el botón de cerrar quedaba a un scroll de distancia. */
.nota-acotada{display:block;max-width:17rem;white-space:normal}

/* ───────── Reservas · la cabecera del mes ─────────
   El mes titula su bloque de cifras: sin él, cuatro números grandes flotan sin
   decir de cuándo hablan — que es exactamente cómo «1 reserva» se leyó como el
   total del mes (José, 27-ago-2026). Sin la raya del h2 general: aquí el título
   ENCABEZA las tiras, no separa dos secciones. */
.res-mes{border-bottom:0;padding-bottom:.15rem;font-size:1.18rem;font-weight:500;display:block}
/* Lo que la pestaña enseña contra el total del mes, pegado a su tabla. */
.res-conteo{margin:.55rem 0 .35rem;font-size:.85rem}
/* El filtro temporal se ve SIEMPRE: es el eje que decide qué significan las
   cifras de abajo. */
.res-periodo{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.5rem 0}
/* La ⓘ que guarda la regla de pertenencia: se consulta cuando alguien duda, no
   estorba cada vez que se abre la pantalla. */
.ayuda-ⓘ{border:0;background:none;color:var(--tenue);cursor:help;font-size:.9em;
  padding:0 .15rem;line-height:1;vertical-align:baseline}
.ayuda-ⓘ:hover,.ayuda-ⓘ:focus{color:var(--acento)}
/* El total de fichas: contexto, no una cifra del periodo. */
.res-registrados{margin:.5rem 0 0;font-size:.86rem}
/* Lo que la ventana de tiempo deja fuera — se avisa, no se esconde. */
.res-fuera{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.55rem 0 0}
/* ───────── Disponibilidad sincronizada ─────────
   Lo que Hospitality y los canales tienen tomado NO es una venta de Property, y
   por eso NO puede vestirse como las tiras de KPI: sin caja, sin número grande y
   en tono apagado. Es contexto de disponibilidad, no operación (José,
   27-ago-2026) — si compite visualmente con las reservas, vuelve a leerse como
   si fueran ventas. */
.res-sincronizada{margin:.7rem 0 0;padding:.5rem .7rem;border-left:2px solid var(--linea-2);
  display:flex;flex-direction:column;gap:.1rem;color:var(--suave);font-size:.86rem}
.res-sinc-tit{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tenue)}
.res-sinc-val{color:var(--suave)}
.res-sinc-pie{font-size:.8rem;color:var(--tenue)}

/* ───────── tablas ───────── */
.tabla-caja{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r-pieza);background:var(--tarjeta);box-shadow:var(--sombra)}
table{border-collapse:collapse;width:100%;min-width:40rem;font-size:.88rem}
th,td{padding:.5rem .7rem;text-align:right;border-bottom:1px solid var(--linea);white-space:nowrap}
th:first-child,td:first-child{text-align:left;white-space:normal}
/* El `nowrap` de arriba es para los números: una cifra partida a la mitad no se
   lee. La prosa es al revés — si no envuelve, estira la tabla más allá de su
   caja y la columna que se pierde es justo la que dice el porqué. */
td.nota,th.nota{white-space:normal;min-width:13rem;max-width:26rem}
/* Igual que `.nota` pero sin teñir el texto de gris: es dato, no comentario.
   El importador trae huéspedes que son un renglón entero de descripción, y sin
   esto una sola fila empujaba las columnas del importe fuera de la pantalla. */
td.prosa,th.prosa{white-space:normal;max-width:22rem}
.prosa{white-space:pre-wrap}
td.prosa,th.prosa{white-space:normal}
/* Y la fecha es lo contrario de prosa: la primera columna envuelve por regla,
   así que "2026-08-10 19:46" se partía en tres renglones. */
td.fecha,th.fecha{white-space:nowrap}
th:nth-child(2),td:nth-child(2),th:nth-child(3),td:nth-child(3){text-align:left}
thead th{position:sticky;top:0;z-index:1;font-family:var(--sans);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tenue);font-weight:700;background:var(--hundido)}
tbody td{font-variant-numeric:tabular-nums}
/* El cursor de mano SOLO donde el clic hace algo: la regla global mentía en
   55 de 63 tablas (auditoría 13.5). El hover se queda como guía de lectura. */
tbody tr.clicable,tbody tr[data-id]{cursor:pointer}
tbody tr.clicable:hover td{background:var(--acento-suave)}
tbody tr.clicable:focus-within td{background:var(--acento-suave)}
tbody tr:hover td{background:var(--hundido)}
tbody tr:last-child td{border-bottom:none}
tr.apagada td{color:var(--tenue)}
.cero{color:var(--tenue)} .falta{color:var(--ojo);font-size:.85em}
.mono{font-family:var(--mono);font-size:.85em}

.pill{font-size:.74rem;font-weight:600;padding:.25em .7em;border-radius:var(--r-control);background:var(--hundido);color:var(--suave);white-space:nowrap}
.pill.administracion{background:var(--acento-suave);color:var(--acento)}
/* 🔴 H-127 · las llaves de régimen se partieron en dos el 20-ago-2026 (mig 057)
   y el CSS se quedó con la vieja: `.pill.colaboracion` no casa con
   `colaboracion_comision` ni con `colaboracion_margen`, así que los 52
   contratos de colaboración del cliente real salían con la pill gris neutra —
   la misma que «sin esquema»— en la lista de 81 casas y en el rail del
   calendario. El selector cubre las dos llaves y deja la vieja por si queda
   algún dato sin migrar. */
.pill.colaboracion,
.pill.colaboracion_comision,
.pill.colaboracion_margen{background:var(--ojo-suave);color:var(--ojo)}
.pill.propia_hospedaje,.pill.propia_renta_fija{background:var(--bien-suave);color:var(--bien)}
.sev{font-family:var(--sans);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;
  font-weight:700;padding:.25em .7em;border-radius:var(--r-control);white-space:nowrap}
.sev.critica{background:var(--mal-suave);color:var(--mal)}
.sev.alta{background:var(--ojo-suave);color:var(--ojo)}
.sev.media,.sev.baja{background:var(--hundido);color:var(--suave)}
.sev.ok{background:var(--bien-suave);color:var(--bien)}
/* Los tonos que las vistas ya pedían y no existían: por esto una reserva
   cancelada salía sin rojo (auditoría 13.5, el bug de Reservas). */
.sev.mal{background:var(--mal-suave);color:var(--mal)}
.sev.aviso{background:var(--ojo-suave);color:var(--ojo)}
.sev.bien{background:var(--bien-suave);color:var(--bien)}

/* ───────── formularios ───────── */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.9rem}
/* `overflow-wrap` por el ejemplo JSON irrompible que desbordaba la página en
   teléfono (R2 del DESPUÉS): un token largo envuelve, no empuja. */
label{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;color:var(--suave);
  min-width:0;overflow-wrap:anywhere}
.pista{font-size:.75rem;color:var(--tenue)}
input,select,textarea{font:inherit;font-size:.94rem;color:var(--tinta);background:var(--tarjeta);
  border:1px solid var(--linea-2);border-radius:var(--r-chico);padding:.62rem .85rem;width:100%;
  min-height:2.75rem}
textarea{min-height:5.5rem}
input:disabled,select:disabled,textarea:disabled{background:var(--hundido);color:var(--tenue);
  border-color:var(--linea);opacity:.78;cursor:not-allowed}
select option{background:var(--tarjeta);color:var(--tinta)}
textarea{min-height:4.5rem;resize:vertical}
label.linea{flex-direction:row;align-items:center;gap:.5rem;font-size:.9rem;color:var(--tinta)}
label.linea input{width:auto}
/* Un radio y una casilla NO son un campo de texto, y la regla de arriba los
   trataba como tal: 2.75rem de alto, relleno de caja y borde propio. La bolita
   acababa midiendo 44 px y plantándose lejos de su etiqueta —el desfase que
   José vio en Apariencia (3-sep)—. Vuelven a su tamaño, y de paso dejan el azul
   del navegador por el acento de la casa: eran el único punto azul del panel. */
input[type=radio],input[type=checkbox]{width:1.05rem;height:1.05rem;min-height:0;
  padding:0;margin:0;flex:none;border:0;accent-color:var(--acento);cursor:pointer}
/* Una opción con explicación al lado: el texto puede envolver en teléfono, así
   que la bolita se alinea con la PRIMERA línea —no con el centro del párrafo,
   que la dejaría flotando a media altura. El desplazamiento es la mitad de la
   altura de línea menos la mitad de la bolita. */
label.opcion{flex-direction:row;align-items:flex-start;gap:.6rem;padding:.35rem 0;
  font-size:.9rem;color:var(--tinta)}
label.opcion input[type=radio]{margin-top:calc((1.45em - 1.05rem) / 2)}
.acciones{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
/* El control es una PÍLDORA (D, 3-sep). Y con altura mínima de 44 px: es la
   medida del pulgar, y hasta hoy el botón medía 34 en teléfono. */
.btn{font:inherit;font-size:.92rem;font-weight:700;border-radius:var(--r-control);
  padding:.6rem 1.25rem;min-height:2.75rem;display:inline-flex;align-items:center;
  justify-content:center;gap:.45rem;cursor:pointer;
  border:1px solid var(--linea-2);background:var(--tarjeta);color:var(--tinta);
  transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:var(--hundido);border-color:var(--tenue)}
.btn.primario{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.btn.primario:hover{filter:brightness(1.08)}
.btn.primario:focus-visible{outline-color:var(--tinta)}
input:focus,select:focus,textarea:focus{border-color:var(--acento);outline:2px solid color-mix(in srgb,var(--acento) 38%,transparent);outline-offset:1px}
/* El botón chico vive DENTRO de filas y celdas: mantiene la píldora pero no
   la altura de 44 px, que ahí rompería la fila. */
.btn.chico{padding:.28rem .8rem;font-size:.8rem;min-height:0}
.btn.peligro{color:var(--mal);border-color:var(--mal-suave);background:var(--mal-suave)}
.btn:disabled{opacity:.55;cursor:not-allowed;background:var(--hundido);color:var(--tenue);border-color:var(--linea)}
/* en vuelo (H-062): el botón que espera al servidor se ve esperando */
button[aria-busy="true"],input[aria-busy="true"]{opacity:.6;cursor:progress;pointer-events:none;user-select:none;
  background-image:linear-gradient(90deg,transparent 0 40%,rgba(255,255,255,.35) 50%,transparent 60% 100%);
  background-size:200% 100%;animation:en-vuelo 1s linear infinite}
@keyframes en-vuelo{from{background-position:200% 0}to{background-position:-200% 0}}
.btn:active,.navbtn:active,.subbtn:active,button.dato:active{transform:translateY(1px)}

/* `.caja` es el contenedor que 120 usos en 19 módulos ya pedían y nunca
   existió (auditoría 13.5): la misma tarjeta con los dos nombres, para no
   tocar ni una vista. */
.tarjeta,.caja{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r-pieza);
  padding:1.35rem 1.45rem;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:.9rem}
/* La caja que destaca: llaves recién creadas, duplicados por resolver,
   simulaciones — importante sin ser un error. */
.aviso-caja{border-left:3px solid var(--ojo)}
.lista-simple{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.lista-simple li.clicable{cursor:pointer}
.lista-simple li.clicable:hover{color:var(--acento)}
.botonera{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* ───────── confirmar: el diálogo nativo ─────────
   Sustituye a los confirm()/prompt() del navegador: mismo lenguaje visual del
   producto, y lo destructivo se ve PELIGROSO antes del clic. */
dialog.dialogo{border:1px solid var(--linea);border-radius:12px;background:var(--tarjeta);
  color:var(--tinta);padding:1.2rem;max-width:min(92vw,26rem);box-shadow:var(--sombra)}
dialog.dialogo::backdrop{background:color-mix(in srgb, var(--tinta) 42%, transparent)}
dialog.dialogo h3{margin:0 0 .4rem;font-family:var(--prosa);font-weight:400;font-size:1.1rem}
dialog.dialogo p{margin:0 0 .9rem;color:var(--suave);font-size:.9rem}
dialog.dialogo .acciones{justify-content:flex-end}

/* ───────── el toast: la confirmación que SÍ se ve ─────────
   Región fija: guardar al fondo de una página larga ya no esconde el "quedó". */
/* `left:50%` deja como espacio disponible sólo la mitad derecha de la pantalla,
   así que sin un ancho propio la caja se encoge contra 50vw y el `max-width`
   de 92vw NUNCA llega a aplicar: en un móvil de 390 px un aviso largo salía en
   una columna de 195 px y 235 px de alto. `width:max-content` le da ancho
   propio —el corto sigue siendo corto— y el `max-width` ya sí lo topa. */
#toast{position:fixed;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:120;
  display:flex;flex-direction:column;gap:.4rem;align-items:center;pointer-events:none;
  width:max-content;max-width:min(92vw,32rem)}
#toast .aviso{pointer-events:auto;box-shadow:var(--sombra)}
#toast .aviso{display:flex;align-items:flex-start;gap:.65rem}
.toast-cerrar{border:0;background:none;color:inherit;font:inherit;font-size:1.15rem;
  line-height:1;cursor:pointer;padding:.05rem .15rem;margin:-.05rem -.15rem 0 0}

/* ───────── pendientes ───────── */
.pendiente{background:var(--tarjeta);border:1px solid var(--linea);border-radius:8px;padding:.6rem .85rem;
  display:flex;flex-direction:column;gap:.25rem;border-left:3px solid var(--linea)}
.pendiente.critica{border-left-color:var(--mal)}
.pendiente.alta{border-left-color:var(--ojo)}
.pendiente b{font-size:.92rem;font-weight:640}
.pendiente span{font-size:.84rem;color:var(--suave)}
.lista-pend{display:flex;flex-direction:column;gap:.5rem}

/* ───────── avisos ───────── */
.aviso{border-radius:8px;padding:.6rem .85rem;font-size:.89rem;border:1px solid transparent}
.aviso.mal{background:var(--mal-suave);color:var(--mal);border-color:var(--mal)}
.aviso.bien,.aviso.ok{background:var(--bien-suave);color:var(--bien);border-color:var(--bien)}
.aviso.ojo{background:var(--ojo-suave);color:var(--ojo)}

/* Cambios de estado con un respiro (reduced-motion ya los apaga arriba). */
.btn,.navbtn,.subbtn,button.dato,.engrane,.config-nav button,tbody tr.clicable td,
.lista-simple li.clicable,.campo-chip,.pill,.conv-item{
  transition:background-color .12s ease,color .12s ease,border-color .12s ease}

/* ───────── acceso ───────── */
.acceso{min-height:100dvh;display:grid;place-items:center;padding:1.5rem}
.acceso form{width:min(23rem,100%);display:flex;flex-direction:column;gap:.9rem}
.acceso h1{font-size:1.5rem}
.migas{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--suave);flex-wrap:wrap}
.migas button{background:none;border:0;color:var(--acento);font:inherit;font-size:.85rem;cursor:pointer;padding:0}
.cabecera-ficha{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.historial{font-size:.83rem;color:var(--suave)}
.historial li{margin-bottom:.3rem}

/* Muestra de cómo queda el dato dentro del contrato. Enseñar dónde acaba lo que
   se captura ahorra la mitad de las preguntas sobre para qué sirve el campo. */
.muestra{font-family:Georgia,"Times New Roman",serif;font-size:.95rem;line-height:1.7;
  text-align:justify;color:var(--suave)}
.muestra b{color:var(--tinta);font-weight:600}
.hueco{display:inline-block;background:var(--ojo-suave);color:var(--ojo);
  border-bottom:1px dashed currentColor;padding:0 .3em;font-family:var(--mono);font-size:.8em}
.campo{font-family:var(--mono);font-size:.85em;background:var(--acento-suave);color:var(--acento);
  padding:.05em .35em;border-radius:3px}

/* ───────── el machote ───────── */
.campos-lista{display:flex;flex-direction:column;gap:.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.3rem}
.campo-chip{font-family:var(--mono);font-size:.72rem;cursor:pointer;
  background:var(--acento-suave);color:var(--acento);border:1px solid transparent;
  border-radius:4px;padding:.2em .45em}
.campo-chip:hover{border-color:currentColor}
.clausulas-edit{display:flex;flex-direction:column;gap:.9rem}
.clausula-edit{display:flex;flex-direction:column;gap:.35rem;
  border-left:2px solid var(--linea);padding-left:.75rem}
.clausula-edit textarea{min-height:4rem}

/* ─────────────────────────── calendario ───────────────────────────
   Una rejilla de 31 columnas por unidad. Las celdas son chicas a
   propósito: lo que se lee de un vistazo no es cada día sino la FORMA
   —dónde hay huecos y dónde hay racha—, y para eso el color pesa más
   que el texto. El nombre del huésped sólo aparece el día que entra:
   repetirlo en cada noche llena la pantalla de ruido y esconde
   justamente los huecos, que es lo que se viene a buscar. */
table.calendario{border-collapse:separate;border-spacing:1px;table-layout:fixed;width:auto}
table.calendario th.unidad{
  position:sticky;left:0;z-index:2;background:var(--tarjeta);
  width:15rem;min-width:15rem;text-align:left;font-weight:600;
  padding:.35rem .6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.calendario th.dia{
  width:1.6rem;min-width:1.6rem;font-family:var(--sans);font-size:.7rem;
  color:var(--tenue);font-weight:500;padding:.2rem 0;text-align:center}
table.calendario th.dia.finde{color:var(--acento)}
table.calendario td.celda{
  width:1.6rem;height:1.75rem;border-radius:3px;background:var(--hundido);
  padding:0;position:relative;overflow:hidden}
/* El finde se tiñe apenas hacia el acento: en oscuro, --piso contra --hundido
   era un gris contra otro gris (revisión 17-ago-2026). */
table.calendario td.celda.finde{background:color-mix(in srgb, var(--acento) 8%, var(--hundido))}
/* Dimensión 2 · la reserva es una barra NEUTRA y el pago es su FRANJA inferior
   + glifo (cierre 17-ago): 30 reservas sin pagar tienen que poder verse sin
   que la pantalla sea una pared roja. El color pinta 2px, no el bloque. */
table.calendario td.celda.ocupada{
  --barra:color-mix(in srgb, var(--acento) 16%, var(--tarjeta));
  --raya:color-mix(in srgb, var(--acento) 45%, var(--tarjeta));
  background:var(--barra);color:var(--tinta);
  box-shadow:inset 0 -2px 0 var(--raya)}
/* Dimensión 1 · el ESQUEMA es identidad y vive en el rail izquierdo — la misma
   paleta de pills que la lista de Propiedades. */
table.calendario tr[data-esq="administracion"] th.unidad{box-shadow:inset 3px 0 0 var(--acento)}
table.calendario tr[data-esq^="colaboracion"] th.unidad{box-shadow:inset 3px 0 0 var(--ojo)}
table.calendario tr[data-esq="propia_hospedaje"] th.unidad,
table.calendario tr[data-esq="propia_renta_fija"] th.unidad{box-shadow:inset 3px 0 0 var(--bien)}
/* La cabecera de GRUPO por esquema: plegable, con su resumen siempre visible. */
table.calendario tr.cal-grupo th.unidad{background:var(--hundido);border-top:2px solid var(--linea-2);padding:0}
table.calendario tr.cal-grupo td.cal-grupo-td{background:var(--hundido);border-top:2px solid var(--linea-2);
  text-align:left;font-family:var(--sans);font-size:.72rem;color:var(--suave);
  padding:.42rem .6rem;border-radius:0;height:auto;width:auto;letter-spacing:.02em}
.grupo-toggle{font-family:var(--sans);font-size:.78rem;font-weight:650;color:var(--tinta);
  background:none;border:0;cursor:pointer;padding:.42rem .6rem;width:100%;text-align:left;
  letter-spacing:.04em;text-transform:uppercase}
.grupo-toggle .chev{color:var(--tenue);margin-right:.15rem}
.grupo-toggle:hover .chev{color:var(--acento)}
tr.cal-grupo[data-esq="administracion"] .grupo-toggle{color:var(--acento)}
tr.cal-grupo[data-esq^="colaboracion"] .grupo-toggle{color:var(--ojo)}
tr.cal-grupo[data-esq="propia_hospedaje"] .grupo-toggle,
tr.cal-grupo[data-esq="propia_renta_fija"] .grupo-toggle{color:var(--bien)}
/* Foco de reserva: la barra completa sube medio tono y su renglón se nombra. */
table.calendario td.celda.ocupada.res-viva{
  --barra:color-mix(in srgb, var(--acento) 30%, var(--tarjeta))}
table.calendario th.unidad.fila-viva{background:var(--hundido);color:var(--acento)}
table.calendario td.celda.bloqueada{
  background:repeating-linear-gradient(45deg,var(--ojo-suave),var(--ojo-suave) 3px,transparent 3px,transparent 6px);
  border:1px solid var(--ojo)}
table.calendario td.celda .quien{
  position:absolute;left:.2rem;top:50%;transform:translateY(-50%);
  font-size:.68rem;white-space:nowrap;pointer-events:none;z-index:1}
table.calendario td.nota-fila{
  background:var(--ojo-suave);border-radius:3px;padding:.3rem .6rem;
  font-size:.8rem;text-align:left;height:auto;width:auto}
tr.sin-unidad th.unidad{color:var(--ojo)}
.calendario-propiedad{overflow:hidden}
/* La matriz única (13.5.5): la propiedad es un renglón de grupo, no una isla. */
/* El renglón de una casa multi-unidad ya no grita: los nombres del catálogo
   vienen en MAYÚSCULAS y en serif grande un «CASA A / CASA B / CASA C» se
   comía el rail (ajuste de José, 17-ago). La jerarquía fuerte ya la dan los
   grupos por esquema; este renglón sólo agrupa a sus unidades. */
table.calendario tr.cal-prop th.unidad{background:var(--hundido);
  font-size:.76rem;font-weight:650;letter-spacing:.01em;border-top:2px solid var(--linea-2)}
table.calendario td.cal-prop-td{background:var(--hundido);text-align:left;
  font-size:.78rem;color:var(--suave);padding:.3rem .6rem;border-top:2px solid var(--linea-2);
  border-radius:0;height:auto;width:auto}
/* Acotar el alto vuelve ÚTIL el thead pegajoso: los días acompañan el scroll. */
.tabla-caja.alta{max-height:75vh;overflow-y:auto}
.tabla-caja.alta table.calendario thead th{position:sticky;top:0;z-index:3;background:var(--tarjeta)}
@media (max-width:700px){
  /* En teléfono la columna fija se come la pantalla: se encoge, y en el
     tramo más angosto deja de ser pegajosa — se recorre panorámicamente. */
  table.calendario th.unidad{width:9rem;min-width:9rem;font-size:.78rem}
}
.leyenda{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.clave-color{display:inline-block;width:.9rem;height:.9rem;border-radius:3px;
  vertical-align:-2px;margin-right:.3rem;background:var(--hundido)}
.clave-color.ocupada{background:var(--acento)}
.clave-color.bloqueada{
  background:repeating-linear-gradient(45deg,var(--ojo-suave),var(--ojo-suave) 3px,transparent 3px,transparent 6px);
  border:1px solid var(--ojo)}
.clave-color.libre{background:var(--tarjeta);border:1px solid var(--linea-2)}
/* Las muestras del RELLENO de la barra, con los MISMOS tonos que pinta el
   calendario: la leyenda tiene que enseñar el color del que habla. */
.clave-color.pago-total,.clave-color.pago-canal{background:var(--gpag-bg);border:1px solid var(--gpag-bd)}
.clave-color.pago-parcial{background:var(--gpar-bg);border:1px solid var(--gpar-bd)}
.clave-color.pago-cero{background:var(--gdeb-bg);border:1px solid var(--gdeb-bd)}
.clave-color.pago-sin_importe{background:var(--gdeb-bg);border:1px dashed var(--gdeb-bd)}
/* La leyenda dejó de ser un párrafo: cada estado lleva su palabra Y su porqué,
   porque el color solo no explica nada a quien no lo distingue. */
.leyenda-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--suave);margin:.55rem 0 .2rem;font-weight:650}
.leyenda-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.leyenda-lista li{font-size:.82rem;line-height:1.25}
.leyenda-lista .nota{margin:.1rem 0 0 1.2rem;font-size:.74rem}

/* ───────── Fase 13.6·C · el popover y el calendario que responde ───────── */
.popover{position:fixed;z-index:60;background:var(--tarjeta);border:1px solid var(--linea-2);
  border-radius:10px;box-shadow:var(--sombra),0 12px 32px rgba(0,0,0,.14);padding:.7rem .85rem;
  min-width:15rem;max-width:21rem;font-size:.85rem;display:flex;flex-direction:column;gap:.45rem}
.popover .pop-titulo{font-weight:650;display:flex;gap:.5rem;align-items:baseline;justify-content:space-between}
.popover .pop-linea{display:flex;justify-content:space-between;gap:1rem}
.popover .pop-linea span:first-child{color:var(--suave)}
.popover .pop-linea b{font-family:var(--sans);font-weight:600}
.popover .acciones{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.2rem}
.popover form{display:flex;flex-direction:column;gap:.5rem}

/* La celda responde: cursor, hover y foco — con especificidad suficiente para
 * ganarle a .ocupada/.finde (la pantalla más densa era la única inerte). */
table.calendario td.celda[data-res],
table.calendario td.celda[data-bloqueo],
table.calendario td.celda[data-libre]{cursor:pointer}
table.calendario td.celda[data-res]:hover,
table.calendario td.celda[data-bloqueo]:hover,
table.calendario td.celda[data-libre]:hover,
table.calendario td.celda:focus-visible{outline:2px solid var(--acento);outline-offset:-2px;z-index:1;position:relative}

/* La reserva se lee como BLOQUE: la entrada redondea a la izquierda, la salida
 * a la derecha — la matriz deja de parecer una tabla de píxeles sueltos. */
table.calendario td.celda.ocupada.entra{border-top-left-radius:8px;border-bottom-left-radius:8px}
table.calendario td.celda.ocupada.sale{border-top-right-radius:8px;border-bottom-right-radius:8px}

/* Hoy, señalado sin gritar — el encabezado como pastilla y la columna con
   su hilo de acento, legibles también en oscuro. */
table.calendario th.dia.hoy{color:var(--sobre-acento);background:var(--acento);border-radius:5px;font-weight:700}
table.calendario td.celda.hoy:not(.ocupada){box-shadow:inset 2px 0 0 var(--acento)}
table.calendario td.celda.hoy:not(.ocupada):not(.bloqueada){background:color-mix(in srgb, var(--acento) 12%, var(--hundido))}

/* ───────── Fase 13.6·H · Conversaciones: tres zonas cuando caben ───────── */
.conv-grid{display:grid;gap:.8rem;grid-template-columns:minmax(12rem,15rem) minmax(0,1fr) minmax(14rem,17rem);align-items:start}
.conv-lista{display:flex;flex-direction:column;gap:.3rem;max-height:78vh;overflow-y:auto}
.conv-item{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;text-align:left;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:8px;padding:.5rem .65rem;
  font:inherit;cursor:pointer;width:100%}
.conv-item:hover{border-color:var(--acento)}
.conv-item.activa{border-color:var(--acento);background:var(--acento-suave)}
.conv-contexto h2{font-size:.95rem}
.burbuja{background:var(--tarjeta);border:1px solid var(--linea);border-radius:10px;
  padding:.55rem .8rem;margin:.4rem 0;max-width:85%}
.burbuja.salida{margin-left:auto;background:var(--acento-suave);border-color:transparent}
.burbuja .nota{margin:0 0 .25rem}
.burbuja .prosa{margin:0;white-space:pre-wrap}
@media (max-width:1100px){
  .conv-grid{grid-template-columns:1fr}
  .conv-lista,.conv-contexto{display:none}   /* en angosto manda el hilo; ← Bandeja regresa */
  /* F21 — sin hilo abierto, la bandeja ES la pantalla (antes: «elige de la
   * bandeja»… con la bandeja oculta — callejón sin salida en móvil). Y con
   * hilo abierto, el contexto baja bajo el hilo en vez de desaparecer. */
  .conv-lista.sola{display:flex}
  .conv-hilo.conv-vacia{display:none}
  .conv-contexto.con-hilo{display:block}
}

/* F21 — el contexto actúa: estancias clicables con su deuda a la vista. */
.ctx-estancia{display:flex;flex-direction:column;align-items:flex-start;gap:.05rem;width:100%;
  background:var(--hundido);border:1px solid var(--linea);border-radius:8px;padding:.35rem .55rem;
  font:inherit;cursor:pointer;text-align:left;margin:.15rem 0}
.ctx-estancia:hover{border-color:var(--acento)}
.ctx-debe{color:var(--mal)}
.conv-pendiente-chip{margin:0 0 .3rem;color:var(--ojo)}
.solo-angosto{display:none}
@media (max-width:1100px){ .solo-angosto{display:inline-block;margin-bottom:.4rem} }

@media (max-width:480px){ .tiras{grid-template-columns:1fr} }

/* 13.7·C — Conversaciones: el patrón de tres zonas ES la pantalla. */
.conv-filtros{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.4rem}
.conv-nueva summary{list-style:none;text-align:center;margin-bottom:.4rem}
.conv-nueva form{display:flex;flex-direction:column;gap:.35rem;margin:.2rem 0 .5rem}
.conv-cabecera{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start;
  border-bottom:1px solid var(--linea);padding-bottom:.5rem;margin-bottom:.5rem;flex-wrap:wrap}
.conv-mensajes{display:flex;flex-direction:column;min-height:14rem;max-height:60vh;overflow-y:auto;padding:.2rem}
.conv-captura{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;align-items:end;
  border-top:1px solid var(--linea);padding-top:.6rem;margin-top:.4rem}
.conv-hilo{background:var(--tarjeta);border:1px solid var(--linea);border-radius:10px;padding:.8rem}
.conv-vacia{display:grid;place-items:center;min-height:16rem}
@media (max-width:1100px){
  .conv-lista.sola{display:flex}          /* sin hilo abierto, la bandeja manda */
  .conv-grid:has(.conv-lista.sola) .conv-hilo{display:none}
  .conv-captura{grid-template-columns:1fr}
}

/* 13.7·B (rediseño cierre 17-ago) — el pago sólo mueve la FRANJA y el glifo:
   la barra queda neutra y calmada aunque el mes entero deba dinero. */
table.calendario td.celda.ocupada.pago-total{--raya:var(--bien)}
table.calendario td.celda.ocupada.pago-parcial{--raya:var(--ojo)}
table.calendario td.celda.ocupada.pago-cero{--raya:var(--mal)}
table.calendario td.celda.ocupada.pago-total .quien b{color:var(--bien)}
table.calendario td.celda.ocupada.pago-parcial .quien b{color:var(--ojo)}
table.calendario td.celda.ocupada.pago-cero .quien b{color:var(--mal)}
/* La estancia es UNA pieza: la noche que continúa tapa el milímetro de rejilla
   con su propio color — la barra corre de check-in a check-out sin cortes. */
table.calendario td.celda.ocupada.sigue{
  box-shadow:inset 0 -2px 0 var(--raya), -2px 0 0 0 var(--barra)}
/* La entrada corta la celda: la reserva empieza a media tarde, no a medianoche. */
table.calendario td.celda.ocupada.entra:not(.sigue){border-top-left-radius:9px;border-bottom-left-radius:9px;
  background-image:linear-gradient(to right, var(--tarjeta) 0%, var(--tarjeta) 28%, transparent 28%)}
table.calendario td.celda.ocupada.sale{border-top-right-radius:9px;border-bottom-right-radius:9px}
table.calendario td.celda .quien b{font-family:var(--sans);font-weight:700;margin-right:.1rem}
/* Selección de rango a dos clics. */
table.calendario td.celda.marcada,
table.calendario td.celda.rango{outline:2px dashed var(--acento);outline-offset:-2px;background:var(--acento-suave)}

/* La tarjeta de hover del calendario (paridad Hospitality): ficha ejecutiva
   invertida sobre el tema — avatar, estado, rejilla de datos y las acciones
   que el clic de verdad ofrece, con palabras humanas. */
.tooltip-cal .tip-cab{display:flex;gap:.55rem;align-items:center}
.tooltip-cal .tip-quien{flex:1;min-width:0}
.tooltip-cal .tip-quien b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tooltip-cal .tip-avatar{flex:none;width:1.7rem;height:1.7rem;border-radius:8px;display:grid;place-items:center;
  font-family:var(--prosa);font-size:.95rem;background:color-mix(in srgb, var(--fondo) 22%, transparent)}
.tooltip-cal .tip-avatar.ok{color:var(--bien-suave)} .tooltip-cal .tip-avatar.aviso{color:var(--ojo-suave)}
.tooltip-cal .tip-avatar.mal{color:var(--mal-suave)}
.tooltip-cal .tip-sello{flex:none;font-family:var(--sans);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;
  border-radius:999px;padding:.15em .6em;background:color-mix(in srgb, var(--fondo) 22%, transparent)}
.tooltip-cal .tip-sello.ok{color:var(--bien-suave)} .tooltip-cal .tip-sello.aviso{color:var(--ojo-suave)}
.tooltip-cal .tip-sello.mal{color:var(--mal-suave)}
.tooltip-cal .tip-sub{opacity:.75;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tooltip-cal .tip-grid{display:grid;grid-template-columns:1fr 1fr;gap:.15rem 1.1rem;
  margin-top:.35rem;padding-top:.35rem;border-top:1px solid color-mix(in srgb, var(--fondo) 25%, transparent)}
.tooltip-cal .tip-dato{display:flex;justify-content:space-between;gap:.5rem;font-size:.74rem}
.tooltip-cal .tip-dato span{opacity:.65}
.tooltip-cal .tip-dato b{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums}
.tooltip-cal .tip-pie{opacity:.6;font-size:.68rem;margin-top:.3rem}
.tooltip-cal .tip-accion{font-size:.7rem;margin-top:.2rem;color:color-mix(in srgb, var(--fondo) 80%, var(--acento))}
.tooltip-cal .linea b{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums}
.tooltip-cal{position:fixed;z-index:70;pointer-events:none;background:var(--tinta);color:var(--fondo);
  border-radius:10px;padding:.6rem .8rem;font-size:.8rem;width:max-content;max-width:20rem;
  box-shadow:var(--sombra),0 14px 36px rgba(0,0,0,.22);display:flex;flex-direction:column;gap:.2rem}
.tooltip-cal b{color:inherit}
.tooltip-cal .linea{display:flex;justify-content:space-between;gap:.8rem}

.drawer-fondo{position:fixed;inset:0;z-index:80;background:color-mix(in srgb, var(--tinta) 42%, transparent);
  display:flex;justify-content:flex-end}
.drawer{width:min(30rem,100%);height:100%;background:var(--fondo);border-left:1px solid var(--linea-2);
  box-shadow:var(--sombra);padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem;
  animation:entraDrawer .18s ease}
@keyframes entraDrawer{from{transform:translateX(28px);opacity:.6}to{transform:none;opacity:1}}
/* La cabecera del drawer de Sofía no se va con el scroll: con historial largo,
   el switcher de audiencia quedaba inalcanzable (auditoría 17-ago-2026). */
.sofia-drawer-cabeza{position:sticky;top:-1rem;z-index:2;background:var(--fondo);
  margin:-1rem -1rem 0;padding:1rem 1rem .2rem;border-bottom:1px solid var(--linea)}
@media (prefers-reduced-motion:reduce){.drawer{animation:none}}
.drawer.drawer-ancho{width:min(46rem,100%)}

/* ── F22 · «Verla como se vende»: el anuncio, con la verdad puesta bonita ── */
.venta-view{display:flex;flex-direction:column;gap:1rem}
.venta-cerrar-linea{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start}
.venta-cerrar-linea .nota{margin:0;max-width:34rem}
.venta-hero{position:relative;border-radius:14px;overflow:hidden;background:var(--hundido);
  min-height:11rem;display:flex;align-items:flex-end}
.venta-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.venta-hero-texto{position:relative;padding:2.2rem 1.2rem .9rem;width:100%;
  background:linear-gradient(transparent, rgba(10,12,16,.78))}
.venta-hero-texto h2{margin:0;color:#FFF;font-size:1.5rem;letter-spacing:.01em;border:0;padding:0}
.venta-hero-texto p{margin:.15rem 0 0;color:#E8EAEE}
.venta-hero.sin-foto{background:var(--hundido);border:1px dashed var(--linea-2)}
.venta-hero.sin-foto .venta-hero-texto{background:none}
.venta-hero.sin-foto h2{color:var(--tinta)}
.venta-hero.sin-foto p,.venta-hero.sin-foto .falta{color:var(--suave)}
.venta-meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:baseline}
.venta-meta b{font-size:1.05rem}
.venta-precio{margin-left:auto}
.venta-precio b{color:var(--acento);font-size:1.15rem}
.venta-prosa{white-space:pre-wrap;line-height:1.55;max-width:60ch;margin:0}
.venta-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem}
.venta-galeria figure{margin:0;border-radius:10px;overflow:hidden;background:var(--hundido);position:relative}
.venta-galeria img{width:100%;height:7.5rem;object-fit:cover;display:block}
.venta-galeria figcaption{position:absolute;left:0;right:0;bottom:0;padding:.15rem .45rem;
  font-size:.72rem;color:#E8EAEE;background:linear-gradient(transparent, rgba(10,12,16,.7));text-transform:capitalize}
.venta-bloque h3{margin:0 0 .35rem;font-size:1rem}
.venta-bloque p{margin:0 0 .45rem}
.venta-faltas{border-top:1px dashed var(--linea-2);padding-top:.7rem}

/* ── A3 · ventas del canal por capturar ── */
.ventas-canal{border-left:3px solid var(--ojo)}
/* B1 · el registro y los primeros pasos */
.liga{background:none;border:0;padding:0;color:var(--acento);cursor:pointer;font:inherit;text-decoration:underline}
.primeros-pasos{border-left:3px solid var(--acento)}
.lista-pasos{list-style:none;margin:0;padding:0}
.lista-pasos li{display:flex;gap:.6rem;align-items:flex-start;padding:.45rem 0;border-top:1px solid var(--linea)}
.lista-pasos li:first-child{border-top:0}
.lista-pasos li.hecho{opacity:.55}
.lista-pasos li>div{flex:1;display:flex;flex-direction:column}
.paso-marca{width:1.2rem;text-align:center;flex-shrink:0}
/* B/IA · la barrita del cupo */
.barra-cupo{height:8px;border-radius:4px;background:var(--linea);overflow:hidden;max-width:420px}
/* ───────── medidores de «Plan y uso» (22-ago-2026) ─────────
   Lo que se está usando contra lo que el plan incluye. Se apoyan en la misma
   `.barra-cupo` del cupo de IA a propósito: dos medidores que significan lo
   mismo no deben verse distinto. Rejilla que cae a una columna en el teléfono,
   donde tres barras lado a lado quedan demasiado angostas para leerse. */
.medidas{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem;margin:.4rem 0 .2rem}
.medida{display:flex;flex-direction:column;gap:.35rem;padding:.7rem .8rem;
  border:1px solid var(--linea);border-radius:9px;background:var(--fondo)}
.medida>span{font-size:.8rem;color:var(--suave)}
.medida>b{font-size:1.15rem;font-weight:600;line-height:1.1}
.medida>b small{font-size:.78rem;font-weight:400;color:var(--suave)}
.medida .barra-cupo{max-width:none}
/* ───────── «Cómo pagar» (22-ago-2026) ─────────
   Un trato a la medida también necesita a dónde depositar: los datos van
   siempre, y la tarjeta sólo cuando el cobro con tarjeta se puede intentar de
   verdad. Dos columnas que caen a una en el teléfono, donde una CLABE partida
   en dos renglones deja de poder copiarse de un vistazo. */
.rejilla-cobro{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem}
.caja-interior{padding:.9rem 1rem;border:1px solid var(--linea);border-radius:10px;background:var(--fondo)}
.caja-interior h3{margin:0 0 .5rem;font-size:.95rem}
.dato-cobro{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.35rem 0;border-bottom:1px solid var(--linea)}
.dato-cobro:last-of-type{border-bottom:0}
.dato-cobro>span{font-size:.78rem;color:var(--suave)}
.dato-cobro>b{font-size:.9rem;overflow-wrap:anywhere;text-align:right}
/* Cuando un medio de pago no tiene datos, la columna NO se queda muda: lleva su
   aviso (25-ago-2026). Va dentro de la caja, con la misma respiración que
   tendrían los renglones que sustituye, y su texto envuelve —una CLABE o un
   teléfono largo no deben empujar la rejilla a scroll horizontal en el
   teléfono, que es donde se lee esta pantalla cuando urge pagar. */
.caja-interior>.aviso{margin:.2rem 0 .1rem;line-height:1.45;overflow-wrap:anywhere}
.caja-interior>.aviso b{display:block;margin-bottom:.15rem}
.caja-interior>.aviso a{color:inherit;font-weight:600;text-decoration:underline}
.caja-interior>.nota[data-cobro-falta]{margin-top:.55rem;overflow-wrap:anywhere}
/* Copiar de un toque (José, 25-ago-2026). La cuenta y la CLABE se van a teclear
   en una app bancaria: en el teléfono, seleccionar 18 dígitos a mano es
   justamente donde se equivoca la gente. El botón no le roba ancho al dato —el
   dato absorbe el espacio libre y el botón se queda del tamaño de su palabra— y
   el renglón envuelve, porque un rótulo largo como «Depósito en OXXO o Seven
   Eleven» no cabe junto a su número en una pantalla de 390 px. */
.dato-cobro{flex-wrap:wrap;row-gap:.2rem}
.dato-cobro>.valor-cobro{margin-left:auto;display:flex;align-items:baseline;gap:.5rem;
  justify-content:flex-end;min-width:0}
.dato-cobro>.valor-cobro>b{font-size:.9rem;overflow-wrap:anywhere;text-align:right}
.dato-cobro .copia{flex:0 0 auto;align-self:center}
.dato-cobro .copia[data-copiado]{background:var(--bien-suave);color:var(--bien);border-color:var(--bien)}
/* La instrucción del comprobante y el plazo son parte de la ficha, no un pie de
   página: se leen debajo de los datos que se acaban de copiar. El plazo se
   separa con una línea porque es la promesa, no una explicación más. */
.caja-interior>.nota[data-cobro]{margin-top:.55rem;overflow-wrap:anywhere;line-height:1.45}
.caja-interior>.nota[data-cobro] a{color:inherit;font-weight:600;text-decoration:underline}
.caja-interior>.nota.plazo-cobro{border-top:1px solid var(--linea);padding-top:.5rem;margin-top:.6rem}


.barra-cupo-lleno{height:100%;border-radius:4px;background:var(--acento)}
.barra-cupo-lleno.llena{background:var(--ojo)}
/* El pendiente dice de quién es */
.chip-resp{font-size:.7rem;font-weight:600;border-radius:999px;padding:1px 8px;margin-left:.4rem;
  vertical-align:middle;background:var(--linea);color:var(--suave)}
.chip-resp.matrix{background:color-mix(in srgb,var(--acento) 14%,transparent)}
.chip-resp.externo{background:color-mix(in srgb,var(--ojo) 14%,transparent)}
.horizonte-titulo{margin:.6rem 0 .1rem}
.empezar-por{border-left:3px solid var(--ok, #2e7d5b)}
.chip-boton{cursor:pointer;border:1px solid var(--linea);background:transparent;color:var(--tinta);
  font:inherit;font-size:.85rem;border-radius:999px;padding:3px 10px}
.chip-boton:hover{outline:1px solid var(--acento)}
/* A2 · las intenciones que esperan la mano humana (D1) */
.pre-reservas{border-left:3px solid var(--acento)}
.pre-reservas .venta-canal-fila.caduca{opacity:.65}
.acciones-fila{display:flex;gap:.5rem;flex-shrink:0}
.venta-canal-fila{display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding:.4rem 0;border-top:1px solid var(--linea)}
.venta-canal-fila:first-of-type{border-top:0}
@media (max-width:640px){.venta-canal-fila{flex-direction:column;align-items:flex-start}}

/* ── F23 · calendario: movimiento de hoy + ocupación por día ── */
/* Sin `border:0`: la pieza de la dirección D lleva borde, y esta regla vive
   después de `.dato` — se lo borraba a todos los KPI que además son botón. */
button.dato{font:inherit;text-align:left;cursor:pointer}
.dato-filtro:hover{outline:1px solid var(--acento);outline-offset:-1px}
.dato-filtro.activo{outline:2px solid var(--acento);outline-offset:-2px;background:var(--acento-suave)}
.cal-ocu td.ocu{background:color-mix(in srgb, var(--acento) calc(var(--o,0) * 55%), var(--tarjeta));
  font-size:.68rem;text-align:center;color:var(--suave);padding:.1rem 0;border-bottom:2px solid var(--linea-2)}
.cal-ocu td.ocu.hoy{outline:1px solid var(--acento)}
.cal-ocu .unidad{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}

/* 13.7·E — los segmentos de la ficha: una barra, cinco dominios. */
.segmentos{display:flex;gap:.25rem;border-bottom:1px solid var(--linea-2);margin:.4rem 0 .8rem;
  overflow-x:auto}
.segmento{font:inherit;font-size:.88rem;background:none;border:0;border-bottom:2px solid transparent;
  padding:.45rem .8rem;cursor:pointer;color:var(--suave);white-space:nowrap}
.segmento:hover{color:var(--tinta)}
.segmento.activa{color:var(--tinta);border-bottom-color:var(--acento);font-weight:600}

/* ═══════════ 13.8 · Premium pass ═══════════ */
/* Iconos SVG del menú: alineados al texto, un solo trazo. */
.ic{display:inline-flex;align-items:center}
.ic svg{display:block}
.navbtn{gap:.55rem}

/* KPI: la cifra manda. Números tabulares para que las columnas no bailen.
   Los tamaños los fija ahora el bloque de `.tiras` —esta regla vive DESPUÉS y
   pisaba la cifra grande de la dirección D; se queda sólo con lo que no se
   repite arriba. */
.dato>b{font-variant-numeric:tabular-nums}

/* Cargando = esqueleto que respira, no una palabra suelta. */
.esqueleto{display:flex;flex-direction:column;gap:.6rem;padding:.4rem 0}
.esqueleto i{display:block;height:1rem;border-radius:6px;background:
  linear-gradient(90deg,var(--hundido) 25%,var(--linea) 50%,var(--hundido) 75%);
  background-size:200% 100%;animation:brillo 1.2s ease-in-out infinite}
.esqueleto i:nth-child(1){width:38%}.esqueleto i:nth-child(2){width:100%;height:4.5rem}
.esqueleto i:nth-child(3){width:80%}
@keyframes brillo{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.esqueleto i{animation:none}}

/* El vacío se ve intencional: centrado, con aire. */
.vacio{text-align:center;color:var(--suave);padding:2.2rem 1rem;border:1px dashed var(--linea-2);
  border-radius:10px;background:var(--tarjeta)}

/* Tablas: encabezado más sereno, menos gritado. */
thead th{font-size:.68rem;letter-spacing:.06em;color:var(--tenue)}

/* ── Calendario 13.8: denso PERO legible ── */
table.calendario th.unidad{width:11.5rem;font-size:.8rem}
@media (max-width:700px){table.calendario th.unidad{width:8rem}}
table.calendario td.celda{width:1.95rem;min-width:1.95rem;height:2.1rem}
table.calendario td.celda.finde{background:color-mix(in srgb,var(--tinta) 5%,var(--fondo))}
/* HOY: columna teñida suave en lo libre + encabezado en píldora — sin corchetes. */
table.calendario td.celda.hoy{box-shadow:none}
table.calendario td.celda.libre.hoy{background:var(--acento-suave)}
table.calendario th.dia.hoy{background:var(--acento);color:var(--sobre-acento);border-radius:6px}
/* El nombre corre SOBRE la barra completa, como una etiqueta de reserva. */
table.calendario td.celda{position:relative}
table.calendario td.celda .quien{position:absolute;left:.25rem;top:50%;transform:translateY(-50%);
  white-space:nowrap;max-width:8.5rem;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;z-index:1;font-size:.72rem;font-weight:600}
/* El renglón de grupo: banda discreta, el % como chip a la derecha. */
table.calendario tr.cal-prop th{background:var(--hundido);font-size:.78rem}
table.calendario tr.cal-prop td.cal-prop-td{background:var(--hundido);font-size:.75rem;color:var(--suave)}

/* Cabecera visual de Hospitality, tropicalizada (revisión contra su demo,
   19-ago): tarjetas KPI con icono + versalitas + número, y la barra de
   controles del calendario en UNA fila. */
/* ══ CALENDARIO V3 — WORKSPACE (19-ago): el calendario ES el producto.
   Una sola command bar como UNA pieza; KPIs y filtros viven a un clic
   (Resumen · Buscar/Filtrar); chips sólo cuando hay filtros; alerta sólo
   cuando existe; y FULL-BLEED: la hoja suelta su max-width y el timeline
   usa el viewport de verdad. ══ */
.hoja:has(.gws){max-width:none;padding-left:1.4rem;padding-right:1.6rem}
.gws{display:flex;flex-direction:column;gap:.6rem;min-width:0}

/* La command bar: superficie ÚNICA, controles fantasma adentro, CTA sólido. */
.gcmd{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;background:var(--tarjeta);
  border:1px solid var(--linea);border-radius:12px;padding:.45rem .9rem;box-shadow:var(--sombra)}
.gcmd-titulo{font-family:var(--prosa);font-size:1.1rem;white-space:nowrap}
.gcmd-per{display:flex;align-items:center;gap:.15rem}
.gcmd-periodo{font-size:.98rem;font-variant-numeric:tabular-nums;text-align:center;
  min-width:10.5rem;white-space:nowrap}
.gcmd-ic{font:inherit;font-size:1rem;background:none;border:0;color:var(--suave);cursor:pointer;
  width:1.9rem;height:1.9rem;border-radius:8px;display:grid;place-items:center}
.gcmd-ic:hover{background:var(--hundido);color:var(--tinta)}
.gcmd-b{font:inherit;font-size:.85rem;background:none;border:0;color:var(--suave);cursor:pointer;
  padding:.4rem .6rem;border-radius:8px;white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem}
.gcmd-b:hover{background:var(--hundido);color:var(--tinta)}
.gcmd-hoy{margin-left:.15rem}
.gcmd-flex{flex:1}
.gseg{display:flex;background:var(--hundido);border-radius:9px;padding:.15rem;gap:.1rem}
.gseg-b{font:inherit;font-size:.8rem;background:none;border:0;color:var(--suave);cursor:pointer;
  padding:.3rem .7rem;border-radius:7px;white-space:nowrap}
.gseg-b:hover{color:var(--tinta)}
.gseg-b.activa{background:var(--tarjeta);color:var(--tinta);font-weight:600;box-shadow:0 1px 2px rgba(27,28,35,.12)}
.gbadge-n{font-style:normal;font-family:var(--sans);font-size:.66rem;background:var(--acento);
  color:var(--sobre-acento);border-radius:999px;padding:.05rem .38rem}

/* Chips de filtros ACTIVOS: sólo existen cuando filtras. */
.gchips{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.gchip{display:inline-flex;align-items:center;gap:.3rem;background:var(--acento-suave);
  color:var(--acento);border-radius:999px;padding:.22rem .4rem .22rem .7rem;font-size:.8rem}
.gchip button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;
  border-radius:999px;width:1.15rem;height:1.15rem;display:grid;place-items:center;line-height:1}
.gchip button:hover{background:color-mix(in srgb, var(--acento) 22%, transparent)}
.gchip-limpiar{font:inherit;font-size:.78rem;background:none;border:0;color:var(--suave);
  cursor:pointer;text-decoration:underline;padding:.2rem .3rem}

/* Alerta CONTEXTUAL: fina, sólo si existe. */
.galerta{display:flex;align-items:center;gap:.5rem;background:var(--mal-suave);
  border:1px solid color-mix(in srgb, var(--mal) 45%, var(--linea));border-radius:10px;
  padding:.3rem .7rem;font-size:.84rem;color:var(--mal)}
.galerta svg{color:var(--mal);flex:none}
.galerta .btn{margin-left:auto;flex:none}
.galerta-quien-b{font:inherit;font-size:.8rem;background:none;border:0;cursor:pointer;
  text-decoration:underline;color:color-mix(in srgb, var(--mal) 75%, var(--suave))}

/* El formulario del popover Buscar/Filtrar. */
.pop-form{display:flex;flex-direction:column;gap:.5rem;min-width:16rem}
.pop-form label{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;color:var(--suave)}
.pop-form label.linea{flex-direction:row;align-items:center;gap:.4rem;color:var(--tinta);font-size:.85rem}
.pop-form input[type=search],.pop-form select{font:inherit;font-size:.85rem;color:var(--tinta);
  background:var(--hundido);border:1px solid var(--linea);border-radius:8px;padding:.4rem .6rem}
.gnav-mes{min-width:10.5rem;text-align:center;font-size:.88rem;font-variant-numeric:tabular-nums}
.gnav .btn.chico{font-size:.7rem;padding:.35rem .55rem}
.gmesb .gtl{min-height:1.2rem;background:var(--hundido)}
.gmes-txt{position:sticky;left:15.5rem;display:inline-block;padding:.15rem .6rem;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;color:var(--tenue)}

/* ══ GCAL (TCal-2, 19-ago) — el calendario Gantt, mecánica de Hospitality ══
   Filas continuas con etiqueta pegada a la izquierda; los días son líneas de
   fondo y cada estancia es UNA barra absoluta: badge del canal + sección
   coloreada por pago. El cuarto de día vive en el JS (left/width). */
.gcal{overflow:auto;max-height:74vh;background:var(--tarjeta);border:1px solid var(--linea);
  border-radius:12px;position:relative}
.gcal-head{position:sticky;top:0;z-index:12;background:var(--tarjeta);
  border-bottom:1px solid var(--linea-2)}
.gfila{display:flex;min-width:max-content;border-bottom:1px solid var(--linea)}
.gfila:last-child{border-bottom:0}
.glabel{position:sticky;left:0;z-index:8;background:var(--tarjeta);flex:none;width:15rem;
  padding:.35rem .6rem;font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;border-right:1px solid var(--linea);display:flex;align-items:center;gap:.3rem}
.glabel-pct{margin-left:auto;font-weight:400}
.gtl{position:relative;flex:none;min-height:2.1rem}
.gstrip{flex:none;display:flex;align-items:center;gap:.6rem;padding:.3rem .6rem;
  font-family:var(--sans);font-size:.72rem;color:var(--suave);letter-spacing:.02em;background:var(--hundido)}

/* Encabezado de días + fila de ocupación. */
.gdia{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;
  gap:.25rem;font-family:var(--sans);font-size:.72rem;color:var(--tenue);
  border-right:1px solid var(--linea);padding:.3rem 0}
.gdia .gdow{font-size:.6rem;color:var(--suave);text-transform:uppercase}
.gdia.finde{color:var(--acento)}
.gdia.finde .gdow{color:var(--acento)}
.gdia.hoy{background:var(--acento);color:var(--sobre-acento);border-radius:6px 6px 0 0;font-weight:700}
.gdia.hoy .gdow{color:var(--sobre-acento)}
.gcal-head .gfila{border-bottom:0}
.gocu{border-top:1px solid var(--linea)}
.gocu .glabel{font-family:var(--sans);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.gocu .gtl{min-height:1.15rem}
.gocu-d{position:absolute;top:0;bottom:0;display:grid;place-items:center;
  font-family:var(--sans);font-size:.62rem;color:var(--suave);
  background:color-mix(in srgb, var(--acento) calc(var(--o,0) * 38%), transparent)}

/* Grupos por esquema y renglón de propiedad — misma identidad del rail. */
.ggrupo .glabel{background:var(--hundido);padding:0}
.ggrupo .gstrip{border-top:2px solid var(--linea-2)}
.ggrupo{border-top:2px solid var(--linea-2)}
.gprop .glabel{background:var(--hundido);font-size:.78rem}
.gprop .gstrip{font-size:.72rem}
.gfila[data-esq="administracion"] .glabel{box-shadow:inset 3px 0 0 var(--acento)}
.gfila[data-esq^="colaboracion"] .glabel{box-shadow:inset 3px 0 0 var(--ojo)}
.gfila[data-esq="propia_hospedaje"] .glabel,
.gfila[data-esq="propia_renta_fija"] .glabel{box-shadow:inset 3px 0 0 var(--bien)}
.ggrupo[data-esq="administracion"] .grupo-toggle{color:var(--acento)}
.ggrupo[data-esq^="colaboracion"] .grupo-toggle{color:var(--ojo)}
.ggrupo[data-esq="propia_hospedaje"] .grupo-toggle,
.ggrupo[data-esq="propia_renta_fija"] .grupo-toggle{color:var(--bien)}

/* Los días como fondo: finde teñido, hoy con hilo, lo libre invita al clic. */
.gcel{position:absolute;top:0;bottom:0;border-right:1px solid var(--linea)}
.gcel.finde{background:color-mix(in srgb, var(--acento) 7%, transparent)}
/* HOY es una COLUMNA teñida completa (paridad visual Hospitality), no un hilo. */
.gcel.hoy{background:color-mix(in srgb, var(--acento) 13%, transparent);
  box-shadow:inset 2px 0 0 var(--acento)}
.gcel[data-libre]{cursor:pointer}
.gcel[data-libre]:hover{background:color-mix(in srgb, var(--acento) 12%, transparent)}
.gcel.marcada,.gcel.rango{background:color-mix(in srgb, var(--acento) 22%, transparent);
  outline:1px dashed var(--acento);outline-offset:-1px}
.gcel:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}

/* LA BARRA — anatomía de Hospitality: badge del canal + sección de pago. */
.gbar{position:absolute;top:3px;bottom:3px;display:flex;align-items:stretch;overflow:hidden;
  cursor:pointer;z-index:5;box-shadow:0 1px 2px rgba(27,28,35,.18)}
.gbar[data-res]{cursor:grab}
.gbar:hover{filter:brightness(.96);z-index:6}
/* Fase 2 · el gesto: el borde derecho estira, el cuerpo mueve. */
.gzr{position:absolute;right:0;top:0;bottom:0;width:9px;cursor:ew-resize}
.gzr:hover{background:rgba(0,0,0,.12)}
.gbar.gdrag{opacity:.8;z-index:20;cursor:grabbing;box-shadow:0 6px 18px rgba(0,0,0,.28);transition:none}
.gbar:focus-visible{outline:2px solid var(--acento);outline-offset:1px;z-index:6}
.gbadge{flex:none;display:grid;place-items:center;height:100%}
.ginfo{flex:1;display:flex;align-items:center;gap:.3rem;padding:0 .35rem;overflow:hidden;min-width:0}
.gq{font-size:.7rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gp{font-family:var(--sans);font-size:.68rem;font-weight:700;margin-left:auto;flex:none}
.gn{font-family:var(--sans);font-size:.6rem;opacity:.7;flex:none}

/* El pago pinta la sección de la barra, no un hilo de 2px. */
.gbar.ocupada{background:var(--gdeb-bg);border:1px solid var(--gdeb-bd)}
.gbar.ocupada .gq,.gbar.ocupada .gp,.gbar.ocupada .gn{color:var(--gdeb-tx)}
.gbar.pago-total,.gbar.pago-canal{background:var(--gpag-bg);border-color:var(--gpag-bd)}
.gbar.pago-total .gq,.gbar.pago-total .gp,.gbar.pago-total .gn,
.gbar.pago-canal .gq,.gbar.pago-canal .gp,.gbar.pago-canal .gn{color:var(--gpag-tx)}
.gbar.pago-parcial{background:var(--gpar-bg);border-color:var(--gpar-bd)}
/* Cobró el propietario: verde, porque el huésped NO debe nada. Lo pendiente es
   la comisión, y ésa se le cobra al propietario, no en esta casilla. */
.gbar.pago-cobro_propietario{background:var(--gpag-bg);border-color:var(--gpag-bd)}
.gbar.pago-cobro_propietario .gq,.gbar.pago-cobro_propietario .gp,.gbar.pago-cobro_propietario .gn{color:var(--gpag-tx)}
/* No se declaró quién cobró: ámbar, el lado que dice «no sé» sin gritar deuda. */
.gbar.pago-sin_declarar{background:var(--gpar-bg);border-color:var(--gpar-bd)}
.gbar.pago-sin_declarar .gq,.gbar.pago-sin_declarar .gp,.gbar.pago-sin_declarar .gn{color:var(--gpar-tx)}
/* Cortesía y sin estancia: no hay dinero que perseguir, así que no compiten por la atención. */
.gbar.pago-cortesia,.gbar.pago-sin_estancia{background:var(--tarjeta);border-color:var(--borde)}
.gbar.pago-parcial .gq,.gbar.pago-parcial .gp,.gbar.pago-parcial .gn{color:var(--gpar-tx)}
/* Apartado/tentativa: compromiso a medias — contorno punteado ámbar. */
.gbar.tentativa{outline:1.5px dashed var(--gpar-bd);outline-offset:-1.5px}
/* Reserva SIN IMPORTE capturado: pendiente igual que «sin cobro registrado»
   —«no sé» jamás se lee como «ya está cobrado»— pero se distingue del rojo
   pleno, porque lo que hay que hacer es otro: capturar el monto, no cobrar. */
.gbar.pago-sin_importe{background:var(--gdeb-bg);border:1px dashed var(--gdeb-bd)}
.gbar.pago-sin_importe .gq,.gbar.pago-sin_importe .gp,.gbar.pago-sin_importe .gn{color:var(--gdeb-tx)}
/* Salida vencida sin check-out: la barra se encierra en rojo. */
.gbar.vencida{outline:2px solid var(--mal);outline-offset:-2px}

/* Tomado por el canal externo / espejo: rayado al tono del acento; si es una
   estancia (tipo reserva) lleva su badge y el nombre corto que viaja del
   espejo. El clic dice de dónde viene. */
.gbar.canal{background:repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--acento) 9%, var(--tarjeta)) 0 5px,
    color-mix(in srgb, var(--acento) 20%, var(--tarjeta)) 5px 8px);
  border:1px solid color-mix(in srgb, var(--acento) 45%, var(--tarjeta))}
.gbar.canal .gq{color:var(--tinta)}
.gbar.canal-reserva{background:color-mix(in srgb, var(--acento) 10%, var(--tarjeta))}
.clave-color.canal{background:repeating-linear-gradient(45deg, var(--acento-suave), var(--acento-suave) 3px, var(--acento) 3px, var(--acento) 4.5px)}

/* Bloqueo: días completos, rayado ámbar como siempre. */
.gbar.bloqueada{background:repeating-linear-gradient(45deg,var(--ojo-suave),var(--ojo-suave) 3px,transparent 3px,transparent 6px);
  border:1px solid var(--ojo);border-radius:4px}

/* Las letras de la leyenda (a/B/D/S) — versión mini de los badges reales. */
.cb{display:inline-grid;place-items:center;width:.95rem;height:.95rem;border-radius:4px;
  font-style:normal;font-weight:700;font-size:.6rem;margin-right:.18rem;
  vertical-align:-2px;color:#fff;line-height:1}
.cb.airbnb{background:#E0565B}
.cb.booking{background:#1D5FA8}
.cb.directo{background:#C9A35E}
.cb.socio{background:#7C63C4}

/* Canales como mini channel-manager: filas, chips ↓lee/↑publica, cero tablas. */
.canal-filas{display:flex;flex-direction:column}
.canal-fila{display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;padding:.5rem .2rem;
  border-top:1px solid var(--linea)}
.canal-fila:first-child{border-top:0}
.canal-fila>b{min-width:9rem}
.canal-chips{display:inline-flex;gap:.35rem;flex-wrap:wrap}
.canal-detalle{flex-basis:100%;font-size:.78rem}

/* El pendiente de la bandeja: título y acción en el mismo renglón — cinco
 * "Resolver" apilados eran monotonía, no jerarquía. */
.pendiente{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .9rem;align-items:center}
.pendiente>b{grid-column:1}
.pendiente>span{grid-column:1;font-size:.85rem;color:var(--suave)}
.pendiente>.acciones{grid-column:2;grid-row:1 / span 2;margin:0}

/* Las tres zonas llenan la pantalla: una bandeja no flota en el vacío. */
.conv-grid{min-height:74vh}
.conv-grid .conv-hilo,.conv-grid .conv-contexto{min-height:74vh}

/* 13.8 — el buscador en una línea: el campo respira, el botón lo acompaña */
.busca-linea { display: flex; gap: .6rem; align-items: flex-end; }
.busca-linea label { flex: 1; margin: 0; }
.busca-linea .btn { white-space: nowrap; }

/* 13.8 — pendientes a 375px: sin sangría heredada del ul y el botón debajo
 * del texto — a ese ancho compartir renglón aplasta al título. */
ul.lista-pend { padding-left: 0; margin: 0; list-style: none; }
@media (max-width: 480px) {
  .pendiente { grid-template-columns: 1fr; }
  .pendiente > .acciones { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .3rem; }
}

/* 13.8 — a 375px la columna de nombres SIGUE pegajosa: deslizar días sin
 * saber de qué casa son es peor que cederle 7rem. Se encoge, no se suelta. */
@media (max-width: 480px) {
  table.calendario th.unidad { width: 7rem; min-width: 7rem; max-width: 7rem;
    font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.calendario .quien { max-width: 6rem; }
}

/* F14 — la barra de perspectiva: el selector de casa vive EN la barra, con la
 * misma gramática visual que los segmentos. */
select.segmento { border: 0; border-bottom: 2px solid transparent; background: transparent;
  font: inherit; font-size: .88rem; color: var(--suave); padding: .45rem .4rem;
  cursor: pointer; max-width: 15rem; }
/* 🔴 El desplegable NATIVO no hereda el fondo transparente del control: en
 * dark mode el menú salía blanco con texto casi blanco (reporte de José,
 * 24-ago-2026). `color-scheme` le dice al navegador en qué tema pintar el
 * menú, y las opciones llevan tinta y fondo explícitos por si el navegador
 * los ignora. Vale para los dos temas: light los deja como estaban. */
select.segmento, select.segmento option { color-scheme: light dark; }
select.segmento option { color: var(--tinta); background: var(--tarjeta); }
select.segmento.activa { border-bottom-color: var(--acento); color: var(--tinta); font-weight: 600; }

/* ── F17 · Tesorería: dónde está físicamente el dinero ─────────────────────
   Tarjetas por cuenta (rejilla que apila sola en teléfono), el cuadre a dos
   lados y nada de tablas para lo que es un vistazo. Todo con variables: las
   mismas piezas sirven en claro y oscuro. */
/* min(19rem,100%): 3-4 columnas holgadas en desktop, 2 en tablet, 1 en
   teléfono — y el min NUNCA desborda un viewport de 375px. La tarjeta es
   COLUMNA: el área de texto jamás compite en el eje horizontal con saldo ni
   botón, que era lo que la colapsaba hasta partir nombres letra por letra. */
.cuentas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),1fr));gap:.8rem}
.cuenta-card{display:flex;flex-direction:column;gap:.55rem;background:var(--tarjeta);
  border:1px solid var(--linea);border-radius:10px;padding:.9rem 1rem;box-shadow:var(--sombra);
  cursor:pointer;transition:border-color .12s,transform .12s;min-width:0}
.cuenta-card:hover{border-color:var(--acento);transform:translateY(-1px)}
.cuenta-card.apagada{opacity:.55}
.cuenta-cabeza{display:flex;gap:.7rem;align-items:center;min-width:0}
.cuenta-icono{flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:9px;display:flex;
  align-items:center;justify-content:center;background:var(--acento-suave);color:var(--acento)}
.cuenta-datos{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.cuenta-datos b{font-size:.95rem;line-height:1.25;overflow-wrap:break-word}
.cuenta-tipo{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--tenue);
  font-family:var(--mono)}
.cuenta-meta{font-size:.72rem;color:var(--suave);min-width:0}
.cuenta-saldo{font-family:var(--sans);font-weight:650;font-size:1.45rem;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cuenta-saldo.mal{color:var(--mal)}
.cuenta-pie{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:auto}
.cuenta-pie .btn{flex:0 0 auto}
.cuadre{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.8rem;margin-bottom:.7rem}
.cuadre-lado{background:var(--tarjeta);border:1px solid var(--linea);border-radius:10px;
  padding:1rem 1.1rem;box-shadow:var(--sombra)}
.cuadre-lado h3{margin:0 0 .3rem;font-size:.9rem}
.cuadre-cifra{font-family:var(--sans);font-weight:600;font-size:1.5rem;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}

/* ── P3 · Sofía consulta: el input protagonista, chips y tarjetas ────────── */
.sofia-form{display:flex;gap:.5rem;align-items:stretch}
.sofia-form input{flex:1;min-width:0;font-size:.95rem;padding:.6rem .8rem}
.chip-pregunta{border:1px solid var(--linea);background:var(--tarjeta);color:var(--suave);
  border-radius:99px;padding:.3rem .8rem;font-size:.78rem;cursor:pointer;
  transition:border-color .12s,color .12s}
.chip-pregunta:hover{border-color:var(--acento);color:var(--acento)}
.sofia-tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:10px;
  padding:.9rem 1rem;margin:.55rem 0;box-shadow:var(--sombra)}
.sofia-tarjeta .prosa{margin:.35rem 0;line-height:1.5}
.sofia-tarjeta.sofia-aclara{border-left:3px solid var(--ojo)}
/* F19 · las recomendaciones: tarjetas de venta, no prosa. */
.sofia-cands{display:grid;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr));gap:.7rem;margin:.6rem 0}
.sofia-cand{background:var(--hundido);border:1px solid var(--linea);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column}
.sofia-cand img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.sofia-cand-sinfoto{aspect-ratio:16/9;display:grid;place-items:center;background:var(--piso);
  color:var(--tenue);font-size:.78rem}
.sofia-cand-cuerpo{padding:.6rem .75rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.sofia-cand h4{margin:0;font-family:var(--prosa);font-weight:400;font-size:.98rem;line-height:1.25}
.sofia-cand-meta{margin:0;font-size:.76rem;color:var(--suave)}
.sofia-cand-meta b{font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--tinta)}
.sofia-cand-razones{margin:0;padding:0;list-style:none;font-size:.76rem;color:var(--suave);
  display:flex;flex-direction:column;gap:.12rem;flex:1}
.sofia-cand-razones li::before{content:'✓ ';color:var(--bien)}
.sofia-cand .acciones{margin-top:.35rem}
.sofia-cotiza{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  background:var(--acento-suave);border:1px solid var(--acento);border-radius:10px;
  padding:.7rem .9rem;margin:.5rem 0}
.sofia-cotiza-datos{display:flex;flex-direction:column;gap:.1rem;font-size:.82rem;color:var(--suave)}
.sofia-cotiza-datos b{color:var(--tinta);font-family:var(--prosa);font-weight:400;font-size:1rem}
.sofia-cotiza-total{font-family:var(--sans);font-weight:650;font-size:1.15rem;color:var(--acento);
  font-variant-numeric:tabular-nums}
.sofia-fotos{display:flex;gap:.5rem;overflow-x:auto;margin:.5rem 0;padding-bottom:.2rem}
.sofia-fotos figure{margin:0;flex:none;width:9rem}
.sofia-fotos img{width:9rem;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block}
.sofia-fotos figcaption{font-size:.68rem;color:var(--tenue);padding-top:.15rem}

/* ───────── F20 · Preparar para vender: la bandeja de activación ─────────
   Onboarding asistido, no formulario: tarjetas con portada, estado en
   palabras, faltas como chips y un drawer que enseña SOLO lo que falta. */
.act-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:.9rem;margin-top:.9rem}
.act-tarjeta{position:relative;background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;
  overflow:hidden;box-shadow:var(--sombra);cursor:pointer;display:flex;flex-direction:column;
  transition:border-color .12s}
.act-tarjeta:hover{border-color:var(--acento)}
.act-tarjeta.act-sel{border-color:var(--acento);box-shadow:0 0 0 1px var(--acento),var(--sombra)}
.act-check{position:absolute;top:.55rem;left:.55rem;z-index:2;background:color-mix(in srgb, var(--tarjeta) 82%, transparent);
  border-radius:6px;padding:.2rem .3rem;line-height:0}
/* La portada de la tarjeta: 3/2 y recorte alto. Con 16/8 una foto vertical
   —que es la mitad de las que manda un hotel— perdía la mitad del alto y salía
   decapitada (José, 20-ago-2026: «no se ven las fotos, salen cortadas»).
   `object-position` alto porque en una foto de alojamiento lo que importa está
   arriba: la fachada, la vista, el techo de la palapa. */
.act-foto{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 35%;display:block}
.act-sinfoto{display:grid;place-items:center;background:var(--piso);color:var(--tenue);font-size:.78rem}
.act-cuerpo{padding:.7rem .85rem .8rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
/* La píldora de estado es `white-space:nowrap` y por tanto NO cede ancho. En una
   fila sin `wrap` eso comprimía el título hasta una palabra por renglón en
   cuanto el rótulo creció («En preparación» → «No lista para publicar»,
   27-ago-2026): el nombre de la casa salía en columna, letra a letra. Con
   `wrap` la píldora baja a su propio renglón antes que estrangular el título. */
.act-cab{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.act-cab h3{margin:0;font-family:var(--prosa);font-weight:400;font-size:1.02rem;line-height:1.25;
  min-width:0;flex:1 1 9rem}
.act-meta{margin:0;font-size:.76rem;color:var(--suave);display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.act-ok{margin:0;font-size:.78rem;color:var(--bien)}
.act-faltas{display:flex;flex-wrap:wrap;gap:.3rem;flex:1;align-content:flex-start}
/* Las causas concretas de la tarjeta son PROSA, no chips. Nacieron reusando
   `.act-faltas` —que es un contenedor flex de píldoras— y cada palabra se
   volvió un ítem de flex: el texto salía en una columna de una palabra de ancho
   pegada al borde (27-ago-2026). Clase propia, y renglón completo debajo de la
   píldora para que se lea como la frase que es. */
.act-causas{flex:1 0 100%;line-height:1.35}
.act-falta{font-size:.72rem;background:var(--ojo-suave);color:var(--ojo);border-radius:999px;padding:.15em .6em}
.act-masivo{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.7rem;
  background:var(--acento-suave);border:1px solid var(--acento);border-radius:10px;padding:.5rem .8rem;font-size:.85rem}
.act-masivo .nota{font-size:.74rem;margin:0}
/* El drawer de captura rápida */
.act-dr-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem}
.act-dr-cab h2{margin:0 0 .2rem;font-family:var(--prosa);font-weight:400;font-size:1.2rem}
.act-nopuede{background:var(--ojo-suave);border-radius:10px;padding:.6rem .8rem;font-size:.8rem;color:var(--ojo)}
.act-nopuede ul{margin:.25rem 0 0;padding-left:1.1rem}
.act-seccion{border-top:1px solid var(--linea);padding-top:.7rem;display:flex;flex-direction:column;gap:.5rem}
.act-seccion h3{margin:0;font-size:.95rem;font-family:var(--prosa);font-weight:400}
.act-unidad{display:flex;gap:.5rem;align-items:end;flex-wrap:wrap;background:var(--hundido);
  border-radius:9px;padding:.5rem .65rem}
.act-unidad b{flex-basis:100%;font-size:.82rem}
.act-unidad label{display:flex;flex-direction:column;font-size:.68rem;color:var(--tenue);gap:.15rem}
.act-unidad input{width:5.2rem;font-size:.85rem;padding:.3rem .4rem}
.act-unidad input[name=camas_resumen]{width:11rem}
.act-hueco,.act-hueco-l input{outline:2px solid var(--ojo);outline-offset:-1px;border-radius:6px}
.act-dos{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
#act-presenta{display:flex;flex-direction:column;gap:.5rem}
#act-presenta label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--suave)}
.act-drop{border:2px dashed var(--linea-2);border-radius:10px;padding:1rem;text-align:center;
  color:var(--tenue);font-size:.85rem;display:flex;gap:.5rem;align-items:center;justify-content:center}
.act-drop-sobre{border-color:var(--acento);background:var(--acento-suave);color:var(--acento)}
.act-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.55rem}
/* Las miniaturas de la galería se ven COMPLETAS: aquí el operador está
   revisando qué fotos tiene, y una vertical recortada al centro parece otra
   foto. `contain` sobre el piso hundido enseña la foto entera. */
.act-galeria .foto img{aspect-ratio:4/3;object-fit:contain;background:var(--hundido)}
.act-galeria select{font-size:.7rem;padding:.15rem .25rem;max-width:7rem}
.act-dr-pie{display:flex;justify-content:space-between;gap:.6rem;margin-top:auto;
  border-top:1px solid var(--linea);padding-top:.7rem}
@media (max-width:640px){.act-tarjetas{grid-template-columns:1fr}.act-dos{grid-template-columns:1fr}}
.sofia-fuentes{margin-top:.5rem}
.sofia-fuentes summary{font-size:.78rem;color:var(--tenue);cursor:pointer}
.sofia-pensando{animation:sofia-late 1.2s ease-in-out infinite}
@keyframes sofia-late{0%,100%{opacity:.45}50%{opacity:1}}
.sofia-boton{white-space:nowrap}

/* ── F18 · "Lo que se vende": el cerebro comercial de la propiedad ─────────
   La ficha comercial es lo primero que mira quien va a vender, así que abre
   con una portada grande y las respuestas de un vistazo — no con un
   formulario. Todo con las variables del sistema: las mismas piezas sirven en
   claro, en oscuro y a 375 px, donde el hero se apila solo. */
.vender{display:flex;flex-direction:column;gap:1.1rem}

.vender-hero{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) minmax(0,13rem);
  gap:1rem;background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;
  padding:1rem;box-shadow:var(--sombra)}
.hero-foto{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  background:var(--hundido);display:flex;align-items:center;justify-content:center}
.hero-foto img{width:100%;height:100%;object-fit:cover;display:block}
.hero-foto.vacia{border:1px dashed var(--linea-2);color:var(--tenue);text-align:center;
  font-size:.82rem;padding:.8rem}
.hero-foto.vacia small{color:var(--tenue);font-size:.72rem}
.hero-datos{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.hero-datos h2{margin:0;font-size:1.35rem;letter-spacing:-.01em}
.hero-linea{margin:0;color:var(--suave);font-family:var(--prosa);font-size:1rem;line-height:1.45}
.hero-tiras{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.5rem;margin-top:auto}
.hero-listas{display:flex;flex-direction:column;gap:.5rem;min-width:0}

.anillo{display:flex;gap:.6rem;align-items:center;background:var(--hundido);
  border:1px solid var(--linea);border-radius:10px;padding:.6rem .7rem}
.anillo.ok{background:var(--bien-suave);border-color:transparent}
.anillo.ojo{background:var(--ojo-suave);border-color:transparent}
.anillo-cifra{font-family:var(--sans);font-weight:700;font-size:1.25rem;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.anillo b{display:block;font-size:.82rem}
.anillo span{display:block;font-size:.7rem;color:var(--tenue)}
.falta-lista{margin:.1rem 0 0;padding-left:1.05rem;font-size:.75rem;color:var(--suave)}
.falta-lista li{margin:.1rem 0}

.bloque{background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;
  padding:1rem 1.1rem;box-shadow:var(--sombra)}
.bloque>h3,.bloque-cab h3{margin:0 0 .5rem;font-size:1rem}
.bloque-cab{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  flex-wrap:wrap;margin-bottom:.5rem}
.bloque-cab h3{margin:0}
.fuente-tarifa{font-size:.78rem;color:var(--suave)}

/* El semáforo de visibilidad: pegado al dato, jamás en una leyenda al pie. */
.vis{font-size:.66rem;padding:.1em .45em;border-radius:4px;white-space:nowrap;
  font-weight:600;letter-spacing:.01em}
.vis-publico{background:var(--bien-suave);color:var(--bien)}
.vis-huesped_confirmado{background:var(--acento-suave);color:var(--acento)}
.vis-interno{background:var(--ojo-suave);color:var(--ojo)}
.vis-nunca{background:var(--mal-suave);color:var(--mal)}
.lbl{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}

.chip{font-size:.76rem;font-weight:600;padding:.3em .8em;border-radius:var(--r-control);background:var(--hundido);
  color:var(--suave);border:1px solid var(--linea);white-space:nowrap}
.chip-ok{background:var(--bien-suave);color:var(--bien);border-color:transparent}
.chip small{opacity:.7}

.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.7rem}
.foto{margin:0;position:relative;border:1px solid var(--linea);border-radius:10px;
  overflow:hidden;background:var(--hundido);cursor:grab}
.foto.es-portada{border-color:var(--acento);box-shadow:0 0 0 1px var(--acento)}
.foto.arrastrando{opacity:.4}
.foto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.foto figcaption{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;padding:.45rem .55rem;
  font-size:.72rem;color:var(--suave)}
.foto .etq{font-weight:600;color:var(--tinta)}
.foto .tit{width:100%;color:var(--tenue);overflow-wrap:anywhere}
.foto-acciones{display:flex;gap:.3rem;padding:0 .55rem .55rem;flex-wrap:wrap}
.foto-acciones .btn{padding:.15rem .45rem;font-size:.72rem}

/* Un campo bloqueado tiene que VERSE bloqueado. `inert` apaga la interacción
   pero no pinta nada: el operador veía una caja idéntica a las demás, le movía,
   le picaba «Guardar» y no pasaba nada — o peor, pasaba y se deshacía solo
   (José, 20-ago-2026: «ya lo dice pero nada bloquea»). El candado se dibuja. */
[inert]{opacity:.6}
[inert] input,[inert] select,[inert] textarea{
  background:var(--hundido);border-style:dashed;cursor:not-allowed}
/* El candado va en la etiqueta, esté `inert` el bloque que la contiene o ella
   misma — el cupo se bloquea solo y los demás campos por bloque. */
[inert] label::after,label[inert]::after{content:" 🔒";font-size:.72rem;opacity:.7}

.heredado{background:var(--ojo-suave);color:var(--ojo);border-radius:8px;
  padding:.7rem .9rem;font-size:.82rem;line-height:1.45}

.faqs,.secciones{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.faqs li,.secciones li{background:var(--hundido);border:1px solid var(--linea);
  border-radius:9px;padding:.6rem .75rem}
.faqs p,.secciones p{margin:.25rem 0 0;color:var(--suave);font-size:.85rem;line-height:1.45}
.faq-acciones{display:flex;gap:.3rem;margin-top:.4rem;flex-wrap:wrap}
.faq-acciones .btn{padding:.15rem .5rem;font-size:.72rem}

/* Así entiende Sofía: el contexto REAL, no una simulación. Por eso se enseña
   en monoespaciada y tal cual — verlo bonito escondería lo que de verdad va. */
.sofia-ve .contexto-sofia{background:var(--hundido);border:1px solid var(--linea);
  border-radius:9px;padding:.8rem .9rem;font-family:var(--mono);font-size:.76rem;
  line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;max-height:24rem;overflow:auto;margin:.5rem 0}
.sofia-ve h4{margin:.8rem 0 .35rem;font-size:.85rem}
.retenidos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem;font-size:.8rem}
.retenidos li{display:flex;gap:.4rem;align-items:baseline;flex-wrap:wrap}

@media (max-width:820px){
  .vender-hero{grid-template-columns:1fr}
  .hero-foto{aspect-ratio:16/9}
  .hero-listas{flex-direction:row;flex-wrap:wrap}
  .hero-listas .anillo{flex:1 1 10rem}
}
@media (max-width:420px){
  .galeria{grid-template-columns:1fr 1fr}
  .hero-listas{flex-direction:column}
}

/* ───────── cierre · las casas propias, en tarjetas ─────────
   Una casa se entiende en cinco segundos: nombre limpio + resultado dominante
   arriba, la tira de cifras que sí existen, y abajo sólo la excepción con su
   botón. La tabla anterior obligaba a leer una hoja contable con scroll
   horizontal para entender una sola casa (revisión de José, 17-ago-2026). */
.casa-tarjetas{display:flex;flex-direction:column;gap:.85rem;margin-top:.9rem}
.casa-como-leer{margin:.4rem 0 0}
.casa-tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;
  box-shadow:var(--sombra);padding:1.05rem 1.3rem}
.casa-cabeza{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.casa-quien{min-width:0}
.casa-quien h3{margin:0;font-family:var(--prosa);font-weight:400;font-size:1.18rem;line-height:1.25}
.casa-meta{margin:.3rem 0 0;font-size:.79rem;color:var(--suave);line-height:1.6}
.casa-meta .sev{vertical-align:1px}
.casa-meta-suave{color:var(--tenue)}
.casa-resultado{flex:none;text-align:right;display:flex;flex-direction:column;gap:.25rem;align-items:flex-end}
.casa-resultado-cifra{font-family:var(--sans);font-size:1.5rem;font-weight:650;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.casa-resultado-cifra.mal{color:var(--mal)}
.casa-resultado-etiqueta{font-size:.66rem;color:var(--tenue);text-transform:uppercase;
  letter-spacing:.07em;display:flex;gap:.45rem;align-items:center}
.casa-cifras{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;margin:.95rem 0 0;padding:.85rem 0 0;
  border-top:1px solid var(--piso)}
.casa-cifra{display:flex;flex-direction:column;gap:.18rem}
.casa-cifra dt{font-size:.67rem;color:var(--tenue);text-transform:uppercase;letter-spacing:.07em}
.casa-cifra dd{margin:0;font-family:var(--sans);font-size:1rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--tinta)}
.casa-cifra-extra{display:block;font-size:.68rem;font-weight:400;color:var(--tenue);margin-top:.12rem}
.casa-excepciones{margin-top:.9rem;display:flex;flex-direction:column;gap:.45rem}
.casa-excepcion{margin:0;font-size:.85rem;color:var(--ojo);background:var(--ojo-suave);
  border-radius:8px;padding:.55rem .8rem;line-height:1.5}
.casa-excepcion b{font-variant-numeric:tabular-nums}
.casa-excepcion .btn{padding:.28rem .7rem;font-size:.78rem;margin-left:.55rem;vertical-align:baseline}
@media (max-width:640px){
  .casa-cabeza{flex-direction:column;gap:.55rem}
  .casa-resultado{align-items:flex-start;text-align:left}
  .casa-cifras{gap:.75rem 1.7rem}
  .casa-excepcion .btn{display:block;margin:.45rem 0 0}
}

/* ══════════ SHELL MÓVIL (premium pass 19-ago) ══════════
   En teléfono el panel deja de ser un escritorio comprimido: navegación
   ABAJO al pulgar, header con título + dos avisos compactos, y el menú
   completo como hoja que sube desde la barra. Nada de esto existe arriba
   de 640px. */
.nav-movil{display:none}
.pendientes .corto,.novedades .corto{display:none}
.solo-movil{display:none}

@media (max-width:640px){
  /* Cinturón: ningún módulo puede provocar scroll horizontal accidental.
     Los anchos internos (tablas, rejillas) se desplazan DENTRO de su caja. */
  html,body{overflow-x:clip}

  /* En TELÉFONO la hoja sube desde ABAJO, pegada a la barra del pulgar; de 641
     a 900 baja desde la cabecera (ver ese tramo). Lo demás —los quince destinos
     en columna— es común a los dos y se declara allí, no aquí. */
  .side.abierta{position:fixed;top:auto;bottom:3.55rem;max-height:min(72vh,34rem);
    border-top:1px solid var(--linea);border-bottom:0;border-right:0;
    box-shadow:0 -14px 34px rgb(0 0 0 / .22);padding:.9rem .9rem 1rem;
    border-radius:14px 14px 0 0}

  .nav-movil{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--tarjeta);border-top:1px solid var(--linea);
    padding:.3rem .4rem calc(.3rem + env(safe-area-inset-bottom));
    justify-content:space-around}
  .nav-movil button{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:.15rem;
    border:0;background:none;font:inherit;font-size:.62rem;color:var(--suave);
    padding:.3rem .2rem;cursor:pointer;border-radius:9px;min-width:0;min-height:2.75rem}
  .nav-movil button .ic{display:flex}
  .nav-movil button[aria-current="page"]{color:var(--acento);background:var(--acento-suave)}

  .hoja{padding-bottom:5.4rem}
  .dialogo,.drawer{z-index:60}

  /* Header compacto: título + número de pendientes + novedades + ✳. La cuenta
     y Salir viven en la hoja del menú —ahí sigue `cuenta-movil`, que ya los
     repite—. El selector nombra `.cabecera` desde que el bloque subió a la
     banda de navegación (3-sep): con el `.barra` de antes dejó de aplicar y
     «Salir» se salía 55 px del borde en un teléfono de 390. */
  .cabecera #salir{display:none}
  .pendientes .largo,.novedades .largo{display:none}
  .pendientes .corto,.novedades .corto{display:inline}
  .pendientes,.novedades{min-width:1.9rem;text-align:center}
  .sofia-boton .sofia-txt{display:none}
  .sofia-boton{padding:.3rem .55rem}
  .btn.chico,.foto-acciones .btn,.gchip button{min-height:2.6rem;min-width:2.6rem}
  #toast{bottom:calc(4.2rem + env(safe-area-inset-bottom))}

  .cuenta-movil{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
    margin-top:.6rem;padding:.6rem .4rem 0;border-top:1px solid var(--linea);
    font-size:.78rem;color:var(--suave)}
  .solo-movil{display:flex}
}

/* ── Calendario · agenda móvil + rejilla premium ── */
.pill.espejo{background:var(--acento-suave);color:var(--acento);font-size:.62rem}
.leyenda-caja{margin:0}
.agenda-nav{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:10px;padding:.5rem .6rem}
.agenda-fecha{display:flex;align-items:center;gap:.6rem;min-width:0}
.agenda-fecha b{font-family:var(--prosa);font-weight:600;font-size:1rem;text-transform:capitalize}
.agenda-seccion{display:flex;flex-direction:column;gap:.4rem}
.agenda-seccion h2{margin:0}
.agenda-fila{display:flex;justify-content:space-between;align-items:center;gap:.7rem;width:100%;
  text-align:left;font:inherit;background:var(--tarjeta);border:1px solid var(--linea);
  border-radius:10px;padding:.65rem .8rem;cursor:pointer;min-width:0}
.agenda-fila:active{border-color:var(--acento)}
.agenda-quien{font-weight:600;font-size:.9rem;min-width:0;overflow-wrap:break-word}
.agenda-quien b{color:var(--acento)}
.agenda-lugar{font-size:.74rem;color:var(--suave);text-align:right;min-width:0;flex:0 1 auto}
.vacio.chico{padding:.5rem .2rem;font-size:.82rem}

/* ── Reservas · pestañas del día ── */
.res-tabs{display:flex;gap:.35rem;flex-wrap:wrap;overflow-x:auto;padding-bottom:.1rem}
.res-tab{border:1px solid var(--linea);background:var(--tarjeta);color:var(--suave);font:inherit;
  font-size:.85rem;padding:.42rem .85rem;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:border-color .12s,color .12s}
.res-tab:hover{border-color:var(--acento);color:var(--acento)}
.res-tab.activa{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento);font-weight:600}
.res-tab.activa .apunte{color:var(--sobre-acento);opacity:.8}
@media (max-width:640px){ .res-tabs{flex-wrap:nowrap} }

/* ── Clave→valor de fichas: dos columnas con aire; en teléfono se APILA —
   la clave arriba y el valor a lo ancho, nunca palabras partidas. ── */
.kv{display:grid;grid-template-columns:minmax(8.5rem,max-content) minmax(0,1fr);
  gap:.5rem 1rem;align-items:baseline}
.kv-k{color:var(--tenue)}
.kv-v{overflow-wrap:break-word;min-width:0}
@media (max-width:640px){
  .kv{grid-template-columns:1fr;gap:.15rem}
  .kv-k{margin-top:.55rem;font-size:.74rem;letter-spacing:.03em;text-transform:uppercase}
  .kv-k:first-child{margin-top:0}
}

/* ── Catálogo · conmutador Tarjetas|Lista ── */
.modo-vista{display:flex;gap:0;border:1px solid var(--linea);border-radius:9px;overflow:hidden}
.modo-vista .btn{border:0;border-radius:0;background:var(--tarjeta)}
.modo-vista .btn.activa{background:var(--acento);color:var(--sobre-acento)}
.canal-gobierno{margin:.2rem 0 .5rem;color:var(--suave)}

/* ── Ficha · hero con la portada ── */
.ficha-hero{position:relative;border-radius:14px;overflow:hidden;min-height:13rem;display:flex;
  align-items:flex-end;box-shadow:var(--sombra)}
.ficha-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ficha-hero-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,9,.05) 30%,rgba(10,8,9,.72))}
.ficha-hero-texto{position:relative;padding:1.1rem 1.3rem;color:#fff;min-width:0}
.ficha-hero-texto h1{margin:.25rem 0 .1rem;color:#fff}
.ficha-hero-texto p{margin:0;font-size:.88rem;opacity:.92}
.ficha-hero-chips{display:flex;gap:.4rem;flex-wrap:wrap}
.ficha-hero-cta{position:absolute;right:1rem;top:1rem;text-decoration:none;
  background:var(--acento);border-color:var(--acento);color:var(--sobre-acento);box-shadow:var(--sombra)}
.ficha-hero-cta:hover{background:var(--acento-2);border-color:var(--acento-2);color:var(--sobre-acento);filter:none}
@media (max-width:640px){.ficha-hero{min-height:10rem}.ficha-hero-cta{position:static;margin:.6rem 1.3rem 1rem;align-self:flex-start}}
.conv-conectar{display:flex;flex-direction:column;gap:.4rem;align-items:center;justify-content:center;
  text-align:center;padding:2.2rem 1.4rem;margin:auto;max-width:26rem}
.conv-conectar h2{margin:0}

/* ── Resumen · la cascada del mes ── */
.cascada{display:flex;flex-direction:column;gap:.45rem;margin-top:.8rem}
.cascada-fila{display:grid;grid-template-columns:9rem minmax(0,1fr) auto;gap:.7rem;align-items:center;
  font-size:.85rem;color:var(--suave)}
.cascada-fila b{font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--tinta);white-space:nowrap}
.cascada-barra{height:1.05rem;border-radius:5px;min-width:2px}
.cascada-barra.ok{background:color-mix(in srgb,var(--bien) 55%,var(--tarjeta))}
.cascada-barra.gasto{background:color-mix(in srgb,var(--mal) 42%,var(--tarjeta))}
@media (max-width:640px){.cascada-fila{grid-template-columns:6.5rem minmax(0,1fr) auto}}

/* ── Cierre · el camino en pasos ── */
.pasos-cierre{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-top:.4rem}
.paso-cierre{display:flex;align-items:center;gap:.4rem;border:1px solid var(--linea);
  background:var(--tarjeta);font:inherit;font-size:.82rem;color:var(--suave);
  border-radius:999px;padding:.32rem .75rem .32rem .4rem;cursor:pointer}
.paso-cierre .paso-num{width:1.35rem;height:1.35rem;border-radius:50%;display:grid;place-items:center;
  background:var(--hundido);font-size:.72rem;font-weight:700}
.paso-cierre.hecho{color:var(--bien);border-color:color-mix(in srgb,var(--bien) 40%,var(--linea))}
.paso-cierre.hecho .paso-num{background:color-mix(in srgb,var(--bien) 18%,transparent);color:var(--bien)}
.paso-cierre:not(.hecho){color:var(--tinta);border-color:color-mix(in srgb,var(--mal) 35%,var(--linea))}
.paso-linea{width:1rem;height:1px;background:var(--linea);flex:0 0 auto}
@media (max-width:640px){.paso-linea{display:none}}

/* ── Conciliación · el éxito protagonista ── */
.concilia-hero{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.concilia-cifra{font-family:var(--sans);font-weight:700;font-size:2.3rem;letter-spacing:-.03em;
  color:var(--bien);line-height:1;display:flex;flex-direction:column}
.concilia-cifra span{font-family:var(--prosa);font-weight:400;font-size:.8rem;color:var(--suave);letter-spacing:0}
.concilia-detalle{flex:1;min-width:14rem}
.concilia-barra{height:.55rem;border-radius:99px;background:var(--hundido);overflow:hidden;margin-bottom:.35rem}
.concilia-barra div{height:100%;border-radius:99px;background:var(--bien)}

/* ───────── el calendario de temporadas ─────────
   José, capturando su primer loft: «¿dónde selecciono cuál aplicar?». No se
   selecciona: se VE. Cada día del color de la temporada que manda esa noche,
   con la misma regla que cobra. Un calendario que decide distinto que el motor
   enseña un precio y cobra otro — por eso la resolución vive en UNA función
   (`temporadaDelDia`) y no se reescribe aquí. */
.punto-temporada{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;
  margin-right:.35rem;vertical-align:middle;border:1px solid rgba(0,0,0,.15)}
.punto-temporada.sin{background:var(--tarjeta);border-style:dashed}
.cal-caja{margin:.6rem 0 1rem}
.cal-leyenda{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-bottom:.55rem}
.cal-chip{font-size:.8rem;color:var(--suave);white-space:nowrap}
/* Los meses caben de lado en pantalla ancha y se apilan solos en el teléfono:
   el ancho lo decide el contenedor, no un punto de corte inventado. */
.cal-meses{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.cal-mes{min-width:0}
.cal-titulo{font-size:.85rem;font-weight:640;margin-bottom:.3rem;text-transform:capitalize}
/* `1fr` es `minmax(auto,1fr)`, y ese `auto` es el min-content del día: con
   `aspect-ratio:1` la celda reclama más de un séptimo y la rejilla se SALE del
   diálogo (mide 30rem: la última columna quedaba cortada). `minmax(0,1fr)` deja
   que las siete se repartan de verdad el ancho que haya. */
.cal-rejilla{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.cal-cab{font-size:.7rem;color:var(--suave);text-align:center;padding:.15rem 0}
.cal-dia{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:.72rem;border-radius:4px;background:var(--tarjeta);border:1px solid var(--linea);
  color:#111;line-height:1}
.cal-dia.vacio{background:none;border-color:transparent}
.cal-dia.sin-temporada{color:var(--suave)}
/* Un día cubierto por una temporada SIN precio no se pinta como resuelto: esas
   noches no se pueden cotizar, y darles su color diría que ya están listas. */
.cal-dia.mudo{background:repeating-linear-gradient(45deg,var(--tarjeta),var(--tarjeta) 3px,
  var(--mal) 3px,var(--mal) 5px);color:var(--suave)}


/* Los tramos de tarifa, como lista y no como tabla: viven en el diálogo lateral
   (30rem) y sus dos botones son la ÚNICA salida de una temporada mal capturada.
   En tabla se salían del área visible: visibles e impulsables. */
.tramos{list-style:none;margin:.4rem 0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.tramo{border:1px solid var(--linea);border-radius:9px;background:var(--tarjeta);
  padding:.55rem .7rem;box-shadow:var(--sombra)}
.tramo-cab{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.tramo-nombre{font-weight:640}
.tramo-precio{font-variant-numeric:tabular-nums;white-space:nowrap}
.tramo-datos{display:flex;flex-wrap:wrap;gap:.2rem .7rem;font-size:.82rem;color:var(--suave);
  margin-top:.15rem}
.tramo-acciones{display:flex;gap:.4rem;margin-top:.5rem}

/* ───────── elegir la temporada y pintar sus fechas ─────────
   La interacción del producto hermano: se elige la temporada, clic en el día
   de inicio y clic en el de fin. No se teclea una sola fecha — que es de donde
   salían los rangos al revés y los meses imposibles. */
.temp-elige{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.temp-chip{display:inline-flex;align-items:center;gap:.1rem;border:1px solid var(--linea);
  background:var(--tarjeta);border-radius:999px;padding:.3rem .7rem;font:inherit;font-size:.85rem;
  cursor:pointer;color:inherit}
.temp-chip.activa{border-color:var(--acento);box-shadow:0 0 0 2px color-mix(in srgb,var(--acento) 28%,transparent)}
.temp-seleccion{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem .8rem;margin:.5rem 0 .8rem}
.linea-min{display:flex;flex-direction:column;gap:.15rem;font-size:.8rem;color:var(--suave)}
.linea-min select,.linea-min input{width:auto;min-width:7rem}
/* El día es un botón: tiene que pulsarse y tiene que verse que se puede. */
button.cal-dia{font:inherit;font-size:.72rem;cursor:pointer}
button.cal-dia:hover{outline:2px solid var(--acento);outline-offset:-2px}
.cal-dia.elegido{outline:2px solid var(--acento);outline-offset:-2px;font-weight:700}
/* Las unidades no coinciden ese día: NO se pinta el color de la mayoría. Un
   calendario que promedia enseña un precio y cobra otro. */
.cal-dia.mixto{background:var(--tarjeta);border-style:dashed;border-color:var(--ojo);font-weight:700}

/* Los días de la semana de una temporada: los siete vienen marcados, que es
   como se comportaba antes de la mig 128. Desmarcar es lo que abre «los
   viernes y sábados valen más» sin partir el año en tramos de dos días. */
.dias-semana{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.lbl-dias{font-size:.8rem;color:var(--suave);margin-right:.2rem}
.dia-chip{width:1.9rem;height:1.9rem;border:1px solid var(--linea);background:var(--tarjeta);
  border-radius:6px;font:inherit;font-size:.78rem;cursor:pointer;color:var(--suave);padding:0}
.dia-chip.activo{background:var(--acento);border-color:var(--acento);color:#fff;font-weight:640}
.solo-dias{color:var(--ojo);font-weight:600}


/* `enlace-inline` se usaba en seis sitios SIN una sola regla: un botón dentro
   de una frase salía con el aspecto de botón del navegador, cortando la lectura
   justo donde tenía que fluir. Es la lección de que una clase se reusa por su
   REGLA y no por su nombre — aquí ni siquiera había regla que reusar. */
.enlace-inline{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--acento);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.enlace-inline:hover{text-decoration-thickness:2px}

/* La tabla de unidades: cuatro columnas y lo que cuelga de cada dato como
   segunda línea de su propia celda. Con siete columnas no cabía en el panel y
   aparecía una barra de scroll horizontal — «se ve amontonado y una barra para
   alargar no es estético» (José, 1-sep-2026). */
.tabla-caja.sin-barra{overflow-x:visible}
table.unidades{min-width:0}
table.unidades td{vertical-align:top;white-space:normal}
table.unidades td .sub{display:block;font-size:.8rem;color:var(--suave);margin-top:.15rem;
  font-weight:400;line-height:1.3}
table.unidades td:first-child{min-width:9rem}
/* Una sola acción y en grande: «Tarifas» y «Temporadas» viven en su paso. */
.acciones-unidad{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:flex-end}
.acciones-unidad .btn{white-space:nowrap}

/* En un teléfono, cuatro columnas siguen sin caber: la tabla se convierte en
   fichas apiladas. Es la misma lección del diálogo lateral —una tabla dentro de
   una caja angosta es el elemento equivocado— y evita la barra horizontal que
   José señaló. Los rótulos vienen de `data-col`, no de repetir el `<thead>`. */
@media (max-width: 640px) {
  table.unidades thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.unidades, table.unidades tbody, table.unidades tr, table.unidades td{display:block;width:auto}
  table.unidades tr{border-bottom:1px solid var(--linea);padding:.6rem .2rem}
  table.unidades tr:last-child{border-bottom:0}
  table.unidades td{border:0;padding:.15rem .5rem;text-align:left}
  table.unidades td[data-col]::before{content:attr(data-col);display:block;font-size:.7rem;
    letter-spacing:.04em;text-transform:uppercase;color:var(--suave);margin-bottom:.05rem}
  table.unidades td.acciones-unidad{justify-content:flex-start;margin-top:.45rem}
  table.unidades td.acciones-unidad .btn{width:100%}
}
.web-cartera{display:grid;gap:1rem;margin-top:1rem}
.web-sitio{display:grid;gap:.8rem}
.web-sitio-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.web-sitio-cab h2{margin:0}
.web-avance{height:8px;background:var(--hundido);border-radius:999px;overflow:hidden}
.web-avance span{display:block;height:100%;background:var(--exito);border-radius:inherit}
.web-faltantes{padding:.75rem .9rem;background:var(--hundido);border-radius:8px;font-size:.88rem}
.web-faltantes ul{margin:.45rem 0 0;padding-left:1.2rem;color:var(--suave)}
@media(min-width:1100px){.web-cartera{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 2-sep-2026 · los botones de la última celda se acomodan en varias líneas
   antes que salirse de la tabla: en Propietarios quedaban cortados a 1440px
   y en la tabla de pagos de la reserva también. */
.tabla-caja td:last-child{white-space:normal}
.tabla-caja td .btn{margin:.12rem 0 .12rem .25rem}