/* style.css — Sistema de diseño Áurea CG
   Paleta e identidad tomadas del manual de marca oficial:
     dorado #FBB800 · azul marino #005A7E · turquesa #2FB6C3 · turquesa claro #8CCFD7 · gris claro #E0E9ED
   Tipografía de marca: Avenir unicamente — la jerarquia se logra solo con distintos grosores (weight),
   nunca cambiando de fuente.
   Estilo general: minimalista, bordes redondeados, sombras suaves, mucho aire, animaciones suaves
   en cascada y fondo con blur al abrir algo — inspirado en Apple. */

:root {
  --oro: #fbb800;
  --oro-claro: #ffd35c;
  --oro-oscuro: #c99000;
  --marino: #005a7e;
  --marino-claro: #2fb6c3;
  --marino-oscuro: #003a52;
  --morado-mio: #7c3aed;
  --morado-mio-oscuro: #5b21b6;
  --celeste-claro: #8ccfd7;
  --gris-marca: #e0e9ed;
  --crema: #f6f9fa;
  --blanco: #ffffff;
  --texto: #1c2530;
  --texto-suave: #64727c;
  --borde: #e3e9ec;
  --exito: #1e8e5a;
  --advertencia: #c47f17;
  --peligro: #b3261e;
  --sombra: 0 1px 2px rgba(0, 58, 82, 0.05), 0 10px 28px rgba(0, 58, 82, 0.07);
  --sombra-suave: 0 1px 2px rgba(0, 58, 82, 0.05);
  --radio: 16px;
  --radio-sm: 10px;
  --fuente-base: 'Avenir', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --easing-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente-base);
  font-weight: 400;
  background: var(--crema);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marino-claro); }

.oculto { display: none !important; }

/* --- Animaciones en cascada estilo Apple --- */
@keyframes caeCascada {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes apareceModal {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes apareceFondo {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Elementos que aparecen en cascada al cargar la pantalla: tarjetas del panel,
   filas de tabla, tarjetas de estadistica. Cada uno con un pequeño retraso
   escalonado para que "bajen" uno tras otro, como en las animaciones de Apple. */
.grid-modulos .tarjeta-modulo,
.grid-stats .tarjeta-stat,
.tabla-envoltura tbody tr {
  animation: caeCascada 0.45s var(--easing-apple) both;
}
.grid-modulos .tarjeta-modulo:nth-child(1),  .grid-stats .tarjeta-stat:nth-child(1),  .tabla-envoltura tbody tr:nth-child(1)  { animation-delay: 0.02s; }
.grid-modulos .tarjeta-modulo:nth-child(2),  .grid-stats .tarjeta-stat:nth-child(2),  .tabla-envoltura tbody tr:nth-child(2)  { animation-delay: 0.06s; }
.grid-modulos .tarjeta-modulo:nth-child(3),  .grid-stats .tarjeta-stat:nth-child(3),  .tabla-envoltura tbody tr:nth-child(3)  { animation-delay: 0.10s; }
.grid-modulos .tarjeta-modulo:nth-child(4),  .grid-stats .tarjeta-stat:nth-child(4),  .tabla-envoltura tbody tr:nth-child(4)  { animation-delay: 0.14s; }
.grid-modulos .tarjeta-modulo:nth-child(5),  .grid-stats .tarjeta-stat:nth-child(5),  .tabla-envoltura tbody tr:nth-child(5)  { animation-delay: 0.18s; }
.grid-modulos .tarjeta-modulo:nth-child(6),  .grid-stats .tarjeta-stat:nth-child(6),  .tabla-envoltura tbody tr:nth-child(6)  { animation-delay: 0.22s; }
.grid-modulos .tarjeta-modulo:nth-child(7),  .grid-stats .tarjeta-stat:nth-child(7),  .tabla-envoltura tbody tr:nth-child(7)  { animation-delay: 0.26s; }
.grid-modulos .tarjeta-modulo:nth-child(8),  .grid-stats .tarjeta-stat:nth-child(8),  .tabla-envoltura tbody tr:nth-child(8)  { animation-delay: 0.30s; }
.grid-modulos .tarjeta-modulo:nth-child(9),  .grid-stats .tarjeta-stat:nth-child(9),  .tabla-envoltura tbody tr:nth-child(9)  { animation-delay: 0.34s; }
.grid-modulos .tarjeta-modulo:nth-child(10), .grid-stats .tarjeta-stat:nth-child(10), .tabla-envoltura tbody tr:nth-child(10) { animation-delay: 0.38s; }
.grid-modulos .tarjeta-modulo:nth-child(n+11), .grid-stats .tarjeta-stat:nth-child(n+11), .tabla-envoltura tbody tr:nth-child(n+11) { animation-delay: 0.4s; }

.ficha { animation: caeCascada 0.5s var(--easing-apple) both; }

/* --- Barra superior ---
   En escritorio es un grid de 3 columnas (logo | pestañas | sesion) para que
   las pestañas queden centradas en medio de la barra sin importar cuanto
   espacio ocupen el logo o la sesion a los lados. En celular (ver @media
   abajo) vuelve a ser una barra flex normal con el menu hamburguesa. */
.barra-superior {
  background: var(--marino);
  color: var(--blanco);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 20px;
  padding: 12px 30px;
  box-shadow: var(--sombra);
}
.barra-superior .marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.barra-superior .marca .logo-nav {
  height: 52px;
  width: auto;
  display: block;
}
/* Envuelve el nav y la sesion para poder colapsar los dos juntos dentro del
   menu hamburguesa en celular (ver @media abajo). En escritorio "display:
   contents" hace que este envoltorio sea invisible para el layout: el nav y
   la sesion pasan a ser columnas del grid de arriba como si no existiera. */
.menu-colapsable { display: contents; }
.barra-superior nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-self: center;
}
.barra-superior nav a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.barra-superior nav a:hover, .barra-superior nav a.activo {
  background: rgba(255,255,255,0.12);
  color: var(--blanco);
}
.barra-superior .sesion {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  justify-self: end;
}

/* --- Centro de notificaciones (campana en la barra superior) --- */
.notificaciones { position: relative; display: flex; }
.btn-notificaciones {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: var(--blanco);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  line-height: 1;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.btn-notificaciones:hover { background: rgba(255,255,255,0.12); }
.badge-campana {
  position: static;
  font-size: 0.7rem;
  line-height: 1;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: none;
  box-sizing: border-box;
}
.panel-notificaciones {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-width: 88vw;
  background: var(--blanco);
  color: var(--texto);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  border: 1px solid var(--borde);
  z-index: 50;
  overflow: hidden;
}
.notif-titulo {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--marino-oscuro);
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--borde);
}
.notif-lista { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; }
.notif-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--texto);
  border-bottom: 1px solid var(--borde);
  transition: background 0.15s ease;
}
.notif-fila:last-child { border-bottom: none; }
.notif-fila:hover { background: var(--crema); }
.notif-fila-texto { display: flex; flex-direction: column; gap: 2px; }
.notif-fila-texto strong { font-size: 0.88rem; }
.notif-fila-texto .texto-suave { font-size: 0.76rem; }
.notif-seccion-vacia {
  padding: 10px 16px;
  font-size: 0.82rem;
  color: var(--exito);
  border-bottom: 1px solid var(--borde);
}
.notif-seccion-vacia:last-child { border-bottom: none; }
@media (max-width: 640px) {
  .panel-notificaciones { position: fixed; top: 64px; right: 10px; left: 10px; width: auto; max-width: none; }
}
.btn-salir {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--blanco);
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn-salir:hover { border-color: var(--oro); background: rgba(255,255,255,0.08); }

/* Boton de menu hamburguesa: solo se ve en celular (ver @media abajo), en
   escritorio los accesos ya van visibles en la barra. */
.btn-menu {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--blanco);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
  font-family: inherit;
}
.btn-menu:hover { border-color: var(--oro); background: rgba(255,255,255,0.08); }

/* --- Contenedor principal --- */
.contenedor {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

h1 { font-weight: 800; font-size: 1.9rem; letter-spacing: -0.2px; margin: 0 0 4px; color: var(--marino); }
h2 { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.1px; color: var(--marino); }
.subtitulo { color: var(--texto-suave); margin: 0 0 22px; }

/* --- Tarjetas de modulo (panel principal) --- */
.grid-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.tarjeta-modulo {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px 20px;
  text-align: center;
  text-decoration: none;
  color: var(--texto);
  box-shadow: var(--sombra-suave);
  transition: transform 0.25s var(--easing-apple), box-shadow 0.25s var(--easing-apple);
}
.tarjeta-modulo:hover { transform: translateY(-4px) scale(1.015); box-shadow: var(--sombra); }
.tarjeta-modulo:active { transform: translateY(-1px) scale(0.99); }
.tarjeta-modulo .icono { font-size: 1.8rem; margin-bottom: 10px; }
.tarjeta-modulo .titulo { font-weight: 600; }

/* --- Panel principal: lista agrupada estilo Ajustes de macOS/iOS ---
   En vez de una cuadricula plana de tarjetas, los modulos se agrupan por
   tema en tarjetas blancas con filas divididas, cada una con su icono en
   un cuadro de color (como Ajustes/System Settings de Apple). */
.contenedor-panel h1 { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.4px; }
.panel-grupos { display: grid; gap: 28px; margin-top: 28px; }
.grupo-titulo {
  margin: 0 0 10px 6px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--marino);
}
.lista-panel {
  background: var(--blanco);
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-suave);
  overflow: hidden;
  animation: caeCascada 0.45s var(--easing-apple) both;
}
.grupo-panel:nth-of-type(1) .lista-panel { animation-delay: 0.02s; }
.grupo-panel:nth-of-type(2) .lista-panel { animation-delay: 0.08s; }
.grupo-panel:nth-of-type(3) .lista-panel { animation-delay: 0.14s; }
.grupo-panel:nth-of-type(4) .lista-panel { animation-delay: 0.2s; }
.fila-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  text-decoration: none;
  color: var(--texto);
  border-bottom: 1px solid var(--borde);
  transition: background 0.15s ease;
}
.lista-panel .fila-panel:last-child { border-bottom: none; }
.fila-panel:hover { background: rgba(47, 182, 195, 0.07); }
.fila-panel:active { background: rgba(47, 182, 195, 0.14); }
.fila-panel .icono-cuadro {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--blanco);
  box-shadow: 0 1px 1px rgba(0,0,0,0.12);
}
.fila-panel .fila-texto { flex: 1; font-weight: 500; font-size: 0.95rem; }
.fila-panel .chevron { color: var(--texto-suave); opacity: 0.6; font-size: 1.1rem; }
.badge-conteo {
  background: var(--peligro);
  color: var(--blanco);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

/* --- Ficha de datos (informacion de un registro en formato tarjeta) --- */
.ficha {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  padding: 24px 26px;
}
.ficha-titulo { margin: 0 0 14px; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.1px; color: var(--marino); }
.ficha-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px 40px;
  border-top: 1px solid var(--borde);
  padding-top: 18px;
}
.ficha-etiqueta { color: var(--texto-suave); font-size: 0.8rem; margin-bottom: 3px; }
.ficha-valor { font-weight: 600; font-size: 0.98rem; color: var(--texto); }
.ficha-valor-destacado { color: var(--marino); font-size: 1.15rem; }

/* --- Tarjetas de estadistica --- */
.grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
.tarjeta-stat {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px 20px;
  box-shadow: var(--sombra-suave);
}
.tarjeta-stat .valor { font-size: 1.6rem; font-weight: 700; color: var(--marino); }
.tarjeta-stat .etiqueta { color: var(--texto-suave); font-size: 0.85rem; }

/* --- Tablas --- */
.tabla-envoltura {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: auto;
  box-shadow: var(--sombra-suave);
}
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
thead th {
  text-align: left;
  background: #f2f7f8;
  color: var(--marino);
  font-weight: 600;
  padding: 12px 16px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--borde); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(47, 182, 195, 0.06); }

/* Tabla de Clientes: columnas de ancho fijo (ver colgroup en clientes.html)
   para que quepan en pantalla sin desplazamiento horizontal. Los textos
   largos (correos, nombres de vendedor) se parten dentro de su columna en
   vez de forzarla a crecer, y los botones de acciones se acomodan en varias
   lineas si no caben en una sola. */
/* Tabla de Pagos / cartera vencida: todo en una sola linea por celda (fecha,
   atraso, adeudo, nivel de aviso, etc.) para que las filas queden alineadas y
   simetricas; si no cabe en pantalla, .tabla-envoltura ya trae scroll horizontal. */
.tabla-vencidos td, .tabla-vencidos th { white-space: nowrap; }
.tabla-vencidos td:nth-child(3), .tabla-vencidos th:nth-child(3),
.tabla-vencidos td:nth-child(4), .tabla-vencidos th:nth-child(4),
.tabla-vencidos td:nth-child(5), .tabla-vencidos th:nth-child(5),
.tabla-vencidos td:nth-child(6), .tabla-vencidos th:nth-child(6),
.tabla-vencidos td:nth-child(7), .tabla-vencidos th:nth-child(7) {
  text-align: center;
}
.tabla-vencidos td:last-child { text-align: left; }

.tabla-clientes { table-layout: fixed; }
.tabla-clientes td { overflow-wrap: break-word; }
.tabla-clientes th:first-child, .tabla-clientes td:first-child { padding-left: 28px; }
.tabla-clientes th:last-child, .tabla-clientes td:last-child { border-left: 1px solid var(--borde); padding-left: 28px; }
.tabla-clientes td:last-child { white-space: normal; text-align: center; }
/* "Ver ficha" y "Editar" van lado a lado en dos columnas; el boton de
   portal ocupa su propia linea abajo, abarcando ambas columnas para que
   quede exactamente del mismo ancho que esos dos botones juntos. */
.acciones-cliente { display: grid; grid-template-columns: repeat(2, auto); gap: 6px; justify-content: center; }
.acciones-cliente .btn { white-space: nowrap; margin: 0; text-align: center; }
.acciones-cliente .btn[data-portal], .acciones-cliente .btn[data-eliminar] { grid-column: 1 / -1; }

/* --- Etiquetas de estatus --- */
.chip { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; }
.chip-verde { background: #e5f4ec; color: var(--exito); }
.chip-amarillo { background: #fdf1dc; color: var(--advertencia); }
.chip-rojo { background: #fbe9e7; color: var(--peligro); }
.chip-gris { background: #eef1f2; color: var(--texto-suave); }
.chip-azul { background: #e3f6f8; color: var(--marino); }
.enlace-accion { text-decoration: none; font-size: 1rem; }
.enlace-accion.deshabilitado { opacity: 0.3; pointer-events: none; }

/* --- Formularios --- */
.formulario { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra-suave); }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 14px; }
label { display: block; font-size: 0.82rem; color: var(--texto-suave); margin-bottom: 4px; }
input, select, textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--blanco);
  color: var(--texto);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marino-claro); box-shadow: 0 0 0 3px rgba(47,182,195,0.18); }

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s var(--easing-apple), box-shadow 0.2s var(--easing-apple), transform 0.15s var(--easing-apple);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }
.btn-primario { background: var(--marino); color: var(--blanco); }
.btn-primario:hover { background: var(--marino-oscuro); }
.btn-oro { background: var(--oro); color: var(--marino-oscuro); }
.btn-oro:hover { background: var(--oro-claro); }
.btn-secundario { background: var(--blanco); color: var(--marino); border: 1px solid var(--borde); }
.btn-secundario:hover { border-color: var(--marino-claro); background: #f5fcfd; }
.btn-peligro { background: var(--blanco); color: var(--peligro); border: 1px solid #f0c6c2; }
.btn-peligro:hover { background: #fbe9e7; }
.btn-sm { padding: 6px 14px; font-size: 0.8rem; }

.barra-acciones { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }

/* Encabezado de un fraccionamiento (titulo + descripcion + "Editar
   croquis"): la descripcion suele ser larga y ocupa casi todo el ancho, asi
   que con flex-wrap normal el boton se caia a una linea propia y quedaba
   pegado a la izquierda (space-between con un solo elemento en su linea no
   tiene nada contra que repartir espacio). Aqui el bloque de texto se
   encoge (min-width:0, flex:1) para dejarle su espacio fijo al boton, que
   nunca se envuelve a otra linea y se queda arriba a la derecha. */
.barra-titulo-croquis { flex-wrap: nowrap; align-items: flex-start; }
.barra-titulo-croquis > div:first-child { flex: 1 1 auto; min-width: 0; }
.barra-titulo-croquis > #btn-editar-croquis { flex: 0 0 auto; margin-left: 16px; }

.buscador { max-width: 320px; }
.buscador-ancho { max-width: 560px; width: 100%; }

.resultados-buscador {
  position: absolute; top: calc(100% + 4px); left: 0; width: 100%; max-width: 560px;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-sm);
  box-shadow: var(--sombra-suave); max-height: 320px; overflow-y: auto; z-index: 10;
}
.resultado-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--borde);
}
.resultado-item:last-child { border-bottom: none; }
.resultado-item:hover { background: #f5fcfd; }
.resultado-item .texto-suave { font-size: 0.8rem; }
.resultado-vacio { padding: 14px 16px; color: var(--texto-suave); font-size: 0.85rem; }

.alerta { padding: 12px 18px; border-radius: var(--radio-sm); margin-bottom: 16px; font-size: 0.9rem; }
.alerta-error { background: #fbe9e7; color: var(--peligro); border: 1px solid #f0c6c2; }
.alerta-exito { background: #e5f4ec; color: var(--exito); border: 1px solid #bfe4cf; }
.alerta-info { background: #e3f6f8; color: var(--marino); border: 1px solid #c9edf1; }

.enlace-volver { display: inline-block; margin-bottom: 14px; color: var(--marino); text-decoration: none; font-size: 0.9rem; }
.enlace-volver:hover { color: var(--marino-claro); }

.modal-fondo {
  position: fixed; inset: 0; background: rgba(0,58,82,0.38); backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
  animation: apareceFondo 0.25s var(--easing-apple) both;
}
.modal-caja {
  background: var(--blanco); border-radius: 20px; padding: 28px; width: 100%; max-width: 560px;
  max-height: 88vh; overflow: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.22);
  animation: apareceModal 0.32s var(--easing-apple) both;
}
.modal-caja-ancha { max-width: 640px; }

.ficha-seccion-titulo {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--texto-suave); margin: 20px 0 6px; font-weight: 700;
}
.ficha-seccion-titulo:first-child { margin-top: 0; }
.ficha-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--borde); font-size: 0.9rem; }
.ficha-fila:last-child { border-bottom: none; }
.ficha-etiqueta { color: var(--texto-suave); flex-shrink: 0; }
.ficha-valor { font-weight: 600; text-align: right; }

.pantalla-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 20% 20%, var(--marino-claro) 0%, var(--marino) 55%, var(--marino-oscuro) 100%);
}
.tarjeta-login {
  background: var(--blanco);
  border-radius: 24px;
  padding: 44px 38px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.3);
  text-align: center;
}
.tarjeta-login .logo-login {
  height: 170px;
  width: auto;
  margin: 0 auto 0;
  display: block;
}
.tarjeta-login h1 { text-align: center; }
.tarjeta-login .subtitulo { text-align: center; }
.tarjeta-login form { text-align: left; margin-top: 6px; }
.tarjeta-login .btn { width: 100%; margin-top: 22px; }

.texto-suave { color: var(--texto-suave); font-size: 0.85rem; }
.progreso { background: #eef1f2; border-radius: 999px; height: 8px; overflow: hidden; }
.progreso > div { background: linear-gradient(90deg, var(--oro) 0%, var(--oro-claro) 100%); height: 100%; }

footer.pie { text-align: center; color: var(--texto-suave); font-size: 0.8rem; padding: 30px 0 10px; }

.pie-ayuda-portal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--marino-oscuro);
  color: var(--blanco);
  text-align: center;
  font-size: 0.82rem;
  padding: 10px 16px;
  z-index: 20;
}

/* --- Tablero de disponibilidad de lotes (tiempo real) --- */
.bloque-fraccionamiento { margin-bottom: 30px; }
.bloque-fraccionamiento h2 { margin-bottom: 10px; }
.tablero-lotes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.lote-celda {
  border-radius: var(--radio-sm);
  padding: 10px 8px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.2s var(--easing-apple);
}
.lote-celda:hover { transform: translateY(-2px) scale(1.03); }
.lote-celda .mz { display:block; font-weight: 400; opacity: 0.75; font-size: 0.7rem; margin-bottom: 2px; }
/* Escala de color del croquis: verde=disponible, amarillo=interes (alguien lo
   esta viendo), naranja=apartado/en proceso, rojo=vendido. */
.lote-celda.disponible { background: #e5f4ec; color: var(--exito); border-color: #bfe4cf; }
.lote-celda.interes { background: #fef9e6; color: #92700c; border-color: #fbe6a3; }
.lote-celda.reservado { background: #fff1e0; color: var(--oro-oscuro); border-color: #ffdca6; }
.lote-celda.vendido { background: #fbe9e7; color: var(--peligro); border-color: #f0c6c2; }
.lote-celda.clicable { cursor: pointer; }
.lote-celda.clicable:active { transform: scale(0.96); }
/* Lote(s) que ya son del cliente en su portal: mismo color de estatus, pero
   con borde dorado y una etiqueta chica para que lo ubique de un vistazo
   entre todos los del desarrollo. */
.lote-celda.mio { background: var(--morado-mio); color: var(--blanco); border: 2px solid var(--morado-mio-oscuro); box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25); }
.lote-celda.mio .etiqueta-mio { color: var(--blanco); }

/* Punto de "datos completos" en la tabla de Clientes: verde si tiene todos
   los campos clave capturados, rojo si le falta alguno (ver title del punto
   para el detalle de que falta). */
.punto-datos {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.punto-datos.punto-verde { background: var(--exito); }
.punto-datos.punto-rojo { background: var(--peligro); }
.etiqueta-mio { display: block; font-size: 0.65rem; font-weight: 700; color: var(--morado-mio-oscuro); margin-top: 2px; }
/* Resultado del buscador de arriba (Disponibilidad), mismo criterio que
   .croquis-imagen-lote.atenuado/.resaltado pero para la cuadricula generica. */
.lote-celda.atenuado { opacity: 0.25; filter: grayscale(0.4); }
.lote-celda.resaltado { outline: 2.5px solid var(--oro); box-shadow: 0 0 0 2px rgba(251,184,0,0.35); transform: scale(1.05); z-index: 2; }
/* --- Croquis sobre la imagen real (fraccionamientos > detalle) ---
   La imagen real es muy ancha y baja (aprox. 3:1), asi que en un telefono
   angosto encogerla al 100% del ancho la deja chiquita e imposible de tocar
   lote por lote. .croquis-imagen-scroll es el envoltorio que, solo en
   celular (ver @media), deja que el croquis conserve un tamaño legible y se
   deslice de lado a lado con el dedo en vez de encogerse de mas. */
.croquis-imagen-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.croquis-imagen-contenedor {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-suave);
  line-height: 0;
}
.croquis-imagen-contenedor img { width: 100%; display: block; }

/* Pista de que el croquis se puede deslizar: solo aparece en celular. */
.pista-movil { display: none; margin: 8px 0 0; text-align: center; }
.croquis-imagen-lote {
  position: absolute;
  border-radius: 3px;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--blanco);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  transition: transform 0.15s var(--easing-apple), filter 0.15s ease;
}
.croquis-imagen-lote.clicable { cursor: pointer; }
.croquis-imagen-lote:hover { transform: scale(1.08); z-index: 5; filter: brightness(1.08); }
.croquis-imagen-lote.disponible { background: rgba(30,142,90,0.55); border: 1.5px solid var(--exito); }
.croquis-imagen-lote.interes { background: rgba(211,167,10,0.6); border: 1.5px solid #d3a70a; }
.croquis-imagen-lote.reservado { background: rgba(196,127,23,0.6); border: 1.5px solid var(--oro-oscuro); }
.croquis-imagen-lote.vendido { background: rgba(179,38,30,0.6); border: 1.5px solid var(--peligro); }
/* Lote(s) que ya son del cliente en su portal (ver .lote-celda.mio arriba,
   mismo criterio pero sobre la imagen real). */
.croquis-imagen-lote.mio { background: rgba(124, 58, 237, 0.68); border: 1.5px solid var(--morado-mio-oscuro); outline: 2px solid var(--morado-mio); box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.35), 0 0 8px 2px rgba(124, 58, 237, 0.35); z-index: 2; color: var(--blanco); }
.croquis-imagen-lote.atenuado { opacity: 0.18; filter: grayscale(0.4); }
.croquis-imagen-lote.resaltado {
  opacity: 1;
  outline: 2.5px solid var(--blanco);
  box-shadow: 0 0 0 3px var(--oro), 0 0 14px 3px rgba(0,0,0,0.35);
  z-index: 6;
  transform: scale(1.1);
}

.leyenda-tablero { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 24px; font-size: 0.85rem; color: var(--texto-suave); }
.leyenda-tablero span { display: inline-flex; align-items: center; gap: 6px; }

/* Editor de croquis (public/croquis-editor.html): cajas ya ubicadas sobre el
   plano (mismos colores que .croquis-imagen-lote, con un botón "quitar" en la
   esquina) y la caja punteada que se ve mientras se arrastra una nueva. */
.ce-caja {
  position: absolute;
  border-radius: 3px;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--blanco);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.ce-caja.disponible { background: rgba(30,142,90,0.55); border: 1.5px solid var(--exito); }
.ce-caja.interes { background: rgba(211,167,10,0.6); border: 1.5px solid #d3a70a; }
.ce-caja.reservado { background: rgba(196,127,23,0.6); border: 1.5px solid var(--oro-oscuro); }
.ce-caja.vendido { background: rgba(179,38,30,0.6); border: 1.5px solid var(--peligro); }
.ce-caja .ce-quitar {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: var(--peligro);
  color: var(--blanco);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ce-caja-temporal {
  position: absolute;
  border: 2px dashed var(--oro);
  background: rgba(251, 184, 0, 0.18);
  pointer-events: none;
}
/* Brújula (icono de norte) sobre el croquis con imagen real: un disco
   semitransparente con la aguja apuntando a "N", que no tapa el plano de
   abajo. En el Editor de croquis (.ce-brujula) es arrastrable; en las
   pantallas de solo lectura (.croquis-imagen-brujula) es la misma pieza
   visual pero sin interacción. Tamaño fijo en px (no en %) para que no se
   deforme con el ancho de la imagen. */
.ce-brujula {
  position: absolute;
  width: 56px;
  height: 56px;
  cursor: grab;
  z-index: 8;
  opacity: 0.82;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
  touch-action: none;
}
.ce-brujula:active { cursor: grabbing; }
.croquis-imagen-brujula {
  position: absolute;
  width: 48px;
  height: 48px;
  pointer-events: none;
  opacity: 0.82;
  z-index: 4;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.croquis-imagen-contenedor { user-select: none; }
.leyenda-tablero .punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.punto.disponible { background: var(--exito); }
.punto.interes { background: #d3a70a; }
.punto.reservado { background: var(--oro-oscuro); }
.punto.vendido { background: var(--peligro); }

/* --- Espacio "Vendedores" (panel del Administrador) --- */
.grid-vendedores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.tarjeta-vendedor {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra-suave);
  cursor: pointer;
  transition: transform 0.22s var(--easing-apple), box-shadow 0.22s var(--easing-apple), border-color 0.2s ease;
  text-align: left;
}
.tarjeta-vendedor:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.tarjeta-vendedor.seleccionada { border-color: var(--marino-claro); box-shadow: 0 0 0 3px rgba(47,182,195,0.18); }
.tarjeta-vendedor .nombre { font-weight: 700; font-size: 1.05rem; color: var(--marino); }
.tarjeta-vendedor .rol { color: var(--texto-suave); font-size: 0.8rem; margin-bottom: 12px; }
.tarjeta-vendedor .fila-mini { display: flex; justify-content: space-between; font-size: 0.86rem; padding: 4px 0; border-top: 1px solid var(--borde); }
.tarjeta-vendedor .fila-mini:first-of-type { border-top: none; }
.tarjeta-vendedor .fila-mini .etiqueta { color: var(--texto-suave); }
.tarjeta-vendedor .fila-mini .valor { font-weight: 600; }
.barra-avance { background: #eef1f2; border-radius: 999px; height: 6px; overflow: hidden; margin-top: 4px; }
.barra-avance > div { background: linear-gradient(90deg, var(--marino-claro) 0%, var(--marino) 100%); height: 100%; }

/* --- Tablero de promociones (estilo "avisos") --- */
.grid-promos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.tarjeta-promo {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--oro);
  border-radius: var(--radio);
  padding: 18px 20px;
  box-shadow: var(--sombra-suave);
}
.tarjeta-promo.vencida { border-left-color: var(--texto-suave); opacity: 0.7; }
.tarjeta-promo .titulo-promo { font-weight: 700; color: var(--marino); margin-bottom: 6px; }
.tarjeta-promo .descripcion-promo { font-size: 0.9rem; color: var(--texto); white-space: pre-wrap; margin-bottom: 10px; }
.tarjeta-promo .vigencia-promo { font-size: 0.78rem; color: var(--texto-suave); }
.tarjeta-promo .acciones-promo { display: flex; gap: 8px; margin-top: 12px; }
.btn-mini {
  background: var(--blanco);
  color: var(--marino);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn-mini:hover { border-color: var(--marino-claro); background: #f5fcfd; }

/* --- Documentos de identidad del cliente (portal) --- */
.grid-docs-identidad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.tarjeta-doc-identidad {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px 20px;
  box-shadow: var(--sombra-suave);
}
.tarjeta-doc-identidad .titulo-doc { font-weight: 700; color: var(--marino); margin-bottom: 8px; }
.tarjeta-doc-identidad .motivo-rechazo { font-size: 0.82rem; color: var(--peligro); margin: 8px 0; }
.tarjeta-doc-identidad .fecha-doc { font-size: 0.78rem; color: var(--texto-suave); margin: 6px 0 10px; }
.tarjeta-doc-identidad input[type="file"] { font-size: 0.8rem; margin-bottom: 8px; }

/* --- Toque comodo en pantallas tactiles (iOS/Android): evita el "doble tap"
   con retraso de 300ms y el resaltado gris al tocar botones/enlaces. --- */
.btn, .btn-mini, .btn-salir, a, .fila-panel, .lote-celda, .tarjeta-modulo {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Evita que el scroll horizontal de las tablas se sienta "trabado" al
   deslizar con el dedo en iOS. */
.tabla-envoltura { -webkit-overflow-scrolling: touch; }

/* ============================================================
   RESPONSIVO — celular (iOS y Android), pantallas hasta 720px.
   El resto del sitio ya se reacomoda solo gracias a los grids
   "auto-fit/auto-fill" (tarjetas, tablas con scroll propio, etc.);
   aqui solo se ajusta lo que de verdad se ve distinto en un telefono:
   la barra superior, los margenes generales, los modales, el login
   y el tamaño de texto en campos (para que iOS no haga zoom solo). */
@media (max-width: 720px) {
  .contenedor { padding: 20px 16px 44px; }
  .contenedor-panel h1 { font-size: 1.65rem; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.15rem; }
  .grupo-titulo { font-size: 1.08rem; }

  /* La barra superior queda en una sola fila: logo a la izquierda y el
     boton de menu hamburguesa a la derecha (gracias al space-between de
     .barra-superior). Adentro del menu desplegable va todo junto: los
     accesos (Panel, Clientes, etc.), el usuario en sesion y "Salir". */
  .barra-superior {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 10px 16px;
  }
  .barra-superior .marca .logo-nav { height: 38px; }
  .barra-superior .btn-menu { display: inline-flex; }
  .barra-superior .menu-colapsable {
    display: none;
    flex-direction: column;
    align-items: stretch;
    flex-basis: 100%;
    margin-left: 0;
    gap: 3px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.15);
  }
  .barra-superior .menu-colapsable.abierto { display: flex; }
  .barra-superior .menu-colapsable nav { flex-direction: column; gap: 3px; }
  .barra-superior .menu-colapsable nav a {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.98rem;
  }
  .barra-superior .menu-colapsable .sesion {
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.15);
  }
  .btn-salir { padding: 8px 16px; }

  /* Botones con mas alto para que el dedo los toque sin errores
     (recomendacion de Apple/Android: ~44px de area tactil). */
  .btn { padding: 12px 20px; }
  .btn-sm { padding: 9px 14px; }

  /* Los campos a 16px evitan que Safari en iOS haga zoom automatico
     al enfocarlos (por debajo de 16px, iOS siempre hace zoom). */
  input, select, textarea { font-size: 16px; }

  /* Modales: menos aire para aprovechar la pantalla chica. */
  .modal-fondo { padding: 10px; }
  .modal-caja { padding: 20px; border-radius: 16px; }

  /* Login: un poco de margen lateral para que la tarjeta no toque los
     bordes del telefono, y menos relleno interno. */
  .pantalla-login { padding: 16px; }
  .tarjeta-login { padding: 32px 22px; }

  .barra-acciones { flex-direction: column; align-items: stretch; }
  .barra-acciones > * { width: 100%; }

  /* .barra-titulo-croquis ya se queda en fila con el boton a la derecha
     tambien en celular (regla general mas arriba, fuera de este @media). */
  .barra-titulo-croquis > div:first-child { width: auto; }
  .barra-titulo-croquis > #btn-editar-croquis { width: auto; }

  .buscador { max-width: 100%; }

  /* Croquis con imagen real: se mantiene a un ancho legible (no se encoge
     con la pantalla) y se desliza horizontalmente; los lotes y sus textos
     se ven un poco mas grandes para tocarlos bien con el dedo. */
  .croquis-imagen-contenedor { min-width: 780px; }
  .pista-movil { display: block; }
  .croquis-imagen-lote { font-size: 0.68rem; }
  .leyenda-tablero { font-size: 0.8rem; gap: 12px; }
}