/* ===========================================================================
   Portal del inquilino
   ========================================================================== */

body.inquilino { background: radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--serie-2) 10%, transparent), transparent 25rem), var(--plano); }

.acceso-inq { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.acceso-inq-caja {
  width: 100%; max-width: 440px; padding: 32px; background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--r-lg); box-shadow: var(--sombra-2); animation: subir-suave .55s cubic-bezier(.2,.8,.3,1) both;
}
.volver { font-size: .85rem; text-decoration: none; color: var(--ink-2); }
.portal-marca {
  margin: 22px 0 18px; width: 48px; height: 48px; display: grid; place-items: center;
  color: #fff; font-size: 23px; border-radius: 14px;
  background: linear-gradient(140deg, var(--acento), var(--serie-3));
  animation: flotar-suave 3.2s ease-in-out infinite;
}
.acceso-inq-caja h1 { font-size: 1.65rem; margin-bottom: 7px; }
.acceso-inq-caja form { display: flex; flex-direction: column; gap: 14px; margin: 22px 0 16px; }

.cabecera-inq {
  min-height: 68px; padding: 10px max(20px, calc((100vw - var(--ancho)) / 2));
  display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--linea);
  background: color-mix(in srgb, var(--superficie) 88%, transparent); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 40;
}
.marca-inq { display: inline-flex; gap: 9px; align-items: center; color: var(--ink); text-decoration: none; white-space: nowrap; }
.marca-inq > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(140deg, var(--acento), var(--serie-3)); }
.cabecera-inq nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.cabecera-inq nav a { color: var(--ink-2); text-decoration: none; font-size: .87rem; font-weight: 580; }
.cabecera-inq nav a:hover { color: var(--acento-ink); }
.enlace-mensajes span { display: inline-grid; min-width: 17px; height: 17px; place-items: center; border-radius: 99px; background: var(--critico); color: #fff; font-size: .65rem; }

.portal-contenido { padding-top: 42px; padding-bottom: 70px; }
.saludo-inq { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 36px; animation: subir-suave .55s cubic-bezier(.2,.8,.3,1) both; }
.saludo-inq h1 { font-size: clamp(2rem, 5vw, 3rem); margin-top: 4px; }
.saludo-inq p { margin: 5px 0 0; }
.sobrelinea { color: var(--acento-ink); font-size: .7rem; font-weight: 750; letter-spacing: .1em; }
.seccion-inq { padding: 28px 0; border-top: 1px solid var(--linea); scroll-margin-top: 80px; }
.cabecera-seccion { margin-bottom: 16px; }
.cabecera-seccion h2 { margin-top: 3px; }

.rejilla-resumen { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.rejilla-resumen > * { animation: subir-suave .5s cubic-bezier(.2,.8,.3,1) both; }
.rejilla-resumen > *:nth-child(2) { animation-delay: .06s; }
.rejilla-resumen > *:nth-child(3) { animation-delay: .12s; }
.resumen-hogar, .estado-pago, .contacto-inq { padding: 20px; }
.resumen-hogar { grid-row: span 2; }
.resumen-hogar h3 { font-size: 1.2rem; margin: 5px 0 8px; }
.direccion-inq { display: flex; gap: 8px; color: var(--ink-2); font-size: .9rem; }
.datos-hogar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.dato-hogar { padding: 6px 9px; border: 1px solid var(--linea); border-radius: 7px; color: var(--ink-2); font-size: .78rem; }
.estado-pago .etiqueta-inq { color: var(--ink-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.estado-pago .monto-inq { font-size: 1.55rem; font-weight: 690; letter-spacing: -.03em; margin-top: 4px; }
.estado-pago .barra-mini { height: 7px; overflow: hidden; background: var(--superficie-3); border-radius: 999px; margin: 12px 0 7px; }
.estado-pago .barra-mini i { display: block; height: 100%; border-radius: inherit; background: var(--serie-1); }
.contacto-inq { grid-column: span 2; }
.contacto-inq .fila { align-items: flex-start; }
.contacto-inq .avatar-inq { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; background: var(--acento-suave); color: var(--acento-ink); font-size: .78rem; font-weight: 700; }
.contacto-inq .acciones-contacto { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }

.pago-principal { padding: 20px; margin-bottom: 16px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; animation: subir-suave .5s cubic-bezier(.2,.8,.3,1) both; }
.pago-principal .pago-monto { font-size: 1.6rem; letter-spacing: -.03em; font-weight: 690; }
.pago-principal .mini { margin-top: 3px; }
.dos-col-inq { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 18px; align-items: start; }
.lista-inq { margin: 0; padding: 0; list-style: none; border: 1px solid var(--linea); border-radius: var(--r-md); overflow: hidden; background: var(--superficie); }
.lista-inq > li { display: flex; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--linea); }
.lista-inq > li:last-child { border-bottom: 0; }
.mensaje-inq.sin-leer { background: color-mix(in srgb, var(--acento) 6%, var(--superficie)); }
.tipo-inq { flex: none; width: 34px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: var(--acento-suave); color: var(--acento-ink); font-size: .66rem; font-weight: 760; letter-spacing: .05em; }
.mensaje-inq .texto { white-space: pre-wrap; margin: 7px 0 0; color: var(--ink-2); font-size: .88rem; }
.mensaje-inq .pie-mensaje { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.formulario-mensaje { padding: 19px; position: sticky; top: 86px; }
.formulario-mensaje > p { margin: 5px 0 15px; }
.formulario-mensaje form { display: flex; flex-direction: column; gap: 13px; }
.recibo-pago h2 { margin: 5px 0 3px; font-size: 1.35rem; }
.recibo-pago > p { margin: 0; }
.recibo-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.recibo-datos > div { padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.recibo-datos span { display: block; font-size: .67rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 680; }
.recibo-datos strong { display: block; margin-top: 3px; font-size: .88rem; }
.recibo-total { display: flex; align-items: center; justify-content: space-between; padding: 14px; border-radius: var(--r-sm); background: var(--acento-suave); color: var(--acento-ink); }
.recibo-total strong { font-size: 1.35rem; letter-spacing: -.03em; }

@media (max-width: 820px) {
  .cabecera-inq { gap: 12px; }
  .cabecera-inq nav { display: none; }
  .cabecera-inq .fila { margin-left: auto; }
  .rejilla-resumen { grid-template-columns: 1fr 1fr; }
  .resumen-hogar { grid-column: span 2; grid-row: auto; }
  .contacto-inq { grid-column: span 2; }
  .dos-col-inq { grid-template-columns: 1fr; }
  .formulario-mensaje { position: static; }
}
@media (max-width: 520px) {
  .acceso-inq-caja { padding: 25px 21px; }
  .portal-contenido { padding-top: 28px; }
  .saludo-inq { align-items: flex-start; flex-direction: column; padding-bottom: 28px; }
  .rejilla-resumen { grid-template-columns: 1fr; }
  .resumen-hogar, .contacto-inq { grid-column: auto; }
  .pago-principal { align-items: flex-start; flex-direction: column; }
  .recibo-datos { grid-template-columns: 1fr; }
}