/* ---------- Layout ---------- */
/* Computadora: solo el menú lateral azul noche (sin barra arriba). Celular: barra de 52 px
   con el botón del menú y el logo; el menú se desliza desde la izquierda con Registrar pago arriba. */
.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 no hay teclado: no se muestra la tecla P. */
  .menu__atajo { 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 40px; }
}


/* ---------- 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); }
.tabla__celda--m-flecha { display: none; }

/* Celular: solo las columnas importantes (ui.js tabla(), columna.movil) y una flecha; tocar la fila
   abre la ficha o una ventana con todos los datos. Las tablas dentro de una ventana tienen su propio
   formato (sección «Celular: las ventanas»). */
@media (max-width: 600px) {
  .tabla--compacta:not(.modal *) .tabla__celda--m-oculta { display: none; }
  .tabla--compacta:not(.modal *) .tabla__celda { padding: 10px 8px; white-space: normal; overflow-wrap: break-word; }
  .tabla--compacta:not(.modal *) .tabla__celda:first-child { padding-left: 14px; }
  .tabla--compacta:not(.modal *) .tabla__celda--numero { white-space: nowrap; }
  .tabla--compacta:not(.modal *) .tabla__celda--m-flecha {
    display: table-cell; width: 26px; padding: 0 12px 0 0;
    background: no-repeat left center / 8px 13px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'%3E%3Cpath d='M1.5 1.5 7 7l-5.5 5.5' fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .tabla--compacta:not(.modal *) .tabla__celda--encabezado.tabla__celda--m-flecha { background: var(--color-superficie); }
  .tabla--compacta:not(.modal *) .tabla__fila--detalle { cursor: pointer; }
  .tabla--compacta:not(.modal *) .avance { min-width: 0; width: 100px; }
  .tabla--compacta:not(.modal *) .avance__texto { white-space: normal; }
}

/* ---------- 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(16px + 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__celda--m-flecha { display: none; }
  .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; }
}

/* ---------- Inicio ---------- */
/* Lo primero al entrar (y lo que antes era el Panel): la bienvenida con el logo de la empresa sobre
   azul noche (con un plano de lotes en los tonos de su color), el saludo con el rol y tres acciones;
   debajo, dos columnas: cobros de la semana, contactar hoy, para hoy y ventas a la izquierda,
   y la obra de todos los proyectos a la derecha. */
.inicio { display: grid; gap: 16px; }
.inicio__hero {
  display: grid;
  grid-template-columns: 260px 1fr auto;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  overflow: hidden;
}
.inicio__marca {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 168px;
  padding: 24px;
  overflow: hidden;
  background: var(--color-principal);
}
.inicio__logo { position: relative; z-index: 1; display: grid; place-items: center; }
.inicio__logo .marca-logo { height: 32px; }
.inicio__logo .marca-logo--empresa { height: 62px; max-width: 200px; object-position: center; }
.inicio__plano { position: absolute; right: -10px; bottom: -12px; display: grid; grid-template-columns: repeat(8, 16px); gap: 4px; opacity: .55; }
.inicio__plano span { width: 16px; height: 16px; border-radius: 3px; background: var(--grafico-base); }
.inicio__plano span:nth-child(3n) { background: color-mix(in srgb, var(--grafico-base) 45%, var(--color-principal)); }
.inicio__plano span:nth-child(5n) { background: color-mix(in srgb, var(--grafico-base) 25%, var(--color-principal)); }
.inicio__saludo { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 22px 28px; min-width: 0; }
.inicio__dia { color: var(--color-texto-suave); font-size: .88rem; font-weight: 600; }
.inicio__saludo h1 { margin: 0; font-size: 1.75rem; letter-spacing: -.02em; }
.inicio__quien { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--color-texto-suave); font-size: .95rem; }
.inicio__rol {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--grafico-base) 12%, white);
  color: color-mix(in srgb, var(--grafico-base) 70%, var(--color-principal));
  font-weight: 700; font-size: .82rem;
}
.inicio__acciones { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 250px; padding: 20px 24px; border-left: 1px solid var(--color-borde-suave); }
.inicio__acciones .boton { justify-content: flex-start; gap: 10px; width: 100%; padding: 9px 14px; text-decoration: none; }
/* La acción principal lleva el color de la empresa, como Registrar pago en el menú. */
.boton--marca { border-color: transparent; background: var(--marca-pago-fondo); color: var(--marca-pago-texto); }
.boton--marca:hover { background: var(--marca-pago-hover); }
.inicio__columnas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.inicio__columna { display: grid; gap: 16px; min-width: 0; }
.inicio__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.inicio .tarjeta__titulo { display: flex; align-items: center; gap: 8px; }
.inicio .tarjeta__encabezado { gap: 10px; }
.inicio .grafico__vacio { padding: 18px; }

/* Cobros de la semana: una piruleta por día, hoy resaltado con su monto. */
.semana { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: end; padding: 16px 18px 6px; }
.semana__resumen { display: grid; gap: 4px; padding-bottom: 8px; font-size: .86rem; }
.semana__resumen strong { font-size: .92rem; }
.semana__cambio { font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.semana__cambio--sube { color: var(--color-exito-texto); }
.semana__cambio--baja { color: var(--color-peligro); }
.semana__dias { display: grid; grid-template-columns: repeat(7, 1fr); height: 210px; align-items: end; }
.semana__dia { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; padding-bottom: 4px; border-radius: 999px; color: inherit; text-decoration: none; }
a.semana__dia:hover { background: var(--color-fondo); }
a.semana__dia:focus-visible { outline: 2px solid var(--color-principal); outline-offset: -2px; }
.semana__palo { position: relative; width: 2px; background: var(--color-borde); }
.semana__palo::before { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--grafico-suave); transform: translateX(-50%); }
.semana__palo--vacio::before { background: var(--color-borde); }
.semana__letra { display: grid; place-items: center; width: 32px; height: 32px; margin-top: 8px; border-radius: 50%; background: var(--color-neutro-suave); color: var(--color-texto-suave); font-size: .78rem; font-weight: 700; }
.semana__dia--hoy { background: linear-gradient(transparent, var(--color-neutro-suave)); }
.semana__dia--hoy .semana__palo { width: 3px; background: var(--grafico-base); }
.semana__dia--hoy .semana__palo::before { top: -6px; width: 12px; height: 12px; background: var(--grafico-base); }
.semana__dia--hoy .semana__letra { background: var(--color-principal); color: #fff; }
.semana__dia--futuro { opacity: .45; }
.semana__globo { position: absolute; z-index: 1; padding: 3px 8px; border-radius: var(--radio-chico); background: var(--color-principal); color: #fff; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.semana__nota { margin: 0; padding: 0 18px 14px; color: var(--color-texto-suave); font-size: .82rem; }

/* Obra en los proyectos: intervenciones y actividades en una lista; cada fila se abre con su detalle. */
.obra { margin: 0; padding: 0; list-style: none; }
.obra__item + .obra__item { border-top: 1px solid var(--color-borde-suave); }
.obra__fila {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 24px; align-items: center; gap: 12px;
  width: 100%; padding: 12px 18px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.obra__fila:hover { background: var(--color-fondo); }
.obra__fila:focus-visible { outline: 2px solid var(--color-principal); outline-offset: -2px; }
.obra__icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radio); background: var(--color-neutro-suave); color: var(--color-texto-suave); }
.obra__icono--inmediata { background: var(--color-peligro-suave); color: var(--color-peligro); }
.obra__icono--alta { background: var(--color-alerta-suave); color: var(--color-alerta); }
.obra__icono--actividad { background: color-mix(in srgb, var(--grafico-base) 14%, white); color: var(--grafico-base); }
.obra__texto strong { display: block; font-size: .93rem; }
.obra__texto span { display: block; color: var(--color-texto-suave); font-size: .8rem; }
.obra__lado { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.obra__avance { display: inline-flex; align-items: center; gap: 8px; min-width: 110px; color: var(--color-texto-suave); font-size: .78rem; font-variant-numeric: tabular-nums; }
.obra__avance i { flex: 1; height: 6px; border-radius: 99px; background: var(--color-neutro-suave); overflow: hidden; }
.obra__avance b { display: block; height: 100%; background: var(--grafico-base); }
.obra__abrir { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-neutro-suave); color: var(--color-texto-suave); font-size: .7rem; transition: transform .16s var(--salida); }
.obra__fila[aria-expanded="true"] .obra__abrir { transform: rotate(180deg); }
.obra__detalle { display: grid; gap: 10px; padding: 0 18px 14px 66px; }
.obra__detalle p { margin: 0; color: var(--color-texto-suave); font-size: .86rem; white-space: pre-line; }
.obra__datos { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--color-texto-suave); font-size: .8rem; }
.obra__datos b { color: var(--color-texto); font-weight: 600; }
.obra__botones { display: flex; flex-wrap: wrap; gap: 8px; }
.obra__botones .boton { text-decoration: none; }
.obra__mas { display: block; padding: 10px 18px; border-top: 1px solid var(--color-borde-suave); font-size: .86rem; }
.obra__pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 12px 18px; border-top: 1px solid var(--color-borde-suave); color: var(--color-texto-suave); font-size: .84rem; }
.obra__pie b { color: var(--color-texto); }
.obra__pie b.texto-peligro { color: var(--color-peligro); }

/* Contactar hoy */
.contactos { margin: 0; padding: 0; list-style: none; }
.contactos li { display: flex; align-items: center; gap: 8px; padding-right: 14px; }
.contactos li + li { border-top: 1px solid var(--color-borde-suave); }
.contactos__fila { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 11px 0 11px 18px; color: inherit; text-decoration: none; }
.contactos__fila:hover strong { text-decoration: underline; }
.contactos__inicial { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-neutro-suave); color: var(--color-principal); font-size: .76rem; font-weight: 700; }
.contactos__texto strong { display: block; font-size: .9rem; }
.contactos__texto > span:not(.insignia) { display: block; overflow: hidden; color: var(--color-texto-suave); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.contactos__texto .insignia { margin-top: 4px; }
.contactos__llamar { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border: 1px solid var(--color-borde); border-radius: 50%; background: var(--color-superficie); color: var(--color-principal); }
.contactos__llamar:hover { background: var(--color-neutro-suave); }

/* Para hoy */
.para-hoy { display: grid; gap: 4px; padding: 16px 18px; font-size: .86rem; }
.para-hoy__titulo { font-size: 1.35rem; letter-spacing: -.02em; }
.para-hoy ul { margin: 10px 0 0; padding: 0; list-style: none; }
.para-hoy li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--color-borde-suave); font-size: .88rem; }
.para-hoy li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.para-hoy .boton { justify-content: center; margin-top: 10px; text-decoration: none; }

/* Ventas: cuatro cifras y los prospectos por etapa. */
.ventas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 16px 18px 0; }
.ventas > * { padding-left: 10px; border-left: 2px solid var(--color-borde); color: inherit; text-decoration: none; }
.ventas > :nth-child(1) { border-color: var(--color-texto-suave); }
.ventas > :nth-child(2) { border-color: var(--grafico-base); }
.ventas > :nth-child(3) { border-color: var(--color-exito); }
.ventas small { display: block; color: var(--color-texto-suave); font-size: .78rem; }
.ventas b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
a.ventas__dato:hover b, .ventas a:hover b { text-decoration: underline; }

@media (max-width: 1100px) {
  .inicio__hero { grid-template-columns: 200px 1fr; }
  .inicio__acciones { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; border-top: 1px solid var(--color-borde-suave); border-left: 0; }
  .inicio__acciones .boton { flex: 1 1 200px; width: auto; }
  .inicio__columnas { grid-template-columns: minmax(0, 1fr); }
  /* Al administrador la obra le importa más: va primero cuando todo queda en una columna. */
  .inicio--obra-primero .inicio__columna:last-child { order: -1; }
}
@media (max-width: 800px) {
  .inicio { gap: 14px; }
  .inicio__hero { grid-template-columns: 1fr; }
  .inicio__marca { min-height: 76px; padding: 16px 18px; justify-items: start; }
  .inicio__logo .marca-logo { height: 26px; }
  .inicio__logo .marca-logo--empresa { height: 42px; max-width: 170px; object-position: left center; }
  .inicio__saludo { padding: 14px 18px 16px; }
  .inicio__saludo h1 { font-size: 1.4rem; }
  .inicio__acciones { flex-direction: column; padding: 14px 18px; }
  .inicio__acciones .boton { flex: none; width: 100%; justify-content: center; }
  .inicio__par { grid-template-columns: minmax(0, 1fr); }
  .semana { grid-template-columns: 1fr; }
  .semana__dias { height: 180px; }
  .obra__fila { grid-template-columns: 36px minmax(0, 1fr) 24px; padding: 12px 14px; }
  .obra__lado { grid-column: 2; grid-row: 2; justify-content: flex-start; }
  .obra__abrir { grid-column: 3; grid-row: 1; }
  .obra__detalle { padding: 0 14px 14px; }
  .ventas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
}
.esqueleto-lista { display: grid; gap: 16px; }
.esqueleto-lista__fila { display: grid; gap: 6px; }

/* ---------- Novedades: recorrido de una vez al entrar (js/novedades.js) ---------- */
.tour__velo { position: fixed; inset: 0; z-index: 90; background: rgb(0 15 34 / 55%); animation: tour-aparece .2s ease-out; }
.tour__velo--foco { background: transparent; }
.tour__foco { position: fixed; z-index: 91; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 4px rgb(255 255 255 / 90%), 0 0 0 9999px rgb(0 15 34 / 55%); transition: left .26s var(--salida), top .26s var(--salida), width .26s var(--salida), height .26s var(--salida); }
.tour-paso { position: fixed; z-index: 92; width: 360px; max-width: calc(100vw - 24px); overflow-wrap: anywhere; padding: 18px 20px 16px; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra-flotante); animation: tour-sube .22s var(--salida); }
.tour-paso--centro { left: 50%; top: 50%; translate: -50% -50%; }
.tour-paso__numero { margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-texto-suave); }
.tour-paso h2 { margin: 0 0 6px; font-size: 1.08rem; line-height: 1.3; }
.tour-paso p#tour-texto { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--color-texto-suave); }
.tour-paso kbd { font-family: var(--fuente); font-size: .78rem; font-weight: 700; color: var(--color-texto); border: 1px solid var(--color-borde); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; }
/* Puntos arriba y botones abajo: así «Saltar · Atrás · Siguiente» nunca se salen de la tarjeta. */
.tour-paso__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px 8px; margin-top: 14px; }
.tour-paso__puntos { display: flex; gap: 5px; flex-basis: 100%; }
.tour-paso__saltar { margin-right: auto; }
.tour-paso__pie .boton { white-space: nowrap; }
.tour-paso__puntos i { width: 6px; height: 6px; border-radius: 99px; background: var(--color-borde); }
.tour-paso__puntos i.si { width: 16px; background: var(--color-principal); }
.tour-paso__saltar { background: none; border: 0; padding: 6px 4px; font: inherit; font-size: .85rem; color: var(--color-texto-suave); cursor: pointer; }
.tour-paso__saltar:hover { color: var(--color-texto); text-decoration: underline; }
.tour-paso__flecha { position: absolute; width: 12px; height: 12px; background: var(--color-superficie); border-left: 1px solid var(--color-borde); border-top: 1px solid var(--color-borde); transform: rotate(45deg); }
.tour-paso--centro .tour-paso__flecha { display: none; }
.tour-entrada { position: fixed; z-index: 92; left: 50%; top: 50%; translate: -50% -50%; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); overflow: hidden auto; background: var(--color-superficie); border-radius: 12px; box-shadow: var(--sombra-flotante); animation: tour-sube .24s var(--salida); }
.tour-entrada__cabeza { position: relative; overflow: hidden; padding: 26px 26px 22px; background: var(--color-principal); color: #fff; }
.tour-entrada__plano { position: absolute; right: -10px; top: -10px; display: grid; grid-template-columns: repeat(7, 18px); gap: 4px; opacity: .5; }
.tour-entrada__plano i { width: 18px; height: 18px; border-radius: 3px; background: rgb(255 255 255 / 10%); }
.tour-entrada__plano i.v { background: var(--marca-pago-fondo); }
.tour-entrada__plano i.r { background: rgb(255 255 255 / 28%); }
.tour-entrada__chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: rgb(255 255 255 / 12%); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tour-entrada__chip b { width: 7px; height: 7px; border-radius: 50%; background: #5ee0a6; }
.tour-entrada h2 { position: relative; max-width: calc(100% - 96px); overflow-wrap: anywhere; margin: 14px 0 4px; font-size: 1.5rem; letter-spacing: -.02em; color: #fff; }
.tour-entrada__cabeza p { position: relative; margin: 0; font-size: .92rem; color: #c9d3de; }
.tour-entrada__lista { list-style: none; margin: 0; padding: 18px 26px 4px; display: grid; gap: 14px; }
.tour-entrada__lista li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.tour-entrada__icono { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radio); background: var(--color-neutro-suave); color: var(--color-principal); }
.tour-entrada__lista strong { display: block; font-size: .93rem; }
.tour-entrada__lista div { min-width: 0; overflow-wrap: anywhere; }
.tour-entrada__lista div span { display: block; font-size: .84rem; line-height: 1.45; color: var(--color-texto-suave); }
.tour-entrada__pie { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 26px 22px; }
@keyframes tour-aparece { from { opacity: 0; } }
@keyframes tour-sube { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 800px) {
  .tour-paso, .tour-paso--centro { left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); translate: none; width: auto; border-radius: 14px; padding: 18px 18px 14px; }
  .tour-paso__flecha { display: none; }
  .tour-entrada { top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; }
  .tour-entrada__pie .boton { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .tour__velo, .tour__foco, .tour-paso, .tour-entrada { animation: none; transition: none; } }

/* ---------- Modo soporte (entrada del Super Admin a una empresa, migración 019) ---------- */
/* Franja fija abajo: quien entra por soporte nunca olvida que está dentro de una empresa ajena. */
.con-modo-soporte { padding-bottom: 64px; }
.modo-soporte {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px;
  background: #7a2e00; color: #fff;
  font-size: .9rem;
}
.modo-soporte__texto { min-width: 0; overflow-wrap: anywhere; }
.modo-soporte__boton { background: #fff; color: #7a2e00; border-color: #fff; font-weight: 700; }
.modo-soporte__boton:hover { background: #ffe9dc; }
@media print { .modo-soporte { display: none; } }
/* El menú lateral (pegado arriba, alto de la pantalla) termina encima de la franja. */
@media (min-width: 801px) { .con-modo-soporte .menu { height: calc(100dvh - 52px); } }

/* Avisos de sumar (migraciones 020 y 021): franjas compactas arriba del contenido, en todas las
   pantallas. La pastilla de la derecha dice cuánto tiempo queda (pago o prueba). */
.avisos-sumar { display: grid; gap: 8px; margin: 0 0 16px; }
.aviso-sumar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 10px; border-radius: 14px;
  background: var(--color-superficie); color: var(--color-texto);
  box-shadow: 0 1px 2px rgb(0 29 61 / 5%), 0 6px 18px rgb(0 29 61 / 5%);
}
.aviso-sumar__icono {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--color-primario-suave); color: var(--color-enlace);
}
.aviso-sumar--alerta .aviso-sumar__icono { background: var(--color-peligro-suave); color: var(--color-peligro); }
.aviso-sumar__texto { flex: 1; min-width: 0; margin: 0; font-size: .92rem; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; }
.aviso-sumar__pastilla {
  flex: none; padding: 4px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; background: var(--color-primario-suave); color: var(--color-enlace);
}
.aviso-sumar--alerta .aviso-sumar__pastilla { background: var(--color-peligro-suave); color: var(--color-peligro); }
.aviso-sumar__cerrar {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 8px; background: transparent; color: var(--color-texto-suave); cursor: pointer;
}
.aviso-sumar__cerrar:hover { background: var(--color-neutro-suave); color: var(--color-texto); }
.aviso-sumar__cta {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 14px;
  border-radius: 999px; background: #1f8f55; color: #fff; font-size: .86rem; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.aviso-sumar__cta:hover { background: #18764a; color: #fff; }
.aviso-sumar__cta:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Pago vencido o en gracia: franja roja llena, imposible de pasar por alto. */
.aviso-sumar--urgente { background: var(--color-peligro); color: #fff; padding: 12px 12px 12px 12px; box-shadow: 0 8px 24px rgb(180 35 24 / 28%); }
.aviso-sumar--urgente .aviso-sumar__texto { font-size: .95rem; }
.aviso-sumar--urgente .aviso-sumar__texto strong { display: block; font-size: 1.02rem; }
.aviso-sumar--urgente .aviso-sumar__icono { background: rgb(255 255 255 / 18%); color: #fff; animation: aviso-latido 2s ease-out infinite; }
.aviso-sumar--urgente .aviso-sumar__pastilla { background: #fff; color: var(--color-peligro); }
.aviso-sumar--urgente .aviso-sumar__cta { background: #fff; color: #14663e; }
.aviso-sumar--urgente .aviso-sumar__cta:hover { background: #eafaf1; color: #14663e; }
@keyframes aviso-latido {
  0% { box-shadow: 0 0 0 0 rgb(255 255 255 / 45%); }
  70%, 100% { box-shadow: 0 0 0 10px rgb(255 255 255 / 0%); }
}
@media (prefers-reduced-motion: reduce) { .aviso-sumar--urgente .aviso-sumar__icono { animation: none; } }
@media (max-width: 600px) {
  .aviso-sumar { flex-wrap: wrap; align-items: flex-start; }
  .aviso-sumar__texto { flex-basis: calc(100% - 46px - 44px); }
  .aviso-sumar__pastilla { margin-left: 46px; }
  .aviso-sumar__cta { margin-left: 46px; }
  .aviso-sumar__pastilla + .aviso-sumar__cta { margin-left: 0; }
}