:root {
  /* Paleta tomada del logo. El azul del logo (#228ECE) tal cual no alcanza
     el contraste mínimo con texto blanco encima, así que botones y enlaces
     usan un tono más profundo de la misma familia; el del logo se reserva
     para acentos (la línea de la pestaña activa, el borde de lo elegido). */
  --azul: #176BA0;
  --azul-hover: #135A87;
  --azul-marca: #228ECE;
  --azul-claro: #EAF4FB;
  /* Colores de la marca Kuadrante (logo): azul marino y dorado. El dorado
     no alcanza contraste para texto sobre blanco; solo para acentos. */
  --marino: #1C2F59;
  --marino-hover: #15233F;
  --dorado: #B59751;
  --verde: #0a7d3c;
  --rojo: #b91c1c;
  --gris-100: #f7f7f8;
  --gris-300: #e2e2e6;
  --gris-600: #6b7280;
  --gris-900: #1a1a1a;
  --radio: 10px;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background: var(--gris-100);
  color: var(--gris-900);
}

.contenedor {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 80px;
}

/* Escritorio: se aprovecha el ancho de la pantalla para que las tablas
   (Pagos, Cartera, Egresos, Proyectos, Configuración) no partan folios,
   fechas ni montos en varios renglones. En celular no cambia nada. Las
   pantallas que son solo un formulario se quedan angostas a propósito: un
   campo de 1,200 px de ancho es más difícil de llenar, no más fácil. */
@media (min-width: 768px) {
  .contenedor { max-width: 1200px; padding: 24px 32px 80px; }
  .contenedor.angosto { max-width: 760px; }
}

/* Mostrar algo solo en celular o solo en escritorio (corte en 768 px). */
@media (min-width: 768px) { .solo-movil { display: none !important; } }
@media (max-width: 767.98px) { .solo-escritorio { display: none !important; } }

.contenedor-angosto {
  max-width: 420px;
  margin: 60px auto;
  padding: 0 16px;
}

.barra-superior {
  /* -webkit-sticky primero: en Safari/WebViews viejos, "position: sticky"
     sin el prefijo se ignora por completo y el navegador ni siquiera
     aplica la línea (la declaración sin prefijo la sobrescribe después en
     los navegadores que ya no lo necesitan). */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Botón flotante para volver arriba en listas largas (Pagos, Egresos,
   Cartera). Vive fuera de .contenedor para no empujar el layout ni
   depender del alto de la página; se muestra/oculta por JS según el
   scroll (ver base.html). */
.btn-subir-arriba {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 30;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--azul);
  color: white;
  border: none;
  font-size: 20px;
  line-height: 44px;
  text-align: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.btn-subir-arriba.visible { display: block; }

header.topbar {
  background: white;
  border-bottom: 1px solid var(--gris-300);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

header.topbar .marca-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Sin min-width:0 un nombre de conjunto largo no se deja encoger y empuja
     el botón "Salir" fuera de la pantalla en un celular angosto. */
  min-width: 0;
  flex: 1 1 auto;
}

header.topbar .marca-texto {
  min-width: 0;
}

header.topbar .logo-icono {
  height: 38px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

header.topbar .marca {
  font-weight: 700;
  color: var(--azul);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.3;
  display: block;
}

header.topbar .conjunto-nombre {
  display: block;
  font-size: 13px;
  color: var(--gris-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

header.topbar .btn { flex: 0 0 auto; }

.login-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.logo-login {
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-bottom: 10px;
}

.etiqueta-modulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gris-600);
  text-transform: uppercase;
}

nav.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  background: white;
  border-bottom: 1px solid var(--gris-300);
  padding: 0 8px;
}

nav.tabs a {
  white-space: nowrap;
  padding: 12px 12px;
  text-decoration: none;
  color: var(--gris-600);
  font-size: 14px;
  border-bottom: 2px solid transparent;
}

.motivo-cancelado { white-space: normal; max-width: 220px; }

/* Botón para mostrar u ocultar la contraseña mientras se escribe. */
.campo-contrasena { position: relative; }
.campo-contrasena input { padding-right: 108px !important; width: 100%; }
.btn-ver-contrasena { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin: 0;
  display: inline-flex; align-items: center; gap: 5px; background: white; color: var(--azul);
  border: 1px solid var(--gris-300); border-radius: 8px; padding: 5px 9px; font-size: 13px; font-weight: 600;
  cursor: pointer; min-height: 32px; }
.btn-ver-contrasena:hover { background: var(--azul-claro); }
.btn-ver-contrasena:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
html.a11y-contraste .btn-ver-contrasena { color: #000 !important; border: 2px solid #000 !important; background: #fff !important; }

.resumen-filtro { margin: 12px 0 0; font-size: 15px; }

/* Comunidad: tarjetas a todo lo ancho, una debajo de otra (también en computadora). */
.comunidad-tarjetas { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 12px; }
.comunidad-tarjetas .card { margin: 0; }
.comunidad-tarjetas .lista-simple li { margin-bottom: 6px; }
.comunidad-tarjetas .dato-votacion { margin-left: 8px; }
@media (max-width: 700px) { .comunidad-tarjetas .dato-votacion { display: block; margin-left: 0; } }

/* Activos del conjunto (6.8 B). */
.activo-fila { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--gris-300); flex-wrap: wrap; }
.activo-fila:first-of-type { border-top: none; }
.activo-datos { flex: 1 1 260px; }
.activo-acciones { display: flex; gap: 14px; align-items: center; }
.activo-foto img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gris-300); }
.activo-notas { font-size: 14px; margin-top: 6px; white-space: pre-line; }
details.mas-datos { margin: 14px 0 6px; border: 1px solid var(--gris-300); border-radius: 8px; padding: 8px 12px; }
details.mas-datos summary { cursor: pointer; font-weight: 600; color: var(--azul); }

/* Tablas de Pagos y Egresos (diseño de Sofía, oct 2026). */
.tabla-movimientos th.centro, .tabla-movimientos td.centro { text-align: center; }
.tabla-movimientos td { vertical-align: top; }
.mov-titulo { font-weight: 500; }
.mov-detalle { font-size: 12px; color: var(--gris-600); line-height: 1.35; }
.mov-motivo { font-size: 12px; color: #555; margin-top: 3px; white-space: normal; max-width: 280px; line-height: 1.35; }
.mov-forma { font-size: 13px; color: #444; margin-top: 2px; }
.mov-archivos a, .mov-archivos span, .mov-opciones a, .mov-opciones form { display: block; margin: 2px 0; }
.mov-archivos a, .mov-opciones a { white-space: nowrap; }
.mov-opciones .enlace-boton { margin: 2px auto 0; text-transform: uppercase; font-weight: 700; letter-spacing: .02em; }
.aviso-modificado { white-space: normal; max-width: 240px; }
.etiqueta-cancelado { display: inline-block; background: #fee2e2; color: #b91c1c; font-size: 12px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.mov-cancelado .mov-tachable { text-decoration: line-through; color: #555; }
.mov-cancelado .mov-archivos a.mov-tachable { color: var(--azul); }
html.a11y-contraste .etiqueta-cancelado { background: #fff; color: #000; border: 2px solid #000; }
/* En el celular, cada movimiento es una tarjeta: fecha y monto arriba, el
   concepto en medio, archivos y opciones abajo. Sin deslizar de lado. */
@media (max-width: 700px) {
  .tabla-movimientos, .tabla-movimientos tbody { display: block; width: 100%; }
  .tabla-movimientos tr:first-child { display: none; }
  .tabla-movimientos tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
    padding: 12px 2px; border-bottom: 1px solid var(--gris-300); }
  .tabla-movimientos td { display: block; padding: 0; border: 0; text-align: left !important; }
  .tabla-movimientos td[colspan] { grid-column: 1 / -1; }
  .tabla-egresos .mov-fecha { grid-area: 1 / 1; color: var(--gris-600); font-size: 13px; }
  .tabla-egresos .mov-monto { grid-area: 1 / 2; text-align: right !important; }
  .tabla-egresos .mov-concepto { grid-area: 2 / 1 / 3 / 3; }
  .tabla-egresos .mov-archivos { grid-area: 3 / 1; }
  .tabla-egresos .mov-opciones { grid-area: 3 / 2; text-align: right !important; }
  .tabla-pagos .mov-folio { grid-area: 1 / 1; font-weight: 600; }
  .tabla-pagos .mov-monto { grid-area: 1 / 2 / 3 / 3; text-align: right !important; }
  .tabla-pagos .mov-prop { grid-area: 2 / 1; font-size: 13px; color: var(--gris-600); }
  .tabla-pagos .mov-fecha { grid-area: 3 / 1; font-size: 13px; color: var(--gris-600); }
  .tabla-pagos .mov-concepto { grid-area: 4 / 1 / 5 / 3; }
  .tabla-pagos .mov-opciones { grid-area: 5 / 1 / 6 / 3; }
  .tabla-movimientos .mov-opciones a, .tabla-movimientos .mov-opciones form,
  .tabla-movimientos .mov-archivos a, .tabla-movimientos .mov-archivos span { display: inline-block; margin: 4px 14px 0 0; }
  .tabla-movimientos .mov-opciones .enlace-boton { margin: 0; }
  .aviso-modificado, .mov-motivo { max-width: none; }
}

/* Panel Maestro. */
fieldset:disabled button { opacity: .45; cursor: not-allowed; }
.tabla-datos th { text-transform: none; font-size: 13px; width: 34%; vertical-align: top; }
.tabla-panel td, .tabla-panel th { padding-left: 12px; }
.aviso-cortesia { color: #9a4a0f; font-weight: 600; }
html.a11y-contraste .aviso-cortesia { color: #000; text-decoration: underline; }
body.panel-maestro .topbar { justify-content: space-between; }

/* 6.7 C: gastos recurrentes. */
#graficas-egresos .grafica-ancha { grid-column: 1 / -1; }
.tabla-scroll { overflow-x: auto; }
.sentido-dinero { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; margin: -4px 0 6px !important; }
.sentido-dinero.entra { color: var(--verde); }
.sentido-dinero.sale { color: var(--rojo); }
html.a11y-contraste .sentido-dinero { color: #000 !important; }
.gasto-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--gris-300); flex-wrap: wrap; }
.gasto-fila:first-of-type { border-top: none; }
.gasto-fila form { flex: 1 1 100%; }
.gasto-datos { flex: 1 1 260px; }
.gasto-acciones { display: flex; gap: 14px; align-items: center; }
.gasto-acciones form { flex: none; }
.lista-categorias { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px; }
.lista-categorias li { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  border: 1px solid var(--gris-300); border-radius: 8px; padding: 6px 10px; }
.lista-categorias .enlace-boton { margin: 0; font-size: 13px; }
.info-i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--azul); color: var(--azul); background: white; font: 700 12px/1 Georgia, serif; font-style: italic;
  cursor: pointer; padding: 0; margin: 0 0 0 6px; vertical-align: middle; }
.info-i:hover, .info-i.activa { background: var(--azul-claro); }
.info-i:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
html.a11y-contraste .info-i { border-color: #000; color: #000; }
.pendiente-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0;
  border-top: 1px solid var(--gris-300); flex-wrap: wrap; }
.pendiente-fila:first-of-type { border-top: none; }
.pendiente-fila .vencido { color: var(--rojo); font-weight: 600; }
html.a11y-contraste .pendiente-fila .vencido { color: #000; text-decoration: underline; }
.aviso-variacion { display: flex; gap: 8px; align-items: flex-start; }
.tabla-comparacion td.sube { color: var(--rojo); font-weight: 600; }
.tabla-comparacion td.baja { color: var(--verde); font-weight: 600; }
html.a11y-contraste .tabla-comparacion td.sube, html.a11y-contraste .tabla-comparacion td.baja { color: #000; }

/* 6.7 A: recuadro propio para confirmar y pedir motivos. */
.dialogo-capa { position: fixed; inset: 0; z-index: 3000; background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialogo-capa[hidden] { display: none; }
html.dialogo-abierto, html.dialogo-abierto body { overflow: hidden; }
.dialogo { background: white; border-radius: var(--radio); max-width: 460px; width: 100%; padding: 22px 22px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25); max-height: calc(100vh - 32px); overflow-y: auto; }
.dialogo h2 { margin: 0 0 8px; font-size: 19px; color: var(--gris-900); }
.dialogo p { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: #333; }
.dialogo textarea { width: 100%; font-size: 16px; }
.dialogo-cuenta { font-size: 13px; color: var(--gris-600); margin: 6px 0 4px; }
.dialogo-cuenta.listo { color: var(--verde); }
.dialogo-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.dialogo-botones button { margin: 0; }
.dialogo-botones button[hidden] { display: none; }
.dialogo .boton-peligro { background: white; color: var(--rojo); border: 2px solid var(--rojo); font-weight: 600; }
.dialogo .boton-peligro:hover { background: #fdecea; color: #7f1410; }
.dialogo button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 520px) {
  .dialogo-capa { align-items: flex-end; padding: 0; }
  .dialogo { border-radius: var(--radio) var(--radio) 0 0; max-height: 90vh; }
  .dialogo-botones { flex-direction: column-reverse; }
  .dialogo-botones button { width: 100%; }
}
html.a11y-contraste .dialogo { border: 3px solid #000; }
html.a11y-contraste .dialogo .boton-peligro { color: #000 !important; border-color: #000 !important; background: #fff !important; }
html.a11y-contraste .dialogo-cuenta, html.a11y-contraste .dialogo-cuenta.listo { color: #000 !important; }

/* 6.7 A: pestañas dentro de una pantalla (Propiedades / Mascotas). */
nav.pestanas { display: flex; gap: 6px; border-bottom: 1px solid var(--gris-300); margin: 0 0 16px; overflow-x: auto; }
nav.pestanas a { display: inline-flex; align-items: center; white-space: nowrap; padding: 10px 14px; text-decoration: none;
  color: var(--gris-600); font-size: 15px; border-bottom: 3px solid transparent; margin-bottom: -1px; }
nav.pestanas a.activa { color: var(--azul); border-bottom-color: var(--azul-marca); font-weight: 600; }
nav.pestanas a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
html.a11y-contraste nav.pestanas a { color: #000 !important; }
html.a11y-contraste nav.pestanas a.activa { border-bottom: 4px solid #000 !important; }

nav.tabs a.activo {
  color: var(--azul);
  border-bottom-color: var(--azul-marca);
  font-weight: 600;
}

h1 { font-size: 22px; margin: 4px 0 16px; }
h2 { font-size: 17px; margin: 24px 0 10px; }

.card {
  background: white;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 14px;
  /* Una tabla ancha (muchas columnas, folios largos, correos largos) se
     desborda en pantalla angosta. En vez de que el texto se corte o se
     salga del recuadro, esta franja scrollea horizontalmente por dentro —
     el contenido nunca se pierde, solo se desliza. */
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.stat { background: white; border: 1px solid var(--gris-300); border-radius: var(--radio); padding: 14px; }
.stat .valor { font-size: 22px; font-weight: 700; }
.stat .etiqueta { font-size: 12px; color: var(--gris-600); margin-top: 2px; }
/* 6.7 A: tarjetas de condonaciones y multas arriba de los filtros de Saldos. */
.grid-registros { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 16px; }
.grid-registros .valor { font-size: 19px; }
.grid-registros .etiqueta { font-size: 13px; }
a.stat-enlace { display: block; text-decoration: none; color: inherit; }
a.stat-enlace:hover { border-color: var(--azul); }
a.stat-enlace:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
a.stat-enlace .ver-lista { font-size: 13px; color: var(--azul); margin-top: 6px; text-decoration: underline; }
html.a11y-contraste a.stat-enlace .ver-lista { color: #000 !important; }
.stat.positivo .valor { color: var(--verde); }
.stat.negativo .valor { color: var(--rojo); }

label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], input[type=search], textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gris-300);
  border-radius: 8px;
  font-size: 15px;
  background: white;
}
textarea { resize: vertical; min-height: 70px; font-family: inherit; font-size: inherit; }

.check { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; }
.check input { width: auto; }
.check label { margin: 0; font-weight: 400; }

button, .btn {
  display: inline-block;
  background: var(--azul);
  color: white;
  border: none;
  padding: 11px 18px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-top: 16px;
}
button:hover, .btn:hover { background: var(--azul-hover); }
button.secundario, .btn.secundario { background: white; color: var(--azul); border: 1px solid var(--azul); }
button.secundario:hover, .btn.secundario:hover { background: var(--azul-claro); }
button.whatsapp:hover, .btn.whatsapp:hover { background: #0a5c53; }
button.whatsapp, .btn.whatsapp { background: #0e7065; }
button.pequeno, .btn.pequeno { padding: 6px 12px; font-size: 13px; margin-top: 0; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--gris-300); }
th { color: var(--gris-600); font-weight: 600; font-size: 12px; text-transform: uppercase; white-space: nowrap; }
/* Un correo o nombre largo en una celda no debe forzar la tabla entera a
   ensancharse más de lo necesario — que se parta en dos líneas primero. */
td { overflow-wrap: break-word; }
/* Lo que nunca debe partirse en dos renglones: folios, fechas y montos. */
td.num, td.nowrap, th.num { white-space: nowrap; word-break: normal; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.ok { background: #dcfce7; color: var(--verde); }
.badge.debe { background: #fee2e2; color: var(--rojo); }
.badge.neutro { background: var(--gris-100); color: var(--gris-600); border: 1px solid var(--gris-300); }
.badge.progreso { background: var(--azul-claro); color: var(--azul); }

.aviso { background: #fff7ed; border: 1px solid #fdba74; border-radius: var(--radio); padding: 12px 14px; margin-bottom: 16px; font-size: 14px; }
.aviso.info { background: var(--azul-claro); border-color: #A9D3EE; }
.aviso.exito { background: #dcfce7; border-color: #86efac; }
.error { color: var(--rojo); font-size: 14px; margin-top: 10px; }

.ayuda { font-size: 12px; color: var(--gris-600); margin-top: 4px; }

a.enlace { color: var(--azul); }

.comprobante-img { width: 100%; max-width: 420px; border: 1px solid var(--gris-300); border-radius: var(--radio); }

footer.pie { text-align: center; font-size: 12px; color: var(--gris-600); padding: 30px 16px; }

/* ---------- Ronda 3 ---------- */

/* Campo de moneda: el signo $ pegado al input, con dos decimales. */
.campo-moneda { display: flex; align-items: stretch; margin-top: 4px; }
.campo-moneda span {
  display: flex; align-items: center; padding: 0 12px;
  background: var(--gris-100); border: 1px solid var(--gris-300); border-right: 0;
  border-radius: var(--radio) 0 0 var(--radio); color: var(--gris-600); font-weight: 600;
}
.campo-moneda input { margin-top: 0; border-radius: 0 var(--radio) var(--radio) 0; flex: 1; }

/* Campo no editable (el número de propiedad). */
.campo-fijo { background: var(--gris-100); color: var(--gris-600); cursor: not-allowed; }

.obligatorio { color: var(--rojo); }

/* Dos campos lado a lado, apilados en pantalla chica. */
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .fila-campos { grid-template-columns: 1fr; } }

/* Ficha de propiedad a la que le faltan datos. */
.ficha-pendiente { border-left: 4px solid #fdba74; }

/* Color como pista visual del saldo: debe vs. a favor. */
.txt-debe { color: var(--rojo); }
.txt-favor { color: var(--verde); }

.aviso.error-aviso { background: #fee2e2; border-color: #fca5a5; }

/* Barra de filtros combinables. */
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.filtros label { margin-top: 0; }
.filtros input, .filtros select { margin-top: 4px; }
.filtros-botones { display: flex; gap: 8px; align-items: center; }
.filtros-botones .btn { margin-top: 0; }

/* Acciones dentro de una tabla (editar / eliminar). */
td.acciones { white-space: nowrap; }
td.acciones form { display: inline; }
.enlace-boton {
  background: none; border: 0; padding: 0; margin: 0 0 0 10px;
  font-size: 14px; cursor: pointer; text-decoration: underline; color: var(--azul);
}
/* Bug de contraste: como `button.peligro` (más abajo) pone fondo rojo
   sólido y tiene más especificidad que el `background: none` de arriba,
   estos enlaces-botón terminaban con fondo rojo oscuro Y texto rojo encima
   — casi ilegible. Aquí se reafirma que este es un link de texto, no un
   botón sólido: sin fondo, con buen contraste (rojo sobre blanco). */
/* El hover genérico de botones pinta fondo azul; un enlace-botón nunca
   lleva fondo, ni al pasar el mouse. */
.enlace-boton:hover { background: none; color: var(--azul-hover); }
.enlace-boton.peligro { color: var(--rojo); background: none; font-weight: 600; }
.enlace-boton.peligro:hover { background: none; color: #7f1410; }

.fila-cancelada { opacity: 0.6; }
.fila-cancelada td:not(:last-child) { text-decoration: line-through; }

.form-inline-editar { background: var(--gris-100); padding: 14px; border-radius: var(--radio); }

/* Encabezado del reporte con logo. */
.encabezado-reporte { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.logo-reporte { height: 46px; width: auto; max-width: 100%; }
.logo-alta { width: 100%; max-width: 420px; height: auto; }
.acciones-reporte .btn, .acciones-reporte button { margin-right: 8px; }

/* Barra de avance de un proyecto. */
.barra { background: var(--gris-100); border-radius: 999px; height: 8px; overflow: hidden; min-width: 90px; }
.barra-llena { background: var(--verde); height: 100%; }

.stat.positivo .valor { color: var(--verde); }
.stat.negativo .valor { color: var(--rojo); }

/* ---------------------------------------------------------------------------
   Saldos: cómo se ve el dinero de una propiedad.

   Regla única de toda la app: la cifra siempre en positivo, sin signo. Un
   "-$500.00" junto a la palabra "a favor" se lee al revés — parece que le
   están quitando dinero al vecino. Lo que dice de qué se trata es la palabra
   y el color: rojo si debe, verde si tiene saldo a favor, y el color normal
   del texto si está al corriente (cero no es ni bueno ni malo, así que no
   lleva color de aviso).
--------------------------------------------------------------------------- */
.saldo-debe { color: #b3261e; }
.saldo-favor { color: #0a7d3c; }
.saldo-cero { color: var(--gris-900); }

.etiqueta-saldo {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px; white-space: nowrap;
}
.etiqueta-saldo.saldo-debe { background: #fdecea; color: #9f1c14; }
.etiqueta-saldo.saldo-favor { background: #e7f6ec; color: #0a5c2e; }
.etiqueta-saldo.saldo-cero { background: var(--gris-100); color: var(--gris-600); box-shadow: inset 0 0 0 1px var(--gris-300); }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Bloque de captura del saldo inicial (tres opciones en vez de un signo) */
.saldo-bloque {
  border: 1px solid #dcdfe4; border-radius: 10px; padding: 14px 16px;
  margin: 16px 0; background: #fcfcfd;
}
.saldo-cab { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 12px; }
.ayuda-inline { font-weight: 400; color: #6b7280; }
.saldo-opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.saldo-opcion {
  border: 1px solid #e5e7eb; border-radius: 8px; padding: 11px 12px;
  font-size: 13px; background: #fff; cursor: pointer; display: block;
  transition: border-color .12s, background .12s;
}
.saldo-opcion:hover { border-color: #A9D3EE; }
.saldo-opcion.activa { border-color: var(--azul-marca); background: var(--azul-claro); }
.saldo-opcion input[type=radio] { margin-right: 7px; }
.saldo-opcion .monto-wrap {
  margin-top: 9px; display: flex; align-items: center; gap: 5px;
  border: 1px solid #d1d5db; border-radius: 7px; background: #fff; padding: 5px 9px;
}
.saldo-opcion .monto-wrap .pre,
.saldo-opcion .monto-wrap .post { font-size: 12.5px; color: #6b7280; flex: 0 0 auto; }
.saldo-opcion .monto-wrap input {
  border: 0; outline: none; background: transparent; width: 100%;
  font-size: 13.5px; padding: 0; margin: 0; min-width: 0;
}
/* Un input deshabilitado se traga el clic y no lo deja llegar a la tarjeta.
   Sin esto, picarle al campo gris —que es lo primero que uno hace— no
   seleccionaría la opción. */
.saldo-opcion .monto-wrap input:disabled { pointer-events: none; color: #c4c8ce; }
.saldo-opcion .monto-wrap:has(input:disabled) { background: #f3f4f6; border-color: #e9ebee; }
.saldo-resumen { margin-top: 12px; font-size: 13px; display: flex; align-items: center; gap: 9px; }

/* ---------------------------------------------------------------------------
   Reporte mensual
--------------------------------------------------------------------------- */
.saldos-par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 0; }
.saldo-caja { border: 2px solid #cbd5e1; border-radius: 12px; padding: 18px 20px; text-align: center; }
.saldo-caja .saldo-etiqueta { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
.saldo-caja.principal { border-color: #0a7d3c; background: #f2faf5; }
.saldo-caja.principal .saldo-cifra { font-size: 30px; font-weight: 700; color: #0a7d3c; letter-spacing: -.02em; }
.saldo-caja.secundaria .saldo-cifra { font-size: 19px; font-weight: 600; color: #374151; }
.pie-saldos { margin: 8px 0 4px; }

table.flujo td { padding: 8px 6px; }
table.flujo tr.sangria td:first-child { padding-left: 22px; color: #4b5563; }
tr.fila-total td {
  border-top: 2px solid #1a1a1a; border-bottom: 0;
  font-weight: 700; padding-top: 10px;
}

.selector-mes select { max-width: 340px; }

@media (max-width: 700px) {
  .saldo-opciones, .saldos-par { grid-template-columns: 1fr; }
}

/* Fichas de propiedad plegables en Configuración: la lista se lee de un
   vistazo y solo se abre la que se va a editar. */
.prop-editable {
  border: 1px solid #e5e7eb; border-radius: 9px; margin-bottom: 9px; background: #fff;
}
.prop-editable > summary {
  cursor: pointer; padding: 11px 14px; font-size: 14px; list-style: none;
  display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
}
.prop-editable > summary::-webkit-details-marker { display: none; }
.prop-editable > summary::before { content: "▸"; color: #9ca3af; }
.prop-editable[open] > summary::before { content: "▾"; }
.prop-editable[open] > summary { border-bottom: 1px solid #eef0f2; }
.prop-editable > form { padding: 14px; }
.prop-editable.ficha-pendiente { border-left: 3px solid #d97706; }
.prop-editable > .desplegable-peligro { margin: 0 14px 14px; padding-top: 12px; }

/* ---------------------------------------------------------------------------
   Modo demostración
--------------------------------------------------------------------------- */
.cinta-demo {
  background: #176BA0; color: #fff; padding: 10px 18px; font-size: 13.5px;
  text-align: center; line-height: 1.5;
}
.cinta-demo strong { font-weight: 700; }
.cinta-demo-ojo {
  display: inline-block; background: rgba(255,255,255,.16);
  padding: 1px 10px; border-radius: 99px; margin-left: 6px; font-weight: 600;
}
.tarjeta-demo { border: 2px solid #176BA0; background: #F3F9FD; }
.tarjeta-demo h2 { margin-top: 0; font-size: 18px; }
table.datos-demo { width: auto; margin: 14px 0; }
table.datos-demo td { border: 0; padding: 4px 18px 4px 0; font-size: 14px; }
table.datos-demo td:first-child { color: #6b7280; }
table.datos-demo code {
  background: #fff; border: 1px solid #d7dce3; padding: 3px 9px;
  border-radius: 6px; font-size: 14px;
}

/* ---------------------------------------------------------------------------
   Zona de peligro: borrar la cuenta.

   Se ve distinta a propósito. Un botón que borra las cuentas de todos los
   vecinos del conjunto no debe parecerse a "Guardar".
--------------------------------------------------------------------------- */
.zona-peligro { border: 1px solid #f3c9c5; }
.zona-peligro h2 { color: #9f1c14; }
.aviso-peligro {
  background: #fdecea; border-left: 3px solid #b3261e; padding: 12px 16px;
  border-radius: 0 8px 8px 0; font-size: 14px; margin: 14px 0;
}
.desplegable-peligro {
  margin-top: 18px; border-top: 1px solid #f0f0f0; padding-top: 14px;
}
.desplegable-peligro > summary {
  cursor: pointer; font-size: 14px; color: #9f1c14; font-weight: 600;
  list-style: none; display: flex; gap: 8px; align-items: center;
}
.desplegable-peligro > summary::-webkit-details-marker { display: none; }
.desplegable-peligro > summary::before { content: "▸"; color: #c98b85; }
.desplegable-peligro[open] > summary::before { content: "▾"; }
.desplegable-peligro > form { margin-top: 14px; }
button.peligro { background: #b3261e; }
button.peligro:hover { background: #9f1c14; }

/* ---------------------------------------------------------------------------
   Ronda 5.5
--------------------------------------------------------------------------- */

/* Varios archivos (egresos): cada uno en su renglón, con su propia ayuda. */
.archivo-campo { margin-top: 12px; }
.archivo-campo label { margin-top: 0; }
.archivos-lista a { margin-right: 10px; white-space: nowrap; }
.falta-recibo { color: #9a5b00; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* Partidas de un pago (un depósito que cubre varios conceptos). */
.partida {
  display: grid; grid-template-columns: 1.1fr 1.3fr 1fr auto; gap: 10px; align-items: end;
  padding: 12px; border: 1px solid var(--gris-300); border-radius: 8px; margin-top: 10px; background: #fcfcfd;
}
.partida label { margin-top: 0; }
.partida .quitar-partida { margin: 0 0 10px; }
/* En escritorio el hueco del proyecto se conserva aunque no aplique, para
   que Monto y Quitar queden alineados renglón con renglón. */
.partida .bloque-proyecto-partida[hidden] { display: block; visibility: hidden; }
@media (max-width: 700px) { .partida .bloque-proyecto-partida[hidden] { display: none; } }
@media (max-width: 700px) { .partida { grid-template-columns: 1fr; } .partida .quitar-partida { margin: 0; } }
.total-partidas { margin-top: 12px; font-size: 15px; }
.total-partidas strong { font-size: 18px; }
.lista-partidas { margin: 0; padding: 0; list-style: none; }
.lista-partidas li + li { margin-top: 4px; }
.lista-partidas .ayuda { display: inline; margin-left: 4px; }

/* Selector de dos o tres opciones excluyentes (versión del reporte,
   destinatarios del correo). */
.selector-opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.selector-opciones label {
  margin: 0; font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--gris-300); border-radius: 8px; padding: 9px 14px; background: #fff; cursor: pointer;
}
.selector-opciones label:has(input:checked) { border-color: var(--azul-marca); background: var(--azul-claro); color: var(--azul); }
.selector-opciones input { width: auto; margin: 0; }

.lista-correos { columns: 2 260px; column-gap: 24px; margin: 10px 0 0; }
.lista-correos .prop-correos { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid #f0f0f2; }
.lista-correos .check { margin: 2px 0; font-size: 13.5px; }
.lista-correos .check label { font-size: 13.5px; }
.lista-correos .sin-correo { font-size: 12.5px; color: var(--gris-600); }

.resumen-cartera { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .resumen-cartera { grid-template-columns: 1fr; } }

.acciones-compartir { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.acciones-compartir .btn, .acciones-compartir button { margin: 0; }
.envio-correo-inline { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.envio-correo-inline input { max-width: 320px; }
.envio-correo-inline button { margin: 0; }

/* Celular: el nombre completo de la plataforma es largo; un poco más chico
   para que quepa en dos renglones y no se coma media pantalla. */
@media (max-width: 767.98px) {
  header.topbar { padding: 10px 12px; }
  header.topbar .marca { font-size: 13px; }
  header.topbar .logo-icono { height: 32px; }
}

/* Proyectos cancelados */
.fila-cancelada td { opacity: 0.6; }
.fila-cancelada td:first-child { opacity: 1; }
.enlace.peligro { color: var(--rojo); }
.enlace.peligro:hover { color: #9f1c14; }

/* --- Planes y pago ------------------------------------------------------- */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.plan { margin-bottom: 0; }
.plan-destacado { border: 2px solid var(--azul); }
.plan-proximo { opacity: .7; }
.plan-etiqueta { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--gris-100, #f1f3f5); color: var(--gris-600, #555); }
.plan-destacado .plan-etiqueta { background: var(--azul-claro); color: var(--azul); }
.plan-precio { font-size: 26px; font-weight: 700; margin: 6px 0 10px; }
.plan-precio span { font-size: 13px; font-weight: 400; color: var(--gris-600, #555); }
.plan-lista { padding-left: 18px; margin: 0 0 14px; line-height: 1.6; font-size: 14px; }

/* En celular la línea del plan y los días de prueba puede ocupar dos
   renglones: es información que el administrador sí necesita ver completa. */
@media (max-width: 600px) {
  header.topbar .conjunto-nombre { white-space: normal; font-size: 12px; line-height: 1.3; }
}

/* --- Configuración agrupada en secciones -------------------------------- */
.config-secciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.config-seccion { display: block; text-decoration: none; color: inherit; margin-bottom: 0; transition: border-color .15s, transform .15s; border: 1px solid var(--gris-300); }
.config-seccion:hover { border-color: var(--azul); transform: translateY(-2px); }
.config-seccion h2 { margin: 0 0 6px; font-size: 17px; color: var(--azul); }
.config-seccion p { margin: 0; font-size: 14px; color: var(--gris-600); line-height: 1.5; }
.volver-config { display: inline-block; margin-bottom: 12px; font-size: 14px; }

/* --- Ficha de propiedad en modo lectura --------------------------------- */
.ficha-lectura { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 18px; margin: 10px 0 14px; }
.ficha-dato { display: flex; flex-direction: column; font-size: 14px; }
.ficha-etiqueta { font-size: 12px; color: var(--gris-600); }

/* --- Pie de página con la marca ----------------------------------------- */
footer.pie { padding: 34px 16px 28px; line-height: 1.45; }
.pie-logo { height: 34px; width: auto; display: block; margin: 0 auto 8px; opacity: .9; }
.pie-titulo { font-size: 15px; font-weight: 700; color: var(--marino); letter-spacing: .04em; }
.pie-marca { font-size: 13px; color: var(--gris-600); }
.pie-credito { font-size: 11px; color: var(--gris-600); opacity: .8; margin-top: 4px; }

/* --- Configuración → Cuotas ------------------------------------------- */
.cuotas-dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.cuotas-dos-columnas > section + section { border-left: 1px solid #e4e4e7; padding-left: 28px; }
@media (max-width: 700px) { .cuotas-dos-columnas > section + section { border-left: 0; padding-left: 0; border-top: 1px solid #e4e4e7; padding-top: 18px; } }
.casillas-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 16px; }
.fila-en-linea { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fila-en-linea .campo-moneda { flex: 1 1 160px; margin: 0; }
hr.separador { border: 0; border-top: 1px solid #e4e4e7; margin: 26px 0 8px; }
.form-extra { display: grid; grid-template-columns: 2fr 1.3fr 1fr auto; gap: 12px; align-items: end; margin-top: 14px; }
@media (max-width: 700px) { .form-extra { grid-template-columns: 1fr; } }
.campo-fijo-monto { background: #eef0f3; border-radius: 8px; padding: 10px 12px; font-weight: 700; }
.ficha-beneficio { background: #f4f6f9; border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }

/* --- Accesibilidad: letra más grande y alto contraste --------------------- */
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-accesibilidad { font-weight: 700; }
.barra-accesibilidad-publica { display: flex; justify-content: flex-end; padding: 10px 16px 0; }
.panel-accesibilidad {
  position: absolute; z-index: 1000; background: white; border: 1px solid var(--gris-300);
  border-radius: var(--radio); box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 12px; width: 240px;
}
.panel-accesibilidad-titulo { font-weight: 700; margin-bottom: 8px; }
.opcion-accesibilidad {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 6px; text-align: left;
  background: white; color: var(--gris-900); border: 2px solid var(--gris-300);
}
.opcion-accesibilidad:hover { background: var(--azul-claro); }
.opcion-accesibilidad[aria-pressed="true"] { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); }
.opcion-accesibilidad[aria-pressed="true"]::after { content: "✓"; margin-left: auto; font-weight: 700; }
.opcion-icono { display: inline-block; min-width: 26px; font-weight: 700; }

/* Letra más grande: agranda toda la página (textos, campos y botones),
   aunque los tamaños estén en píxeles. */
html.a11y-grande body { zoom: 1.2; }
@supports not (zoom: 1) { html.a11y-grande body { font-size: 120%; } }

/* Alto contraste: negro sobre blanco, enlaces y botones muy marcados. */
html.a11y-contraste {
  --azul: #0038a8; --azul-hover: #002a80; --azul-marca: #0038a8; --azul-claro: #ffffff;
  --verde: #005a1e; --rojo: #9b0000;
  --gris-100: #ffffff; --gris-300: #000000; --gris-600: #000000; --gris-900: #000000;
}
html.a11y-contraste body { background: #fff; color: #000; }
html.a11y-contraste .card, html.a11y-contraste .stat, html.a11y-contraste input,
html.a11y-contraste select, html.a11y-contraste textarea { border: 2px solid #000 !important; background: #fff !important; color: #000 !important; }
html.a11y-contraste .ayuda, html.a11y-contraste .etiqueta, html.a11y-contraste th,
html.a11y-contraste .conjunto-nombre, html.a11y-contraste .pie * { color: #000 !important; }
html.a11y-contraste a, html.a11y-contraste .enlace { color: #0038a8 !important; text-decoration: underline !important; }
/* Los enlaces con forma de botón conservan su texto legible: blanco sobre
   el botón azul, azul sobre el botón blanco. */
html.a11y-contraste a.btn { text-decoration: none !important; color: #fff !important; background: #0038a8 !important; }
html.a11y-contraste a.btn.secundario { color: #0038a8 !important; background: #fff !important; }
html.a11y-contraste button, html.a11y-contraste .btn { border: 2px solid #000 !important; }
html.a11y-contraste .aviso { border: 2px solid #000 !important; background: #fff !important; color: #000 !important; }
html.a11y-contraste .saldo-debe { color: #9b0000 !important; }
html.a11y-contraste .saldo-favor { color: #005a1e !important; }
html.a11y-contraste .etiqueta-saldo { border: 2px solid currentColor !important; background: #fff !important; }
html.a11y-contraste :focus-visible { outline: 3px solid #ff9f00 !important; outline-offset: 2px; }
html.a11y-contraste .tabs a.activo { border-bottom: 4px solid #000 !important; color: #000 !important; }

/* --- Firmas del acta de entrega --------------------------------------- */
.firmas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.lienzo-firma { width: 100%; height: 160px; border: 2px dashed var(--gris-300); border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; display: block; }

/* --- Recordatorios, mascotas ------------------------------------------- */
.bloque-recordatorio { border: 1px solid #e4e4e7; border-radius: 10px; padding: 10px 14px; margin: 14px 0; }
.bloque-recordatorio legend { font-weight: 700; padding: 0 6px; }
.lista-mascotas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tarjeta-mascota { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.tarjeta-mascota img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; flex: none; }
.observacion-mascota { background: #fff8e6; border-radius: 6px; padding: 4px 8px; margin: 4px 0; }
.foto-mascota-actual { max-width: 160px; border-radius: 10px; display: block; margin: 6px 0; }
.mascotas-ficha { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.mascota-mini { display: flex; gap: 8px; align-items: center; border: 1px solid #e4e4e7; border-radius: 10px; padding: 6px 10px; }
.mascota-mini img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }

/* Ícono universal de accesibilidad: con texto en computadora, solo el ícono en celular. */
.btn-accesibilidad { display: inline-flex; align-items: center; gap: 6px; }
.icono-accesibilidad { flex: none; vertical-align: middle; }
.panel-accesibilidad-titulo { display: flex; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .topbar .texto-accesibilidad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* --- Portal del vecino y roles ------------------------------------------ */
.proyecto-vecino { border-top: 1px solid #e4e4e7; padding: 10px 0; }
.proyecto-vecino:first-of-type { border-top: 0; }
.barra-avance { background: #e8ecf1; border-radius: 999px; height: 10px; margin: 6px 0; overflow: hidden; }
.barra-avance span { display: block; height: 100%; background: var(--verde, #0a7d3c); }
.etiqueta-plan { font-size: 12px; font-weight: 600; background: var(--azul-claro, #eaf2f8); color: var(--azul, #176BA0); border-radius: 999px; padding: 2px 9px; display: inline-block; }
html.a11y-contraste .etiqueta-plan { border: 2px solid #000; background: #fff !important; color: #000 !important; }

/* --- Buscador, barra de rol y ayuda que ilumina -------------------------- */
.buscador-app { position: relative; flex: 0 1 240px; min-width: 150px; }
.buscador-app input { margin: 0; width: 100%; padding: 7px 12px; font-size: 14px; }
.buscador-resultados { position: absolute; z-index: 1200; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--gris-300); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); overflow: hidden; }
.buscador-resultados a { display: block; padding: 9px 12px; color: var(--gris-900); text-decoration: none; font-size: 14px; }
.buscador-resultados a:hover, .buscador-resultados a:focus { background: var(--azul-claro); color: var(--azul); }
.buscador-vacio { padding: 10px 12px; font-size: 13px; color: var(--gris-600); }
.barra-rol { background: #eef3f8; color: #1f2937; font-size: 13px; padding: 6px 16px; border-top: 1px solid #dde5ee; }
html.a11y-contraste .barra-rol { background: #fff; color: #000; border-top: 2px solid #000; }
.ayuda-resaltado { position: relative; z-index: 9002; box-shadow: 0 0 0 4px #ffb300, 0 0 0 10px rgba(255,179,0,.35); border-radius: 12px; background: #fff; }
html.a11y-contraste .ayuda-resaltado { box-shadow: 0 0 0 4px #000, 0 0 0 10px #ffb300; }
@media (max-width: 860px) { .buscador-app { order: 5; flex-basis: 100%; } }

/* --- Aviso de privacidad y avisos en el portal -------------------------- */
.texto-legal h2 { font-size: 16px; margin: 18px 0 6px; }
.texto-legal ul { margin: 6px 0 6px 18px; }
.texto-legal p, .texto-legal li { line-height: 1.6; }
.comunicado-vecino { border-top: 1px solid #e4e4e7; padding: 8px 0; }
.comunicado-vecino:first-of-type { border-top: 0; }

/* En celular, el nombre del conjunto ocupa su propio renglón: con el buscador
   en el encabezado, si no, los botones se encimaban con el logo. */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .topbar .marca-wrap { flex: 1 1 100%; min-width: 0; }
  .topbar .marca { white-space: normal; }
  .buscador-app { flex: 1 1 100%; order: 9; }
}

/* --- Ronda 6.5 A: multas, votaciones, documentos --------------------------- */
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .fila-2 { grid-template-columns: 1fr; } }
.acciones-linea { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.acciones-linea button { margin: 0; }
.bloque-revision { border-top: 1px solid var(--gris-300); padding-top: 12px; margin-top: 14px; }
.bloque-revision:first-of-type { border-top: 0; margin-top: 0; }
.fila-votacion { padding: 8px 0; border-top: 1px solid var(--gris-300); }
.fila-votacion:first-of-type { border-top: 0; }
.barra-voto { margin: 10px 0; }
.barra-voto-texto { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; margin-bottom: 4px; }
.barra-voto-fondo { height: 10px; border-radius: 5px; background: var(--gris-300); overflow: hidden; }
.barra-voto-relleno { height: 100%; background: var(--azul); border-radius: 5px; }
html.a11y-contraste .barra-voto-fondo { background: #fff; border: 1px solid #000; }
html.a11y-contraste .barra-voto-relleno { background: #000; }
.form-voto { border: 1px solid var(--gris-300); border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.btn-atencion .texto-atencion { margin-left: 4px; }
@media (max-width: 640px) { .btn-atencion .texto-atencion { display: none; } }

/* Ayuda: el bloque del que se habla queda iluminado dentro de un «hueco» del
   oscurecido. El hueco es un elemento aparte, fijo sobre toda la página, así
   que funciona igual con el menú fijo de arriba que con cualquier tarjeta. */
#ayuda-foco { position: fixed; z-index: 9001; pointer-events: none; border-radius: 12px;
  box-shadow: 0 0 0 4px #ffb300, 0 0 0 9999px rgba(0,0,0,.5); transition: all .2s ease; display: none; }
html.a11y-contraste #ayuda-foco { box-shadow: 0 0 0 5px #ffb300, 0 0 0 9999px rgba(0,0,0,.72); }
@media (prefers-reduced-motion: reduce) { #ayuda-foco { transition: none; } }
.acciones-cartera { white-space: nowrap; }
.acciones-cartera .enlace + .enlace { margin-left: 12px; }

/* --- Ronda 6.5 B: planes, mejorar plan y demos ------------------------------ */
.enlace-mejorar { display: inline-block; margin-left: 10px; font-size: 13px; font-weight: 600;
  color: var(--azul); text-decoration: underline; white-space: nowrap; }
.plan-lista .plan-hereda { list-style: none; margin-left: -18px; font-weight: 600; }
.form-demo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.form-demo button { margin: 0; }

/* --- Ronda 6.6: color e ícono por tipo de acción ---------------------------
   El color nunca es la única señal: cada botón lleva además su texto y su
   ícono, porque mucha gente no distingue bien el verde del rojo. */
.ico { vertical-align: -3px; margin-right: 6px; flex: none; }
.btn .ico, button .ico { margin-right: 7px; }
.tabs .ico { margin-right: 5px; }

button.btn-pago, .btn.btn-pago { background: #0a7d3c; }
button.btn-pago:hover, .btn.btn-pago:hover { background: #086530; }
button.btn-egreso, .btn.btn-egreso { background: #b91c1c; }
button.btn-egreso:hover, .btn.btn-egreso:hover { background: #991616; }
button.btn-multa, .btn.btn-multa { background: #9a4a0f; }
button.btn-multa:hover, .btn.btn-multa:hover { background: #7e3c0b; }
.btn-pago, .btn-egreso, .btn-multa { color: #fff; }

/* En alto contraste los tres se ven igual: el ícono y el texto los distinguen. */
html.a11y-contraste button.btn-pago, html.a11y-contraste .btn.btn-pago,
html.a11y-contraste button.btn-egreso, html.a11y-contraste .btn.btn-egreso,
html.a11y-contraste button.btn-multa, html.a11y-contraste .btn.btn-multa {
  background: #000; color: #fff; border: 2px solid #000;
}

/* --- Ronda 6.6: gráficas --------------------------------------------------
   Dibujadas en el servidor. Los colores salen de aquí, así que el modo de alto
   contraste los cambia sin tocar el dibujo. Las cifras van siempre escritas. */
/* 6.7 B: Inicio con las dos gráficas a todo lo ancho, una debajo de otra. */
.graficas-inicio { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 16px 0; }
.graficas-inicio .card { margin: 0; }
.grafica-flujo { min-width: 640px; }
.grafica-flujo .g-cifra { font-size: 14px; }
.grafica-flujo .g-mes { font-size: 14px; }
.grafica-flujo-cel { min-width: 0; }
.grafica-flujo-cel .g-cifra { font-size: 13px; }
.grafica-flujo-cel .g-mes { font-size: 13px; font-weight: 600; fill: #444; }
.grafica-cobranza { height: 48px; min-width: 0; border-radius: 6px; }
.g-ingreso { fill: #0a7d3c; background: #0a7d3c; }
.g-egreso { fill: #b91c1c; background: #b91c1c; }
.g-cobrado { fill: #0a7d3c; background: #0a7d3c; }
.g-falta { fill: #e05252; background: #e05252; }
.g-anterior { background: repeating-linear-gradient(45deg, #7f1d1d 0 4px, #c46a6a 4px 8px); }
.g-rayas-fondo { fill: #c46a6a; }
.g-rayas-linea { fill: #7f1d1d; }
.g-zona { fill: transparent; cursor: pointer; outline: none; }
.g-zona:hover, .g-zona.activa { fill: rgba(23, 107, 160, .10); }
.g-zona:focus-visible { stroke: #176BA0; stroke-width: 3; }
.grafica-cobranza .g-zona:hover, .grafica-cobranza .g-zona.activa { fill: rgba(255, 255, 255, .22); stroke: #1a1a1a; stroke-width: 2; }
.g-pista { margin: 4px 0 0; font-size: 13px; }
.g-tooltip { position: fixed; z-index: 2500; max-width: 300px; background: #1f2937; color: #fff; border-radius: 8px;
  padding: 10px 12px; font-size: 14px; line-height: 1.45; box-shadow: 0 6px 20px rgba(0,0,0,.25); pointer-events: none; }
.g-tooltip[hidden] { display: none; }
.g-tooltip strong { display: block; font-size: 15px; margin-bottom: 2px; }
html.a11y-contraste .g-ingreso, html.a11y-contraste .g-cobrado { fill: #000; background: #000; }
html.a11y-contraste .g-egreso, html.a11y-contraste .g-falta { fill: #fff; stroke: #000; stroke-width: 2; background: #fff; border: 2px solid #000; }
html.a11y-contraste .g-rayas-fondo { fill: #fff; }
html.a11y-contraste .g-rayas-linea { fill: #000; }
html.a11y-contraste .g-anterior { background: repeating-linear-gradient(45deg, #000 0 4px, #fff 4px 8px); }
html.a11y-contraste .grafica-cobranza { border: 2px solid #000; }
html.a11y-contraste .g-tooltip { background: #fff; color: #000; border: 3px solid #000; }
html.a11y-contraste .g-zona:hover, html.a11y-contraste .g-zona.activa { fill: rgba(0,0,0,.08); stroke: #000; stroke-width: 3; }

.graficas-par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
@media (max-width: 820px) { .graficas-par { grid-template-columns: 1fr; } }
.grafica-caja { overflow-x: auto; margin-top: 10px; }
.grafica { width: 100%; height: auto; min-width: 280px; }
.grafica-barra { height: 34px; min-width: 0; }
.grafica-pastel { width: 180px; min-width: 180px; height: 180px; }
.pastel-con-leyenda { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.pastel-con-leyenda .grafica-caja { margin: 0; }
.pastel-con-leyenda .tabla-leyenda { flex: 1 1 220px; }

.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--gris-600, #555); }
.leyenda span { display: inline-flex; align-items: center; }
.g-muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; flex: none; }
.tabla-leyenda { width: 100%; margin-top: 10px; font-size: 14px; }
.tabla-leyenda td { padding: 4px 0; border: 0; }
.tabla-leyenda td:first-child { display: flex; align-items: center; }

/* Colores de las series */
.g-verde { fill: #0a7d3c; background: #0a7d3c; }
.g-rojo { fill: #b91c1c; background: #b91c1c; }
.g-gris { fill: #9aa0a6; background: #9aa0a6; }
.g-vacio { fill: #e8e8ec; stroke: #e8e8ec; background: #e8e8ec; }
.g-eje { stroke: #d9d9e0; stroke-width: 1; }
.g-promedio { stroke: #176BA0; stroke-width: 2; stroke-dasharray: 6 4; }
.g-cifra { font-size: 11px; fill: #444; font-weight: 600; }
.g-mes { font-size: 11px; fill: #777; }
/* Pastel: se dibuja con trazos, así que el color va en stroke */
.g-c1 { stroke: #176BA0; background: #176BA0; }
.g-c2 { stroke: #0a7d3c; background: #0a7d3c; }
.g-c3 { stroke: #9a4a0f; background: #9a4a0f; }
.g-c4 { stroke: #6b3fa0; background: #6b3fa0; }
.g-c5 { stroke: #0e7065; background: #0e7065; }
.g-c6 { stroke: #b91c1c; background: #b91c1c; }
.g-c7 { stroke: #7a7a85; background: #7a7a85; }

/* En alto contraste todo pasa a blanco y negro: la cifra escrita y el nombre
   en la leyenda son los que distinguen cada serie. */
html.a11y-contraste .g-verde, html.a11y-contraste .g-c2 { fill: #000; stroke: #000; background: #000; }
html.a11y-contraste .g-rojo, html.a11y-contraste .g-c1, html.a11y-contraste .g-c3,
html.a11y-contraste .g-c4, html.a11y-contraste .g-c5, html.a11y-contraste .g-c6,
html.a11y-contraste .g-c7 { fill: #000; stroke: #000; background: #000; }
html.a11y-contraste .g-gris, html.a11y-contraste .g-vacio { fill: #fff; stroke: #000; background: #fff; }
html.a11y-contraste .g-cifra, html.a11y-contraste .g-mes { fill: #000; }
html.a11y-contraste .g-eje, html.a11y-contraste .g-promedio { stroke: #000; }
html.a11y-contraste .g-muestra { border: 1px solid #000; }
/* Pastel: separación entre rebanadas, y en alto contraste una textura por
   rebanada (la misma en su cuadrito de la leyenda) más el contorno del aro. */
.g-corte { stroke: #fff; stroke-width: 2; }
.g-textura, .g-aro { display: none; }
.g-aro { fill: none; stroke: #000; stroke-width: 2; }
html.a11y-contraste .g-textura, html.a11y-contraste .g-aro { display: inline; }
html.a11y-contraste .g-corte { stroke: #000; stroke-width: 2.5; }
html.a11y-contraste .g-muestra.g-c1 { background: #000; }
html.a11y-contraste .g-muestra.g-c2 { background: repeating-linear-gradient(45deg, #000 0 2px, #fff 2px 5px); }
html.a11y-contraste .g-muestra.g-c3 { background: radial-gradient(circle, #000 1.6px, #fff 1.8px) 0 0 / 6px 6px; }
html.a11y-contraste .g-muestra.g-c4 { background: linear-gradient(#000 1.4px, transparent 1.4px) 0 2px / 6px 6px,
                                                  linear-gradient(90deg, #000 1.4px, #fff 1.4px) 2px 0 / 6px 6px; }
html.a11y-contraste .g-muestra.g-c5 { background: repeating-linear-gradient(0deg, #000 0 2px, #fff 2px 5px); }
html.a11y-contraste .g-muestra.g-c6 { background: repeating-linear-gradient(90deg, #000 0 2px, #fff 2px 5px); }
html.a11y-contraste .g-muestra.g-c7 { background: #fff; }
html.a11y-contraste .g-muestra { border: 2px solid #000; width: 16px; height: 16px; }

.config-seccion h2 { display: flex; align-items: center; gap: 9px; }
.config-seccion .ico { color: var(--azul); margin: 0; }
html.a11y-contraste .config-seccion .ico { color: #000; }

/* El servidor no sabe el ancho de la pantalla: se dibujan las dos versiones de
   la gráfica (12 meses y 6) y aquí se muestra la que corresponde. */
.solo-celular, .solo-celular-i { display: none; }
@media (max-width: 820px) {
  .solo-escritorio { display: none; }
  .solo-escritorio-i { display: none; }
  .solo-celular { display: block; }
  .solo-celular-i { display: inline; }
}

/* --- Ronda 6.6 B: Configuración reorganizada ------------------------------- */
.lista-simple { margin: 8px 0; padding-left: 18px; }
.lista-simple li { margin-bottom: 8px; }
.texto-pendiente { color: #9a4a0f; }
html.a11y-contraste .texto-pendiente { color: #000; text-decoration: underline; }
.config-seccion h2 .ico { flex: none; }

/* --- Ronda 6.6 C: comprobante de egreso con cámara ------------------------- */
.botones-archivo { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.boton-archivo { position: relative; cursor: pointer; margin: 0; }
.input-oculto { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.archivo-nombre { color: var(--verde); font-weight: 600; min-height: 1em; }

/* --- Ronda 6.6 D: proyectos en tarjetas ------------------------------------ */
.lista-proyectos { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.tarjeta-proyecto { margin: 0; }
.proyecto-cancelado { opacity: .75; }
.proyecto-cabeza { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.proyecto-cabeza h2 { margin: 0 0 6px; font-size: 19px; }
.proyecto-concepto { flex: 1; min-width: 0; }
.tabla-financiamiento { width: auto; font-size: 13px; color: #555; margin: 0 0 4px; }
.tabla-financiamiento td { border: 0; padding: 1px 14px 1px 0; }
.proyecto-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0;
  padding: 12px 0; border-top: 1px solid var(--gris-300); border-bottom: 1px solid var(--gris-300); }
.proyecto-cifras > div { display: flex; flex-direction: column; gap: 2px; }
.etiqueta-cifra { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: .02em; }
.proyecto-cifras strong { font-size: 17px; }
.proyecto-gestion { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 10px; }
.estado-rapido { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.estado-rapido label { margin: 0; font-weight: 600; }
.estado-rapido select, .estado-rapido input { width: auto; margin: 0; }
.estado-rapido button { margin: 0; }
.proyecto-pie { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.proyecto-pie-izq, .proyecto-pie-der { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.resultado-votacion { color: var(--verde); letter-spacing: .03em; }
html.a11y-contraste .resultado-votacion { color: #000; text-decoration: underline; }
@media (max-width: 720px) {
  .proyecto-cifras { grid-template-columns: 1fr 1fr; }
  .proyecto-cabeza { flex-direction: column; }
}
.bitacora-proyecto { list-style: none; padding: 0; margin: 0; }
.bitacora-proyecto li { border-left: 3px solid var(--azul-marca); padding: 4px 0 10px 14px; margin-left: 6px; }
.bitacora-proyecto .ayuda { display: block; }
.bitacora-proyecto img { max-width: 220px; border-radius: 8px; margin-top: 6px; display: block; }

.opciones-financiamiento { display: flex; flex-direction: column; gap: 8px; }
.opcion-financiamiento { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--gris-300);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 400; margin: 0; }
.opcion-financiamiento input { margin-top: 4px; width: auto; }
.opcion-financiamiento .ayuda { display: block; margin-top: 2px; }
.opcion-financiamiento:has(input:checked) { border-color: var(--azul-marca); background: var(--azul-claro); }

/* ---------------------------------------------------------------------------
   Complemento de amenidades (octubre 2026)
   Cada día del calendario dice su estado con texto; el color solo acompaña.
   --------------------------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
fieldset.grupo-campos { border: 1px solid var(--gris-300); border-radius: 8px; padding: 6px 14px 12px; margin: 16px 0 6px; }
fieldset.grupo-campos legend { font-weight: 600; padding: 0 6px; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.dias-semana .check { margin: 4px 0; }
.reglas-texto { white-space: pre-line; background: var(--gris-100); border: 1px solid var(--gris-300); border-radius: 8px; padding: 10px 12px; margin: 6px 0; font-size: 15px; }
.reglas-amenidad h3 { margin: 18px 0 4px; font-size: 16px; }
.lista-condiciones { margin: 6px 0 0; padding-left: 20px; }
.lista-condiciones li { margin-bottom: 3px; }
.amenidad-resumen { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.amenidad-resumen > div { flex: 1 1 240px; }
.reserva-fila { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--gris-300); }
.reserva-fila:first-of-type { border-top: none; }
.reserva-fila > div:first-child { flex: 1 1 260px; }
nav.pestanas-amenidades { margin-bottom: 12px; }

.cal-barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.cal-navegacion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-titulo { font-size: 16px; }
.cal-hoy { margin-left: 4px; }
.cal-vistas { display: inline-flex; border: 1px solid var(--gris-300); border-radius: 8px; overflow: hidden; }
.cal-vistas a { padding: 6px 14px; text-decoration: none; color: var(--gris-900); }
.cal-vistas a.activa { background: var(--azul); color: #fff; font-weight: 600; }

.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dia { border: 1px solid var(--gris-300); border-radius: 8px; padding: 8px; min-height: 120px; background: #fff; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.cal-dia-titulo { font-size: 13px; color: var(--gris-600); }
.cal-dia-titulo strong { color: var(--gris-900); font-size: 16px; }
.cal-es-hoy { border: 2px solid var(--azul-marca); }
.cal-pasado { opacity: .6; }
.cal-reserva { background: var(--azul-claro); border-left: 4px solid var(--azul); border-radius: 4px; padding: 4px 6px; display: flex; flex-direction: column; }
.cal-reserva.cal-pendiente { background: #fff7ed; border-left-color: #9a4a0f; }
.cal-reserva.cal-mia { background: #dcfce7; border-left-color: var(--verde); font-weight: 600; }
.cal-horas { font-weight: 600; }
.cal-estado { font-style: italic; }
.cal-nota { color: var(--gris-600); }
.cal-nota-libre { color: var(--verde); font-weight: 600; }
.cal-nota-bloqueo { color: var(--rojo); font-weight: 600; }
.cal-bloqueado, .cal-cerrado { background: repeating-linear-gradient(45deg, #fff, #fff 6px, var(--gris-100) 6px, var(--gris-100) 12px); }
.cal-apartar { margin-top: auto; font-weight: 600; color: var(--azul); text-decoration: none; }
.cal-apartar:hover, .cal-apartar:focus-visible { text-decoration: underline; }

table.cal-mes { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
table.cal-mes th { font-size: 13px; color: var(--gris-600); font-weight: 600; text-align: center; padding: 2px; }
table.cal-mes td { border: 1px solid var(--gris-300); border-radius: 6px; padding: 0; vertical-align: top; background: #fff; }
table.cal-mes td.cal-fuera { opacity: .45; }
.cal-mes-dia { display: flex; flex-direction: column; gap: 2px; padding: 6px; min-height: 64px; color: var(--gris-900); text-decoration: none; }
.cal-mes-dia:hover, .cal-mes-dia:focus-visible { background: var(--azul-claro); }
.cal-mes-texto { font-size: 12px; color: var(--gris-600); }
td.cal-parcial .cal-mes-texto, td.cal-lleno .cal-mes-texto { color: var(--azul); font-weight: 600; }
td.cal-bloqueado .cal-mes-texto { color: var(--rojo); font-weight: 600; }

@media (max-width: 767.98px) {
  /* En el celular, la semana es una lista: un día debajo de otro. */
  .cal-semana { grid-template-columns: 1fr; }
  .cal-dia { min-height: 0; display: grid; grid-template-columns: 92px 1fr; align-items: start; }
  .cal-dia > *:not(.cal-dia-titulo) { grid-column: 2; }
  .cal-dia-titulo { grid-row: 1 / span 6; }
  .cal-apartar { margin-top: 2px; }
  .cal-mes-dia { min-height: 54px; padding: 4px; }
  .cal-mes-texto { font-size: 11px; }
}

html.a11y-contraste .cal-reserva, html.a11y-contraste .cal-reserva.cal-pendiente, html.a11y-contraste .cal-reserva.cal-mia { background: #fff !important; color: #000 !important; border: 2px solid #000 !important; }
html.a11y-contraste .cal-nota, html.a11y-contraste .cal-mes-texto, html.a11y-contraste .cal-dia-titulo { color: #000 !important; }
html.a11y-contraste .cal-vistas a.activa { background: #000 !important; color: #fff !important; }
html.a11y-contraste .cal-es-hoy { border: 3px solid #000 !important; }
html.a11y-contraste .cal-pasado, html.a11y-contraste table.cal-mes td.cal-fuera { opacity: 1; }
.planes.complementos { grid-template-columns: repeat(auto-fill, minmax(260px, 440px)); }
@media (max-width: 767.98px) {
  .cal-barra { flex-direction: column; align-items: stretch; }
  .cal-navegacion { flex-wrap: nowrap; }
  .cal-titulo { flex: 1; text-align: center; font-size: 15px; }
  .cal-vistas { align-self: flex-start; }
}
/* =========================================================================
   Rediseño Kuadrante — entrega B: barra superior, menú lateral y menú de la
   cuenta. La barra lateral es solo de computadora (768 px o más); en celular
   se quedan las pestañas de arriba hasta la entrega C.
   ========================================================================= */
:root {
  --alto-topbar: 64px;
  --ancho-lateral: 216px;
  --ancho-lateral-plegado: 68px;
  /* Azules de la barra lateral: el texto blanco encima pasa el contraste
     mínimo (4.9 arriba, 7 abajo). */
  --lateral-arriba: #1678A3;
  --lateral-abajo: #125F85;
}
.barra-superior { box-shadow: 0 2px 8px rgba(16, 24, 40, .08); }

/* --- Barra superior ------------------------------------------------------ */
header.topbar-app { background: #fff; padding: 10px 16px; gap: 12px; justify-content: flex-start; }
.marca-logo { flex: 0 0 auto; display: flex; align-items: center; }
.logo-horizontal { height: 30px; width: auto; display: block; }
.topbar-acciones { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
header.topbar-app .btn { margin: 0; }
.btn-ayuda .signo-ayuda { font-weight: 700; margin-right: 5px; }

.menu-cuenta { position: relative; }
.btn-cuenta {
  width: 40px; height: 40px; border-radius: 50%; border: 0; margin: 0 0 0 4px; padding: 0;
  background: var(--azul); color: #fff; font-size: 18px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.btn-cuenta:hover { background: var(--azul-hover); }
.btn-cuenta:focus-visible { outline: 3px solid var(--azul-marca); outline-offset: 2px; }
.menu-cuenta-lista {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 1300; min-width: 240px;
  background: #fff; border: 1px solid var(--gris-300); border-radius: 12px; padding: 6px;
  box-shadow: 0 14px 34px rgba(16, 24, 40, .18);
}
.menu-cuenta-quien { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--gris-300); margin-bottom: 4px; }
.menu-cuenta-quien strong { font-size: 15px; }
.menu-cuenta-quien span { font-size: 13px; color: var(--gris-600); }
.menu-cuenta-lista a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 8px;
  color: var(--gris-900); text-decoration: none; font-size: 15px;
}
.menu-cuenta-lista a .ico { margin: 0; color: var(--azul); }
.menu-cuenta-lista a:hover, .menu-cuenta-lista a:focus-visible { background: var(--azul-claro); outline: none; }
.menu-cuenta-lista a.menu-cuenta-salir { margin-top: 4px; border-top: 1px solid var(--gris-300); border-radius: 0 0 8px 8px; }

/* --- Menú lateral (computadora) ------------------------------------------ */
.lateral { display: none; }
@media (min-width: 768px) {
  header.topbar-app { height: var(--alto-topbar); padding: 0 24px; gap: 20px; flex-wrap: nowrap; }
  .logo-horizontal { height: 36px; }
  header.topbar-app .buscador-app { order: 0; flex: 0 1 420px; min-width: 180px; margin: 0 auto; }
  header.topbar-app .buscador-app input { padding: 9px 14px; }
  .topbar-acciones { margin-left: 0; }
  nav.tabs { display: none; }

  .app-cuerpo { display: flex; align-items: flex-start; }
  .app-principal { flex: 1 1 auto; min-width: 0; }
  .lateral {
    display: flex; flex-direction: column; flex: 0 0 var(--ancho-lateral); width: var(--ancho-lateral);
    position: -webkit-sticky; position: sticky; top: var(--alto-topbar); height: calc(100vh - var(--alto-topbar));
    overflow-x: hidden; overflow-y: auto; padding: 12px 10px 24px; color: #fff;
    background: linear-gradient(180deg, var(--lateral-arriba) 0%, var(--lateral-abajo) 100%);
    transition: width .18s ease, flex-basis .18s ease;
  }
  .lateral-plegar {
    align-self: flex-end; width: 34px; height: 34px; margin: 0 0 4px; padding: 0; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5);
  }
  .lateral-plegar:hover { background: rgba(255, 255, 255, .14); }
  .lateral-plegar .ico { margin: 0; transition: transform .18s ease; }
  .lateral-conjunto { text-align: center; padding: 2px 6px 16px; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .28); }
  .lateral-nombre { font-size: 15px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
  .lateral-plan { margin-top: 10px; font-size: 13px; line-height: 1.6; color: #fff; }
  .lateral-plan .etiqueta-plan { background: rgba(255, 255, 255, .2); color: #fff; }
  .lateral-plan a.enlace-mejorar { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
  .lateral-plan .plan-sep { display: none; }
  .lateral-plan .plan-dato, .lateral-plan a.enlace-mejorar { display: block; margin-top: 4px; }
  .lateral-nav { display: flex; flex-direction: column; gap: 2px; }
  .lateral-nav a {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px;
    border-radius: 10px; color: #fff; text-decoration: none; font-size: 15px; white-space: nowrap;
  }
  .lateral-nav a .ico { margin: 0; flex: none; }
  .lateral-nav a:hover { background: rgba(255, 255, 255, .12); }
  /* La opción en la que estás: fondo más oscuro y una línea dorada a la
     izquierda (el dorado del logo), para no depender solo del tono. */
  .lateral-nav a.activo { background: rgba(6, 36, 54, .4); font-weight: 600; box-shadow: inset 4px 0 0 var(--dorado); }
  .lateral-nav a:focus-visible, .lateral-plegar:focus-visible, .lateral-plan a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* Encogido: solo los íconos; el nombre aparece al pasar el mouse o al
     llegar con el teclado. */
  html.lateral-plegado .lateral { flex-basis: var(--ancho-lateral-plegado); width: var(--ancho-lateral-plegado); padding: 12px 8px; overflow: visible; }
  html.lateral-plegado .lateral-plegar { align-self: center; margin-bottom: 12px; }
  html.lateral-plegado .lateral-plegar .ico { transform: rotate(180deg); }
  html.lateral-plegado .lateral-conjunto { display: none; }
  html.lateral-plegado .lateral-nav a { justify-content: center; padding: 10px 0; }
  html.lateral-plegado .lateral-nav .menu-texto {
    position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); z-index: 60;
    background: var(--gris-900); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2); opacity: 0; pointer-events: none; transition: opacity .12s;
  }
  html.lateral-plegado .lateral-nav a:hover .menu-texto,
  html.lateral-plegado .lateral-nav a:focus-visible .menu-texto { opacity: 1; }
}
/* Pantallas medianas: los botones de arriba quedan solo con su ícono. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  header.topbar-app .texto-accesibilidad, header.topbar-app .texto-ayuda {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  header.topbar-app .signo-ayuda { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lateral, .lateral-plegar .ico { transition: none; }
}

/* --- Celular (hasta la entrega C) ---------------------------------------- */
@media (max-width: 767.98px) {
  header.topbar-app { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .logo-horizontal { height: 26px; }
  header.topbar-app .buscador-app { order: 5; flex: 1 1 100%; min-width: 0; }
  header.topbar-app .btn-accesibilidad, header.topbar-app .btn-ayuda {
    width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; display: inline-flex; align-items: center;
  }
  header.topbar-app .texto-ayuda { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  header.topbar-app .signo-ayuda { margin: 0; font-size: 18px; }
  .plan-movil { padding: 10px 16px 0; font-size: 13px; color: var(--gris-600); line-height: 1.6; }
  .plan-movil a.enlace-mejorar { color: var(--verde); font-weight: 700; }
}

/* --- Alto contraste ------------------------------------------------------ */
html.a11y-contraste .lateral { background: #000 !important; }
html.a11y-contraste .lateral, html.a11y-contraste .lateral * { color: #fff !important; }
html.a11y-contraste .lateral-nav a { text-decoration: none !important; border: 2px solid transparent; }
html.a11y-contraste .lateral-nav a.activo { background: #fff !important; box-shadow: none; }
html.a11y-contraste .lateral-nav a.activo, html.a11y-contraste .lateral-nav a.activo * { color: #000 !important; }
html.a11y-contraste .lateral-nav a:hover { border-color: #fff; }
html.a11y-contraste .lateral-plan a.enlace-mejorar { text-decoration: underline !important; }
html.a11y-contraste .lateral .etiqueta-plan { background: #000 !important; color: #fff !important; border: 2px solid #fff; }
html.a11y-contraste .lateral-plegar { border: 2px solid #fff !important; background: #000 !important; }
html.a11y-contraste.lateral-plegado .lateral-nav .menu-texto { background: #fff !important; color: #000 !important; border: 2px solid #000; }
html.a11y-contraste .btn-cuenta { background: #000 !important; color: #fff !important; }
html.a11y-contraste .menu-cuenta-lista { border: 2px solid #000; }
html.a11y-contraste .menu-cuenta-lista a { color: #000 !important; text-decoration: none !important; }
html.a11y-contraste .menu-cuenta-lista a .ico { color: #000; }
html.a11y-contraste .menu-cuenta-lista a:hover, html.a11y-contraste .menu-cuenta-lista a:focus-visible { background: #fff; outline: 3px solid #ff9f00 !important; }

/* =========================================================================
   Rediseño Kuadrante — entrega C: menú ☰ en celular, pantallas de entrada
   (login, recuperar, demos) y barra pública.
   ========================================================================= */
.btn-menu-movil, .lateral-cerrar { display: none; }

@media (max-width: 767.98px) {
  /* Botón ☰ */
  .btn-menu-movil {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 44px; height: 44px; margin: 0 2px 0 -4px; padding: 0; border: 0; border-radius: 10px;
    background: transparent; color: var(--marino); cursor: pointer;
  }
  .btn-menu-movil:focus-visible { outline: 3px solid var(--azul-marca); outline-offset: 1px; }
  .hamburguesa, .hamburguesa::before, .hamburguesa::after {
    display: block; width: 22px; height: 2.5px; border-radius: 2px; background: currentColor; position: relative;
  }
  .hamburguesa::before, .hamburguesa::after { content: ""; position: absolute; left: 0; }
  .hamburguesa::before { top: -7px; }
  .hamburguesa::after { top: 7px; }

  /* El mismo menú lateral, ahora sale desde la izquierda */
  .lateral {
    display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1400;
    width: min(280px, 86vw); padding: max(12px, env(safe-area-inset-top)) 12px 28px; overflow-y: auto;
    color: #fff; background: linear-gradient(180deg, var(--lateral-arriba) 0%, var(--lateral-abajo) 100%);
    box-shadow: 6px 0 24px rgba(0, 0, 0, .25);
    transform: translateX(-105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s;
  }
  html.menu-abierto .lateral { transform: none; visibility: visible; transition: transform .22s ease; }
  html.menu-abierto body { overflow: hidden; }
  .lateral-fondo { position: fixed; inset: 0; z-index: 1390; background: rgba(8, 20, 32, .5); }
  .lateral-plegar { display: none; }
  .lateral-cerrar {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-end; min-height: 44px; margin: 0 0 6px;
    padding: 8px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer;
    background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55);
  }
  .lateral-cerrar .ico { margin: 0; }
  .lateral-cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .lateral-conjunto { text-align: center; padding: 2px 6px 16px; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .28); }
  .lateral-nombre { font-size: 16px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
  .lateral-plan { margin-top: 10px; font-size: 13px; line-height: 1.6; }
  .lateral-plan .etiqueta-plan { background: rgba(255, 255, 255, .2); color: #fff; }
  .lateral-plan .plan-sep { display: none; }
  .lateral-plan .plan-dato, .lateral-plan a.enlace-mejorar { display: block; margin-top: 4px; }
  .lateral-plan a.enlace-mejorar { color: #fff; font-weight: 700; text-decoration: underline; }
  .lateral-nav { display: flex; flex-direction: column; gap: 2px; }
  .lateral-nav a {
    display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 10px 14px; border-radius: 10px;
    color: #fff; text-decoration: none; font-size: 16px;
  }
  .lateral-nav a .ico { margin: 0; flex: none; }
  .lateral-nav a.activo { background: rgba(6, 36, 54, .4); font-weight: 600; box-shadow: inset 4px 0 0 var(--dorado); }
  .lateral-nav a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  /* Con el menú en ☰ el plan ya va dentro; aquí queda también a la vista. */
  header.topbar-app { gap: 6px; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .lateral, html.menu-abierto .lateral { transition: none; }
}
html.a11y-contraste .lateral-cerrar { border: 2px solid #fff !important; background: #000 !important; }
html.a11y-contraste .btn-menu-movil { color: #000; border: 2px solid #000; }

/* --- Barra de las pantallas sin sesión ----------------------------------- */
.topbar-publica {
  position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; padding: 12px 24px; box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
}
.topbar-publica .btn { margin: 0; }
.btn-crear-cuenta, .btn-entrar-publico {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: 10px;
  font-weight: 700; font-size: 15px; text-decoration: none; color: #fff;
}
.btn-crear-cuenta { background: var(--verde); }
.btn-crear-cuenta:hover { background: #086632; }
.btn-entrar-publico { background: var(--marino); }
.btn-entrar-publico:hover { background: var(--marino-hover); }
@media (max-width: 767.98px) {
  .topbar-publica { padding: 10px 12px; }
  .topbar-publica .logo-horizontal { height: 26px; }
  .topbar-publica .btn-accesibilidad { width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; }
  .topbar-publica .texto-accesibilidad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .btn-crear-cuenta, .btn-entrar-publico { padding: 8px 14px; font-size: 14px; }
}

/* --- Pantallas de entrada: login, recuperar, restablecer, demos ---------- */
.contenedor.contenedor-angosto.entrada-ancho { max-width: none; margin: 0; padding: 0; }
.entrada {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 150px); padding: 56px 16px 80px; background: #F4F5F7;
}
/* El panel azul inclinado del diseño, con la esquina de abajo redondeada. */
.entrada-fondo {
  position: absolute; top: -40px; bottom: 44px; left: 30%; right: -15%;
  background: linear-gradient(135deg, #1784B5 0%, #136B91 100%);
  border-radius: 0 0 0 56px; transform: skewX(-8deg); transform-origin: bottom left;
  box-shadow: -8px 14px 26px rgba(0, 0, 0, .2);
}
.entrada-contenido { position: relative; z-index: 1; width: 100%; max-width: 440px; }
.entrada-contenido-ancho { max-width: 880px; }
.entrada-titulo { color: #fff; text-align: center; font-size: 28px; margin: 0 0 14px; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.card.entrada-tarjeta { border: 0; border-radius: 14px; padding: 20px 22px 22px; margin: 0; box-shadow: 0 14px 34px rgba(8, 30, 50, .22); }
.entrada-tarjeta h2 { font-size: 18px; margin: 0 0 14px; }
.entrada-tarjeta input[type=email], .entrada-tarjeta input[type=password], .entrada-tarjeta input[type=text] {
  border: 1.5px solid #3A6AA8; border-radius: 10px;
}
.entrada-tarjeta label .info-i { margin-left: 4px; }
.entrada-recuperar { display: inline-block; font-size: 13px; margin: -6px 0 14px 2px; }
.btn-entrar {
  display: block; margin: 6px auto 0; min-width: 190px; padding: 11px 28px; border: 0; border-radius: 10px;
  background: var(--marino); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer;
  box-shadow: inset 0 -3px 0 var(--dorado);
}
.btn-entrar:hover { background: var(--marino-hover); }
.btn-entrar:focus-visible { outline: 3px solid var(--azul-marca); outline-offset: 2px; }
.entrada-alta { text-align: center; font-size: 14px; margin: 16px 0 0; }
.entrada-volver { text-align: center; margin: 16px 0 0; font-size: 15px; }
.entrada-volver a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.demos-intro { margin: 0 0 16px; line-height: 1.55; }
.demos-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.demo-plan { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--gris-300); border-radius: 12px; padding: 16px; }
.demo-plan h2 { margin: 0; font-size: 18px; color: var(--marino); }
.demo-plan p { margin: 0; flex: 1; font-size: 14px; line-height: 1.5; color: var(--gris-600); }
.demo-plan form { margin: 0; }
.demo-plan .btn-entrar, .demo-plan button.secundario { width: 100%; min-width: 0; margin: 0; }
.demos-nota { margin: 16px 0 0; }
@media (max-width: 767.98px) {
  .entrada { min-height: auto; padding: 64px 12px 96px; }
  .entrada-fondo { top: 36px; bottom: 44px; left: -10%; right: -10%; border-radius: 0; transform: skewY(-8deg); transform-origin: center; }
  .entrada-titulo { font-size: 24px; }
}
html.a11y-contraste .entrada { background: #fff; }
html.a11y-contraste .entrada-fondo { background: #000; box-shadow: none; }
html.a11y-contraste .entrada-volver a { color: #fff !important; }
html.a11y-contraste .card.entrada-tarjeta { border: 3px solid #000 !important; }

/* --- Pie de las pantallas sin sesión ------------------------------------- */
.pie-publico { background: #fff; border-top: 1px solid var(--gris-300); padding: 14px 16px 18px; }
.pie-by { font-size: 13px; font-style: italic; color: var(--gris-900); }
.pie-omnera { font-size: 20px; font-weight: 700; color: #2F7D3B; letter-spacing: .01em; margin-bottom: 4px; }
.tabla-leyenda td.num + td.num { padding-left: 10px; white-space: nowrap; }

/* 6.9 A — tabla de precios por número de propiedades */
.tabla-precios { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla-precios th, .tabla-precios td { padding: 8px 10px; border-bottom: 1px solid var(--gris-300); text-align: right; }
.tabla-precios th[scope="row"], .tabla-precios thead th:first-child { text-align: left; }
.tabla-precios tr.fila-actual { background: #e8f2fa; font-weight: 700; }
.tabla-precios tr.fila-actual th[scope="row"]::after { content: " · tu conjunto"; font-weight: 400; font-size: 13px; }
.plan-no-admite { border-left: 3px solid var(--gris-300); padding-left: 8px; }
html.a11y-contraste .tabla-precios tr.fila-actual { background: #fff !important; outline: 3px solid #000; }

/* 6.9 B — alta en pasos con el diseño de la entrada */
.entrada-contenido.entrada-contenido-ancho:has(.alta-ancha) { max-width: 1000px; }
.alta-paso { font-size: 14px; font-weight: 700; color: var(--azul); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 12px; }
.alta-resumen { background: #EEF5FB; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.alta-grupo { border: 0; padding: 0; margin: 14px 0 0; }
.alta-grupo legend { font-weight: 700; padding: 0; margin-bottom: 2px; }
.entrada-tarjeta select { border: 1.5px solid #3A6AA8; border-radius: 10px; }
.alta-planes { margin-top: 12px; }
.alta-planes .plan { box-shadow: none; border: 1.5px solid var(--gris-300); }
.alta-comparar { margin-top: 10px; }
.alta-comparar summary { cursor: pointer; color: var(--azul); font-weight: 600; }
html.a11y-contraste .alta-resumen { background: #fff !important; border: 2px solid #000; }
html.a11y-contraste .alta-paso { color: #000 !important; }
.alta-tarjeta form[hidden] { display: none !important; }
.plan-cuentas { font-size: 14px; font-weight: 600; color: var(--azul); margin: -4px 0 8px; }
html.a11y-contraste .plan-cuentas { color: #000 !important; }