/* ══════════════════════════════════════════════════════════════════════════
   HOUZAPP v2 · COMPONENTES
   Botones, tarjetas, formularios, insignias, avisos, tablas y modales.
   Todo se pinta con los tokens: aqui no hay un solo color en crudo.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   MARCA
   El logotipo con su texto. Lo usan la landing, las paginas de entrada y los
   paneles, asi que vive aqui y no en el CSS de una pagina concreta.
   ══════════════════════════════════════════════════════════════════════════ */

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  text-decoration: none;
  color: var(--texto);
  flex-shrink: 0;
}

/* El logo NO es cuadrado: su relacion es 1,22 (132 x 108). Se fija el alto y
   el ancho se calcula solo. Forzarlo a un cuadrado lo achataba. */
.marca__simbolo {
  height: 34px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.marca__texto {
  font-family: var(--fuente-titulo);
  font-size: 1.3rem;
  font-weight: var(--peso-negro);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.marca__texto span {
  color: var(--marca);
}


/* ══════════════════════════════════════════════════════════════════════════
   CABECERA PUBLICA
   La barra de arriba de las paginas abiertas: el logo a la izquierda y los
   botones a la derecha.

   Vivia en inicio.css, y ahi estaba mal: la landing no es la unica que la
   usa. La vitrina publica la escribia igual y salia sin estilos —el logo y
   los botones apilados contra el borde izquierdo, sin barra— porque esa
   pagina no carga la hoja de la landing y no tiene por que cargarla: son
   3.000 lineas de hero, dispositivos y precios que no pinta.

   Aqui va SOLO lo neutro. El menu desplegable (.navegacion, .cabecera__menu)
   se queda en inicio.css: es de la landing, que es la unica con menu.
   ══════════════════════════════════════════════════════════════════════════ */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--e-5);
}

.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecera);
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

/* Solo se despega visualmente cuando la pagina ya se desplazo. */
.cabecera[data-desplazada="si"] {
  border-bottom-color: var(--borde);
  box-shadow: var(--sombra-1);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-6);
  height: var(--alto-cabecera);
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

/* En pantallas angostas el logo y los botones no caben a tamano completo: se
   comprimen en vez de sacrificar ninguno, que son las acciones utiles.

   Se comprimen TODOS los botones de la cabecera, no solo el principal. En la
   landing daba igual —a esa anchura el secundario esta escondido dentro del
   menu— pero la vitrina lleva dos: «Volver al inicio» e «Ingresar», y a 375px
   se salian tres pixeles del viewport. */
@media (max-width: 560px) {
  .contenedor { padding-inline: var(--e-4); }

  .cabecera__interior { gap: var(--e-3); }

  .marca__simbolo { width: 30px; height: 30px; }
  .marca__texto { font-size: 1.05rem; }

  .cabecera__acciones { gap: var(--e-1); }

  .cabecera__acciones .boton {
    min-height: 38px;
    padding: var(--e-2) var(--e-3);
    font-size: var(--t-sm);
    box-shadow: none;
  }
}

/* Mas abajo de 400px ni comprimidos caben los dos con el logo. El nombre de
   la marca se va y queda el simbolo, que sigue llevando al inicio: es lo que
   menos falta hace de los tres. */
@media (max-width: 400px) {
  .cabecera .marca__texto { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   AJUSTES EN LÍNEA
   Una lista de cosas que se encienden y se apagan: a la izquierda qué es y
   qué hace, a la derecha el botón. Es el patrón de los ajustes de un teléfono,
   y se lee sin leerlo porque todo el mundo lo conoce.
   ══════════════════════════════════════════════════════════════════════════ */

.tarjeta-plana {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  overflow: hidden;
}

.linea-ajuste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
}

/* Entre líneas y no alrededor: el borde de la tarjeta ya cierra por fuera. */
.linea-ajuste + .linea-ajuste { border-top: 1px solid var(--borde); }

.linea-ajuste > div { min-width: 0; }

.linea-ajuste strong { display: block; font-size: var(--t-base); }

.linea-ajuste .campo__ayuda { margin-top: 2px; }

.linea-ajuste .boton { flex-shrink: 0; }

/* En pantallas angostas el botón se va abajo y a lo ancho: al lado de un
   texto de dos renglones queda un botón de dos letras que nadie acierta. */
@media (max-width: 480px) {
  .linea-ajuste {
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-3);
  }

  .linea-ajuste .boton { width: 100%; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ELEGIR ENTRE DOS CAMINOS
   Tarjetas con radio, para las decisiones que merecen leerse antes de
   marcarlas: dónde se publica un aviso, cómo se lleva la cuota. Un `<select>`
   con dos opciones esconde justo lo que hay que explicar.
   ══════════════════════════════════════════════════════════════════════════ */

.alcances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e-3);
}

.alcance {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
}

.alcance:has(input:checked) {
  border-color: var(--marca);
  background: var(--marca-suave);
}

.alcance input { margin-top: 3px; flex: none; }
.alcance span { display: grid; gap: 2px; min-width: 0; }
.alcance strong { color: var(--texto); }
.alcance small { color: var(--texto-suave); font-size: var(--t-sm); line-height: 1.45; }


/* ══════════════════════════════════════════════════════════════════════════
   CIERRE
   El bloque con el que termina una pagina publica: un titular centrado, una
   frase y un boton. Lo usan la landing y la vitrina, asi que vive aqui.
   ══════════════════════════════════════════════════════════════════════════ */

.cierre {
  text-align: center;
  padding-block: var(--e-20);
}

.cierre h2 { max-width: 26ch; margin-inline: auto; }

.cierre p {
  margin: var(--e-4) auto var(--e-8);
  color: var(--texto-suave);
  font-size: var(--t-lg);
}


/* ══════════════════════════════════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════════════════════════════════ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--toque-min);
  padding: var(--e-3) var(--e-6);
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  font-family: var(--fuente-titulo);
  font-size: var(--t-base);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transicion-rapida),
              border-color var(--transicion-rapida),
              color var(--transicion-rapida),
              box-shadow var(--transicion),
              transform var(--transicion-rapida);
}

.boton:active:not(:disabled) {
  transform: translateY(1px);
}

.boton:disabled,
.boton[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
}

.boton .icono {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

/* ── Variantes ──────────────────────────────────────────────────────────── */

.boton--principal {
  background: var(--marca);
  color: var(--marca-contraste);
  box-shadow: var(--sombra-marca);
}

.boton--principal:hover {
  background: var(--marca-fuerte);
  color: var(--marca-contraste);
}

.boton--secundario {
  background: var(--superficie);
  color: var(--marca-fuerte);
  border-color: var(--borde-fuerte);
  box-shadow: var(--sombra-1);
}

.boton--secundario:hover {
  border-color: var(--marca);
  color: var(--marca-fuerte);
}

.boton--fantasma {
  background: transparent;
  color: var(--texto-suave);
}

.boton--fantasma:hover {
  background: var(--grafito-100);
  color: var(--texto);
}

.boton--peligro {
  background: var(--peligro);
  color: #fff;
}

.boton--peligro:hover {
  background: var(--peligro-fuerte);
}

/* Sobre fondo oscuro (hero, pie de pagina). */
.boton--claro {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .32);
  backdrop-filter: blur(6px);
}

.boton--claro:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

/* ── Tamanos ────────────────────────────────────────────────────────────── */

.boton--grande {
  min-height: 54px;
  padding: var(--e-4) var(--e-8);
  font-size: var(--t-lg);
  border-radius: var(--radio);
}

.boton--pequeno {
  min-height: 36px;
  padding: var(--e-2) var(--e-4);
  font-size: var(--t-sm);
}

.boton--bloque {
  display: flex;
  width: 100%;
}


/* ══════════════════════════════════════════════════════════════════════════
   TARJETAS VIVAS

   El patron que mejor funciono en la v1 —una rejilla de tarjetas para entrar
   a cada modulo— con dos anadidos que cambian por completo su utilidad:

     · un dato real adentro, no solo el nombre del modulo
     · una barra de estado en el borde izquierdo

   El administrador entra y ve como va su conjunto sin hacer un solo clic.
   ══════════════════════════════════════════════════════════════════════════ */

.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--e-4);
}

.tarjeta {
  --tarjeta-acento: var(--marca);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-5) var(--e-5) var(--e-5) var(--e-6);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--transicion),
              box-shadow var(--transicion),
              border-color var(--transicion);
}

/* Barra de estado del borde izquierdo. */
.tarjeta::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--tarjeta-acento);
  opacity: .85;
  transition: width var(--transicion);
}

/* Halo del color del modulo que aparece al pasar el cursor. */
.tarjeta::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: var(--tarjeta-acento);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--transicion-lenta);
}

.tarjeta:hover,
.tarjeta:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--sombra-2);
  border-color: var(--tarjeta-acento);
}

.tarjeta:hover::before {
  width: 6px;
}

.tarjeta:hover::after {
  opacity: .07;
}

.tarjeta__encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3);
}

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radio-sm);
  background: color-mix(in srgb, var(--tarjeta-acento) 14%, transparent);
  color: var(--tarjeta-acento);
  flex-shrink: 0;
}

.tarjeta__icono svg {
  width: 22px;
  height: 22px;
}

.tarjeta__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-md);
  font-weight: var(--peso-fuerte);
  letter-spacing: -0.01em;
  margin: 0;
}

.tarjeta__descripcion {
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  line-height: 1.45;
  margin: 0;
}

/* ── El dato vivo: lo que diferencia esta tarjeta de la de la v1 ────────── */

.tarjeta__dato {
  font-family: var(--fuente-titulo);
  font-size: var(--t-xl);
  font-weight: var(--peso-negro);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.tarjeta__pie {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  margin-top: auto;
  padding-top: var(--e-1);
}

/* ── Estados de la tarjeta ──────────────────────────────────────────────── */

.tarjeta--dinero    { --tarjeta-acento: var(--dinero); }
.tarjeta--exito     { --tarjeta-acento: var(--exito); }
.tarjeta--alerta    { --tarjeta-acento: var(--alerta); }
.tarjeta--peligro   { --tarjeta-acento: var(--peligro); }
.tarjeta--neutra    { --tarjeta-acento: var(--grafito-400); }

/* Tarjeta destacada: usa el arco del techo del logo. */
.tarjeta--destacada {
  border-radius: var(--radio-arco);
  border-width: 2px;
  border-color: var(--tarjeta-acento);
}

/* Sin novedades: se atenua para que las que si tienen algo resalten. */
.tarjeta--tranquila .tarjeta__icono {
  background: var(--grafito-100);
  color: var(--texto-tenue);
}

.tarjeta--tranquila::before {
  opacity: .25;
}


/* ══════════════════════════════════════════════════════════════════════════
   TEXTO ESCRITO POR ALGUIEN

   Lo que un usuario escribio y se pinta escapado: los hechos de un
   expediente, la clave del wifi, unos descargos. Lleva pre-wrap porque esos
   textos vienen en renglones —"Red: X" y debajo "Clave: Y"— y sin esto se
   pegan todos en un parrafo ilegible.

   Va aqui y no en cada hoja porque ya lo necesitan tres pantallas.
   ══════════════════════════════════════════════════════════════════════════ */

.texto-plano {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════════════════════
   PESTANAS

   Para una pantalla que junta cosas que se miran en momentos distintos: la
   puerta se mira todo el dia, las tarifas una vez al ano y el recaudo a fin
   de mes. Apiladas obligarian a bajar por encima de lo que no se busca.

   Los botones llevan role="tab" y aria-selected: sin eso un lector de
   pantalla anuncia tres botones sueltos y no dice cual esta puesto.
   ══════════════════════════════════════════════════════════════════════════ */

.pestanas {
  display: flex;
  gap: var(--e-1);
  padding: var(--e-1);
  margin-bottom: var(--e-4);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow-x: auto;
}

.pestana {
  flex: 1 1 auto;
  padding: var(--e-2) var(--e-4);
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--texto-suave);
  font: inherit;
  font-weight: var(--peso-medio);
  white-space: nowrap;
  cursor: pointer;
}

.pestana:hover {
  color: var(--texto);
}

.pestana[aria-selected="true"] {
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-1);
}


/* ══════════════════════════════════════════════════════════════════════════
   INSIGNIAS
   ══════════════════════════════════════════════════════════════════════════ */

.insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 0.2rem var(--e-2);
  min-width: 1.5rem;
  border-radius: var(--radio-pilula);

  /* --superficie-2 y no --grafito-100: los grises de la escala son fijos y no
     cambian con el tema, asi que en modo oscuro esta insignia quedaba con
     texto claro sobre un fondo #EFF1F2 —1.85:1, ilegible—. Las variantes
     (--exito, --alerta…) no tenian el problema porque traen su propio par. */
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  justify-content: center;
}

/* Tinta y no `-fuerte`: los tonos fuertes estan ajustados para leerse sobre
   blanco, y sobre su propio fondo suave la marca se quedaba en 4,16:1. */
.insignia--marca   { background: var(--marca-suave);   color: var(--marca-tinta); }
.insignia--exito   { background: var(--exito-suave);   color: var(--exito-tinta); }
.insignia--alerta  { background: var(--alerta-suave);  color: var(--alerta-tinta); }
.insignia--peligro { background: var(--peligro-suave); color: var(--peligro-tinta); }

/* Pulso de una sola vez cuando llega algo nuevo. No parpadea sin fin: eso
   cansa y deja de comunicar. */
.insignia--nueva {
  animation: pulso-insignia var(--rebote) 1;
}

@keyframes pulso-insignia {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

.punto-estado {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grafito-300);
  flex-shrink: 0;
}

.punto-estado--exito   { background: var(--exito); }
.punto-estado--alerta  { background: var(--alerta); }
.punto-estado--peligro { background: var(--peligro); }


/* ══════════════════════════════════════════════════════════════════════════
   FORMULARIOS
   ══════════════════════════════════════════════════════════════════════════ */

/* Disposición de un formulario. Vive aquí y no en el CSS de una página
   porque la usan las pantallas de entrada y también los modales de los
   paneles. Se aceptan los dos nombres para no romper lo ya escrito. */

.campos,
.acceso__campos {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

.campos__fila,
.acceso__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-4);
}

/* Tres campos cortos en una fila: minutos, horas, topes. Sin este modificador
   caen en la rejilla de dos y el tercero se queda solo ocupando media fila. */
.campos__fila--tres { grid-template-columns: repeat(3, 1fr); }

/* Cuando el primer campo solo necesita lo justo —el tipo de documento, un
   indicativo— y el segundo se lleva el resto. En mitad y mitad, el selector
   de «CC / CE / PA» ocupa lo mismo que el numero, que es lo que se escribe. */
.campos__fila--corto-largo { grid-template-columns: minmax(7rem, .55fr) 1fr; }

/* En el telefono todas caen a una columna. Los modificadores se nombran uno a
   uno aunque hoy baste con `.campos__fila`: tienen la misma especificidad y
   ganan por orden, y el orden es justo lo que cambia sin querer al editar. */
@media (max-width: 520px) {
  .campos__fila,
  .acceso__fila,
  .campos__fila--tres,
  .campos__fila--corto-largo { grid-template-columns: 1fr; }
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.campo__etiqueta {
  font-size: var(--t-sm);
  font-weight: var(--peso-fuerte);
  color: var(--texto-suave);
}

.campo__requerido {
  color: var(--peligro);
}

.entrada,
.seleccion,
.area-texto {
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--e-3) var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  font-size: var(--t-md);
  color: var(--texto);
  transition: border-color var(--transicion-rapida),
              box-shadow var(--transicion-rapida);
}

.entrada::placeholder,
.area-texto::placeholder {
  color: var(--texto-tenue);
}

.entrada:focus,
.seleccion:focus,
.area-texto:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: var(--anillo-foco);
}

.entrada:disabled,
.seleccion:disabled,
.area-texto:disabled {
  background: var(--grafito-100);
  color: var(--texto-tenue);
  cursor: not-allowed;
}

.entrada[aria-invalid="true"],
.seleccion[aria-invalid="true"],
.area-texto[aria-invalid="true"] {
  border-color: var(--peligro);
}

.entrada[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--peligro-suave);
}

.campo__error {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--t-sm);
  color: var(--peligro-fuerte);
}

/* --texto-suave y no --texto-tenue: esta clase no lleva decoración, lleva las
   instrucciones del formulario —"la fecha del acta, no la de hoy",
   "obligatorio para cerrarlo"— y con --texto-tenue quedaba en 3,2:1 sobre
   fondo claro, por debajo del mínimo para texto pequeño. */
.campo__ayuda {
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.campo__exito {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--t-sm);
  color: var(--exito-fuerte);
  font-weight: var(--peso-medio);
}

/* Entrada con adorno a la derecha: ojo de contrasena, boton de validar. */
.campo__grupo {
  position: relative;
  display: flex;
  align-items: center;
}

.campo__grupo .entrada {
  padding-right: 3rem;
}

.campo__adorno {
  position: absolute;
  right: var(--e-2);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radio-sm);
  color: var(--texto-tenue);
}

.campo__adorno:hover {
  background: var(--grafito-100);
  color: var(--texto);
}

/* Casilla de verificacion.
   Vive aqui y no en acceso.css porque la usan tanto el registro como los
   formularios del panel, y acceso.css solo lo cargan las pantallas de
   entrada: alli quedaba sin estilo en todos los modales del administrador. */
.casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  font-size: var(--t-base);
  color: var(--texto-suave);
  cursor: pointer;
}

.casilla input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--marca);
  cursor: pointer;
}

.casilla a { font-weight: var(--peso-medio); }


/* ══════════════════════════════════════════════════════════════════════════
   AVISOS
   ══════════════════════════════════════════════════════════════════════════ */

/* El fondo y el texto van con tokens que SÍ cambian con el tema.
   ────────────────────────────────────────────────────────────────────────────
   Antes el fondo era `--grafito-100`, un gris claro fijo, y el texto heredaba
   `--texto`. En tema oscuro eso daba #ECEFF0 sobre #EFF1F2: el aviso seguía
   ahí, ocupando su sitio, con el texto invisible.

   Las variantes de abajo —info, exito, alerta, peligro— nunca lo tuvieron
   porque ponen su propio par de fondo y color. El que fallaba era el aviso a
   secas, que es justo el que se usa para las advertencias sin color. */
.aviso {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-4);
  border-radius: var(--radio-sm);
  border-left: 3px solid var(--grafito-400);
  background: var(--superficie-2);
  color: var(--texto);
  font-size: var(--t-base);
}

.aviso__icono {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.aviso__titulo {
  font-weight: var(--peso-fuerte);
  margin-bottom: var(--e-1);
}

/* La segunda linea de un aviso: la cifra, el detalle, el «son 3 pendientes».
   Vivia en pagos.css, y de ahi la usaban tambien finanzas y mantenimientos
   sin cargar esa hoja: el texto salia del mismo tamano que el titulo. */
.aviso__detalle {
  margin-top: var(--e-1);
  font-size: var(--t-sm);
  opacity: 0.9;
}

/* Igual que las insignias: el ambar sobre su propio fondo daba 3,60:1, y un
   aviso que no se lee bien es peor que no ponerlo. */
.aviso--info    { background: var(--info-suave);    border-color: var(--info);    color: var(--info-tinta); }
.aviso--exito   { background: var(--exito-suave);   border-color: var(--exito);   color: var(--exito-tinta); }
.aviso--alerta  { background: var(--alerta-suave);  border-color: var(--alerta);  color: var(--alerta-tinta); }
.aviso--peligro { background: var(--peligro-suave); border-color: var(--peligro); color: var(--peligro-tinta); }


/* ══════════════════════════════════════════════════════════════════════════
   CARGA

   Esqueletos en vez de ruedas girando: el usuario ve la forma de lo que va a
   llegar y la pagina no salta cuando llega.
   ══════════════════════════════════════════════════════════════════════════ */

.esqueleto {
  background: linear-gradient(
    90deg,
    var(--grafito-100) 25%,
    var(--grafito-200) 37%,
    var(--grafito-100) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--radio-sm);
  animation: brillo-esqueleto 1.4s ease-in-out infinite;
}

@keyframes brillo-esqueleto {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.esqueleto--texto  { height: 0.9rem; margin-bottom: var(--e-2); }
.esqueleto--titulo { height: 1.5rem; width: 60%; }
.esqueleto--tarjeta { height: 148px; }


/* ══════════════════════════════════════════════════════════════════════════
   ESTADO VACIO
   Usa el motivo de nodos del logo en lugar de un icono generico.
   ══════════════════════════════════════════════════════════════════════════ */

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e-3);
  padding: var(--e-16) var(--e-6);
  color: var(--texto-tenue);
}

.vacio__grafico {
  width: 110px;
  height: 110px;
  opacity: .38;
  color: var(--marca);
}

.vacio__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-lg);
  font-weight: var(--peso-fuerte);
  color: var(--texto-suave);
}

.vacio p {
  max-width: 42ch;
  font-size: var(--t-base);
}


/* ══════════════════════════════════════════════════════════════════════════
   TABLAS
   ══════════════════════════════════════════════════════════════════════════ */

.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}

.tabla {
  min-width: 560px;
  font-size: var(--t-base);
}

.tabla th {
  position: sticky;
  top: 0;
  padding: var(--e-3) var(--e-4);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borde);
  text-align: left;
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: var(--letra-etiqueta);

  /* --texto-tenue está calibrado contra --superficie, y aquí el fondo es
     --superficie-2: daba 4.45:1 en claro y 4.16:1 en oscuro, por debajo de AA
     en TODAS las tablas de la aplicación. Con --texto-suave sube por encima y
     además es el tono que corresponde: un encabezado de columna es texto
     estructural, no una nota al margen. */
  color: var(--texto-suave);
  white-space: nowrap;
}

.tabla td {
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--borde);
}

.tabla tbody tr:last-child td {
  border-bottom: none;
}

.tabla tbody tr:hover {
  background: var(--superficie-2);
}

/* Los montos se alinean a la derecha y con cifras de ancho fijo, para que
   las unidades queden una debajo de otra y se puedan comparar de un vistazo. */
.tabla .monto,
.monto {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-medio);
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════════════════
   MODALES
   ══════════════════════════════════════════════════════════════════════════ */

.modal {
  padding: 0;
  border: none;
  border-radius: var(--radio-lg);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-3);
  max-width: min(560px, calc(100vw - 2rem));
  width: 100%;

  /* El navegador centra los <dialog> modales con margin:auto, pero el reset
     `* { margin: 0 }` de base.css lo anula y el modal se pega a la esquina.
     Hay que devolverselo. */
  margin: auto;

  /* Un formulario largo no puede desbordar la pantalla. */
  max-height: calc(100svh - 3rem);
  overflow-y: auto;
}

.modal::backdrop {
  background: rgba(34, 38, 40, .55);
  backdrop-filter: blur(3px);
}

.modal__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-5) var(--e-6);
  border-bottom: 1px solid var(--borde);
}

.modal__titulo {
  font-size: var(--t-lg);
  font-weight: var(--peso-fuerte);
}

.modal__cuerpo {
  padding: var(--e-6);
}

.modal__pie {
  display: flex;
  justify-content: flex-end;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-6) var(--e-6);
}


/* ══════════════════════════════════════════════════════════════════════════
   NOTIFICACIONES FLOTANTES
   ══════════════════════════════════════════════════════════════════════════ */

.avisos-flotantes {
  position: fixed;
  top: var(--e-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-aviso);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  width: min(440px, calc(100vw - 2rem));
  pointer-events: none;
}

.aviso-flotante {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--marca);
  box-shadow: var(--sombra-2);
  font-size: var(--t-base);
  pointer-events: auto;
  animation: entrar-aviso var(--rebote);
}

.aviso-flotante--exito   { border-left-color: var(--exito); }
.aviso-flotante--peligro { border-left-color: var(--peligro); }
.aviso-flotante--alerta  { border-left-color: var(--alerta); }

@keyframes entrar-aviso {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ══════════════════════════════════════════════════════════════════════════
   ETIQUETA DE SECCION
   Heredada de admin-dashboard.html de la v1, que agrupaba las tarjetas por
   area. Funcionaba bien; aqui se estandariza y se lleva tambien al panel del
   residente.
   ══════════════════════════════════════════════════════════════════════════ */

.etiqueta-seccion {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: var(--e-10) 0 var(--e-4);
  font-size: var(--t-xs);
  font-weight: var(--peso-negro);
  text-transform: uppercase;
  letter-spacing: var(--letra-etiqueta);
  color: var(--texto-tenue);
}

.etiqueta-seccion::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borde);
}

.etiqueta-seccion .icono {
  width: 15px;
  height: 15px;
}