/* ============================================================
   MARCA HM PATRIMONIA — tokens de color y tipografia
   Paleta "Legado Azul" del manual de marca (julio 2026)
   ============================================================ */
:root {
  --color-primario: #0F2240;        /* Azul Noche */
  --color-primario-suave: #1C3459;  /* azul mas claro para columnas destacadas */
  --color-primario-tenue: #E4E8EF;  /* azul diluido para fondos de subtotales */
  --color-acento: #B8923A;          /* Oro Mate */
  --color-acento-oscuro: #8F6E2A;   /* oro para hover y enlaces sobre fondo claro */
  --color-acento-tenue: #F1E9D6;    /* oro diluido para hover de celdas editables */
  --color-neutro: #C8CBCF;          /* Gris Perla */
  --color-fondo: #F7F4EF;           /* Crema */
  --color-fondo-suave: #FBF9F5;     /* crema casi blanco para filas alternas */
  --color-texto: #1E1E1E;           /* Antracita */
  --color-texto-suave: #5C5A54;
  --color-texto-tenue: #99968E;
  --color-borde: #E6E1D7;           /* borde hairline exterior */
  --color-borde-fila: #EFEAE0;      /* borde hairline entre filas de tabla, mas claro */
  --color-id-col-fondo: #C8CBCF;    /* Gris Perla: fondo de la columna identificadora en tablas */
  --color-id-col-fondo-cebra: #BABDC2; /* mismo fondo, un tono mas oscuro para filas pares */
  --color-peligro: #A63D2F;
  --estado-ok-fondo: #E4EAE0;
  --estado-ok-texto: #3E5A38;
  --estado-error-fondo: #F0DFDA;
  --estado-error-texto: #8C3B2E;
  --estado-aviso-fondo: #F3EBD3;
  --estado-aviso-texto: #7A5E20;
  --estado-vacio-fondo: #F5DFC7;
  --estado-vacio-texto: #8A5322;
  --fuente-titulos: 'Cormorant Garamond', Georgia, serif;
  --fuente-cuerpo: 'DM Sans', Arial, sans-serif;
  --fuente-datos: 'DM Mono', 'Courier New', monospace;
  --alto-cabecera: 56px;             /* cabecera y zona del logo se fijan a este valor: no pueden desalinearse */
  --ancho-sidebar: 220px;            /* nav lateral fija; body y el ancho-completo de Renta dependen de el */
  --desplazamiento-fijo: var(--alto-cabecera); /* ancla el sticky de Pagos y el scroll a formularios */
  --ancho-col-inquilino: 280px;      /* ancho de las columnas de titular */
}

/* Reset basico y tipografia */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--fuente-cuerpo);
  background-color: var(--color-fondo);
  color: var(--color-texto);
  /* Hueco de la nav lateral fija; los overlays (position fixed) no lo heredan */
  padding-left: var(--ancho-sidebar);
}

/* Cabecera principal */
header {
  background-color: var(--color-primario);
  color: white;
  /* Altura fijada por token, no por contenido: asi coincide siempre con la zona del logo de la sidebar */
  height: var(--alto-cabecera);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

header h1 {
  font-family: var(--fuente-titulos);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
  /* En escritorio el logo vive en la sidebar; el bloque movil lo devuelve a flex */
  display: none;
  align-items: center;
  gap: 10px;
}

.logo-escudo {
  height: 25px;
  width: auto;
  flex-shrink: 0;
}

/* El «IA» siempre en Oro Mate — regla irrenunciable de marca */
.logo-ia {
  color: var(--color-acento);
}

.btn-ajustes {
  background: none;
  border: 1px solid rgba(255,255,255,0.4);
  color: white;
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.btn-ajustes:hover {
  background: rgba(255,255,255,0.15);
}

/* Panel de Ajustes: fondo crema para que las tarjetas blancas contrasten */
#panel-ajustes .modal-cuerpo {
  background: var(--color-fondo);
  border-radius: 0 0 2px 2px;
}

.ajustes-bloque {
  margin-bottom: 18px;
}

/* Etiqueta de seccion: pequeña y en mayusculas, jerarquia sin competir */
.ajustes-bloque h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
  margin-bottom: 8px;
}

.ajustes-card {
  background: white;
  border: 1px solid var(--color-borde);
  border-radius: 2px;
  padding: 14px;
}

/* Tarjeta de una linea: texto a la izquierda y acciones en icono a la derecha */
.ajustes-card-linea {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ajustes-texto-linea {
  flex: 1;
  min-width: 0;
  margin-bottom: 0 !important;
}

/* Junto a un campo de texto el icono iguala su altura (34px); en las filas de
   compartir se queda en los 30px de .btn-icono, a la altura del selector de rol */
.ajustes-card-linea .btn-icono,
.propietario-fila .btn-icono,
.propietario-nuevo .btn-icono {
  width: 34px;
  height: 34px;
}

.ajustes-card p {
  font-size: 13px;
  color: var(--color-texto-suave);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* Fila de botones (copias de seguridad): en linea, se apilan si no caben */
.ajustes-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Pie legal: enlaces discretos, centrados, sin tarjeta */
.ajustes-legal {
  text-align: center;
  font-size: 13px;
  color: var(--color-texto-tenue);
  padding-top: 4px;
}

.ajustes-legal a {
  color: var(--color-acento-oscuro);
  text-decoration: none;
}

.ajustes-legal a:hover {
  text-decoration: underline;
}

/* Navegacion lateral (escritorio): columna fija en Azul Noche */
nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--ancho-sidebar);
  background-color: var(--color-primario);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 99;
  padding: 0 0 16px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  /* El +2px deja el borde POR DEBAJO de la altura de cabecera: la linea arranca en la esquina del contenido, no antes */
  height: calc(var(--alto-cabecera) + 2px);
  box-sizing: border-box;
  padding: 0 16px;
  border-bottom: 2px solid var(--color-acento);
  font-family: var(--fuente-titulos);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--color-fondo);
}

.nav-logo .logo-escudo {
  height: 25px;
  width: auto;
  flex-shrink: 0;
}

nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  /* 13px + 3px de borde = 16px: el texto no salta al activarse */
  padding: 11px 16px 11px 13px;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--fuente-cuerpo);
  color: var(--color-neutro);
  text-align: left;
}

nav button:hover {
  color: var(--color-fondo);
}

nav button.activo {
  color: var(--color-fondo);
  font-weight: bold;
  border-left-color: var(--color-acento);
  background-color: rgba(184, 146, 58, 0.15);
}

.nav-icono {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* En escritorio los botones del grupo secundario son items normales de la columna */
.nav-secundaria {
  display: contents;
}

/* "Más" solo existe en la barra inferior movil */
.nav-mas {
  display: none;
}

/* Cerrar sesion anclado al fondo de la sidebar (en movil vive en Ajustes) */
.nav-cerrar-sesion {
  margin-top: auto;
  border-top: 1px solid var(--color-primario-suave);
  padding-top: 12px;
  padding-bottom: 12px;
}

/* En escritorio la salida esta en la sidebar: el boton de Ajustes se oculta para no duplicar */
.btn-cerrar-sesion-ajustes {
  display: none;
}

/* Al hacer scroll a un formulario o a un destino de navegacion, dejamos hueco
   arriba para la cabecera y nav pegajosas; si no, scrollIntoView deja el inicio
   del elemento oculto tras ellas */
#formulario-inmueble,
#formulario-inquilino,
#formulario-factura,
.tarjeta-inmueble,
.grupo-inquilinos,
.grupo-facturas {
  scroll-margin-top: var(--desplazamiento-fijo);
}

/* Contenido principal */
main {
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Tarjetas */
.tarjeta {
  background: white;
  border-radius: 2px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--color-borde);
}

/* Botones — jerarquia de marca: oro para CTA, contorno azul para secundario */
.btn-primario {
  background-color: var(--color-acento);
  color: var(--color-primario);
  border: none;
  padding: 10px 18px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.btn-primario:hover {
  background-color: #A5822F;
}

/* Resaltado temporal del boton "Conectar Google Drive" al llegar desde la
   bandeja: un pulso dorado que guia el clic del usuario. */
.resaltado-conectar {
  animation: pulso-conectar 1s ease-in-out infinite;
}
@keyframes pulso-conectar {
  0%   { box-shadow: 0 0 0 0 rgba(184, 146, 58, 0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(184, 146, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 146, 58, 0); }
}

.btn-secundario {
  background-color: transparent;
  color: var(--color-primario);
  border: 1px solid var(--color-primario);
  padding: 9px 17px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
}

.btn-secundario:hover {
  background-color: var(--color-primario-tenue);
}

/* Pildora secundaria de la barra de herramientas (ej. Recordatorio en Pagos):
   mismo alto/radio que .btn-filtros pero en version "outline" para no competir
   con ella por protagonismo */
.btn-pildora {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--color-primario);
  background: transparent;
  color: var(--color-primario);
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-pildora:hover {
  background-color: var(--color-primario-tenue);
}

.btn-peligro {
  background-color: var(--color-peligro);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 13px;
}

/* Barra de acciones (titulo + boton nuevo) */
.barra-acciones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

/* Fila de herramientas: filtros y buscador a la izquierda, botones de accion a
   la derecha, en la misma linea que la zona de filtros */
.barra-herramientas {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
/* Dentro de la barra la zona de filtros pierde su margen propio */
.barra-herramientas .zona-filtros { margin: 0; }
.barra-herramientas .acciones-tarjeta { flex-wrap: wrap; }

/* Campos de formulario */
.campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.campo label {
  font-size: 13px;
  font-weight: bold;
  color: var(--color-texto-suave);
}

.campo input,
.campo select {
  padding: 8px 10px;
  border: 1px solid var(--color-neutro);
  border-radius: 2px;
  font-size: 14px;
}

/* Los controles de subir/bajar de un campo numerico se rozan sin querer y
   cambian importes en silencio. Esto solo tapa la via del raton sobre la
   flecha: la rueda y las teclas arriba/abajo se cierran en app.js */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Fila de campos en horizontal dentro de un formulario */
.fila-campos {
  display: flex;
  gap: 12px;
}
.fila-campos .campo {
  flex: 1;
  margin-bottom: 14px;
}
.campo-corto {
  flex: 0 0 90px !important;
}
/* Proporciones de la rejilla de formularios: doble ocupa el doble que sus
   vecinos; medio es ancho fijo para datos cortos (CP, DNI, telefono) */
.campo-doble {
  flex: 2 !important; /* gana a .fila-campos .campo, como campo-corto/medio */
}
.campo-medio {
  flex: 0 0 150px !important;
}

/* Rejilla de 12 columnas para los formularios largos (Inmuebles, Inquilinos):
   varios campos por fila en vez de filas sueltas que dejan medio ancho vacio.
   El hueco vertical lo sigue dando el margin-bottom de .campo, no el row-gap. */
.rejilla {
  display: grid;
  /* minmax(0,1fr) y no 1fr: un 1fr no baja del ancho minimo de su contenido, asi
     que el placeholder de un input ensancha su columna y los span dejan de valer
     (la version en rejilla de la trampa del flex:1 sin min-width:0) */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 12px;
  align-items: start;
}
.rejilla .campo {
  margin-bottom: 14px;
}
/* Un check inline no tiene etiqueta encima: se pega abajo para que el cuadrito
   quede a la altura del input vecino, no del hueco de su titulo */
.rejilla .campo-inline-check {
  align-self: end;
  margin-bottom: 22px;
}
.campo-c1  { grid-column: span 1; }
.campo-c2  { grid-column: span 2; }
.campo-c3  { grid-column: span 3; }
.campo-c4  { grid-column: span 4; }
.campo-c5  { grid-column: span 5; }
.campo-c6  { grid-column: span 6; }
.campo-c7  { grid-column: span 7; }
.campo-c8  { grid-column: span 8; }
.campo-c12 { grid-column: span 12; }

.opcional {
  font-weight: normal;
  color: var(--color-texto-tenue);
  font-size: 11px;
}

/* Botones del formulario */
.acciones-formulario {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}

/* La papelera del pie iguala la altura de Cancelar y Guardar, mas altos que los de lista */
.acciones-formulario .btn-icono {
  width: 38px;
  height: 38px;
}

.acciones-formulario .btn-icono svg {
  width: 18px;
  height: 18px;
}









/* Etiquetas de tipo y estado */
.etiqueta {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: bold;
  margin-right: 6px;
}

/* Etiquetas solidas en tonos mate: distinguibles pero dentro del registro de la paleta */
.etiqueta-casa       { background: #4E6B45; color: white; }
.etiqueta-piso       { background: var(--color-primario-suave); color: white; }
.etiqueta-local      { background: var(--color-acento); color: var(--color-primario); }
.etiqueta-garaje     { background: #55524B; color: white; }
.etiqueta-trastero   { background: #5E4470; color: white; }
.etiqueta-ocupado    { background: var(--estado-ok-fondo); color: var(--estado-ok-texto); }
.etiqueta-vacio      { background: var(--estado-vacio-fondo); color: var(--estado-vacio-texto); }
.etiqueta-en-reforma { background: var(--color-acento); color: var(--color-primario); }

/* Texto cuando no hay registros */
.texto-vacio {
  color: var(--color-texto-tenue);
  font-style: italic;
  padding: 20px 0;
}

/* Separador visual dentro del formulario (ej: "Segundo titular") */
.separador-formulario {
  font-size: 12px;
  font-weight: bold;
  color: var(--color-texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-top: 1px solid var(--color-borde);
  padding-top: 14px;
  margin-bottom: 4px;
}

/* Titulo del formulario */
.tarjeta h3 {
  margin-bottom: 16px;
  font-size: 16px;
  color: var(--color-primario);
}
/* Acciones de cada tarjeta (editar + eliminar) */
.acciones-tarjeta {
  display: flex;
  gap: 8px;
}

/* Altura unica en las barras de acciones: 32px, el estandar de filtros y pildoras; los glifos (⠿, 🔔, 🗎, ←) estiraban unas filas y otras no */
.acciones-tarjeta button {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* El alto fijo centra el texto por flex: el padding vertical heredado solo estrujaba la caja de linea */
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

/* CABECERA DE UNA FILA: la clase va en la <section> y monta titulo y controles
   en la misma linea. El buscador se queda el hueco sobrante y el embudo viaja
   hasta los botones, para que sus burbujas caigan sobre el hueco y no sobre el
   margen de la pagina. La usan las seis pestañas con filtros. */
.cabecera-una-fila .barra-herramientas {
  flex-direction: row;
  justify-content: flex-start;
}

/* line-height 32 iguala la caja del titulo a la de los controles: asi el
   flex-start los alinea solo y al desplegar los criterios nada se descoloca */
.cabecera-una-fila .barra-herramientas h2 {
  flex: none;
  line-height: 32px;
}

/* display:contents disuelve la caja de la zona para que sus dos hijos sean
   items de la barra: si no, la barra de criterios hereda el ancho estrecho que
   queda entre el titulo y el boton (203px de los 497 que pide, 3 filtros de 6).
   La zona-izquierda de Pagos/Gastos/Renta se disuelve igual, para que el
   selector de año quede al lado del buscador y no dentro de otra caja */
.cabecera-una-fila .zona-filtros,
.cabecera-una-fila .zona-herramientas-izquierda {
  display: contents;
}

/* min-width 0: sin el, un item flex no baja de su contenido y el buscador
   empujaria el boton fuera en vez de encogerse */
.cabecera-una-fila .fila-filtros {
  flex: 1;
  min-width: 0;
}

/* Salta a su propia linea y la ocupa entera; el gap de la barra ya la separa */
.cabecera-una-fila .barra-criterios {
  order: 1;
  flex-basis: 100%;
  margin-top: 0;
}

/* Crece hasta 320: en movil se come el hueco, y en escritorio no se estira a
   los 659px que daba la fila entera */
.cabecera-una-fila .buscador-filtros {
  flex: 1;
  min-width: 0;
  max-width: 320px;
}

.cabecera-una-fila .buscador-filtros input {
  width: 100%;
}

/* El sobrante de escritorio se va aqui, para que el embudo acabe pegado al
   boton de alta en lugar de quedarse junto al buscador */
.cabecera-una-fila .btn-filtros {
  margin-left: auto;
}

/* Etiqueta de dos longitudes: la breve solo asoma en movil (ver el breakpoint).
   La usan el titulo de Renta y sus dos toggles, que no caben con el texto largo */
.etiqueta-breve { display: none; }

/* Renta en ESCRITORIO: la caja se disuelve, asi que el selector de año sube a
   la fila 1 y solo los dos toggles saltan a la suya. En movil (ver breakpoint)
   la caja vuelve a existir y se lleva el año abajo, porque arriba dejaba el
   buscador en 26px */
.renta-toggles {
  display: contents;
}

.renta-switches {
  order: 1;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Los botones al grupo de order 1 para que el año, que en el DOM va detras de
   ellos, se pinte antes: datos primero (buscador, embudo, año) y acciones al
   final. Los switches, tambien order 1, saltan solos por su flex-basis */
#seccion-renta .acciones-tarjeta {
  order: 1;
}

/* Los criterios, si estan abiertos, van los ultimos */
#seccion-renta .barra-criterios { order: 2; }

/* BOTON DE ACCION CON ICONO: icono + etiqueta en escritorio, solo icono en
   movil (la etiqueta la esconde .etiqueta-completa en el breakpoint). El
   candado del plan es un elemento aparte, NUNCA texto dentro del boton: si se
   escribiera con textContent borraria el icono */
.btn-accion {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-accion svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* Abajo a la izquierda, igual que las burbujas del embudo: estos botones cierran
   la fila por la derecha y ahi el candado se saldria del margen */
.candado-pro {
  position: absolute;
  bottom: -5px;
  left: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-acento);
  color: var(--color-primario);
  border: 1.5px solid var(--color-fondo);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
}

.btn-accion.bloqueado .candado-pro {
  display: flex;
}



/* Stepper de año en la fila de herramientas (Pagos/Gastos/Renta): pildora segmentada de 32px */
.zona-herramientas-izquierda {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.stepper-anio {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  border: 1px solid var(--color-primario);
  border-radius: 16px;
  overflow: hidden;
  background: white;
}

.stepper-anio-flecha {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primario);
  font-size: 15px;
  line-height: 1;
}

.stepper-anio-flecha:first-child { border-right: 1px solid var(--color-borde); }
.stepper-anio-flecha:last-child  { border-left: 1px solid var(--color-borde); }

.stepper-anio-flecha:hover { background: var(--color-fondo-suave); }

.stepper-anio-valor {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primario);
  cursor: pointer;
}

/* Pista de clicable: el mismo dorado suave de las celdas editables */
.stepper-anio-valor:hover { background: var(--color-acento-tenue); }

/* Resumen del anio (P1): tarjetas con cobrado, pendiente y numero de inmuebles con deuda */
.resumen-pagos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.metrica-resumen {
  flex: 1 1 200px;
  background: white;
  border: 1px solid var(--color-borde);
  border-radius: 2px;
  padding: 14px 18px;
}

.metrica-resumen-etiqueta {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-texto-suave);
  margin-bottom: 4px;
}

.metrica-resumen-valor {
  font-family: var(--fuente-cuerpo);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primario);
}

/* Pendiente > 0: en rojo para que llame la atencion; en 0,00 € queda neutro */
.metrica-resumen-valor-alerta {
  color: var(--color-peligro);
}

/* Tabla de pagos */
.contenedor-tabla-pagos {
  /* En escritorio SIN overflow: un contenedor con scroll rompe el sticky
     vertical de la cabecera (anclaria al contenedor, no a la pagina).
     El scroll horizontal solo hace falta en movil (ver breakpoint). */
  margin-bottom: 24px;
}

#tabla-pagos {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: white;
  border-radius: 2px;
  /* OJO: sin overflow aqui. Cualquier overflow != visible convierte la tabla
     en contenedor de scroll y el sticky de la cabecera se ancla a ella (se
     incrustaba a 130px dentro). El radio de 2px queda sin recortar: asumido. */
  border: 1px solid var(--color-borde);
}

#tabla-pagos th {
  background-color: var(--color-primario);
  color: var(--color-fondo);
  font-family: var(--fuente-datos);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 6px;
  text-align: center;
  white-space: nowrap;
}

/* La cabecera de esta columna respeta el fondo y la fuente del resto: solo el cuerpo lleva el sombreado */
#tabla-pagos th.col-inmueble {
  text-align: left;
  padding-left: 12px;
  min-width: 200px;
}

#tabla-pagos td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid var(--color-borde-fila);
}

/* Columna identificadora: fondo Gris Perla y tipografia serif de marca.
   En filas pares usa un tono mas oscuro para que el cebrado se note tambien aqui */
#tabla-pagos td.col-inmueble {
  text-align: left;
  padding-left: 12px;
  font-family: var(--fuente-titulos);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primario);
  background-color: var(--color-id-col-fondo);
  border-right: 1px solid var(--color-borde);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tabla-pagos tbody tr:nth-child(even) td.col-inmueble {
  background-color: var(--color-id-col-fondo-cebra);
}

/* P3 (rehecho 2026-08-20): con meses pendientes el NOMBRE va en rojo. Antes
   era un punto ● delante, que en movil gastaba ~12px del nombre recortado.
   La especificidad iguala a la de #tabla-pagos td.col-inmueble, que pinta el
   azul: el orden en el fichero decide, esta regla va DESPUES */
#tabla-pagos td.nombre-deuda {
  color: var(--color-peligro);
}

/* Muestra de la leyenda: la palabra con el mismo rojo y la serif del nombre */
.leyenda-nombre-deuda {
  color: var(--color-peligro);
  font-family: var(--fuente-titulos);
  font-weight: 600;
}

#tabla-pagos td.col-total {
  font-weight: bold;
  color: var(--color-primario);
}

/* P6: cabecera y primera columna fijas al hacer scroll (dentro de .contenedor-tabla-pagos).
   Los fondos de las celdas sticky ya son opacos (th: azul primario; td.col-inmueble: gris perla;
   fila-totales: color de fondo), asi que no transparentan al superponerse. */
#tabla-pagos thead th {
  position: sticky;
  top: var(--desplazamiento-fijo);
  z-index: 2;
}

#tabla-pagos td:first-child,
#tabla-pagos th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

/* Esquina superior izquierda: por encima de la cabecera y de la columna fijas */
#tabla-pagos thead th:first-child {
  z-index: 3;
}

/* P2: columna del mes en curso. Solo se aplica a celdas sin color de estado propio
   (celda-pagado/celda-parcial ya tienen su fondo y no llevan esta clase) */
#tabla-pagos th.col-mes-actual {
  font-weight: 700;
}

.col-mes-actual {
  /* Tinte translucido del Oro Mate: se ve TAMBIEN sobre el verde/ambar de las
     celdas con estado (un background normal quedaria tapado por el suyo) */
  box-shadow: inset 0 0 0 999px rgba(184, 146, 58, 0.16);
}

#tabla-pagos tbody tr:nth-child(even) {
  background-color: var(--color-fondo-suave);
}

/* Celdas de pago */
.celda-pago {
  position: relative;
  cursor: pointer;
  border-radius: 2px;
  font-size: 12px;
}

/* Marca de nota: triangulo dorado en la esquina de la celda */
.celda-con-nota::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent var(--color-acento) transparent transparent;
}

/* El ✎ aparece al pasar el raton; si la celda ya tiene nota, siempre */
.icono-nota {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 11px;
  color: var(--color-acento-oscuro);
  opacity: 0;
  cursor: pointer;
}
.celda-pago:hover .icono-nota,
.icono-nota:focus-visible,
.icono-nota.con-nota { opacity: 1; }

.celda-pagado {
  background-color: var(--estado-ok-fondo);
  color: var(--estado-ok-texto);
  font-weight: bold;
}

.celda-pendiente {
  background-color: var(--estado-error-fondo);
  color: var(--estado-error-texto);
}

.celda-parcial {
  background-color: var(--estado-aviso-fondo);
  color: var(--estado-aviso-texto);
}

/* P4: "importe /esperado" en las celdas parciales */
.parcial-esperado {
  font-size: 10px;
  font-weight: normal;
  opacity: 0.85;
}



/* Pie de tabla — fila de totales */
.fila-totales td {
  background-color: var(--color-fondo);
  font-weight: bold;
  color: var(--color-primario);
  border-top: 2px solid var(--color-primario);
  padding: 10px 6px;
  text-align: center;
}

.fila-totales td:first-child {
  text-align: left;
  padding-left: 12px;
}

.celda-total-mes {
  font-size: 12px;
}

.celda-vacia {
  text-align: center;
  color: var(--color-texto-tenue);
  font-style: italic;
  padding: 20px;
}

/* Celda sin pago — muestra alquiler habitual en gris.
   Sin fondo propio: si lo tuviera, taparia el sombreado cebra de la fila */
.celda-sin-pago {
  color: var(--color-neutro);
  cursor: pointer;
}

.celda-sin-pago:hover {
  background-color: var(--color-acento-tenue);
  color: var(--color-primario);
}

/* Popup de edicion rapida */
.popup-pago {
  position: absolute;
  background: white;
  border: 1px solid var(--color-borde);
  border-radius: 2px;
  padding: 16px;
  width: 240px;
  z-index: 1000;
}

.popup-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.popup-cabecera span {
  font-weight: bold;
  color: var(--color-primario);
  font-size: 14px;
}

.popup-cerrar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--color-texto-tenue);
  padding: 0 4px;
}

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

.popup-pago .campo {
  margin-bottom: 10px;
}

.popup-pago .campo label {
  font-size: 12px;
}

.popup-pago .campo input {
  padding: 6px 8px;
  font-size: 13px;
}

.popup-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* ============================================================
   MODAL — CARGAR CONTRATO
   ============================================================ */

/* Fondo oscuro que cubre toda la pantalla */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

/* Recuadro blanco del modal */
.modal {
  background: white;
  border-radius: 2px;
  width: 100%;
  max-width: 600px;
}

.modal-cabecera {
  background-color: var(--color-primario);
  color: white;
  padding: 16px 20px;
  border-radius: 2px 2px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
}

.modal-cuerpo {
  padding: 24px;
}

.modal-pie {
  padding: 16px 24px;
  border-top: 1px solid var(--color-borde);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Cabecera colapsable del texto extraido */
.texto-extraido-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: 2px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-texto-suave);
  margin-bottom: 4px;
}

.texto-extraido-cabecera:hover {
  background: var(--color-borde);
  color: var(--color-primario);
}

/* Texto sin formato del contrato (para que Carlos pueda copiar lo que necesite) */
.texto-extraido {
  background: var(--color-fondo-suave);
  border: 1px solid var(--color-borde);
  border-radius: 2px;
  padding: 12px;
  font-size: 12px;
  color: var(--color-texto-suave);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 8px;
  font-family: monospace;
}

/* Aviso sobre el inquilino que quedara finalizado */
.aviso-inquilino-anterior {
  background: var(--estado-aviso-fondo);
  border: 1px solid var(--color-acento);
  border-radius: 2px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--estado-aviso-texto);
  margin-top: 16px;
}
.aviso-inquilino-anterior p {
  margin: 0;
}

/* ============================================================
   INQUILINOS — AGRUPACION POR INMUEBLE E HISTORICO
   ============================================================ */

/* Contenedor que agrupa todos los inquilinos de un inmueble */
.grupo-inquilinos {
  margin-bottom: 28px;
}

/* Cabecera del grupo: nombre del inmueble */
.grupo-inquilinos-cabecera {
  background-color: var(--color-primario);
  color: white;
  padding: 10px 16px;
  border-radius: 2px 2px 0 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Chip discreto del historial: neutro en reposo, dorado al pasar el raton */
/* En reposo solo flecha y numero; el texto se despliega al pasar el raton
   (mismo patron que .btn-filtros, y como alli, en movil va desactivado) */
.chip-historial {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--color-neutro);
  border: 1px solid var(--color-neutro);
  border-radius: 12px;
  padding: 2px 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.chip-historial-icono {
  display: inline-flex;
  align-items: center;
}

.chip-historial-texto {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.2s, padding 0.2s;
}

.chip-historial:hover .chip-historial-texto,
.chip-historial:focus-visible .chip-historial-texto {
  max-width: 160px;
  padding: 0 5px;
}

.chip-historial-num {
  padding-left: 4px;
}
/* Abierto se pinta como el hover: sin flecha, es lo que dice que esta desplegado */
.chip-historial:hover,
.chip-historial:focus-visible,
.chip-historial-abierto {
  color: var(--color-acento-tenue);
  border-color: var(--color-acento);
  background-color: var(--color-acento-oscuro);
}

/* flex 1 + recorte: la direccion se queda la fila entera y NUNCA parte en dos
   lineas; si alguna no cupiera, termina en puntos suspensivos */
.grupo-inquilinos-cabecera h3 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: bold;
  color: white;
  margin: 0;
}

/* Tarjeta de inquilino: borde superior suprimido cuando va pegada a la cabecera */
.grupo-inquilinos .tarjeta-inquilino:first-of-type {
  border-radius: 0 0 2px 2px;
  margin-bottom: 0;
}

/* Tarjeta de inmueble: cabecera azul (mismo patron que los grupos de Inquilinos)
   + cuerpo con la linea de consulta, la banda de inquilino/vacio y las cifras.
   El relleno vive en el cuerpo para que la cabecera llegue a los bordes */
.tarjeta-inmueble {
  padding: 0;
}

.inm-cabecera {
  background-color: var(--color-primario);
  color: white;
  padding: 10px 16px;
  border-radius: 2px 2px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* En escritorio el grupo no existe como caja: titulo y etiquetas son items directos
   de la cabecera, igual que antes. En movil pasa a bloque de dos lineas */
.inm-cabecera-textos {
  display: contents;
}

/* La poblacion solo acompaña al titulo en movil; en escritorio va en la linea de consulta */
.inm-poblacion-movil {
  display: none;
}

/* Especificidad 0-2-0 a proposito: `.tarjeta h3` (0-1-1) le colaba 16px de margen */
.inm-cabecera .inm-titulo-cabecera {
  font-size: 14px;
  font-weight: bold;
  color: white;
  margin: 0;
}

/* Mismo icono que en Facturas, en version clara: sobre el azul, el borde oscuro
   del boton secundario no se veria. La geometria la pone .btn-icono */
.btn-editar-cabecera {
  margin-left: auto;
  border: 1px solid var(--color-neutro);
  border-radius: 50%;
  background: transparent;
  color: var(--color-fondo);
  cursor: pointer;
}

.btn-editar-cabecera:hover {
  border-color: var(--color-acento);
  background-color: var(--color-acento-oscuro);
  color: var(--color-acento-tenue);
}

/* Sin fondo propio: el destello de cabecera-resaltada se pinta en la tarjeta */
.inm-cuerpo {
  padding: 14px 16px 16px;
}
.inm-linea-consulta {
  font-size: 12px;
  color: var(--color-texto-tenue);
  overflow-wrap: anywhere;
}
.btn-copiar-ref {
  cursor: pointer;
  color: var(--color-acento-oscuro);
}
.btn-copiar-ref:hover { color: var(--color-acento); }
.inm-banda {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--color-fondo-suave);
  border-radius: 2px;
  cursor: pointer;
}
.inm-banda:hover { background: var(--color-acento-tenue); }
.inm-banda-datos { flex: 1; min-width: 0; }
.inm-banda-nombre { font-size: 13px; font-weight: 600; color: var(--color-texto); }
.inm-banda-sub { font-size: 11px; color: var(--color-texto-tenue); }
.inm-banda-flecha { color: var(--color-texto-tenue); }
.inm-banda-vacio {
  background: var(--estado-vacio-fondo);
  color: var(--estado-vacio-texto);
  font-size: 12px;
  font-style: italic;
  justify-content: space-between;
}

/* Tarjeta del inquilino activo: identidad + estado + contacto + cifras */
.inq-cuerpo {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.inq-cuerpo .inq-titulares { flex: 1; }
/* Editar a la altura del AVATAR del primer titular: centrarlo contra el bloque
   entero lo dejaba en el hueco al apilarse los titulares (movil), y el avatar es
   lo unico que no encoge si al inquilino le falta el telefono o el email */
.inq-acciones {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 42px; /* el de .inq-avatar */
}
.inq-titulares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.inq-titular {
  display: flex;
  gap: 10px;
  min-width: 0;
}
.inq-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-acento-tenue);
  color: var(--color-acento-oscuro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.inq-nombre {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-texto);
}
.inq-dni {
  font-size: 12px;
  color: var(--color-texto-suave);
  margin-bottom: 4px;
}
.inq-contacto {
  display: block;
  font-size: 13px;
  color: var(--color-acento-oscuro);
  text-decoration: none;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.inq-contacto:hover { text-decoration: underline; }
/* Banda de deuda a sangre al pie de la tarjeta: los margenes negativos cancelan
   el padding de .tarjeta para que llegue a los bordes. Solo se pinta si debe */
.inq-banda-deuda {
  margin: 16px -20px -20px;
  padding: 9px 20px;
  background: var(--estado-error-fondo);
  color: var(--estado-error-texto);
  font-size: 12px;
  font-weight: 600;
  border-radius: 0 0 2px 2px; /* el mismo radio que .tarjeta */
}
.inq-badge {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 10px;
  white-space: nowrap;
}
.inq-badge-ok    { background: var(--estado-ok-fondo);    color: var(--estado-ok-texto); }
.inq-badge-mal   { background: var(--estado-error-fondo); color: var(--estado-error-texto); }
.inq-badge-prop  { background: var(--estado-aviso-fondo); color: var(--estado-aviso-texto); }
.inq-franja {
  display: flex;
  margin-top: 12px;
  background: var(--color-fondo-suave);
  border-radius: 2px;
  padding: 8px 0;
  text-align: center;
}
.inq-metrica {
  flex: 1;
  border-right: 1px solid var(--color-borde);
  min-width: 0;
}

/* Fianza y PROP comparten metrica en dos mini-columnas, cada una con su
   titulo encima (mismo patron que el resto de la franja): el ✓/✗ queda
   centrado bajo la palabra PROP en vez de pegado al importe */
.inq-metrica-duo {
  display: flex;
  gap: 18px;
  justify-content: center;
}

.inq-metrica-duo > span { min-width: 0; }
.inq-metrica:last-child { border-right: none; }
.inq-metrica-ancha { flex: 1.4; }
.inq-metrica-label {
  display: block;
  font-size: 11px;
  color: var(--color-texto-tenue);
}
.inq-metrica-valor {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-texto);
}

/* Seccion oculta con los inquilinos historicos */
.historico-seccion {
  margin-top: 4px;
}

/* Historial compacto: una linea por inquilino anterior, ficha al expandir */
.lista-historico {
  border: 1px solid var(--color-neutro);
  border-radius: 2px;
  background: white; /* mismo fondo literal que .tarjeta */
}
.fila-historico + .fila-historico,
.fila-historico + .fila-vacio,
.fila-vacio + .fila-historico {
  border-top: 1px solid var(--color-neutro);
}
.fila-historico-linea {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.fila-historico-linea:hover { background: var(--color-acento-tenue); }
.fila-historico-nombre { font-weight: 600; color: var(--color-texto); }
.fila-historico-dni { color: var(--color-texto-tenue); font-size: 12px; }
.fila-historico-fechas {
  margin-left: auto;
  color: var(--color-texto-suave);
  font-size: 12px;
  white-space: nowrap;
}
.fila-historico-abierta { background: var(--color-fondo-suave); }
.ficha-historico { padding: 4px 12px 10px 32px; }
.ficha-historico-extra {
  font-size: 12px;
  color: var(--color-texto-suave);
  margin: 8px 0;
}
.ficha-historico-acciones {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.fila-vacio {
  padding: 6px 12px;
  font-size: 12px;
  font-style: italic;
  color: var(--color-texto-tenue);
  background: var(--color-fondo-suave);
}





.prop-estado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 2px solid var(--color-acento);
  font-size: 12px;
  font-weight: bold;
  margin-top: 2px;
}

.prop-si {
  background-color: var(--color-acento);
  border-color: var(--color-acento);
  color: #fff;
}

.prop-no {
  background-color: transparent;
  border-color: var(--color-neutro);
  color: transparent;
}

/* Campo con label y checkbox en la misma línea */
.campo-inline-check {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.campo-inline-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}




/* Texto pequeño cuando no hay inquilino activo */
.texto-vacio-pequeno {
  color: var(--color-texto-tenue);
  font-style: italic;
  font-size: 13px;
  padding: 12px 4px;
}
/* ============================================================
   TABLA DE GASTOS
   ============================================================ */

/* Grafico del reparto de gastos por categoria (G9) */
/* Donut del reparto de gastos (bajo la tabla): cartera o inmueble seleccionado */
.grafico-gastos {
  display: none;
  background: white;
  border: 1px solid var(--color-borde);
  border-radius: 2px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.donut-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primario);
  margin-bottom: 10px;
}
.donut-quitar {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-acento-oscuro);
  border: 1px solid var(--color-acento);
  border-radius: 10px;
  padding: 1px 10px;
  margin-left: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.donut-quitar:hover { background: var(--color-acento-tenue); }
.donut-cuerpo {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.donut-svg {
  width: 180px;
  height: 180px;
  flex-shrink: 0;
}
.donut-seg {
  fill: none;
  stroke-width: 18;
}
.donut-total-cifra {
  font-size: 11px;
  font-weight: 700;
  fill: var(--color-texto);
}
.donut-total-etiqueta {
  font-size: 8px;
  fill: var(--color-texto-tenue);
}
.donut-leyenda { min-width: 220px; }
.donut-leyenda-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 3px 0;
}
.donut-punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.donut-leyenda-etiqueta {
  flex: 0 0 90px;
  color: var(--color-texto-suave);
}
.donut-leyenda-importe {
  font-weight: 600;
  color: var(--color-primario);
}
/* Paleta fija por categoria (stroke para el SVG, background para la leyenda) */
.donut-color-0 { stroke: var(--color-primario);       background: var(--color-primario); }
.donut-color-1 { stroke: var(--color-primario-suave); background: var(--color-primario-suave); }
.donut-color-2 { stroke: var(--estado-ok-texto);      background: var(--estado-ok-texto); }
.donut-color-3 { stroke: var(--color-peligro);        background: var(--color-peligro); }
.donut-color-4 { stroke: var(--color-neutro);         background: var(--color-neutro); }
.donut-color-5 { stroke: var(--color-acento-oscuro);  background: var(--color-acento-oscuro); }
.donut-color-6 { stroke: var(--color-acento);         background: var(--color-acento); }
/* Fila del inmueble seleccionado para el donut */
.col-inmueble-clicable { cursor: pointer; }
.col-inmueble-clicable:hover { background: var(--color-acento-tenue); }
/* Sin el filete dorado de antes: ese borde izquierdo es ahora del color del
   TIPO (filete-tipo-*), asi que la seleccion la dice solo el fondo */
.fila-donut-activa .col-inmueble-gastos {
  background: var(--color-acento-tenue);
  font-weight: 600;
}

.contenedor-tabla-gastos {
  overflow-x: auto;
  margin-bottom: 24px;
}

#tabla-gastos {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: white;
  border-radius: 2px;
  /* OJO: sin overflow aqui. Cualquier overflow != visible convierte la tabla
     en contenedor de scroll y el sticky de la cabecera se ancla a ella (misma
     trampa que mordio en Pagos). El radio de 2px queda sin recortar: asumido. */
  border: 1px solid var(--color-borde);
}

#tabla-gastos th {
  background-color: var(--color-primario);
  color: var(--color-fondo);
  font-family: var(--fuente-datos);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 8px;
  text-align: center;
  white-space: nowrap;
}

/* La cabecera de esta columna respeta el fondo y la fuente del resto: solo el cuerpo lleva el sombreado */
#tabla-gastos th.col-inmueble-gastos {
  text-align: left;
  padding-left: 12px;
  min-width: 180px;
}

#tabla-gastos td {
  padding: 8px 6px;
  text-align: right;
  border-bottom: 1px solid var(--color-borde-fila);
  /* La tabla scrollea en horizontal: una celda nunca parte su contenido en dos
     lineas (el › de facturas se caia solo a la 2a y parecia una coma) */
  white-space: nowrap;
}

#tabla-gastos tbody tr:nth-child(even) {
  background-color: var(--color-fondo-suave);
}

#tabla-gastos tbody tr:hover {
  background-color: var(--color-acento-tenue);
}

/* Columna identificadora: fondo Gris Perla y tipografia serif de marca.
   En filas pares usa un tono mas oscuro para que el cebrado se note tambien aqui.
   Especificidad #tabla-gastos td.col-inmueble-gastos necesaria: la regla de cifras
   en negrita (#tabla-gastos td) pesa mas que una clase sola y pisaba la fuente serif */
#tabla-gastos td.col-inmueble-gastos {
  text-align: left !important;
  padding-left: 12px !important;
  font-family: var(--fuente-titulos);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primario);
  background-color: var(--color-id-col-fondo);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tabla-gastos tbody tr:nth-child(even) td.col-inmueble-gastos {
  background-color: var(--color-id-col-fondo-cebra);
}

/* Sin la columna Tipo, el separador de los datos numericos pasa aqui */
#tabla-gastos td.col-inmueble-gastos {
  border-right: 1px solid var(--color-borde);
}

/* FILETE DEL TIPO (2026-08-20): sustituye a la columna Tipo con los MISMOS
   colores de .etiqueta-{tipo}; el nombre del tipo va ademas en el title.
   box-shadow inset y no border-left: la celda es sticky, y con
   border-collapse los bordes de una celda fija pueden quedarse atras al
   pintar — la sombra viaja siempre con ella */
#tabla-gastos td.filete-tipo-casa     { box-shadow: inset 4px 0 0 #4E6B45; }
#tabla-gastos td.filete-tipo-piso     { box-shadow: inset 4px 0 0 var(--color-primario-suave); }
#tabla-gastos td.filete-tipo-local    { box-shadow: inset 4px 0 0 var(--color-acento); }
#tabla-gastos td.filete-tipo-garaje   { box-shadow: inset 4px 0 0 #55524B; }
#tabla-gastos td.filete-tipo-trastero { box-shadow: inset 4px 0 0 #5E4470; }

/* Cabecera fija al hacer scroll, calcada de Pagos (P6). El contenedor principal
   pierde el overflow en escritorio: un contenedor con scroll anclaria el sticky
   a si mismo y no a la pagina (trampa documentada); en movil vuelve (breakpoint) */
.contenedor-gastos-principal {
  overflow-x: visible;
}

#tabla-gastos thead th {
  position: sticky;
  top: var(--desplazamiento-fijo);
  z-index: 2;
}

/* Primera columna fija al arrastrar, calcada de Pagos: los fondos ya son
   opacos (th azul, td gris perla con su cebra, TOTAL fondo de pagina) */
#tabla-gastos td:first-child,
#tabla-gastos th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

/* Esquina superior izquierda: por encima de la cabecera y de la columna fijas */
#tabla-gastos thead th:first-child {
  z-index: 3;
}

.col-total-gastos {
  font-weight: bold;
  color: var(--color-primario);
  white-space: nowrap;
  text-align: right;
}

/* Celda editable: cursor mano y resaltado al pasar */
.celda-gasto {
  cursor: pointer;
  transition: background-color 0.15s;
}

.celda-gasto:hover {
  background-color: var(--color-acento-tenue);
  color: var(--color-primario);
}

/* Celda sin registro aun (primer clic crea el registro) */
.celda-gasto-vacia {
  color: var(--color-neutro);
}

/* Input que aparece al editar una celda */
/* El editor se SUPERPONE a la celda en vez de ocuparla. Un input EN FLUJO
   aporta su ancho preferido (unos 150px en un type=number) al reparto de la
   tabla; como #tabla-pagos va al 100% hay holgura que repartir, asi que la
   columna crecia hacia ese ancho. width:100% y min-width:0 NO lo arreglan:
   solo tocan el minimo, y aqui manda el preferido. Fuera del flujo no mide
   nada y la columna ni se entera. Las primeras columnas (col-inmueble y
   col-inmueble-gastos) no llevan estas clases, asi que su sticky no se toca */
.celda-pago,
.celda-gasto {
  position: relative;
}
.input-celda-gasto {
  position: absolute;
  inset: 0;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-primario);
  border-radius: 2px;
  padding: 3px 6px;
  font-size: 13px;
  text-align: right;
  outline: none;
}

/* ============================================================
   TABLA DE FACTURAS (dentro de la vista Gastos)
   ============================================================ */





/* Celda Facturas en tabla Gastos: solo lectura, azul si tiene valor */
.celda-facturas-calculada {
  color: var(--color-primario);
  font-weight: bold;
  cursor: default !important;
}

.celda-facturas-calculada:hover {
  background-color: transparent !important;
}

/* Enlace hacia la sub-vista Facturas desde la celda calculada (G6) */
.enlace-facturas {
  cursor: pointer;
  text-decoration: underline dotted;
}

.enlace-facturas:hover {
  text-decoration-style: solid;
}

/* Botón pequeño para eliminar en tabla */
.btn-pequeno {
  padding: 3px 8px;
  font-size: 11px;
}

/* Boton de accion por icono (editar/papelera en Facturas): cuadrado, el dibujo hereda el color */
.btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
}

.btn-icono svg {
  width: 16px;
  height: 16px;
}

/* La celda de acciones nunca parte la linea: con conceptos largos los iconos se apilaban */
.celda-acciones {
  white-space: nowrap;
}

/* Grupos de facturas por inmueble */
.grupo-facturas {
  margin-bottom: 28px;
}

/* Franja Azul Noche a sangre, el mismo patron que las cabeceras de grupo de
   Inquilinos y de la tarjeta de inmueble (antes: subrayado azul con hueco) */
.grupo-facturas-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background-color: var(--color-primario);
  border-radius: 2px 2px 0 0;
}

.grupo-facturas-cabecera h3 {
  font-size: 14px;
  font-weight: bold;
  color: white;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grupo-facturas-total {
  font-weight: bold;
  color: white;
  font-size: 14px;
  flex: none;
}

/* Pegada a su cabecera azul: sin hueco y con las esquinas de arriba rectas */
.grupo-facturas .contenedor-tabla-gastos {
  margin-bottom: 0;
}

.tabla-facturas-grupo {
  border-radius: 0 0 2px 2px;
  width: 100%;
  /* Reparto de columnas FIJO: cada grupo es una tabla y, sin esto, cada una
     autoajustaba anchos a su contenido y los grupos no casaban entre si */
  table-layout: fixed;
  min-width: 780px;
  border-collapse: collapse;
  font-size: 13px;
  background: white;
  overflow: hidden;
  border: 1px solid var(--color-borde);
}

/* Anchos del reparto comun; Concepto (4a) no lleva ancho: absorbe el sobrante */
.tabla-facturas-grupo th:nth-child(1) { width: 190px; }
.tabla-facturas-grupo th:nth-child(2) { width: 130px; }
.tabla-facturas-grupo th:nth-child(3) { width: 120px; }
.tabla-facturas-grupo th:nth-child(5) { width: 120px; }
.tabla-facturas-grupo th:nth-child(6) { width: 104px; }

/* El CIF nunca se parte en dos lineas */
.tabla-facturas-grupo td:nth-child(2) {
  white-space: nowrap;
}

.tabla-facturas-grupo .col-total-gastos {
  text-align: center;
}

.tabla-facturas-grupo th {
  background-color: var(--color-primario);
  color: var(--color-fondo);
  font-family: var(--fuente-datos);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 20px;
  text-align: left;
  white-space: nowrap;
}

.tabla-facturas-grupo td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-borde-fila);
  vertical-align: middle;
}

/* Columna identificadora: fondo Gris Perla y tipografia serif solo en el cuerpo;
   la cabecera respeta el fondo y la fuente del resto de columnas.
   En filas pares usa un tono mas oscuro para que el cebrado se note tambien aqui */
.tabla-facturas-grupo td:first-child {
  background-color: var(--color-id-col-fondo);
  border-right: 1px solid var(--color-borde);
  font-family: var(--fuente-titulos);
  font-weight: 600;
  color: var(--color-primario);
  font-size: 16px;
}

.tabla-facturas-grupo tbody tr:nth-child(even) {
  background-color: var(--color-fondo-suave);
}

.tabla-facturas-grupo tbody tr:nth-child(even) td:first-child {
  background-color: var(--color-id-col-fondo-cebra);
}

.tabla-facturas-grupo tbody tr:hover {
  background-color: var(--color-acento-tenue);
}

/* Sumatorio de fianzas al final de la lista de inmuebles */
.total-fianzas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background-color: var(--color-primario);
  color: white;
  margin-top: 8px;
}

.total-fianzas-label {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.total-fianzas-valor {
  font-size: 18px;
  font-weight: bold;
}

/* Nombre de inmueble clicable para ir a Inquilinos */
.tarjeta-direccion-link {
  cursor: pointer;
  transition: color 0.15s;
}

.tarjeta-direccion-link:hover {
  color: var(--color-acento-oscuro);
  text-decoration: underline;
}

/* Resaltado temporal del grupo al llegar desde Inmuebles */
@keyframes resaltarGrupo {
  0%   { background-color: #E3D5AE; }
  70%  { background-color: #E3D5AE; }
  100% { background-color: transparent; }
}

.cabecera-resaltada {
  animation: resaltarGrupo 1.2s ease forwards;
  border-radius: 2px;
}

/* ============================================================
   DECLARACION DE RENTA
   ============================================================ */

.toggle-amortizacion {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-texto-suave);
  cursor: pointer;
}

.toggle-amortizacion input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* La seccion de renta rompe el max-width del main para usar todo el ancho disponible.
   El "ancho disponible" es la zona de contenido: el viewport MENOS la sidebar fija */
#seccion-renta {
  width: calc(100vw - var(--ancho-sidebar));
  margin-left: calc((100% - (100vw - var(--ancho-sidebar))) / 2);
  margin-right: calc((100% - (100vw - var(--ancho-sidebar))) / 2);
  padding: 0 24px;
  box-sizing: border-box;
}

.contenedor-tabla-renta {
  overflow-x: auto;
  border-radius: 2px;
  border: 1px solid var(--color-borde);
}

/* Vista "Todos": sin cabecera fija arriba, el borde superior del contenedor
   quedaba como una linea suelta antes de la primera etiqueta de propietario */
.contenedor-tabla-renta.sin-cabecera-fija {
  border-top: none;
  border-radius: 0 0 2px 2px;
}

#tabla-renta {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}

#tabla-renta th {
  background-color: var(--color-primario);
  color: var(--color-fondo);
  font-family: var(--fuente-datos);
  padding: 7px 6px;
  text-align: left;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tabla-renta td {
  padding: 6px 6px;
  border-bottom: 1px solid var(--color-borde-fila);
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tabla-renta tbody tr:nth-child(even) {
  background: var(--color-fondo-suave);
}

#tabla-renta tbody tr:hover {
  background: var(--color-acento-tenue);
}

/* Columna identificadora: fondo Gris Perla, serif de marca, rompe el mono a proposito.
   Especificidad #tabla-renta th.th-renta-inmueble necesaria: el id #tabla-renta th pesa mas que la clase sola */
/* La cabecera de esta columna respeta el fondo y la fuente del resto: solo el cuerpo lleva el sombreado */
.th-renta-inmueble {
  width: 110px;
}
.td-renta-inmueble {
  width: 110px;
  background-color: var(--color-id-col-fondo);
  border-right: 1px solid var(--color-borde);
  font-family: var(--fuente-titulos);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primario);
}

/* En filas pares usa un tono mas oscuro para que el cebrado se note tambien aqui */
#tabla-renta tbody tr:nth-child(even) td.td-renta-inmueble {
  background-color: var(--color-id-col-fondo-cebra);
}
.th-renta-catastral,  .td-renta-catastral  { width: 145px; font-size: 10px; color: var(--color-texto-suave); white-space: nowrap; }
.th-renta-inquilino,  .td-renta-inquilino  { width: 160px; }
.th-renta-dias,       .td-renta-dias       { width: 52px;  text-align: center; color: var(--color-texto-suave); }
.th-renta-importe,    .td-renta-importe    { width: 88px;  text-align: right;  white-space: nowrap; }
.th-renta-prop,       .td-renta-prop       { width: 38px;  text-align: center; }

.renta-poblacion {
  font-size: 10px;
  color: var(--color-texto-tenue);
  font-weight: normal;
}

/* Sobre el fondo Gris Perla de la columna identificadora, el texto tenue no cumple contraste AA */
.td-renta-inmueble .renta-poblacion {
  color: var(--color-texto-suave);
}

.renta-inq-bloque {
  margin-bottom: 2px;
}

.renta-inq-nuevo {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--color-borde);
}

.renta-inq-nombre {
  display: block;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.renta-inq-dni {
  display: block;
  font-size: 10px;
  color: var(--color-texto-tenue);
}

.td-renta-prop {
  text-align: center;
  min-width: 50px;
}

.rendimiento-positivo {
  color: #3F7A50;
  font-weight: 600;
}

.rendimiento-negativo {
  color: var(--color-peligro);
  font-weight: 600;
}

/* Indicadores de la tabla de renta: aviso de imputacion sin configurar (⚠) y de limite de facturas (●) */
.aviso-renta {
  color: var(--color-acento-oscuro);
  cursor: help;
  margin-right: 4px;
}

/* Bloque "Imputacion por municipio": reutiliza .ajustes-card, filas de .campo en rejilla */
#config-imputacion {
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.campo-imputacion {
  flex: 0 0 220px;
  margin-bottom: 0;
}

.fila-totales-renta td {
  background: var(--color-primario-tenue);
  border-top: 2px solid var(--color-neutro);
  padding: 12px;
}

/* ---- Selector de propietario en cabecera ---- */
.header-controles {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Con el h1 oculto en escritorio, sin esto los controles saltan a la izquierda */
  margin-left: auto;
}

.selector-propietario {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.4);
  color: white;
  padding: 6px 12px;
  border-radius: 2px;
  font-size: 13px;
  cursor: pointer;
  max-width: 200px;
}

.selector-propietario option {
  background: var(--color-primario);
  color: white;
}

.selector-propietario:focus {
  outline: none;
  background: rgba(255,255,255,0.25);
}



/* ---- Filas de grupo en tabla renta (modo Todos) ---- */
/* Mismo padding-izquierdo que el resto de columnas de la tabla (6px), para que
   la etiqueta quede alineada con "Inmueble" y no parezca flotar aparte */
.fila-grupo-propietario td {
  padding: 8px 6px 0;
}

/* No es una fila de datos: no participa del cebrado ni del hover de la tabla */
#tabla-renta tbody tr.fila-grupo-propietario:nth-child(even),
#tabla-renta tbody tr.fila-grupo-propietario:hover {
  background: transparent;
}

/* Etiqueta de propietario (opcion 5 del mockup aprobado): avatar circular con
   iniciales + nombre en negrita, en vez de la pildora oscura anterior. Ancho del
   contenido, no de toda la fila, para que se lea como encabezado de seccion, no
   como una fila mas de la tabla */
.etiqueta-propietario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.etiqueta-propietario-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primario);
  color: var(--color-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}
.etiqueta-propietario-nombre {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-texto);
}

/* Separacion visual entre el subtotal de un propietario y el nombre del siguiente */
.fila-grupo-propietario-espaciada td {
  padding-top: 22px;
}

/* Pequeño espacio entre el nombre del propietario y el encabezado de columnas repetido */
.fila-encabezado-grupo th {
  padding-top: 14px;
}

.fila-subtotal-propietario td {
  background: var(--color-primario-tenue);
  border-top: 2px solid var(--color-primario);
  padding: 10px 12px;
  font-weight: 600;
}

/* ---- Desglose por contrato en la tabla de renta (filas expandibles) ---- */
.flecha-desglose {
  cursor: pointer;
  color: var(--color-acento-oscuro);
  margin-right: 4px;
  display: inline-block;
}

.fila-desglose td {
  background: var(--color-acento-tenue);
  color: var(--color-texto-suave);
  font-size: 12px;
}

.celda-desglose-nombre {
  width: 110px;
  padding-left: 14px;
  border-left: 3px solid var(--color-acento);
  font-weight: 500;
}

/* Sub-filas de "Imputacion vacio" y "Sin contrato": no son un contrato real */
.fila-desglose-especial td {
  font-style: italic;
}

/* ============================================================
   LOGIN OVERLAY
   ============================================================ */
.login-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: var(--color-primario);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.login-tarjeta {
  background: white;
  border-radius: 2px;
  padding: 48px 40px;
  text-align: center;
  max-width: 380px;
  width: 90%;
}

.login-escudo {
  height: 56px;
  width: auto;
  margin-bottom: 16px;
}

.login-titulo {
  font-family: var(--fuente-titulos);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-primario);
  margin: 0 0 8px;
}

/* Claim de marca bajo el logotipo */
.login-subtitulo {
  color: var(--color-texto-tenue);
  margin: 0 0 32px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: white;
  border: 2px solid var(--color-borde);
  border-radius: 2px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-texto);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.btn-google:hover {
  border-color: var(--color-acento);
}

.login-estado {
  margin-top: 20px;
  color: var(--color-texto-suave);
  font-size: 0.9rem;
}

.login-error {
  margin-top: 16px;
  color: var(--color-peligro);
  font-size: 0.875rem;
}

/* --- Puerta de entrada multiusuario --- */
.login-descripcion {
  color: var(--color-texto-suave);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 24px;
}

.campo-solicitud {
  text-align: left;
  margin-bottom: 16px;
}

.campo-solicitud label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-texto-tenue);
  margin-bottom: 4px;
}

.campo-solicitud input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--color-borde);
  border-radius: 2px;
  font-size: 1rem;
  box-sizing: border-box;
}

.campo-solicitud input:focus-visible {
  outline: none;
  border-color: var(--color-acento);
}

.check-condiciones {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  margin-bottom: 20px;
  cursor: pointer;
}

.check-condiciones a {
  color: var(--color-primario);
}

.btn-login-secundario {
  font-family: var(--fuente-cuerpo); /* los button no heredan la fuente del body */
  background: none;
  border: none;
  color: var(--color-texto-tenue);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 4px;
}

/* Pagina legal (condiciones.html) */
.pagina-legal {
  background: var(--color-fondo);
  margin: 0;
}

.legal-contenido {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px;
  font-family: var(--fuente-cuerpo);
  color: var(--color-texto);
  line-height: 1.6;
}

.legal-contenido h2 {
  font-family: var(--fuente-titulos);
  color: var(--color-primario);
}

.legal-nota {
  font-size: 0.85rem;
  color: var(--color-texto-tenue);
  border-top: 1px solid var(--color-borde);
  padding-top: 16px;
  margin-top: 32px;
}

/* --- Panel de administracion --- */
.badge-pendientes {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--color-peligro);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

.admin-grupo {
  margin-bottom: 32px;
}

.admin-grupo h3 {
  font-family: var(--fuente-titulos);
  color: var(--color-primario);
  margin: 0 0 12px;
}

.tabla-admin {
  width: 100%;
  border-collapse: collapse;
  background: white;
  font-size: 0.9rem;
}

.tabla-admin th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--color-borde);
  color: var(--color-texto-tenue);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tabla-admin td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-borde);
  vertical-align: middle;
}

.tabla-admin .celda-acciones {
  text-align: right;
  white-space: nowrap;
}

.admin-vacio {
  color: var(--color-texto-tenue);
  font-style: italic;
}

.badge-estado-cuenta {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 2px;
  background: var(--color-fondo);
  color: var(--color-texto-suave);
  border: 1px solid var(--color-borde);
}

/* ---- Panel de Administracion: sub-vistas Cuentas/Planes (PLN-T6) ---- */

/* Conmutador de sub-vista, mismo espiritu visual que .btn-criterio */
.selector-vista-admin {
  display: flex;
  gap: 8px;
}

.btn-vista-admin {
  background: white;
  border: 1px solid var(--color-borde);
  border-radius: 16px;
  padding: 6px 16px;
  font-family: var(--fuente-cuerpo);
  font-size: 13px;
  color: var(--color-texto);
  cursor: pointer;
}

.btn-vista-admin:hover { border-color: var(--color-acento); }

.btn-vista-admin.vista-admin-activa {
  border-color: var(--color-acento);
  background: var(--color-acento-tenue);
  color: var(--color-acento-oscuro);
  font-weight: 600;
}

/* Realce dorado de la tarjeta KPI "Solicitudes de Pro" cuando hay alguna */
.metrica-resumen-dorado {
  border-color: var(--color-acento);
  background: var(--color-acento-tenue);
}

.badge-plan {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.5px;
}

.badge-plan-free {
  background: var(--color-fondo);
  color: var(--color-texto-suave);
  border: 1px solid var(--color-borde);
}

.badge-plan-pro {
  background: var(--color-acento);
  color: var(--color-primario);
}

/* Fila de una cuenta que ha pedido Pro: borde dorado a la izquierda */
.fila-solicitud-pro td:first-child {
  border-left: 3px solid var(--color-acento);
}

.etiqueta-solicitud-pro {
  font-size: 0.72rem;
  color: var(--color-acento-oscuro);
  font-weight: 600;
}

/* Detalle inline de una cuenta (inmuebles + uso IA del mes) */
.fila-detalle-cuenta td {
  background: var(--color-acento-tenue);
}

.detalle-cuenta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.detalle-cuenta-dato {
  display: flex;
  flex-direction: column;
}

.detalle-cuenta-etiqueta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-texto-tenue);
}

.detalle-cuenta-valor {
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
}

/* Editor del catalogo de planes: dos tarjetas lado a lado */
.tarjetas-planes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.tarjeta-plan {
  flex: 1 1 260px;
  background: white;
  border: 1px solid var(--color-borde);
  border-radius: 2px;
  padding: 16px;
}

.tarjeta-plan h3 {
  font-family: var(--fuente-titulos);
  color: var(--color-primario);
  margin: 0 0 12px;
}

.tarjeta-plan-pro {
  border: 2px solid var(--color-acento);
}

.login-usuario-header {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
  align-self: center;
}

/* --- Gestion de propietarios (Ajustes) --- */
.propietario-fila {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

/* min-width 0: sin el, el ancho intrinseco del input impide que encoja y la fila
   desbordaba el panel en movil (el boton de borrar se salia de la pantalla) */
.propietario-fila input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-neutro);
  border-radius: 2px;
  font-size: 14px;
}

.propietario-nuevo {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.propietario-nuevo input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-neutro);
  border-radius: 2px;
  font-size: 14px;
}

/* ============================================================
   MARCA HM PATRIMONIA — titulos de seccion y cifras
   ============================================================ */

/* Titulos de pestaña en la serif de marca */
main h2 {
  font-family: var(--fuente-titulos);
  font-size: 28px;
  font-weight: 600;
  color: var(--color-primario);
}

/* Referencias/codigos en DM Mono: la ref. catastral se lee como un codigo tecnico */
.td-renta-catastral {
  font-family: var(--fuente-datos);
}

/* Columnas numericas: DM Sans geometrica en negrita, alineada a la derecha,
   con tabular-nums para que los digitos casen visualmente entre filas */
#tabla-pagos td.col-total,
#tabla-pagos td.celda-total-mes,
#tabla-gastos td,
.tabla-facturas-grupo td.col-total-gastos,
.td-renta-importe,
.td-renta-dias,
.total-fianzas-valor,
.grupo-facturas-total {
  font-family: var(--fuente-cuerpo);
  font-variant-numeric: tabular-nums;
}

#tabla-pagos td.col-total,
#tabla-gastos td,
.tabla-facturas-grupo td.col-total-gastos,
.td-renta-importe,
.total-fianzas-valor,
.grupo-facturas-total {
  font-weight: 700;
}

#tabla-pagos th.col-total,
#tabla-pagos td.col-total {
  text-align: right;
  padding-right: 12px;
}

/* ============================================================
   BLOQUE 2 — MEJORAS DE UX
   ============================================================ */

/* ---- Leyenda de colores bajo la tabla de Pagos ---- */
.leyenda-pagos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: -12px 0 24px;
  font-size: 12px;
  color: var(--color-texto-suave);
}

.leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.leyenda-color {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid var(--color-borde);
  flex-shrink: 0;
}

/* La celda "sin registrar" no tiene fondo propio: en la leyenda le damos uno neutro */
.leyenda-color.leyenda-sin-registrar {
  background: white;
  color: var(--color-neutro);
}

/* ---- Hover diferenciado por estado de pago (item 5) ----
   El resaltado de fila al pasar (fondo + tonos oscuros en las celdas de
   estado) se RETIRO el 2026-08-20 a peticion de Carlos: en tactil el hover
   se queda pegado tras el toque y la fila entera quedaba pintada */

/* ---- Foco de teclado visible (item 8) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}

/* Sobre fondo azul oscuro (nav, cabecera) el oro se ve, pero reforzamos el offset */
nav button:focus-visible {
  outline-offset: -3px;
}

/* Elementos clicables que no son botones: manita para indicar que responden */
.anio-clicable,
.celda-pago[role="button"],
.celda-gasto[role="button"] {
  cursor: pointer;
}

/* ---- Indicador de sincronizacion en la cabecera (item 9) ---- */
.indicador-sync {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 2px;
  white-space: nowrap;
  display: none; /* oculto hasta que hay un estado que mostrar */
}

.indicador-sync.sync-error {
  display: inline-block;
  background: rgba(166,61,47,0.85);
  color: #fff;
}

/* ---- Desplegable de año (item 12) ---- */
.anio-clicable {
  position: relative;
}

.anio-clicable:hover {
  color: var(--color-acento-oscuro);
}

.menu-anio {
  position: absolute;
  background: white;
  border: 1px solid var(--color-borde);
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(15,34,64,0.15);
  z-index: 1500;
  max-height: 260px;
  overflow-y: auto;
  min-width: 90px;
}

.menu-anio-item {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 15px;
  font-family: var(--fuente-datos);
  color: var(--color-primario);
}

.menu-anio-item:hover {
  background: var(--color-acento-tenue);
}

.menu-anio-item.activo {
  background: var(--color-primario);
  color: white;
  font-weight: bold;
}

/* Menu del boton unico de alta de inquilino: mismo contenedor que el de años,
   pero con texto de lectura en vez de cifras */
.menu-nuevo-inquilino {
  min-width: 180px;
}

.menu-nuevo-inquilino .menu-anio-item {
  text-align: left;
  font-family: var(--fuente-cuerpo);
  font-size: 14px;
  padding: 10px 16px;
}

/* ---- Validacion inline en formularios (item 10) ---- */
.campo-con-error input,
.campo-con-error select {
  border-color: var(--color-peligro);
  background-color: #FCF4F2;
}

.mensaje-error-campo {
  display: block;
  color: var(--color-peligro);
  font-size: 12px;
  margin-top: 3px;
}

/* ---- Dialogo de confirmacion de marca (item 10) ---- */
.modal-confirmar {
  max-width: 440px;
}

/* El mensaje es un div (admite tablas y listas); hereda el mismo cuerpo de texto */
#modal-confirmar-mensaje,
.modal-confirmar .modal-cuerpo p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-texto);
  margin: 0;
}

/* Bloques de contexto dentro de una confirmacion: los datos que ya no caben en
   el panel se leen aqui, que es donde se decide */
.dialogo-datos {
  background: var(--color-fondo-suave);
  border: 1px solid var(--color-borde);
  border-radius: 2px;
  padding: 8px 10px;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-texto-suave);
}

.dialogo-seguro {
  background: var(--estado-ok-fondo);
  color: var(--estado-ok-texto);
  border-radius: 2px;
  padding: 8px 10px;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
}

/* Franja roja para lo irreversible: el filete la separa del resto del texto */
.dialogo-peligro {
  background: var(--estado-error-fondo);
  color: var(--estado-error-texto);
  border-left: 3px solid var(--color-peligro);
  border-radius: 0 2px 2px 0;
  padding: 10px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
}

/* Variante ancha: solo para el dialogo con la comparativa de planes */
.modal-comparativa {
  max-width: 600px;
}

/* ---- Avisos flotantes (toast) para mensajes informativos ---- */
.contenedor-avisos {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.aviso-toast {
  background: var(--color-primario);
  color: white;
  padding: 12px 20px;
  border-radius: 2px;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(15,34,64,0.25);
  max-width: 90vw;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.aviso-toast.aviso-error { background: var(--color-peligro); }
.aviso-toast.aviso-ok    { background: #3E5A38; }

.aviso-toast.saliendo {
  opacity: 0;
  transform: translateY(8px);
}

/* ---- Pestaña Documentos ---- */
.grupo-documentos-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  cursor: pointer;
}
/* Al pasar el raton por la cabecera, el nombre se marca como los enlaces de direccion */
.grupo-documentos-cabecera:hover .grupo-documentos-titulo {
  color: var(--color-acento-oscuro);
  text-decoration: underline;
}
.grupo-documentos-identidad { display: flex; align-items: baseline; gap: 10px; flex: 1; flex-wrap: wrap; }
.grupo-documentos-titulo { margin: 0; font-family: var(--fuente-titulos); }
.grupo-documentos-cuerpo { margin-top: 12px; }
/* Punto de estado: al pasar el raton se expande lateralmente y muestra el texto */
.doc-semaforo {
  display: inline-flex;
  align-items: center;
  height: 16px;
  min-width: 16px;
  max-width: 16px;
  border-radius: 8px;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: help;
  transition: max-width 0.25s ease;
}
.doc-completo   { background: var(--estado-ok-texto); }
.doc-incompleto { background: var(--color-peligro); }
.doc-semaforo::after {
  content: attr(data-etiqueta);
  color: var(--color-fondo);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0 10px 0 8px;
  opacity: 0;
  transition: opacity 0.2s ease 0.05s;
}
.doc-semaforo:hover,
.doc-semaforo:focus-visible { max-width: 220px; }
.doc-semaforo:hover::after,
.doc-semaforo:focus-visible::after { opacity: 1; }
.doc-heredado   { flex: 1; color: var(--color-texto-suave); font-style: italic; }
.doc-bloque { margin-bottom: 18px; }
.doc-bloque-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 2px solid var(--color-borde);
}
.doc-bloque-titulo { font-weight: 600; flex: 1; }
.doc-cabecera-anio { margin-top: 10px; }
.doc-tipo { padding: 8px 0; border-bottom: 1px solid var(--color-borde-fila); }
.doc-tipo-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.doc-tipo-falta .doc-tipo-etiqueta { color: var(--color-peligro); }
.doc-obligatorio { color: var(--color-acento-oscuro); }
.doc-aviso-falta { color: var(--color-peligro); font-size: 0.85rem; margin: 4px 0 0; }
.doc-archivo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0 4px 12px;
}
.doc-archivo-nombre { flex: 1; min-width: 150px; font-family: var(--fuente-datos); font-size: 0.85rem; }
.doc-archivo-anio   { color: var(--color-texto-tenue); }
.doc-archivo-fecha  { color: var(--color-texto-tenue); font-size: 0.8rem; }
.doc-selector-anio  { padding: 2px 6px; }

/* ---- Filtro transversal: boton embudo, buscador, barra de criterios ---- */
.zona-filtros { margin: 4px 0 12px; }

/* El buscador va delante y el embudo detras (order, sin tocar el HTML que
   genera renderizarControlesFiltros): las burbujas del embudo asoman 6px por
   su izquierda, y asi caen sobre este hueco de 16 y no sobre el margen de la
   pagina, que es lo que pasaba con el embudo abriendo la fila */
.fila-filtros { display: flex; align-items: center; gap: 16px; }

.btn-filtros {
  order: 2;
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  min-width: 32px;
  padding: 0 9px;
  border: none;
  border-radius: 16px;
  background: var(--color-primario);
  color: var(--color-fondo);
  cursor: pointer;
}

/* Igual que el semaforo de Documentos: el texto se despliega al pasar el raton */
.btn-filtros-texto {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 600;
  transition: max-width 0.25s ease, padding-left 0.25s ease;
}

.btn-filtros:hover .btn-filtros-texto,
.btn-filtros:focus-visible .btn-filtros-texto { max-width: 70px; padding-left: 6px; }

.btn-filtros.filtros-abiertos { background: var(--color-acento-oscuro); }

/* Burbuja roja de "quitar filtros": solo asoma al pasar el raton por el boton */
.filtro-badge-limpiar {
  position: absolute;
  bottom: -6px;
  left: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-peligro);
  color: white;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.btn-filtros:hover .filtro-badge-limpiar,
.filtro-badge-limpiar:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.filtro-badge-limpiar:hover { filter: brightness(1.15); }

.filtro-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--color-acento);
  color: var(--color-primario);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.buscador-filtros {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--color-borde);
  border-radius: 16px;
  background: white;
  color: var(--color-texto-suave);
}

.buscador-filtros input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--fuente-cuerpo);
  font-size: 14px;
  width: 170px;
  color: var(--color-texto);
}

.buscador-filtros:focus-within { border-color: var(--color-acento); }

.barra-criterios {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.btn-criterio {
  white-space: nowrap;
  background: white;
  border: 1px solid var(--color-borde);
  border-radius: 16px;
  padding: 6px 14px;
  font-family: var(--fuente-cuerpo);
  font-size: 13px;
  color: var(--color-texto);
  cursor: pointer;
}

.btn-criterio:hover { border-color: var(--color-acento); }

.btn-criterio.criterio-activo {
  border-color: var(--color-acento);
  background: var(--color-acento-tenue);
  color: var(--color-acento-oscuro);
  font-weight: 600;
}

.btn-limpiar-filtros {
  white-space: nowrap;
  background: none;
  border: none;
  color: var(--color-acento-oscuro);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

.menu-filtro { min-width: 170px; }

.menu-filtro-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-family: var(--fuente-cuerpo);
  color: var(--color-texto);
  cursor: pointer;
}

.menu-filtro-item:hover { background: var(--color-acento-tenue); }

.menu-filtro-item input { accent-color: var(--color-acento-oscuro); cursor: pointer; }

/* ============================================================
   PLAN FREE — sombreado transversal, candados y pildora "Solicitar Pro"
   (PLN-T5). Contenido Pro bloqueado: se ve pero difuminado y sin interaccion.
   ============================================================ */
.bloqueado-pro { position: relative; }
.bloqueado-pro > .contenido-bloqueado {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}
.pildora-pro {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--color-acento); color: var(--color-primario);
  font-weight: 600; padding: 6px 18px; border-radius: 18px;
  cursor: pointer; white-space: nowrap; z-index: 2;
  text-align: center;
}
.pildora-pro small { display: block; font-weight: 400; text-align: center; }

/* Franja COMUN de inmuebles bloqueados AL FINAL de las tablas de Pagos/Gastos/
   Renta: una fila colspan con las direcciones difuminadas y una sola pildora
   centrada (mismo lenguaje que las tarjetas de Inmuebles). El td anula el
   padding y el sticky de la 1a columna de Pagos (id gana a clase: !important) */
.fila-bloque-plan td {
  padding: 0 !important;
  position: static !important;
}
.bloque-plan-comun .contenido-bloqueado {
  padding: 20px 18px;
  background: var(--color-acento-tenue);
}
.bloque-plan-titulo {
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--color-primario);
}
.bloque-plan-lista { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.bloque-plan-direccion { font-size: 14px; color: var(--color-primario); }

/* Pantalla completa de una pestaña bloqueada (Documentos en plan free) */
.bloqueado-pro-pantalla {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bloqueado-pro-pantalla .contenido-bloqueado {
  width: 100%;
  text-align: center;
  padding: 48px 24px;
}

/* Candado pequeño junto a un nombre de pestaña en la nav (solo plan free) */
.nav-candado { margin-left: 4px; font-size: 12px; }

/* Nota discreta (la usa el editor de Planes del panel admin) */
.nota-plan {
  color: var(--color-texto-tenue);
  font-size: 13px;
  margin-top: 8px;
}

/* Comparativa Free/Pro dentro del dialogo "Solicitar Pro": la columna Pro
   lleva la barra vertical (border-left) y el fondo de acento */
/* Especificidad 0-2-1 (y declarada despues) para ganar a la regla generica
   `.modal-confirmar .modal-cuerpo p`, que si no impone margin:0 y color base */
.modal-cuerpo p.cmp-intro { margin: 0 0 12px; color: var(--color-texto-tenue); }
.tabla-comparativa-planes {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  overflow: hidden;
}
.tabla-comparativa-planes th {
  background: var(--color-fondo-suave);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-texto-tenue);
  padding: 8px 6px;
}
.tabla-comparativa-planes td {
  padding: 10px 12px;
  border-top: 1px solid var(--color-borde);
  vertical-align: middle;
}
.cmp-plan-nombre {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primario);
}
.cmp-plan-pro { color: var(--color-acento); }
.cmp-ventaja-titulo {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primario);
}
.cmp-ventaja-detalle {
  display: block;
  font-size: 13px;
  color: var(--color-texto-tenue);
}
.cmp-valor {
  width: 104px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primario);
}
.cmp-col-pro {
  width: 104px;
  border-left: 1px solid var(--color-borde);
  background: var(--color-acento-tenue);
}
.cmp-si { color: var(--color-acento); font-size: 16px; }
.cmp-no { color: var(--color-peligro); font-size: 16px; }
.modal-cuerpo p.cmp-solicitud { margin: 14px 0 0; }

/* Vista previa del email de recordatorio (dialogo "Recordatorio mensual de
   cobros"): solo visual, con datos reales pero SIN llamar al Worker */
.rec-previa-asunto {
  font-weight: 600;
  color: var(--color-primario);
  margin-bottom: 10px;
}
.rec-previa-tabla {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-borde);
}
.rec-previa-tabla th {
  background: var(--color-primario);
  color: white;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 6px 10px;
  text-align: left;
}
.rec-previa-tabla td {
  padding: 8px 10px;
  border-top: 1px solid var(--color-borde-fila);
  font-size: 13px;
}
.rec-previa-tabla th:not(:first-child),
.rec-previa-tabla td:not(:first-child) { text-align: right; }
.rec-previa-pagado       { color: var(--estado-ok-texto); }
.rec-previa-parcial      { color: var(--estado-aviso-texto); }
.rec-previa-pendiente    { color: var(--color-peligro); }
.rec-previa-sin-contrato { color: var(--color-texto-tenue); }
.rec-previa-mas {
  text-align: center !important;
  font-style: italic;
  color: var(--color-texto-tenue);
}
/* Rotulo de cada bloque (nombre de propietario o "Total general") cuando la
   previa muestra varios grupos: mismo espaciado antes de su tabla/franja */
.rec-previa-rotulo-grupo { margin-top: 16px; }
/* "Total general" no es un propietario: texto en negrita sin avatar,
   igual que TOTAL GENERAL en el email real (cabeceraGrupoEmailCierre en worker.js) */
.rec-previa-rotulo-total {
  font-weight: 600;
  color: var(--color-primario);
}

.rec-previa-franja {
  display: flex;
  margin-top: 12px;
  border: 1px solid var(--color-acento);
}
.rec-previa-franja > div {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: 13px;
}
.rec-previa-cobrado {
  background: var(--estado-ok-fondo);
  color: var(--estado-ok-texto);
}
/* Mismos tokens que la franja del email real (espejo del Worker): la previa
   promete "asi sera el recordatorio", asi que el color debe coincidir */
.rec-previa-por-cobrar {
  background: var(--estado-aviso-fondo);
  color: var(--estado-aviso-texto);
}
.rec-previa-franja-valor {
  display: block;
  font-size: 17px;
  font-weight: 700;
  margin-top: 2px;
}

/* ==========================================================
   ORDENACION MANUAL DE INMUEBLES (modo Ordenar: filas compactas con asa)
   ========================================================== */
.asa-orden {
  align-self: center;
  padding: 0.15rem 0.4rem;
  margin-right: 0.3rem;
  /* color-neutro daba ~1,6:1 sobre tarjeta blanca (ilegible); texto-suave
     es el gris de marca ya usado para texto secundario discreto y da ~6,9:1 */
  color: var(--color-texto-suave);
  font-size: 1.15rem;
  line-height: 1;
  cursor: grab;
  user-select: none;
  /* el gesto de arrastre no debe pelear con el scroll tactil de la pagina */
  touch-action: none;
}
.asa-orden:hover,
.asa-orden:focus-visible { color: var(--color-acento); }
.asa-orden:active { cursor: grabbing; }

/* Texto de ayuda encima de la lista compacta del modo Ordenar */
.texto-ayuda-orden {
  color: var(--color-texto-suave);
  font-size: 13px;
  margin-bottom: 10px;
}

/* Fila compacta del modo Ordenar: sustituye a la tarjeta completa mientras se reordena */
.fila-orden {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-borde);
  background: white; /* mismo fondo literal que .tarjeta */
  border-radius: 2px;
}
.fila-orden-direccion {
  flex: 1;
  font-weight: 600;
  color: var(--color-texto);
}
/* Bloqueado por plan Free: sin asa, no se puede mover. Solo se atenua el
   texto (direccion + etiqueta); la pildora Pro se queda nitida y clicable,
   igual que en el resto de pestañas */
.fila-orden-bloqueada {
  cursor: default;
}
.fila-orden-bloqueada .fila-orden-direccion,
.fila-orden-bloqueada .etiqueta {
  opacity: 0.5;
}
/* Pildora Pro compacta para la lista del modo Ordenar (las variantes
   existentes de .pildora-pro se centran sobre una tarjeta/bloque entero,
   aqui hace falta una version inline al final de la fila) */
.pildora-pro-fila {
  background: var(--color-acento);
  color: var(--color-primario);
  font-weight: 600;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.pildora-pro-fila:hover,
.pildora-pro-fila:focus-visible {
  filter: brightness(0.95);
}

/* La fila original se queda como hueco de destino mientras se arrastra */
.tarjeta-arrastrando { opacity: 0.35; }

/* Copia visual que flota siguiendo el puntero */
.tarjeta-fantasma {
  position: fixed;
  margin: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.92;
  box-shadow: 0 8px 24px rgba(15, 34, 64, 0.25);
}

/* ============================================================
   RESPONSIVE — un unico breakpoint bien puesto (item 7)
   ============================================================ */
@media (max-width: 768px) {
  /* El asa de arrastre usa Pointer Events precisamente para funcionar bien
     al tacto: en movil necesita un area tocable mayor que en escritorio */
  .asa-orden {
    padding: 0.5rem 0.7rem;
    font-size: 1.35rem;
  }

  /* La comparativa mantiene las dos columnas (compararlas de un vistazo es lo
     que le da sentido); solo se aprieta el espaciado y la letra */
  .tabla-comparativa-planes td { padding: 8px; }
  .cmp-ventaja-titulo { font-size: 13px; }
  .cmp-ventaja-detalle { font-size: 12px; }
  /* Menos padding lateral y sin partir palabras: "2 inmuebles" cabe en una
     linea; el ancho que reclama se lo cede la columna de la ventaja */
  .tabla-comparativa-planes td.cmp-valor { padding: 8px 4px; white-space: nowrap; }
  .cmp-valor { width: 76px; font-size: 12px; }
  .cmp-col-pro { width: 76px; }

  header {
    /* En movil el logo vuelve a la cabecera: altura por contenido, no por token */
    height: auto;
    padding: 10px 14px;
  }
  header h1 {
    display: flex;
    font-size: 18px;
  }
  .header-controles {
    gap: 6px;
  }
  .selector-propietario {
    max-width: 120px;
    font-size: 12px;
    padding: 5px 8px;
  }
  .login-usuario-header {
    display: none; /* el nombre ya aparece en el panel de Ajustes */
  }

  /* El aviso queda en el simbolo: con el texto, la cabecera desbordaba a lo ancho */
  .indicador-sync.sync-error {
    font-size: 0;
    padding: 4px 7px;
  }
  .indicador-sync.sync-error::before {
    content: "⚠";
    font-size: 14px;
  }

  main {
    /* El hueco inferior evita que la barra fija tape el final del contenido */
    padding: 16px 14px calc(74px + env(safe-area-inset-bottom));
  }

  /* Los avisos flotantes suben por encima de la barra inferior fija */
  .contenedor-avisos {
    bottom: calc(74px + env(safe-area-inset-bottom));
  }
  main h2 {
    font-size: 22px;
  }

  /* Sin nav lateral: el cuerpo recupera todo el ancho */
  body {
    padding-left: 0;
  }

  /* En movil solo la cabecera es pegajosa, el hueco superior es menor */
  :root {
    --desplazamiento-fijo: 64px;
  }

  /* Nav: barra inferior fija estilo app nativa */
  nav {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    flex-direction: row;
    overflow: visible;
    /* El area segura del iPhone queda por debajo de los botones */
    padding: 0 0 env(safe-area-inset-bottom);
  }

  .nav-logo {
    display: none;
  }

  nav button {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px 7px;
    border-left: none;
    font-size: 10px;
    text-align: center;
    position: relative;
  }

  nav button .nav-icono {
    width: 22px;
    height: 22px;
  }

  nav button.activo {
    color: var(--color-acento);
    background: none;
    border-left: none;
    font-weight: 600;
  }

  /* Panel "Más": flota sobre la barra, mismo azul de marca */
  .nav-secundaria {
    display: none;
    position: fixed;
    right: 8px;
    bottom: calc(64px + env(safe-area-inset-bottom));
    flex-direction: column;
    min-width: 210px;
    background: var(--color-primario);
    border: 1px solid var(--color-primario-suave);
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    padding: 6px 0;
    /* Sobre el banner de soporte (200); los modales (2000+) siguen por encima */
    z-index: 210;
  }

  .nav-secundaria.abierta {
    display: flex;
  }

  /* Dentro del panel los items vuelven al formato fila de la sidebar */
  .nav-secundaria button {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 11px 16px;
    font-size: 14px;
    text-align: left;
  }

  .nav-secundaria button .nav-icono {
    width: 20px;
    height: 20px;
  }

  .nav-secundaria button.activo {
    color: var(--color-acento);
  }

  .nav-mas {
    display: flex;
  }

  /* En la barra inferior no hay sitio: cerrar sesion queda en Ajustes */
  .nav-cerrar-sesion {
    display: none;
  }

  /* La unica salida en movil es la de Ajustes: aqui si se muestra */
  .btn-cerrar-sesion-ajustes {
    display: inline-block;
  }

  /* Puntito rojo: repite el aviso del contador de admin con el panel cerrado */
  .nav-mas.con-aviso::after {
    content: "";
    position: absolute;
    top: 5px;
    right: calc(50% - 16px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-peligro);
  }

  /* Barra de acciones apilada: titulo arriba, botones debajo */
  .barra-acciones {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .acciones-tarjeta {
    flex-wrap: wrap;
  }
  /* En movil la barra de herramientas apila filtros y botones */
  .barra-herramientas {
    flex-direction: column;
    align-items: stretch;
  }

  /* Sin sitio para la etiqueta, las acciones se quedan en un circulo con su
     icono (el aria-label las nombra: el texto que las describia ya no se pinta) */
  .etiqueta-completa { display: none; }
  .etiqueta-breve    { display: inline; }

  #btn-nuevo-inquilino,
  .btn-accion {
    width: 32px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }

  /* EL BUSCADOR ES UNA LUPA HASTA QUE LO TOCAS. En reposo se queda en un
     circulo de 32px como el embudo; el input sigue en el DOM con ancho 0 (no
     display:none, o el <label> no podria darle el foco al tocarlo) */
  .cabecera-una-fila .buscador-filtros {
    width: 32px;
    max-width: 32px;
    flex: none;
    padding: 0;
    gap: 0;
    justify-content: center;
  }

  .cabecera-una-fila .buscador-filtros input {
    width: 0;
    padding: 0;
  }

  /* Con la lupa plegada, filtros y año se agrupan a la izquierda y las
     acciones cierran la fila por la derecha */
  .cabecera-una-fila .fila-filtros { flex: none; }
  .cabecera-una-fila .btn-filtros  { margin-left: 0; }
  .cabecera-una-fila .acciones-tarjeta { margin-left: auto; }

  /* Al tocarla, la fila se reserva para el buscador: se apartan titulo,
     acciones y año, y el campo se estira a lo que queda. Al soltar, vuelve
     todo. Es solo CSS; sin :has() no pasa nada y la lupa se queda plegada */
  /* Abierto = con el foco O con algo escrito. Lo segundo importa porque
     alternarBarraFiltros reconstruye la zona y el input pierde el foco: sin
     esto, al tocar el embudo dejarias de ver por que estas filtrando */
  .barra-herramientas:has(.buscador-filtros:focus-within) h2,
  .barra-herramientas:has(.buscador-filtros:focus-within) .acciones-tarjeta,
  .barra-herramientas:has(.buscador-filtros:focus-within) .stepper-anio,
  .barra-herramientas:has(.buscador-filtros input:not(:placeholder-shown)) h2,
  .barra-herramientas:has(.buscador-filtros input:not(:placeholder-shown)) .acciones-tarjeta,
  .barra-herramientas:has(.buscador-filtros input:not(:placeholder-shown)) .stepper-anio {
    display: none;
  }

  .cabecera-una-fila .barra-herramientas:has(.buscador-filtros:focus-within) .fila-filtros,
  .cabecera-una-fila .barra-herramientas:has(.buscador-filtros input:not(:placeholder-shown)) .fila-filtros {
    flex: 1;
  }

  .cabecera-una-fila .buscador-filtros:focus-within,
  .cabecera-una-fila .buscador-filtros:has(input:not(:placeholder-shown)) {
    width: auto;
    max-width: none;
    flex: 1;
    padding: 0 12px;
    gap: 6px;
    justify-content: flex-start;
  }

  .cabecera-una-fila .buscador-filtros:focus-within input,
  .cabecera-una-fila .buscador-filtros input:not(:placeholder-shown) {
    width: 100%;
  }

  /* En movil el año baja con los toggles: arriba dejaba el buscador en 26px */
  .renta-toggles {
    display: flex;
    order: 1;
    flex-basis: 100%;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .renta-switches {
    display: contents;
  }

  /* Los dos "+" de alta, al mismo tamaño dentro de su circulo */
  #btn-nuevo-inquilino,
  .btn-accion-mas { font-size: 20px; line-height: 1; }

  /* Formularios: los campos en horizontal pasan a vertical */
  .fila-campos {
    flex-direction: column;
    gap: 0;
  }
  .campo-corto,
  .campo-medio {
    flex: 1 1 auto !important;
  }
  /* La rejilla de 12 columnas deja de serlo: los campos vuelven a apilarse
     con su margin-bottom de siempre, asi que los span dejan de aplicar solos */
  .rejilla {
    display: block;
  }
  .rejilla .campo-inline-check {
    margin-bottom: 14px;
  }

  /* Tarjeta de inmueble: el boton Editar baja bajo el titulo al apilar */
  /* Tarjeta de inmueble en movil: direccion con la poblacion arriba, etiquetas
     debajo y el icono de editar centrado a la derecha de las dos lineas */
  .inm-cabecera-textos {
    display: block;
    flex: 1;
    min-width: 0;
  }

  .inm-cabecera-textos .etiqueta {
    margin-top: 7px;
  }

  .inm-poblacion-movil {
    display: inline;
    font-weight: 400;
    color: var(--color-neutro);
  }

  /* Debajo del encabezado solo queda el vinculo del trastero: poblacion (ya esta
     en el titulo), CP, referencia catastral y propietario son consulta de escritorio */
  .lc-solo-escritorio,
  .lc-sep {
    display: none;
  }

  /* Popup de pago: centrado y adaptado al ancho de pantalla */
  .popup-pago {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 320px;
  }

  /* Modales con menos margen lateral */
  .modal-overlay {
    padding: 20px 12px;
  }

  /* Renta mantiene el ancho completo; sin sidebar, el ancho vuelve a ser el del viewport */
  #seccion-renta {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0 14px;
  }

  /* En movil el buscador cede espacio; la barra de criterios ya scrollea sola */
  .buscador-filtros input { width: 110px; }

  /* Tarjeta de inquilino: la franja de cifras se parte en dos filas */
  .inq-franja { flex-wrap: wrap; row-gap: 6px; }
  .inq-metrica { flex: 1 1 45%; border-right: none; }

  /* Gastos compacta (2026-08-20): los titulos abreviados los ponen los spans
     etiqueta-completa/breve del thead; el simbolo € de la columna Total se
     esconde (la cabecera breve ya dice "Total €") */
  #tabla-gastos .eur { display: none; }

  /* FACTURAS EN DOS LINEAS (2026-08-20): la MISMA tabla de escritorio se
     recoloca por grid — proveedor, concepto y fecha apilados a la izquierda;
     importe e iconos a la derecha. Sin scroll: la tabla media 780px en un
     visor de 347. El CIF no se pinta (sigue en el formulario y el informe) */
  .tabla-facturas-grupo { min-width: 0; }
  .tabla-facturas-grupo thead { display: none; }

  .tabla-facturas-grupo tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "prov imp"
      "conc acc"
      "fech acc";
    column-gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-borde-fila);
  }

  .tabla-facturas-grupo tbody tr:last-child { border-bottom: none; }
  /* El hover de fila era de raton: en tactil se queda pegado tras el toque */
  .tabla-facturas-grupo tbody tr:hover { background: transparent; }

  .tabla-facturas-grupo tbody td {
    display: block;
    border: none;
    padding: 0;
    text-align: left;
  }

  .tabla-facturas-grupo tbody td:nth-child(1) { grid-area: prov; font-weight: 600; }
  .tabla-facturas-grupo tbody td:nth-child(2) { display: none; } /* CIF */
  .tabla-facturas-grupo tbody td:nth-child(3) { grid-area: fech; font-size: 11px; color: var(--color-texto-tenue); }
  .tabla-facturas-grupo tbody td:nth-child(4) { grid-area: conc; font-size: 12px; color: var(--color-texto-suave); }
  .tabla-facturas-grupo tbody td:nth-child(5) { grid-area: imp; text-align: right; }
  .tabla-facturas-grupo tbody td:nth-child(6) { grid-area: acc; align-self: center; text-align: right; white-space: nowrap; }

  /* COLUMNA INMUEBLE RECORTADA (2026-08-20): a 110px el nombre que no cabe
     termina en "…" y se ven mas columnas de datos. Tocar la cabecera
     "Inmueble" (o una celda, en Pagos) alterna .col-inmueble-abierta en la
     <table> y devuelve el ancho completo; segundo toque, se recorta otra vez.
     En Gastos las celdas NO llevan el toggle: ya seleccionan el donut */
  #tabla-pagos th.col-inmueble,
  #tabla-gastos th.col-inmueble-gastos {
    min-width: 0;
  }

  #tabla-pagos th.col-inmueble, #tabla-pagos td.col-inmueble,
  #tabla-gastos th.col-inmueble-gastos, #tabla-gastos td.col-inmueble-gastos {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #tabla-pagos.col-inmueble-abierta th.col-inmueble,
  #tabla-pagos.col-inmueble-abierta td.col-inmueble,
  #tabla-gastos.col-inmueble-abierta th.col-inmueble-gastos,
  #tabla-gastos.col-inmueble-abierta td.col-inmueble-gastos {
    max-width: none;
  }

  /* Pagos en movil: la tabla scrollea en su contenedor; dentro de un
     contenedor con scroll el sticky vertical no funciona contra la pagina,
     asi que la cabecera vuelve a top 0 (queda fija dentro del contenedor)
     y lo que se conserva es la columna de inmueble fija en horizontal */
  .contenedor-tabla-pagos { overflow-x: auto; }
  #tabla-pagos thead th { top: 0; }

  /* Gastos: mismo compromiso que Pagos en movil (scroll en contenedor, cabecera a top 0) */
  .contenedor-gastos-principal { overflow-x: auto; }
  #tabla-gastos thead th { top: 0; }

  /* En movil no hay hover: la burbuja de quitar filtros va siempre visible */
  .filtro-badge-limpiar {
    opacity: 1;
    pointer-events: auto;
  }

  /* La expansion del embudo se pensó para el raton; sin el solo la dispara el
     foco, y al crecer empuja a lo que tenga al lado. Igual con el chip de
     historial: en movil se queda en flecha y numero */
  .btn-filtros:hover .btn-filtros-texto,
  .btn-filtros:focus-visible .btn-filtros-texto {
    max-width: 0;
    padding-left: 0;
  }

  .chip-historial:hover .chip-historial-texto,
  .chip-historial:focus-visible .chip-historial-texto {
    max-width: 0;
    padding: 0;
  }

  /* En movil no hay hover: el chip del historial va siempre encendido */
  .chip-historial {
    color: var(--color-acento-tenue);
    border-color: var(--color-acento);
    background-color: var(--color-acento-oscuro);
  }

  /* Historial compacto: en movil las fechas bajan a su propia linea */
  .fila-historico-linea { flex-wrap: wrap; }
  .fila-historico-fechas { margin-left: 22px; width: 100%; white-space: normal; }

  /* En movil no hay hover: el ✎ de las celdas de pago se ve siempre */
  .icono-nota { opacity: 1; }

  /* Grafico del reparto de gastos (G9): la etiqueta pasa a su propia linea, encima de la barra */
  .donut-cuerpo { justify-content: center; gap: 16px; }
  .donut-leyenda { min-width: 0; width: 100%; }
}

/* Banner del modo soporte: color de alerta, imposible de ignorar */
#banner-soporte {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--color-peligro);
  color: white;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
}

#banner-soporte button {
  background: white;
  color: var(--color-peligro);
  border: none;
  border-radius: 2px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* En modo soporte, las acciones de Drive (del admin) no aplican al usuario */
body.en-soporte .accion-drive {
  display: none;
}

/* ============================================================
   FASE B — CARTERAS COMPARTIDAS
   Banda informativa (patron del banner de soporte, pero en azul de marca:
   estar en una cartera ajena no es una alerta, es un contexto), selector de
   cartera de la cabecera, pantalla de invitaciones y bloque de Ajustes.
   ============================================================ */
.banda-cartera-ajena {
  position: sticky;
  top: 0;
  z-index: 190;
  background: var(--color-primario-suave);
  color: var(--color-fondo);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
}

.banda-cartera-ajena button {
  background: transparent;
  color: var(--color-fondo);
  border: 1px solid var(--color-acento);
  border-radius: 2px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.banda-cartera-ajena button:hover {
  background: var(--color-acento);
  color: var(--color-primario);
}

/* Hereda del selector de propietario (mismo sitio, mismo lenguaje) */
.selector-cartera {
  max-width: 220px;
}

/* --- Pantalla de aceptacion de invitaciones (dentro de la puerta) --- */
.tarjeta-invitacion {
  background: white;
  border: 1px solid var(--color-borde);
  border-radius: 2px;
  padding: 14px;
  margin-bottom: 12px;
  text-align: left;
}

.invitacion-texto {
  font-size: 14px;
  color: var(--color-texto);
  line-height: 1.5;
  margin-bottom: 12px;
}

.invitacion-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Bloque "Compartir cartera" del panel de Ajustes --- */
.compartir-titulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
  margin: 14px 0 6px;
}

.fila-compartir {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-borde-fila);
}

.fila-compartir:last-child {
  border-bottom: none;
}

.compartir-identidad {
  flex: 1;
  /* 120px: con 160 la fila no cabia en movil y las acciones saltaban de linea */
  min-width: 120px;
  display: flex;
  flex-direction: column;
}

/* Un email largo recorta con "…" en vez de empujar las acciones a otra linea */
.compartir-nombre {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primario);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compartir-detalle {
  font-size: 12px;
  color: var(--color-texto-tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selector-rol-miembro {
  border: 1px solid var(--color-neutro);
  border-radius: 2px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--color-texto);
  background: white;
  cursor: pointer;
}

.compartir-formulario {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-borde);
}

.compartir-formulario .campo {
  flex: 1;
  min-width: 140px;
  margin-bottom: 0;
}

/* --- Bandeja inteligente --- */
.modal-bandeja {
  max-width: 760px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.modal-bandeja .modal-cuerpo {
  overflow-y: auto;
}

.bandeja-progreso {
  font-size: 13px;
  color: var(--color-texto-suave);
  margin: 8px 0;
}

.tarjeta-bandeja {
  border: 1px solid var(--color-borde);
  border-radius: 2px;
  padding: 14px;
  margin-bottom: 12px;
  background: white;
}

.tarjeta-bandeja.confirmada {
  opacity: 0.55;
}

.tarjeta-bandeja .fila-bandeja {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.tarjeta-bandeja .campo-bandeja {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 140px;
}

.tarjeta-bandeja .campo-bandeja label {
  font-size: 12px;
  color: var(--color-texto-tenue);
}

.tarjeta-bandeja select,
.tarjeta-bandeja input {
  padding: 7px 9px;
  border: 1px solid var(--color-neutro);
  border-radius: 2px;
  font-size: 13px;
}

.tarjeta-bandeja .campo-dudoso select {
  border-color: var(--color-acento);
  background: var(--color-acento-tenue);
}

.direccion-leida {
  font-size: 12px;
  color: var(--color-texto-tenue);
  font-style: italic;
  margin-bottom: 8px;
}


.nombre-archivo-bandeja {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  word-break: break-all;
}