/* ══════════════════════════════════════════════════════════════════════════
   HOUZAPP v2 · PANELES
   Armazón de las páginas internas: barra superior, encabezado de página,
   cifras, checklist de puesta en marcha y rejilla de módulos.
   ══════════════════════════════════════════════════════════════════════════ */

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


/* ══════════════════════════════════════════════════════════════════════════
   BARRA SUPERIOR
   ══════════════════════════════════════════════════════════════════════════ */

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

.barra__interior {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  height: var(--alto-cabecera);
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--e-5);
}

.barra__volver {
  display: grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  margin-left: calc(var(--e-3) * -1);
  border-radius: var(--radio-sm);
  color: var(--texto-suave);
}

.barra__volver:hover { background: var(--grafito-100); color: var(--texto); }
.barra__volver svg { width: 20px; height: 20px; }

.barra__conjunto {
  flex: 1;
  min-width: 0;
  padding-left: var(--e-4);
  border-left: 1px solid var(--borde);
}

.barra__conjunto-nombre {
  display: block;
  font-size: var(--t-base);
  font-weight: var(--peso-fuerte);
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra__acciones {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.barra__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--marca);
  color: var(--marca-contraste);
  font-size: var(--t-sm);
  font-weight: var(--peso-negro);
  letter-spacing: 0.02em;
}

.barra__avatar:hover { background: var(--marca-fuerte); }

@media (max-width: 620px) {
  .barra__marca-texto { display: none; }
  .barra__conjunto { padding-left: var(--e-3); }
}

/* ── Banda de cuenta demo ───────────────────────────────────────────────── */

.barra__demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-2) var(--e-5);
  background: var(--alerta-suave);
  border-top: 1px solid color-mix(in srgb, var(--alerta) 32%, transparent);
  font-size: var(--t-sm);
  color: var(--alerta-fuerte);
}

.barra__demo a {
  color: var(--alerta-fuerte);
  font-weight: var(--peso-fuerte);
  text-underline-offset: 3px;
}

.barra__demo--urgente {
  background: var(--peligro-suave);
  border-top-color: color-mix(in srgb, var(--peligro) 32%, transparent);
  color: var(--peligro-fuerte);
}

.barra__demo--urgente a { color: var(--peligro-fuerte); }

/* ── Menú del usuario ───────────────────────────────────────────────────── */

.menu-usuario {
  position: absolute;
  top: calc(100% + var(--e-2));
  right: 0;
  z-index: var(--z-menu);
  min-width: 15rem;
  padding: var(--e-2);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
}

.menu-usuario[hidden] { display: none; }

.menu-usuario__quien {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  align-items: flex-start;
  padding: var(--e-3);
  margin-bottom: var(--e-2);
  border-bottom: 1px solid var(--borde);
}

.menu-usuario__quien strong { font-size: var(--t-base); }
.menu-usuario__quien small { color: var(--texto-tenue); }
.menu-usuario__quien .insignia { margin-top: var(--e-1); }

.menu-usuario__enlace {
  display: block;
  width: 100%;
  padding: var(--e-3);
  border-radius: var(--radio-sm);
  text-align: left;
  font-size: var(--t-base);
  color: var(--texto);
  text-decoration: none;
}

.menu-usuario__enlace:hover { background: var(--grafito-100); color: var(--texto); }
.menu-usuario__salir { color: var(--peligro-fuerte); }
.menu-usuario__salir:hover { background: var(--peligro-suave); color: var(--peligro-fuerte); }


/* ══════════════════════════════════════════════════════════════════════════
   ENCABEZADO DE PÁGINA
   ══════════════════════════════════════════════════════════════════════════ */

.encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: var(--e-8);
}

.encabezado h1 {
  font-size: var(--t-2xl);
  margin-bottom: var(--e-1);
}

.encabezado p {
  color: var(--texto-suave);
  font-size: var(--t-base);
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   CIFRAS
   Lo primero que ve el administrador: cómo va su propiedad horizontal.
   ══════════════════════════════════════════════════════════════════════════ */

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e-4);
  margin-bottom: var(--e-10);
}

.cifra {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  border-left: 3px solid var(--c, var(--marca));
}

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

.cifra__etiqueta {
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}

.cifra__nota {
  margin-top: var(--e-1);
  font-size: var(--t-xs);
  color: var(--texto-suave);
}


/* ══════════════════════════════════════════════════════════════════════════
   PUESTA EN MARCHA
   Reduce el abandono en los primeros días, que es donde se pierde al cliente.
   ══════════════════════════════════════════════════════════════════════════ */

.marcha {
  padding: var(--e-6);
  margin-bottom: var(--e-10);
  background: var(--superficie);
  border: 1px solid var(--borde-marca);
  border-radius: var(--radio-arco);
}

.marcha__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

.marcha__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-lg);
  font-weight: var(--peso-negro);
}

.marcha__avance {
  font-size: var(--t-sm);
  font-weight: var(--peso-fuerte);
  color: var(--marca-fuerte);
  font-variant-numeric: tabular-nums;
}

.marcha__barra {
  height: 6px;
  margin-bottom: var(--e-5);
  border-radius: var(--radio-pilula);
  background: var(--grafito-100);
  overflow: hidden;
}

.marcha__relleno {
  height: 100%;
  border-radius: var(--radio-pilula);
  background: linear-gradient(90deg, var(--marca), var(--exito));
  transition: width var(--transicion-lenta);
}

.marcha__pasos {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.paso-marcha {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--radio-sm);
  max-width: none;
  transition: background var(--transicion-rapida);
}

.paso-marcha:hover { background: var(--superficie-2); }

.paso-marcha__marca {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--borde-fuerte);
  color: var(--texto-tenue);
  font-size: var(--t-xs);
  font-weight: var(--peso-negro);
}

.paso-marcha__marca svg { width: 14px; height: 14px; }

.paso-marcha[data-hecho="si"] .paso-marcha__marca {
  background: var(--exito);
  border-color: var(--exito);
  color: #fff;
}

.paso-marcha__texto { flex: 1; min-width: 0; }

.paso-marcha__titulo {
  font-size: var(--t-base);
  font-weight: var(--peso-fuerte);
}

.paso-marcha[data-hecho="si"] .paso-marcha__titulo {
  color: var(--texto-tenue);
  text-decoration: line-through;
}

.paso-marcha__ayuda {
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}


/* ══════════════════════════════════════════════════════════════════════════
   INVITACIÓN
   ══════════════════════════════════════════════════════════════════════════ */

.invitacion {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-5);
  align-items: center;
  padding: var(--e-6);
  margin-bottom: var(--e-10);
  border-radius: var(--radio);
  background: linear-gradient(135deg, var(--grafito-800), var(--azul-900));
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.invitacion::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/patron-nodos.svg");
  background-size: 200px 200px;
  opacity: .13;
  z-index: -1;
}

.invitacion h2 {
  color: #fff;
  font-size: var(--t-lg);
  margin-bottom: var(--e-2);
}

.invitacion p {
  color: rgba(255, 255, 255, .72);
  font-size: var(--t-base);
  margin-bottom: var(--e-4);
  max-width: 46ch;
}

.invitacion__enlace {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--radio-sm);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  font-family: var(--fuente-mono);
  font-size: var(--t-sm);
  overflow-x: auto;
}

.invitacion__enlace code {
  flex: 1;
  color: #fff;
  white-space: nowrap;
}

.invitacion__codigo {
  display: grid;
  place-items: center;
  gap: var(--e-1);
  padding: var(--e-5) var(--e-6);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  text-align: center;
}

.invitacion__codigo strong {
  font-family: var(--fuente-titulo);
  font-size: var(--t-2xl);
  font-weight: var(--peso-negro);
  letter-spacing: 0.15em;
  color: #fff;
}

.invitacion__codigo span {
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
  letter-spacing: var(--letra-etiqueta);
}

@media (max-width: 760px) {
  .invitacion { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   SOLICITUDES POR REVISAR
   Lo que pide una decisión va arriba de todo y desaparece cuando no queda
   ninguna: una bandeja siempre visible pero vacía deja de mirarse.
   ══════════════════════════════════════════════════════════════════════════ */

.pendientes {
  padding: var(--e-5) var(--e-6);
  margin-bottom: var(--e-8);
  background: var(--alerta-suave);
  border: 1px solid color-mix(in srgb, var(--alerta) 34%, transparent);
  border-radius: var(--radio-arco);
}

.pendientes__encabezado {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}

.pendientes__encabezado .marcha__titulo { color: var(--alerta-fuerte); }

.pendientes__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pendiente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: var(--superficie);
  border-radius: var(--radio-sm);
  max-width: none;
}

.pendiente__quien strong { display: block; font-size: var(--t-base); }
.pendiente__quien span { font-size: var(--t-sm); color: var(--texto-tenue); }

.pendiente__acciones { display: flex; gap: var(--e-2); }

/* Lo que la persona declaró al registrarse: la unidad y qué dice ser ahí. */
.pendiente__quien .pendiente__dice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-1);
}

/* La regla de arriba pinta todo span de tenue, y una insignia tenue sobre su
   fondo de color se vuelve ilegible. Se le devuelve lo suyo. */
.pendiente__quien .insignia { font-size: var(--t-xs); }
.pendiente__quien .insignia--exito  { color: var(--exito-tinta); }
.pendiente__quien .insignia--alerta { color: var(--alerta-tinta); }


/* ══════════════════════════════════════════════════════════════════════════
   CAMPOS CORTOS
   Un número de dos dígitos o una fecha no necesitan 700 px.
   ══════════════════════════════════════════════════════════════════════════ */

.entrada--corta { max-width: 12ch; }
.entrada--fecha { max-width: 18ch; }

/* En el celular todo vuelve a ocupar el ancho: ahí el problema es el
   contrario, y un campo estrecho es más difícil de acertar con el dedo. */
@media (max-width: 640px) {
  .entrada--corta,
  .entrada--fecha { max-width: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PLANES DE LA PLATAFORMA
   ══════════════════════════════════════════════════════════════════════════ */

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

.plan {
  padding: var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-arco);
}

/* Un plan inactivo se ve, pero se ve apagado: esconderlo haría creer que se
   borró, y borrar planes no se puede cuando hay clientes dentro. */
.plan--inactivo { opacity: .62; }

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

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

.plan__clave {
  font-family: var(--fuente-mono, monospace);
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}

.plan__precio {
  margin: 0 0 var(--e-2);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--texto);
}

.plan__precio small {
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--texto-tenue);
}

.plan__nota {
  margin: 0 0 var(--e-4);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.plan__datos {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e-4);
  font-size: var(--t-sm);
}

.plan__datos li {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
}

.plan__datos li:last-child { border-bottom: none; }
.plan__datos span { color: var(--texto-tenue); }


/* ══════════════════════════════════════════════════════════════════════════
   MODULOS DE UNA COPROPIEDAD
   ══════════════════════════════════════════════════════════════════════════ */

.modulos {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e-5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--e-2);
}

.modulo {
  padding: var(--e-3);
  background: var(--superficie-2);
  border-radius: var(--radio-sm);
}

.modulo strong { display: block; font-size: var(--t-sm); }

.modulo small {
  display: block;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  line-height: 1.5;
}

/* Un módulo se puede encender aunque el plan no lo incluya —a veces se
   regala—, pero hay que ver cuál es cuál al mirar la lista. */
.modulo__fuera { color: var(--alerta-tinta); }


/* ── Fichas que podrían ser la misma persona ───────────────────────────── */

.duplicados {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.duplicado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3);
  background: var(--superficie);
  border-radius: var(--radio-sm);
}

.duplicado strong { display: block; font-size: var(--t-sm); }

.duplicado span {
  display: block;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}

/* Cuando las dos tienen historial no hay botón: no se puede decidir sola cuál
   de dos carteras es la buena. */
.duplicado__nota {
  max-width: 21ch;
  text-align: right;
  color: var(--alerta-tinta);
}


/* ══════════════════════════════════════════════════════════════════════════
   COBERTURA DEL CENSO
   Cuántas unidades ya tienen a alguien. Solo mientras falten.
   ══════════════════════════════════════════════════════════════════════════ */

.censo {
  padding: var(--e-4) var(--e-6);
  margin-bottom: var(--e-6);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-arco);
}

.censo__cifra {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}

.censo__cifra strong { font-size: var(--t-base); color: var(--texto); }

.censo__falta {
  margin-left: auto;
  font-weight: 600;
  color: var(--alerta-tinta);
}

.censo__barra {
  height: 8px;
  margin-top: var(--e-3);
  background: var(--superficie-2);
  border-radius: 999px;
  overflow: hidden;
}

.censo__barra span {
  display: block;
  height: 100%;
  background: var(--marca);
  border-radius: 999px;
}

.censo__ayuda {
  margin: var(--e-3) 0 0;
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}


/* ══════════════════════════════════════════════════════════════════════════
   FICHA DE UNA PERSONA
   ══════════════════════════════════════════════════════════════════════════ */

.ficha-persona {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4);
  background: var(--superficie-2);
  border-radius: var(--radio-sm);
}

.ficha-persona__fila {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  font-size: var(--t-base);
}

.ficha-persona__fila span { color: var(--texto-tenue); }
.ficha-persona__fila strong { text-align: right; word-break: break-word; }

.unidades-persona {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.unidad-asignada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  max-width: none;
}

.unidad-asignada strong { display: block; font-size: var(--t-base); }
.unidad-asignada span { font-size: var(--t-sm); color: var(--texto-tenue); }


/* ── El editor de permisos ──────────────────────────────────────────────────

   Cincuenta y dos casillas. Lo que decide si se leen o no es el agrupamiento
   y el aire entre grupos, no el tamano de la letra: la pregunta que se hace
   quien las mira es «¿que puede tocar de la cartera?», nunca «¿donde esta
   cartera.anular?».                                                         */

.permisos-barra {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: var(--e-5) 0 var(--e-4);
}

.permisos-barra .entrada { flex: 1; }

.permisos-cuenta {
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  white-space: nowrap;
}

.permisos-grupo { margin-bottom: var(--e-6); }

.permisos-grupo__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--borde);
  font-size: var(--t-sm);
  font-weight: var(--peso-negro);
  text-transform: uppercase;
  letter-spacing: var(--letra-etiqueta);
  color: var(--texto-suave);
}

/* «Todos» del grupo: un enlace y no un boton, porque no es la accion de la
   pantalla sino un atajo. */
.permisos-grupo__todos {
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  text-transform: none;
  letter-spacing: 0;
  color: var(--marca-fuerte);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.permisos-grupo__todos:hover { text-decoration: underline; }

.permisos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--e-1) var(--e-5);
}

.permiso {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-2) var(--e-2) 0;
  border-radius: var(--radio-sm);
  cursor: pointer;
}

.permiso:hover { background: var(--superficie-2); }

.permiso input { margin-top: 2px; flex-shrink: 0; }

.permiso__texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.permiso__nombre { font-size: var(--t-base); }

/* La clave tecnica en pequeno: es lo que aparece en la bitacora y en los
   registros, asi que quien investigue algo la reconoce. */
.permiso__clave {
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  font-family: var(--fuente-mono, monospace);
  word-break: break-all;
}

/* Lo que quien edita no tiene, no lo puede regalar. Se ve apagado y se dice
   por que al pasar por encima, en vez de dejar marcarlo y fallar al guardar. */
.permiso--bloqueado { opacity: .45; cursor: not-allowed; }
.permiso--bloqueado:hover { background: none; }

.permiso__insignia {
  align-self: center;
  margin-left: auto;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  white-space: nowrap;
}

.permisos-vacio {
  padding: var(--e-8) 0;
  text-align: center;
  color: var(--texto-tenue);
}


/* ══════════════════════════════════════════════════════════════════════════
   CARTERA
   ══════════════════════════════════════════════════════════════════════════ */

.modal--ancho { max-width: min(760px, calc(100vw - 2rem)); }

.lista-conceptos {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.concepto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  max-width: none;
}

.concepto strong { display: block; font-size: var(--t-base); }
.concepto span { font-size: var(--t-sm); color: var(--texto-tenue); }

.tipos-unidad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
}

.tipos-unidad .casilla { font-size: var(--t-base); }

/* Resumen de lo que se va a emitir. El total va destacado porque es lo que
   el administrador tiene que revisar antes de confirmar. */
.resumen-generacion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--e-4);
  padding: var(--e-5);
  border-radius: var(--radio);
  background: var(--marca-suave);
  border: 1px solid var(--borde-marca);
}

.resumen-generacion span {
  display: block;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.resumen-generacion strong {
  font-family: var(--fuente-titulo);
  font-size: var(--t-xl);
  font-weight: var(--peso-negro);
  color: var(--marca-fuerte);
  font-variant-numeric: tabular-nums;
}


/* ══════════════════════════════════════════════════════════════════════════
   FILTROS Y PAGINACIÓN
   ══════════════════════════════════════════════════════════════════════════ */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-bottom: var(--e-6);
}

.filtros .campo { min-width: 12rem; }
.filtros .campo--crece { flex: 1; min-width: 16rem; }

.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  margin-top: var(--e-6);
  font-size: var(--t-base);
  color: var(--texto-suave);
}

/* El estado vacío usa el patrón de nodos, que es una imagen y no un SVG en
   línea: no hereda currentColor, así que se tiñe con un filtro. */
.vacio__grafico {
  filter: grayscale(1);
}

/* En una tabla, los botones de acción van juntos y sin envolver. */
/* ══════════════════════════════════════════════════════════════════════════
   HILO DE UNA PQR

   Vive en panel.css y no en residente.css porque lo usan las dos pantallas:
   la bandeja del administrador y el seguimiento del residente. Es la misma
   conversacion vista desde los dos lados.
   ══════════════════════════════════════════════════════════════════════════ */

.hilo {
  display: grid;
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Las fotos del caso ──────────────────────────────────────────────────
   Una tira de miniaturas antes del hilo. Van arriba y no dentro de la
   conversación porque casi siempre son del problema, no de una respuesta: se
   miran una vez, al principio, para entender de qué se está hablando.      */

.galeria-pqr {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--e-2);
  margin: var(--e-3) 0 var(--e-6);
}

.galeria-pqr img {
  width: 100%;
  aspect-ratio: 4 / 3;

  /* `cover` y no `contain`: una foto vertical de un teléfono dentro de una
     caja horizontal deja dos bandas grises enormes y la tira se ve rota. */
  object-fit: cover;

  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--superficie-2);
}

.mensaje-pqr {
  display: grid;
  gap: var(--e-2);
  max-width: 82%;
  padding: var(--e-4);
  border-radius: var(--radio);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
}

/* El de la administracion a un lado y el del residente al otro: de un
   vistazo se ve quien hablo mas y quien lleva esperando. */
.mensaje-pqr--admin {
  justify-self: start;
  background: var(--marca-suave);
  border-color: var(--borde-marca);
}

.mensaje-pqr--residente { justify-self: end; }

/* La nota interna se ve distinta a propósito: quien la escribe tiene que
   notar sin leer que eso no lo va a ver el residente. */
.mensaje-pqr--interno {
  justify-self: start;
  background: var(--alerta-suave);
  border-color: var(--alerta);
  border-style: dashed;
}

.mensaje-pqr__quien {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}

.mensaje-pqr__quien strong { color: var(--texto); font-weight: var(--peso-medio); }

.mensaje-pqr__texto {
  font-size: var(--t-base);
  line-height: var(--linea-texto);
  color: var(--texto);
  /* Los saltos de linea que escribio la persona se respetan sin aceptar
     HTML, igual que en las noticias. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Los cambios de estado no son mensajes: van centrados, pequenos y sin
   globo, para que no compitan con lo que si dijo alguien. */
.mensaje-pqr--sistema {
  justify-self: center;
  max-width: 100%;
  padding: var(--e-2) var(--e-4);
  border-radius: var(--radio-pilula);
  background: var(--grafito-100);
  border: 0;
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  text-align: center;
}

.mensaje-pqr--sistema .mensaje-pqr__texto {
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  white-space: normal;
}


/* Ficha del caso: los datos duros arriba del hilo. */
.ficha-caso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--e-4);
  padding: var(--e-5);
  margin-bottom: var(--e-5);
  border-radius: var(--radio);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
}

.ficha-caso div { display: grid; gap: 2px; min-width: 0; }

.ficha-caso span {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--letra-etiqueta);
  color: var(--texto-tenue);
}

.ficha-caso strong {
  font-size: var(--t-base);
  color: var(--texto);

  /* `break-word` no alcanza aqui, y se veia: un correo largo se salia de su
     celda y se montaba encima del telefono de al lado.

     La razon es que `break-word` no cambia el ancho minimo intrinseco del
     texto, asi que el grid dimensiona la columna como si la palabra fuera
     indivisible y despues no la parte. `anywhere` si cuenta para ese calculo,
     que es lo que hace falta cuando el dato es un correo o una URL. */
  overflow-wrap: anywhere;
}


.tabla td .boton { white-space: nowrap; }

/* Los botones de una fila van en linea. Sin esto se apilan en cuanto la
   tabla tiene columnas suficientes para apretar la ultima, y "Editar" y
   "Eliminar" quedan uno debajo del otro ocupando el doble de alto. */
.acciones-fila {
  display: flex;
  gap: var(--e-2);
  align-items: center;
}


/* ══════════════════════════════════════════════════════════════════════════
   MÓDULOS AÚN NO DISPONIBLES
   Se muestran atenuados y sin enlace en vez de ocultarlos: el administrador
   ve qué trae la plataforma, y no descubre un 404 al hacer clic.
   ══════════════════════════════════════════════════════════════════════════ */

.tarjeta--pronto {
  opacity: .58;
  pointer-events: none;
}

.tarjeta--pronto .tarjeta__icono {
  background: var(--grafito-100);
  color: var(--texto-tenue);
}

.tarjeta--pronto::before { opacity: .2; }