/* ---------- Layout ---------- */
/* Computadora: solo el menú lateral azul noche (sin barra arriba). Celular: barra de 52 px
   con el botón del menú, el menú se desliza desde la izquierda y Registrar pago flota abajo. */
.app {
  display: grid;
  grid-template-columns: var(--ancho-menu) minmax(0, 1fr);
  grid-template-areas: "menu contenido";
  min-height: 100vh;
}

.marca-logo { height: 26px; width: auto; display: block; }
/* Logo de la empresa: tal cual, con su transparencia, sobre el azul noche. Solo un logo
   transparente y oscuro (que no se leería) se muestra en blanco (marca.js, tonoDelLogo). */
.marca-logo--empresa {
  height: 40px; max-width: 100%; object-fit: contain; object-position: left center;
  border-radius: var(--radio-chico);
}
.marca-logo--blanco { filter: brightness(0) invert(1); }

.menu {
  grid-area: menu;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 12px 12px;
  background: var(--menu-fondo); color: var(--menu-texto);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 18%) transparent;
}
.menu__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu__marca { display: flex; align-items: center; min-width: 0; min-height: 40px; padding: 0 6px; color: inherit; text-decoration: none; }
.menu__cerrar {
  display: none; place-items: center; flex: none; width: 44px; height: 44px; margin: -2px -4px -2px 0;
  border: 0; border-radius: var(--radio); background: none; color: inherit; font-size: 1.2rem; cursor: pointer;
  transition: background-color .16s ease, transform .12s var(--salida);
}
.menu__cerrar:hover, .menu__cerrar:active { background: var(--menu-hover); }
.menu__cerrar:active { transform: scale(.94); }
.menu__cerrar:focus-visible { outline-color: #fff; }
.menu__registrar {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--marca-pago-fondo); color: var(--marca-pago-texto); border: 0; border-radius: var(--radio);
  padding: 10px 12px; font-weight: 700; cursor: pointer; text-align: left;
  transition: transform .12s var(--salida), background-color .16s ease;
}
.menu__registrar:hover { background: var(--marca-pago-hover); }
.menu__registrar:active { transform: scale(.97); }
.menu__registrar:focus-visible { outline-color: #fff; }
.menu__atajo {
  margin-left: auto; font: inherit; font-size: .72rem; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 4px; background: color-mix(in srgb, currentColor 18%, transparent);
}
.menu__enlaces { display: grid; gap: 2px; }
.menu__enlace {
  position: relative; display: flex; align-items: center; gap: 11px;
  min-height: 36px; padding: 7px 10px; border-radius: var(--radio-chico);
  color: var(--menu-texto-suave); text-decoration: none; font-weight: 500;
  transition: background-color .12s ease, color .12s ease;
}
.menu__enlace:hover { background: var(--menu-hover); color: var(--menu-texto); }
.menu__enlace:focus-visible { outline-color: #fff; outline-offset: -2px; }
.menu__enlace--activo, .menu__enlace--activo:hover { background: var(--menu-activo); color: #fff; font-weight: 700; }
/* La raya del menú activo lleva el color de la empresa. */
.menu__enlace--activo::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--marca-acento);
}
.menu__icono { width: 17px; font-size: .95rem; opacity: .85; }
.menu__enlace--activo .menu__icono { opacity: 1; }

.menu__pie { margin-top: auto; display: grid; gap: 10px; padding-top: 10px; }
.menu__usuario { position: relative; }
.menu__cuenta {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--radio); padding: 7px 8px; cursor: pointer; color: inherit;
  transition: background-color .12s ease;
}
.menu__cuenta:hover, .menu__cuenta[aria-expanded="true"] { background: var(--menu-hover); }
.menu__cuenta:focus-visible { outline-color: #fff; }
.menu__avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(255 255 255 / 14%); color: #fff; font-size: .76rem; font-weight: 700;
}
.menu__usuario-nombre { min-width: 0; flex: 1; font-size: .88rem; font-weight: 700; color: #fff; line-height: 1.25; overflow-wrap: anywhere; }
.menu__usuario-rol { display: block; font-size: .74rem; font-weight: 500; color: var(--menu-texto-suave); }
.menu__flecha { font-size: .7rem; color: var(--menu-texto-suave); transition: transform .16s var(--salida); }
.menu__cuenta[aria-expanded="true"] .menu__flecha { transform: rotate(180deg); }
/* El menú de la cuenta se abre hacia arriba, desde el nombre. */
.menu-cuenta {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20;
  background: var(--color-superficie); color: var(--color-texto);
  border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra-flotante);
  padding: 6px; transform-origin: bottom center;
  animation: aparecer-menu .16s var(--salida);
}
@keyframes aparecer-menu { from { opacity: 0; transform: translateY(4px) scale(.97); } }
.menu-cuenta__opcion {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; border-radius: var(--radio-chico); padding: 8px 10px;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.menu-cuenta__opcion:hover { background: var(--color-neutro-suave); }
.menu-cuenta__opcion--salir { color: var(--color-peligro); }
/* Sello de sumar al pie del menú: siempre a la vista, con o sin marca de la empresa. */
.menu__sello { display: flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; font-size: .7rem; color: var(--menu-texto-suave); text-decoration: none; transition: color .15s ease; }
.menu__sello:hover { color: var(--menu-texto); }
.menu__sello:hover .menu__sello-logo { opacity: 1; }
.menu__sello-logo { height: 13px; width: auto; opacity: .85; transition: opacity .15s ease; }

.barra-movil, .velo { display: none; }

.contenido { grid-area: contenido; padding: 28px 32px 40px; min-width: 0; outline: none; }
/* Al cambiar de pantalla (app.js). Parte de un estado visible: si la animación no corre, se ve igual. */
.contenido--entra > * { animation: contenido-entra .2s var(--salida) both; }
.contenido--entra > :nth-child(2) { animation-delay: 25ms; }
.contenido--entra > :nth-child(n+3) { animation-delay: 50ms; }
@keyframes contenido-entra { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 800px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--alto-barra) 1fr; grid-template-areas: "barra" "contenido"; }
  .barra-movil {
    grid-area: barra; position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 8px; padding: 0 8px;
    background: var(--menu-fondo); color: var(--menu-texto);
  }
  .barra-movil__menu {
    display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radio);
    background: none; color: inherit; font-size: 1.2rem; cursor: pointer;
  }
  .barra-movil__menu:active { background: var(--menu-hover); }
  .barra-movil__marca { display: flex; align-items: center; color: inherit; text-decoration: none; }
  .barra-movil .marca-logo { height: 22px; }
  .barra-movil .marca-logo--empresa { height: 34px; max-width: 170px; }
  .menu {
    position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: min(290px, 84vw); height: auto;
    padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-100%); visibility: hidden;
    transition: transform .26s var(--cajon), visibility 0s linear .26s;
  }
  .menu--abierto { transform: none; visibility: visible; transition: transform .26s var(--cajon); box-shadow: 12px 0 40px rgb(0 15 34 / 28%); }
  .menu__cerrar { display: grid; }
  /* En el celular, Registrar pago flota abajo a la derecha, al alcance del pulgar. */
  .menu__registrar { display: none; }
  .velo {
    display: block; position: fixed; inset: 0; z-index: 45; background: rgb(0 15 34 / 42%);
    opacity: 0; pointer-events: none; transition: opacity .26s ease;
  }
  .con-menu-abierto .velo { opacity: 1; pointer-events: auto; }
  .contenido { padding: 18px 16px 96px; }
}

.boton-flotante {
  display: none; align-items: center; gap: 8px;
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  background: var(--marca-pago-fondo); color: var(--marca-pago-texto); border: 0; border-radius: 999px;
  padding: 14px 20px; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  box-shadow: 0 8px 22px rgb(0 15 34 / 28%);
  transition: transform .12s var(--salida);
}
.boton-flotante:active { transform: scale(.96); }
@media (max-width: 800px) { .boton-flotante { display: inline-flex; } }

/* ---------- Página ---------- */
.pagina__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 20px;
}
.pagina__titulo { margin-right: auto; }
.pagina__subtitulo { color: var(--color-texto-suave); font-size: .9rem; margin-top: 2px; }
.pagina__seccion { margin-bottom: 24px; }
/* Segunda sección de una página (ej. la obra de todos los proyectos bajo la tabla de proyectos). */
.pagina__encabezado--seccion { margin: 32px 0 14px; }
.pagina__encabezado--seccion .pagina__titulo { font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
.pagina__acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Tarjeta ---------- */
.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tarjeta__encabezado {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-borde-suave);
}
.tarjeta__titulo { margin-right: auto; }
.tarjeta__cuerpo { padding: 16px 18px; }
.tarjeta__cuerpo--sin-relleno { padding: 0; overflow-x: auto; }

/* ---------- Indicadores ---------- */
/* Una sola franja dividida por líneas: las cifras mandan, sin iconos ni tarjetas sueltas.
   La sombra de -1px dibuja la línea de la izquierda y la de arriba (al pasar a otra fila);
   el borde exterior las recorta. */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 0;
  margin-bottom: 20px;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.indicadores > .indicador { border: 0; border-radius: 0; box-shadow: -1px -1px 0 0 var(--color-borde-suave); }
.indicador { padding: 14px 18px; }
.indicador__etiqueta { font-size: .82rem; color: var(--color-texto-suave); }
.indicador__valor { font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 700; letter-spacing: -0.01em; font-family: var(--fuente-numeros); margin-top: 2px; }
.indicador__valor--peligro { color: var(--color-peligro); }
.indicador__valor--exito { color: var(--color-exito-texto); }
.indicador__linea { display: block; }
.indicador__detalle { font-size: .82rem; color: var(--color-texto-suave); margin-top: 2px; font-family: var(--fuente-numeros); }

/* ---------- Reporte mensual ---------- */
.reporte__subtitulo { margin: 0 0 12px; color: var(--color-texto-suave); }
.reporte__seccion { margin-bottom: 20px; }
.reporte__total .tabla__celda { font-weight: 600; border-top: 2px solid var(--color-borde); }

/* ---------- Tabla ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla__celda {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-borde-suave);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.tabla__celda--encabezado {
  background: var(--color-superficie);
  font-weight: 600;
  font-size: .8rem;
  color: var(--color-texto-suave);
  border-bottom-color: var(--color-borde);
  position: sticky;
  top: 0;
}
.tabla__celda--numero { text-align: right; font-family: var(--fuente-numeros); }
.tabla__celda--ajustable { white-space: normal; }
/* Resalta la fila bajo el mouse en todas las tablas, para no perder la línea al leer.
   Solo con mouse (en celular no hay hover). Las filas que abren algo además cambian el cursor. */
.tabla tbody tr { transition: background-color .12s ease; }
@media (hover: hover) {
  .tabla tbody tr:not(:has(.tabla__vacia)):hover {
    background: color-mix(in srgb, var(--color-primario) 8%, var(--color-superficie));
  }
  .tabla tbody tr:not(:has(.tabla__vacia)):hover > :first-child { box-shadow: inset 3px 0 0 var(--color-primario); }
  .esqueleto-tabla tbody tr:hover { background: transparent; }
}
.tabla__fila--clic { cursor: pointer; }
.tabla__fila--inactiva { color: var(--color-texto-suave); text-decoration: line-through; }
.tabla__fila--total .tabla__celda { font-weight: 600; border-top: 2px solid var(--color-borde); }
.tabla__vacia { padding: 24px; text-align: center; color: var(--color-texto-suave); }

/* ---------- Insignia ---------- */
.insignia {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  background: var(--color-neutro-suave);
  color: var(--color-texto-suave);
}
.insignia--exito { background: var(--color-exito-suave); color: var(--color-exito-texto); }
.insignia--alerta { background: var(--color-alerta-suave); color: var(--color-alerta); }
.insignia--peligro { background: var(--color-peligro-suave); color: var(--color-peligro); }
.insignia--primario { background: var(--color-primario-suave); color: var(--color-enlace); }

/* ---------- Botón ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  cursor: pointer;
  text-decoration: none;
  color: var(--color-texto);
  font-weight: 600;
  white-space: nowrap;
  transition: transform .12s var(--salida), background-color .16s ease, border-color .16s ease;
}
.boton:hover { background: var(--color-neutro-suave); }
/* Al pulsar, el botón se hunde un poco: confirma que el clic llegó. */
.boton:active:not(:disabled) { transform: scale(.97); }
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton--primario { background: var(--color-primario); border-color: var(--color-primario); color: var(--color-sobre-accion); }
.boton--primario:hover { background: var(--color-primario-oscuro); }
.boton--peligro { color: var(--color-peligro); border-color: var(--color-peligro); }
.boton--peligro:hover { background: var(--color-peligro-suave); }
.boton--pequeno { padding: 3px 10px; font-size: .85rem; }

/* ---------- Formulario ---------- */
/* minmax(0, 1fr): un campo o tabla ancha no estira el formulario más allá de la ventana. */
.formulario { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.formulario__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 14px; }
.formulario__acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.formulario__error { color: var(--color-peligro); font-size: .9rem; }

.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo__etiqueta { font-size: .82rem; font-weight: 600; color: var(--color-texto-suave); }
.campo__control {
  padding: 7px 10px;
  color: var(--color-texto);
  border: 1px solid #cfd6df;
  border-radius: var(--radio-chico);
  background: var(--color-superficie);
  min-width: 0;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.campo__control:focus { outline: none; border-color: var(--color-principal); box-shadow: 0 0 0 3px rgb(0 29 61 / 12%); }
.campo__control--invalido { border-color: var(--color-peligro); box-shadow: 0 0 0 1px var(--color-peligro); background: var(--color-peligro-suave); }
.campo__control--invalido:focus { outline-color: var(--color-peligro); }
.campo__control--compacto { padding: 3px 8px; font-size: .85rem; }
.campo__ayuda { font-size: .8rem; color: var(--color-texto-suave); }
.campo__error { font-size: .8rem; color: var(--color-peligro); }

.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; }

/* ---------- Detalle (pares etiqueta / valor) ---------- */
.detalle { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px 20px; margin: 0; }
.detalle__etiqueta { font-size: .8rem; color: var(--color-texto-suave); }
.detalle__valor { margin: 2px 0 0; font-weight: 500; }

/* ---------- Columnas ---------- */
.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 20px; align-items: start; }
.columnas > *, .detalle > * { min-width: 0; }
.detalle__valor { overflow-wrap: anywhere; }

/* ---------- Modal ---------- */
/* La ventana crece desde 96 % en 200 ms y se va en 140 ms (donde el navegador lo permite;
   si no, aparece y se va sin animación). Abierta con la tecla P, sin animación (app.js). */
.modal {
  border: 0;
  border-radius: 12px;
  padding: 0;
  color: var(--color-texto);
  width: min(640px, calc(100vw - 32px));
  box-shadow: 0 24px 60px rgb(0 15 34 / 28%);
  opacity: 0;
  transform: scale(.96);
  transition: opacity .14s var(--salida), transform .14s var(--salida), overlay .14s allow-discrete, display .14s allow-discrete;
}
.modal[open] { opacity: 1; transform: none; transition-duration: .2s; }
@starting-style { .modal[open] { opacity: 0; transform: scale(.96); } }
.modal::backdrop { background: rgb(0 15 34 / 0%); transition: background-color .2s ease, overlay .2s allow-discrete, display .2s allow-discrete; }
.modal[open]::backdrop { background: rgb(0 15 34 / 46%); }
@starting-style { .modal[open]::backdrop { background: rgb(0 15 34 / 0%); } }
.modal--instante, .modal--instante::backdrop { transition: none; }
.modal__encabezado { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--color-borde-suave); }
.modal__titulo { margin-right: auto; }
.modal__cerrar { background: none; border: 0; font-size: 1.3rem; cursor: pointer; color: var(--color-texto-suave); }
.modal__cuerpo { padding: 18px; max-height: 75vh; overflow-y: auto; overflow-wrap: break-word; }

/* ---------- Avisos ---------- */
.avisos { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; z-index: 100; }
/* Los avisos suben desde abajo y se van solos. */
.aviso {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--color-principal);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--sombra-flotante);
  max-width: min(360px, calc(100vw - 32px));
  animation: aviso-entra .22s var(--salida);
}
@keyframes aviso-entra { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 800px) { .avisos { left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); justify-items: center; } }
.aviso--error { background: var(--color-peligro); }
.aviso--exito { background: var(--color-exito); }

/* ---------- Lotes de un proyecto ---------- */
.estados-lote { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; margin-bottom: 20px; }
.estado-lote {
  --tono: var(--color-texto-suave);
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  background: var(--color-superficie); color: var(--color-texto);
  border: 1px solid var(--color-borde); border-radius: var(--radio);
  padding: 12px 14px; font: inherit;
  transition: transform .12s var(--salida), box-shadow .12s ease, border-color .12s ease;
}
.estado-lote:hover { border-color: color-mix(in srgb, var(--tono) 45%, white); }
.estado-lote:active { transform: scale(.98); }
.estado-lote--activo { border-color: var(--tono); box-shadow: 0 0 0 1px var(--tono); background: color-mix(in srgb, var(--tono) 6%, white); }
.estado-lote--todos { --tono: var(--color-principal); }
.estado-lote--disponible { --tono: var(--color-exito); }
.estado-lote--reservado { --tono: var(--color-alerta); }
.estado-lote--vendido { --tono: var(--color-primario); }
/* El color va en una etiqueta suave con el icono, no en un borde. */
.estado-lote__titulo {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px;
  padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tono) 12%, white);
  font-size: .78rem; font-weight: 700; color: var(--tono);
}
.estado-lote__cantidad { font-size: 1.6rem; font-weight: 700; font-family: var(--fuente-numeros); line-height: 1.2; }
.estado-lote__detalle { font-size: .8rem; color: var(--color-texto-suave); }
.estado-lote__detalle--alerta { color: var(--color-peligro); font-weight: 600; }
.texto-suave { color: var(--color-texto-suave); font-size: .82rem; }
.avance { display: grid; gap: 3px; min-width: 160px; margin-bottom: 3px; }
.avance__barra { height: 6px; border-radius: 3px; background: var(--color-borde-suave); overflow: hidden; }
.avance__relleno { height: 100%; background: var(--grafico-base); border-radius: 3px; }
.avance__texto { font-size: .8rem; color: var(--color-texto-suave); white-space: nowrap; }

/* ---------- Estado vacío / cargando ---------- */
.mensaje { padding: 32px; text-align: center; color: var(--color-texto-suave); }
.mensaje--error { color: var(--color-peligro); }

/* ---------- Recibo ---------- */
.recibo { max-width: 720px; }
.recibo__cabecera { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.recibo__numero { font-family: var(--fuente-numeros); font-size: 1.3rem; font-weight: 700; }
.recibo__total { font-size: 1.4rem; font-weight: 700; font-family: var(--fuente-numeros); }

.solo-impresion { display: none; }
/* Marco de lo impreso (index.html): en pantalla no existe y el contenido queda en la rejilla
   de .app; impresion.css lo vuelve tabla para la hoja membretada. */
.hoja-marco, .hoja-marco > *, .hoja-marco > * > tr, .hoja-marco > * > tr > td { display: contents; }
.hoja-marco__arriba, .hoja-marco__abajo, .hoja-membretada { display: none; }
.recibo__seccion { margin-top: 16px; }
.tabla__celda--encabezado.tabla__celda--numero { font-family: var(--fuente); }

/* ---------- Permisos por rol (la seguridad real está en el backend) ---------- */
body[data-rol="consulta"] [data-requiere="escritura"],
body:not([data-rol="admin"]) [data-requiere="admin"] { display: none !important; }

/* ---------- Login ---------- */
/* El degradado del plano toma el color de la empresa en cuanto se reconoce su código
   (login.js pone estas variables); registradas como colores para que el cambio se anime. */
@property --acceso-tono-1 { syntax: "<color>"; inherits: true; initial-value: #0466c8; }
@property --acceso-tono-2 { syntax: "<color>"; inherits: true; initial-value: #0b3c74; }
@property --acceso-tono-3 { syntax: "<color>"; inherits: true; initial-value: #0e2a4d; }
.acceso {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(min(360px, 100%), 1fr);
  background: var(--color-fondo);
}
.acceso__marca {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  background: var(--color-principal);
  color: #f4f6fa;
  transition: --acceso-tono-1 .6s ease-out, --acceso-tono-2 .6s ease-out, --acceso-tono-3 .6s ease-out;
}
/* Un plano de lotes en tonos de azul, de fondo en la esquina. */
.acceso__marca::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 260px;
  right: 48px;
  top: 50%;
  transform: translateY(-60%);
  opacity: .5;
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, var(--color-principal) 34px 40px),
    repeating-linear-gradient(0deg, transparent 0 34px, var(--color-principal) 34px 40px),
    linear-gradient(135deg, var(--acceso-tono-1) 0%, var(--acceso-tono-2) 55%, var(--acceso-tono-3) 100%);
  -webkit-mask: linear-gradient(225deg, #000 20%, transparent 85%);
  mask: linear-gradient(225deg, #000 20%, transparent 85%);
}
.acceso__logo { width: min(320px, 70%); height: auto; position: relative; z-index: 1; }
.acceso__lema { position: relative; z-index: 1; max-width: 420px; }
.acceso__titulo { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 12px; }
.acceso__texto { opacity: .8; margin: 0; }
.acceso__panel { display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.acceso__formulario { width: min(380px, 100%); }
.acceso__encabezado { margin-bottom: 24px; }
.acceso__encabezado h1 { font-size: 1.6rem; }
.acceso__aviso {
  padding: 10px 12px;
  border-radius: var(--radio);
  background: var(--color-alerta-suave);
  color: var(--color-alerta);
  font-size: .9rem;
  margin-bottom: 16px;
}
.acceso__boton { width: 100%; justify-content: center; padding: 11px 14px; font-size: 1rem; }
.acceso__pie { margin-top: 24px; font-size: .8rem; color: var(--color-texto-suave); text-align: center; }
.acceso__enlace { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--color-enlace); text-underline-offset: 3px; }

@media (max-width: 860px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso__marca { padding: 28px 20px; min-height: 0; }
  .acceso__lema { display: none; }
  /* En el celular el plano queda chico a la derecha de la franja, para que se vea el color. */
  .acceso__marca::after { width: 116px; height: 116px; right: 20px; top: 50%; transform: translateY(-50%); }
  .acceso__logo { width: 200px; }
}

/* ---------- Iconos ---------- */

/* Los indicadores y los títulos de las tarjetas ya no llevan icono: la cifra y el nombre bastan. */
.indicador--con-icono .indicador__valor { white-space: nowrap; }
.indicador__icono, .tarjeta__icono, .indicador__etiqueta .fa-solid, .esqueleto--icono { display: none !important; }
.indicador__icono {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primario-suave);
  color: var(--color-enlace);
}
.indicador__icono--peligro { background: var(--color-primario-suave); color: var(--color-enlace); }
.indicador__etiqueta .fa-solid { margin-right: 4px; }
.tarjeta__icono { color: var(--color-enlace); margin-right: 6px; }
.tarjeta__icono--peligro { color: var(--color-enlace); }

/* ---------- Búsqueda y filtros ---------- */
.filtros__busqueda { flex: 1 1 360px; }
.filtros__busqueda--completa { flex-basis: 100%; }
.filtros select.campo__control { max-width: 260px; }
.buscador { position: relative; }
.buscador__icono {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-texto-suave);
  pointer-events: none;
}
.buscador__control { width: 100%; padding: 10px 46px 10px 38px; font-size: 1rem; }
.buscador--grande .buscador__control { padding: 13px 52px 13px 42px; font-size: 1.05rem; }
.buscador--grande .buscador__icono { left: 15px; font-size: 1.05rem; }
/* La X nativa del navegador es diminuta: se oculta y se usa la nuestra. */
.buscador__control::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.buscador__borrar {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-neutro-suave);
  color: var(--color-texto);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.15s var(--salida), color 0.15s var(--salida);
}
.buscador__borrar::before { content: ""; position: absolute; inset: -6px; }
.buscador__borrar:hover { background: var(--color-borde); }
.buscador__borrar:active { background: var(--color-principal); color: var(--color-sobre-accion); }
.buscador__control:placeholder-shown ~ .buscador__borrar { display: none; }
.buscador--grande .buscador__borrar { right: 7px; width: 36px; height: 36px; }
.filtros .campo__control { min-height: 42px; }
.filtros [data-borrar-filtros] { min-height: 42px; }
.filtros > label { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; }

/* ---------- Volver ---------- */
.volver__grupo { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.volver__grupo .volver, .volver__grupo .esqueleto--volver { margin-bottom: 0; }
.volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  background: var(--color-superficie);
  color: var(--color-texto);
  font-weight: 600;
  text-decoration: none;
}
.volver:hover { background: var(--color-primario-suave); color: var(--color-enlace); border-color: var(--color-primario); }
.volver .fa-arrow-left { transition: transform .15s; }
.volver:hover .fa-arrow-left { transform: translateX(-3px); }
.volver--secundario { font-weight: 500; box-shadow: none; }

/* ---------- Ventana ancha (elegir contrato al registrar un pago) ---------- */
.modal--ancho { width: min(980px, calc(100vw - 32px)); }
.modal--ancho .modal__cuerpo { min-height: 420px; }
.selector-contrato { border: 1px solid var(--color-borde-suave); border-radius: var(--radio); overflow: auto; max-height: 55vh; }

/* ---------- Esqueletos de carga (public/js/esqueletos.js) ---------- */
/* Bloques grises con brillo. Cada página arma el suyo con la forma de su contenido. */
.esqueleto {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--color-neutro-suave) 25%, var(--color-borde-suave) 50%, var(--color-neutro-suave) 75%);
  background-color: var(--color-neutro-suave);
  background-size: 200% 100%;
  animation: esqueleto-brillo 1.2s ease-in-out infinite;
}
.esqueleto--titulo { width: min(260px, 70vw); height: 28px; }
.esqueleto--subtitulo { width: min(340px, 80vw); height: 13px; margin-top: 8px; }
.esqueleto--texto { width: 60%; height: 12px; margin: 4px 0; }
.esqueleto--etiqueta { width: 60%; height: 10px; margin: 3px 0 6px; }
.esqueleto--valor { width: 45%; height: 22px; margin-top: 4px; }
.esqueleto--detalle { width: 50%; height: 10px; margin-top: 8px; }
.esqueleto--celda { width: 70%; height: 12px; }
.tabla__celda--numero > .esqueleto { margin-left: auto; }
.esqueleto--insignia { width: 64px; height: 20px; border-radius: 999px; }
.esqueleto--circulo { flex: none; width: 30px; height: 30px; border-radius: 50%; }
.esqueleto--boton { width: 132px; height: 36px; border-radius: var(--radio); }
.esqueleto--boton-primario, .esqueleto-columnas__columna--fuerte {
  background-image: linear-gradient(90deg, var(--color-accion-suave) 25%, color-mix(in srgb, var(--color-accion) 18%, white) 50%, var(--color-accion-suave) 75%);
}
.esqueleto--boton-pequeno { width: 96px; height: 26px; }
.esqueleto--boton-largo { width: min(320px, 100%); }
.esqueleto--volver { width: 130px; height: 38px; border-radius: 999px; margin-bottom: 14px; }
.esqueleto--control { height: 42px; border-radius: var(--radio); }
.esqueleto--control-corto { width: 140px; }
.esqueleto--selector { width: 200px; height: 38px; border-radius: var(--radio); }
.esqueleto--area { height: 120px; border-radius: var(--radio); }
.esqueleto--area-alta { height: 240px; }
.esqueleto--titulo-tarjeta { width: 180px; height: 16px; }
.esqueleto--subtitulo-ficha { width: 140px; margin: 20px 0 8px; }
.esqueleto--subtitulo-reporte { margin: 0 0 14px; }
.esqueleto--casilla { width: 260px; height: 16px; }
.esqueleto--leyenda { width: 70px; height: 10px; }
.esqueleto--leyenda-larga { width: 110px; }
.esqueleto--monedas { width: 84px; height: 24px; border-radius: 999px; }
.esqueleto--enlace { width: 64px; }
.esqueleto--nota { margin-top: 10px; height: 10px; }
.esqueleto--avance { height: 14px; border-radius: 7px; }
.esqueleto--numero-recibo { width: 120px; }
.esqueleto--cantidad { width: 48px; height: 30px; margin: 4px 0; }
.esqueleto--eje { height: 8px; width: 70%; margin: 0 auto; }

.esqueleto-pagina .pagina__titulo { min-width: 0; }
.esqueleto-campo { width: 180px; max-width: 100%; }
.formulario .esqueleto-campo { width: auto; }
.esqueleto-parrafo { display: grid; gap: 6px; }
.esqueleto-parrafo--derecha { justify-items: end; }
.esqueleto-estado { cursor: default; }
.esqueleto-estado:hover { transform: none; border-color: var(--color-borde); }

/* Tabla: misma tabla real con celdas grises; columnas de ancho fijo para no desbordar. */
.esqueleto-tabla { table-layout: fixed; }
.esqueleto-tabla .tabla__celda { padding-top: 12px; padding-bottom: 12px; }
.esqueleto-tabla .tabla__celda--encabezado { padding-top: 10px; padding-bottom: 10px; }
.esqueleto-tabla .tabla__celda--encabezado .esqueleto {
  margin: 0; background-image: linear-gradient(90deg, var(--color-borde-suave) 25%, var(--color-borde) 50%, var(--color-borde-suave) 75%);
}

/* Gráficos */
.esqueleto-barras { display: grid; gap: 12px; }
.esqueleto-barras__fila { display: grid; grid-template-columns: minmax(80px, 30%) 1fr; gap: 12px; align-items: center; }
.esqueleto-barras__barra { height: 18px; border-radius: 4px; }
.esqueleto-barras__barra--completa { width: 100%; }
.esqueleto-columnas__area {
  display: flex; align-items: flex-end; gap: 6px; height: 180px; padding-bottom: 1px;
  border-bottom: 1px solid var(--color-borde);
  background: repeating-linear-gradient(to top, transparent 0 44px, var(--color-borde-suave) 44px 45px);
}
.esqueleto-columnas__grupo { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.esqueleto-columnas__columna { flex: 1; border-radius: 3px 3px 0 0; }
.esqueleto-columnas__eje { display: flex; gap: 6px; margin-top: 8px; }
.esqueleto-columnas__eje > * { flex: 1; }
.esqueleto-linea__svg { display: block; width: 100%; height: 180px; }
.esqueleto-linea__rejilla { stroke: var(--color-borde-suave); stroke-width: 1; vector-effect: non-scaling-stroke; }
.esqueleto-linea__trazo { fill: none; stroke: var(--color-borde); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.esqueleto-linea__area { fill: var(--color-neutro-suave); }
.esqueleto-linea__svg { animation: esqueleto-pulso 1.2s ease-in-out infinite alternate; }

@keyframes esqueleto-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes esqueleto-pulso { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .esqueleto, .esqueleto-linea__svg { animation: none; } }

/* Celular: en la tabla gris solo las primeras columnas (la real se desplaza de lado),
   gráficos más bajos y menos meses en el eje. */
@media (max-width: 600px) {
  .esqueleto-tabla .tabla__celda:nth-child(n+4) { display: none; }
  .esqueleto-campo { width: 100%; }
  .esqueleto--control-corto { width: 100%; }
  .esqueleto--selector { width: 100%; }
  .esqueleto-columnas__area, .esqueleto-linea__svg { height: 140px; }
  .esqueleto-columnas__area { gap: 3px; }
  .esqueleto--boton { width: 108px; }
}

/* Grupo de opciones (radios) con el mismo aspecto que los campos */
fieldset.campo { border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 10px 14px 12px; margin: 0; }
fieldset.campo legend { padding: 0 6px; }
fieldset.campo label { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
fieldset.campo input[type="radio"] { accent-color: var(--color-primario); }

/* ---------- Contraseña con botón de ver ---------- */
.clave { position: relative; }
.clave__control { width: 100%; padding-right: 42px; }
.clave__ver {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--radio);
  background: none;
  color: var(--color-texto-suave);
  cursor: pointer;
}
.clave__ver:hover { color: var(--color-enlace); background: var(--color-neutro-suave); }

/* ---------- Botón mientras guarda ---------- */
.boton--cargando { cursor: progress; }
label.boton--cargando { pointer-events: none; opacity: .85; }
.boton--cargando:disabled { opacity: .85; }
.boton--cargando::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.selector-contrato__titulo {
  margin: 0 0 0.5rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-texto-suave);
}

.contacto { display: inline-flex; align-items: center; gap: 10px; }
.contacto__enlace { color: var(--color-enlace); text-decoration: none; }
.contacto__enlace:hover { text-decoration: underline; }
.contacto__whatsapp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #e7f8ee; color: #1a9e4b; font-size: 1rem; text-decoration: none;
}
.contacto__whatsapp:hover { background: #25d366; color: #fff; }

/* Sin flechas de subir/bajar en los campos numéricos. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Gestión de ventas ---------- */
.texto-peligro { color: var(--color-peligro); font-weight: 600; }
.formulario__subtitulo {
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-borde-suave);
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-texto);
}
.formulario__subtitulo:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.insignia .fa-solid { margin-right: 2px; }
.indicador--boton { font: inherit; color: inherit; text-align: left; cursor: pointer; background: var(--color-superficie); transition: background-color .12s ease; }
.indicador--boton:hover { background: var(--color-primario-suave); }
.historial { list-style: none; margin: 0; padding: 0; }
.historial__item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-borde-suave); }
.historial__item:last-child { border-bottom: 0; }
.historial__icono {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primario-suave);
  color: var(--color-enlace);
}
.historial__titulo { font-weight: 600; }
.interesados {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--radio);
  background: var(--color-exito-suave);
  color: var(--color-exito-texto);
}
.interesados__titulo { font-weight: 600; }
.interesados__lista { margin: 6px 0 0; padding-left: 20px; color: var(--color-texto); }
.interesados__lista li { padding: 2px 0; }
/* ---------- Pestañas de una página (proyecto) ---------- */
.pestanas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--color-borde); }
.pestanas__enlace {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: -1px;
  color: var(--color-texto-suave); font-weight: 600; text-decoration: none;
  border-bottom: 3px solid transparent;
}
.pestanas__enlace:hover { color: var(--color-texto); }
.pestanas__enlace--activa { color: var(--color-texto); border-bottom-color: var(--color-principal); }

/* ---------- Ficha (lote / información del proyecto) ---------- */
.ficha__subtitulo { margin: 18px 0 4px; font-weight: 600; }
.ficha__texto { margin: 0; white-space: pre-line; }
.ficha__seccion { font-size: 1.1rem; margin: 8px 0 12px; }
.ficha__situacion { margin-top: 14px; }
fieldset.campo--casillas { display: flex; flex-wrap: wrap; gap: 4px 20px; }
fieldset.campo--casillas legend { width: 100%; }
fieldset.campo input[type="checkbox"] { accent-color: var(--color-primario); width: 16px; height: 16px; }

/* ---------- Lista de planos y documentos ---------- */
.documentos { list-style: none; margin: 0; padding: 0; }
.documento { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-bottom: 1px solid var(--color-borde-suave); }
.documento:last-child { border-bottom: 0; }
.documento__abrir {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border: 0; border-radius: var(--radio); background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.documento__abrir:hover, .documento__abrir:focus-visible { background: var(--color-neutro-suave); }
.documento__icono {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radio);
  font-size: 1.25rem; background: var(--color-primario-suave); color: var(--color-enlace);
}
.documento__icono--file-pdf { background: var(--color-peligro-suave); color: var(--color-peligro); }
.documento__icono--compass-drafting { background: var(--color-alerta-suave); color: var(--color-alerta); }
.documento__icono--file-image { background: var(--color-exito-suave); color: var(--color-exito-texto); }
.documento__texto { display: grid; gap: 2px; min-width: 0; }
.documento__titulo { font-weight: 600; overflow-wrap: anywhere; }
.documento__texto .texto-suave { overflow-wrap: anywhere; }
.documento__texto .insignia { justify-self: start; }
.documento__acciones { display: flex; gap: 6px; flex: none; }
@media (max-width: 600px) { .tarjeta__encabezado { flex-wrap: wrap; } }

/* ---------- Soltar archivos ---------- */
.zona-archivos {
  display: grid; justify-items: center; gap: 6px; text-align: center; cursor: pointer;
  padding: 22px 16px; border: 2px dashed var(--color-borde); border-radius: var(--radio);
  background: var(--color-neutro-suave); color: var(--color-texto-suave);
  transition: border-color .12s, background .12s;
}
.zona-archivos:hover, .zona-archivos:focus-within { border-color: var(--color-primario); }
.zona-archivos--encima { border-color: var(--color-primario); background: var(--color-primario-suave); }
.zona-archivos__entrada { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.zona-archivos__icono { font-size: 1.8rem; color: var(--color-enlace); }
.zona-archivos__texto strong { color: var(--color-texto); }
.zona-archivos__texto u { color: var(--color-enlace); }
.zona-archivos__lista { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: .85rem; color: var(--color-texto); }
.zona-archivos--con-archivos { border-style: solid; border-color: var(--color-primario); }
.tarjeta--soltar { outline: 2px dashed var(--color-primario); outline-offset: -2px; background: var(--color-primario-suave); }

/* ---------- Ofrecer por WhatsApp y Configuración ---------- */
.boton--whatsapp { background: #1a9e4b; border-color: #1a9e4b; color: #fff; text-decoration: none; }
.boton--whatsapp:hover { background: #158240; }
.oferta__mensaje { font-family: inherit; line-height: 1.45; resize: vertical; }
.oferta__plano { margin: 0; font-size: .88rem; color: var(--color-texto-suave); }
.ajuste__variables { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.ajuste__variable {
  font: inherit; font-size: .8rem; cursor: pointer;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--color-borde); background: var(--color-neutro-suave); color: var(--color-texto);
}
.ajuste__variable:hover { border-color: var(--color-primario); }
.ajuste__vista {
  white-space: pre-wrap; padding: 12px 14px; border-radius: var(--radio);
  background: #e7f8ee; color: var(--color-texto); font-size: .92rem; line-height: 1.45;
}

/* ---------- Celular: las ventanas solo se desplazan hacia abajo ---------- */
@media (max-width: 600px) {
  .modal { width: calc(100vw - 16px); max-width: none; }
  .modal--ancho .modal__cuerpo { min-height: 0; }
  .modal__encabezado { padding: 12px 14px; gap: 8px; }
  .modal__titulo { min-width: 0; overflow-wrap: anywhere; }
  .modal__cuerpo { padding: 14px; max-height: calc(100dvh - 110px); }
  /* Las tablas dentro de una ventana se ven como tarjetas: una fila por bloque y cada dato con su título. */
  .modal .tabla, .modal .tabla tbody, .modal .tabla__fila, .modal .tabla__celda { display: block; }
  .modal .tabla thead { display: none; }
  .modal .tabla__fila { padding: 8px 12px; border-bottom: 1px solid var(--color-borde-suave); }
  .modal .tabla__fila:last-child { border-bottom: 0; }
  .modal .tabla__celda {
    display: flow-root; padding: 3px 0; border: 0; white-space: normal; text-align: right; overflow-wrap: anywhere;
  }
  .modal .tabla__celda::before {
    content: attr(data-titulo); float: left; margin-right: 12px; line-height: 1.9; text-align: left;
    font-size: .78rem; font-weight: 600; color: var(--color-texto-suave);
  }
  .modal .tabla__celda:first-child { font-weight: 600; }
  .modal .tabla .campo__control--compacto { width: 9em; text-align: right; }
}

/* ---------- Gráficos (public/js/graficos.js) ---------- */
/* Siempre de dos en dos (4 gráficos = 2 y 2, nunca 3 y 1); en pantallas angostas, uno debajo del otro. */
.graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
@media (max-width: 999px) { .graficos { grid-template-columns: minmax(0, 1fr); } }
.graficos > * { min-width: 0; }
/* Dos gráficos lado a lado miden lo mismo: la tarjeta más corta estira su cuerpo hasta la altura de la otra,
   y el encabezado tiene una altura fija para que los gráficos empiecen a la misma altura (con o sin botones L / $). */
.graficos > .tarjeta { display: flex; flex-direction: column; }
.graficos > .tarjeta > .tarjeta__cuerpo { flex: 1; }
.graficos > .tarjeta > .tarjeta__encabezado { min-height: 52px; }
/* Seguimiento del día en el Panel: a quién contactar y qué falta en obra. Cada fila abre su ficha. */
.seguimientos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-bottom: 20px; align-items: start; }
.seguimientos > * { min-width: 0; }
.seguimientos .tarjeta__titulo { display: flex; align-items: center; gap: 8px; }
.seguimientos .grafico__vacio { padding: 18px; }
.seguimiento { list-style: none; margin: 0; padding: 0; }
.seguimiento li + li { border-top: 1px solid var(--color-borde-suave); }
.seguimiento__fila {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px; min-height: 44px;
  color: inherit; text-decoration: none; transition: background-color 120ms ease-out;
}
.seguimiento__fila:hover { background: var(--color-fondo); }
.seguimiento__fila:focus-visible { outline: 2px solid var(--color-principal); outline-offset: -2px; }
.seguimiento__texto { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.seguimiento__texto > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seguimiento__texto > strong { white-space: normal; overflow-wrap: anywhere; }
.seguimiento__texto .texto-suave { font-size: .82rem; }
.seguimiento__lado { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; font-size: .82rem; }
/* Filtros de la tarjeta Seguimiento: Todos / Contactar hoy / Sin contactar, con su cantidad. */
.seguimiento__filtros { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--color-borde-suave); }
.seguimiento__filtro {
  font: inherit; font-size: .82rem; font-weight: 600; min-height: 32px; padding: 4px 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--color-borde); border-radius: 999px; background: var(--color-superficie); color: var(--color-texto-suave);
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.seguimiento__filtro:hover { color: var(--color-texto); }
.seguimiento__filtro:focus-visible { outline: 2px solid var(--color-principal); outline-offset: 2px; }
.seguimiento__filtro[aria-pressed="true"] { background: var(--color-principal); border-color: var(--color-principal); color: #fff; }
.seguimiento__cuenta { font-variant-numeric: tabular-nums; opacity: .8; }
@media (max-width: 600px) {
  /* En el celular los tres filtros caben en una línea y el detalle baja de renglón en vez de cortarse. */
  .seguimiento__filtros { gap: 4px; padding: 10px 18px; }
  .seguimiento__filtro { padding: 4px 9px; gap: 4px; font-size: .78rem; }
  .seguimiento__texto .texto-suave { white-space: normal; }
}
.grafico { min-width: 0; }
.grafico__svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico__svg text { font-family: var(--fuente-numeros); font-size: 12px; fill: var(--color-texto-suave); font-variant-numeric: tabular-nums; }
.grafico__svg .grafico__valor { fill: var(--color-texto); font-weight: 600; }
.grafico__svg .grafico__dentro { fill: var(--grafico-base-texto); font-weight: 600; font-size: 11px; }
/* Sobre los tonos claros el número va en azul noche. */
.grafico__svg .grafico__dentro--disponible, .grafico__svg .grafico__dentro--reservado, .grafico__svg .grafico__dentro--bloqueado { fill: #001d3d; }
.grafico__zona { fill: transparent; }
.grafico__pista { fill: var(--color-neutro-suave); }
.grafico__rejilla { stroke: var(--color-borde-suave); stroke-width: 1; }
.grafico__guia { stroke: var(--color-texto-suave); stroke-dasharray: 3 3; opacity: 0; }
.grafico__objetivo { outline: none; }
.grafico__objetivo:hover .grafico__guia, .grafico__objetivo:focus .grafico__guia { opacity: .6; }
.grafico__objetivo:hover .grafico__marca, .grafico__objetivo:focus .grafico__marca { opacity: .8; }
.grafico__objetivo:focus-visible .grafico__zona { fill: var(--color-primario-suave); }
.grafico--clic .grafico__objetivo { cursor: pointer; }
.grafico__marca { transition: opacity .12s; }
.grafico__marca--accion { fill: var(--grafico-base); }
.grafico__marca--suave { fill: var(--grafico-suave); }
.grafico__marca--disponible { fill: var(--grafico-disponible); }
.grafico__marca--reservado { fill: var(--grafico-reservado); }
.grafico__marca--vendido { fill: var(--grafico-vendido); }
.grafico__marca--bloqueado { fill: var(--grafico-bloqueado); }
.grafico__marca--mora-1 { fill: var(--grafico-mora-1); }
.grafico__marca--mora-2 { fill: var(--grafico-mora-2); }
.grafico__marca--mora-3 { fill: var(--grafico-mora-3); }
.grafico__marca--mora-4 { fill: var(--grafico-mora-4); }
.grafico__linea { fill: none; stroke-width: 2; stroke-linejoin: round; }
.grafico__linea--peligro { stroke: var(--grafico-base); }
.grafico__area--peligro { fill: var(--grafico-base); opacity: .1; }
.grafico__punto { stroke-width: 2; fill: var(--color-superficie); }
.grafico__punto--peligro { stroke: var(--grafico-base); }
.grafico__punto--final { fill: var(--grafico-base); }
.grafico__vacio { padding: 18px 0; text-align: center; color: var(--color-texto-suave); }
.grafico__leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: var(--color-texto-suave); margin-bottom: 10px; }
.grafico__muestra { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.grafico__muestra--accion { background: var(--grafico-base); }
.grafico__muestra--suave { background: var(--grafico-suave); }
.grafico__muestra--disponible { background: var(--grafico-disponible); }
.grafico__muestra--reservado { background: var(--grafico-reservado); }
.grafico__muestra--vendido { background: var(--grafico-vendido); }
.grafico__muestra--bloqueado { background: var(--grafico-bloqueado); }
.grafico__nota { margin: 10px 0 0; font-size: .82rem; color: var(--color-texto-suave); }
.grafico__nota a { font-weight: 600; }
.grafico__monedas { display: flex; gap: 4px; }
.grafico__moneda {
  font: inherit; font-size: .78rem; font-weight: 600; min-width: 32px; padding: 3px 10px; cursor: pointer;
  border: 1px solid var(--color-borde); border-radius: 999px; background: var(--color-superficie); color: var(--color-texto-suave);
}
.grafico__moneda[aria-pressed="true"] { background: var(--color-principal); border-color: var(--color-principal); color: #fff; }
.grafico__globo {
  position: fixed; z-index: 60; pointer-events: none; max-width: 260px;
  padding: 6px 10px; border-radius: 6px; font-size: .8rem; line-height: 1.4;
  background: var(--color-principal); color: #fff; box-shadow: 0 4px 14px rgb(0 15 34 / 25%);
}
@media (prefers-reduced-motion: reduce) { .grafico__marca { transition: none; } }
/* Las barras crecen una sola vez, al dibujarse por primera vez (graficos.js pone grafico--entra). */
.grafico--entra .grafico__marca { transform-box: fill-box; transform-origin: left center; animation: crecer-x .55s var(--salida) both; }
.grafico--entra .grafico__marca--v { transform-origin: center bottom; animation-name: crecer-y; }
.grafico--entra .grafico__objetivo:nth-child(2) .grafico__marca { animation-delay: 40ms; }
.grafico--entra .grafico__objetivo:nth-child(3) .grafico__marca { animation-delay: 80ms; }
.grafico--entra .grafico__objetivo:nth-child(4) .grafico__marca { animation-delay: 120ms; }
.grafico--entra .grafico__objetivo:nth-child(n+5) .grafico__marca { animation-delay: 160ms; }
@keyframes crecer-x { from { transform: scaleX(0); } }
@keyframes crecer-y { from { transform: scaleY(0); } }

/* Plano de lotes (Panel): un cuadro por lote, del más claro (disponible) al más oscuro (vendido). */
.plano { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.plano__proyecto {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-width: 0; padding: 8px 10px; margin: 0 -10px;
  background: none; border: 0; border-radius: var(--radio); font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background-color .12s ease;
}
.plano__proyecto:hover, .plano__proyecto:focus-visible { background: var(--color-neutro-suave); }
.plano__titulo { display: flex; justify-content: space-between; gap: 12px; min-width: 0; font-size: .88rem; }
.plano__nombre { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plano__resumen { color: var(--color-texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.plano__lotes { display: flex; flex-wrap: wrap; gap: 4px; }
.plano__lote { width: 20px; height: 20px; border-radius: 4px; flex: none; }
.plano--denso .plano__lotes { gap: 3px; }
.plano--denso .plano__lote { width: 11px; height: 11px; border-radius: 2px; }
.plano__lote--disponible { background: var(--grafico-disponible); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--grafico-base) 40%, white); }
.plano__lote--reservado { background: var(--grafico-reservado); }
.plano__lote--vendido { background: var(--grafico-vendido); }
.plano__lote--bloqueado { background: repeating-linear-gradient(135deg, #c3cbd5 0 2px, #eef1f4 2px 4px); }
.grafico__muestra--disponible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--grafico-base) 40%, white); }
.grafico__muestra--bloqueado { background: repeating-linear-gradient(135deg, #c3cbd5 0 2px, #eef1f4 2px 4px); }
.plano--entra .plano__lote { animation: lote-entra .3s var(--salida) both; animation-delay: calc(var(--i, 0) * 8ms); }
@keyframes lote-entra { from { opacity: 0; transform: scale(.6); } }
@media print { .plano__lote { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Cobranza del mes: barra de avance con la marca del día de hoy. */
.avance { display: grid; gap: 8px; }
.avance__cifras { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; font-family: var(--fuente-numeros); }
.avance__monto { font-size: 1.35rem; font-weight: 700; }
.avance__barra { position: relative; height: 14px; border-radius: 7px; background: var(--color-neutro-suave); }
.avance__lleno { position: absolute; inset: 0 auto 0 0; max-width: 100%; border-radius: 7px; background: var(--grafico-base); transform-origin: left; animation: crecer-x .55s var(--salida) both; }
.avance__hoy { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--color-principal); }
.avance__detalle { font-size: .85rem; color: var(--color-texto-suave); }

/* ---------- Marca de la empresa ---------- */

.marca__explicacion { margin: 0 0 16px; max-width: 70ch; }
.marca__logo {
  display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 12px;
  border: 1px dashed var(--color-borde); border-radius: var(--radio);
  /* Cuadros grises: así se ve que el logo conserva su transparencia. */
  background: repeating-conic-gradient(#e9edf2 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}
.marca__logo img { max-height: 72px; max-width: 100%; object-fit: contain; }
.marca__archivo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.marca__archivo:focus-visible + .boton, label.boton:has(+ .marca__archivo:focus-visible) { outline: 2px solid var(--color-accion); outline-offset: 2px; }
.formulario__acciones--izquierda { justify-content: flex-start; }
.marca__formulario { margin-top: 20px; }
.marca__color { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.marca__color .campo { flex: 0 1 220px; }
.marca__color .boton { margin-top: 22px; }
.marca__selector { width: 52px; height: 40px; margin-top: 22px; padding: 2px; border: 1px solid var(--color-borde); border-radius: var(--radio); background: #fff; cursor: pointer; }
.marca-vista { border: 1px solid var(--color-borde); border-radius: var(--radio); overflow: hidden; background: var(--color-fondo); display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.marca-vista > .campo__ayuda { grid-column: 1 / -1; padding: 8px 12px 10px; margin: 0; background: var(--color-superficie); border-top: 1px solid var(--color-borde-suave); }
.marca-vista__menu { display: grid; gap: 10px; align-content: start; padding: 12px 10px; background: var(--menu-fondo); color: var(--menu-texto); }
.marca-vista__menu .marca-logo { height: 22px; }
.marca-vista__menu .marca-logo--empresa { height: 34px; }
.marca-vista__pago, .marca-vista__activo { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radio-chico); font-size: .8rem; font-weight: 700; }
.marca-vista__activo { position: relative; background: var(--menu-activo); color: #fff; }
.marca-vista__activo::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--marca-acento); }
.marca-vista__cuerpo { display: grid; gap: 12px; align-content: start; padding: 14px 12px; }
.marca-vista__boton { justify-self: start; padding: 6px 12px; border-radius: var(--radio); font-size: .85rem; font-weight: 700; background: var(--color-accion); color: var(--color-sobre-accion); }
.marca-vista__barras { display: flex; gap: 4px; }
.marca-vista__barras i { width: 22px; height: 22px; border-radius: 4px; }
@media (max-width: 480px) { .marca-vista { grid-template-columns: 1fr; } }
/* Vista previa de la hoja membretada en Configuración: la hoja carta a escala con un recibo de
   ejemplo en la parte en blanco; las letras se miden con el ancho de la hoja (cqw). */
.hoja-vista { max-width: 340px; }
.hoja-vista__pagina { position: relative; aspect-ratio: 215.9 / 279.4; container-type: inline-size; background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio-chico); box-shadow: 0 1px 3px rgb(0 15 34 / 12%); overflow: hidden; }
.hoja-vista__imagen { position: absolute; inset: 0; width: 100%; height: 100%; }
.hoja-vista__texto { position: absolute; display: flex; flex-direction: column; gap: 2.2cqw; padding: 1cqw; outline: 1px dashed var(--color-accion); outline-offset: -1px; font-size: 1.6cqw; line-height: 1.35; color: #222; overflow: hidden; }
.hoja-vista__cabecera { display: flex; justify-content: space-between; font-size: 1.15em; }
.hoja-vista__cabecera span { font-size: .85em; color: #666; }
.hoja-vista__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; }
.hoja-vista__datos span { display: grid; color: #666; font-size: .85em; }
.hoja-vista__datos b { color: #222; font-size: 1.15em; }
.hoja-vista__fila { display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; padding-bottom: .6cqw; }
.hoja-vista__firma { align-self: center; width: 45%; margin-top: auto; padding-top: .6cqw; border-top: 1px solid #000; text-align: center; font-weight: 700; }
.hoja-vista__vacia { margin: 0; padding: 16px; border: 1px dashed var(--color-borde); border-radius: var(--radio); }
.hoja-vista--grande { max-width: min(640px, 100%, calc((100dvh - 290px) * 215.9 / 279.4)); margin: 0 auto; }
.hoja__acciones { margin-top: 10px; }
.hoja-prueba { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }
.membrete__modos { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; }
.membrete__modo { display: flex; align-items: flex-start; gap: 10px; max-width: 560px; padding: 10px 12px; border: 1px solid var(--color-borde); border-radius: var(--radio); cursor: pointer; }
.membrete__modo:has(:checked) { border-color: var(--color-accion); background: var(--color-fondo); }
.membrete__modo input { margin-top: 3px; accent-color: var(--color-accion); }
[data-datos] .membrete-vista { margin-bottom: 4px; }
.hoja__aviso { margin: 0; font-size: .85rem; color: var(--color-texto-suave); }
/* Vista previa del membrete en Configuración: igual que el de los impresos (impresion.css). */
.membrete-vista {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; max-width: 560px;
  background: #fff; border: 1px solid var(--color-borde); border-bottom: 2px solid var(--color-principal); border-radius: var(--radio);
}
.membrete-vista .membrete__logo { max-height: 56px; max-width: 200px; object-fit: contain; }
.membrete__logo--negro { filter: brightness(0); }
.membrete-vista .membrete__datos { font-size: .8rem; line-height: 1.45; color: var(--color-texto-suave); }
.membrete-vista .membrete__nombre { font-size: .95rem; font-weight: 700; color: var(--color-texto); }


/* ---------- Lados del lote (formulario y ficha) ---------- */
.lados { display: grid; gap: 8px; }
.lados__encabezado,
.lados__fila { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1.4fr) 36px; gap: 8px; align-items: center; }
.lados__encabezado { font-size: .8rem; color: var(--color-texto-suave); }
[data-filas-lados] { display: grid; gap: 8px; }
.lados__quitar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-texto-suave);
  cursor: pointer;
}
.lados__quitar:hover { background: var(--color-borde); color: var(--color-texto); }
.lados__pie { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.lados__tabla .tabla__celda { padding-left: 0; }
@media (max-width: 600px) {
  .lados__encabezado { display: none; }
  .lados__fila { grid-template-columns: minmax(0, 1fr) 96px 36px; padding-bottom: 8px; border-bottom: 1px solid var(--color-borde); }
  .lados__fila [data-lado-colindante] { grid-column: 1 / 3; grid-row: 2; }
}