/* ============================================================================
   Lo que la maqueta no cubría
   ============================================================================
   La maqueta aprobada no tiene pantalla de entrada: se abría ya dentro. Estas
   son las pocas reglas que hacen falta para eso, y usan los tokens del sistema,
   sin inventar ningún color.
   ========================================================================== */

/* El contenido dentro del armazon del sistema. El menu ya lo coloca db-shell. */
/* El contenido usa `db-main__body`, el contenedor del sistema: trae su
   propio aire lateral y la separacion entre bloques. La regla inventada que
   habia aqui usaba una medida inexistente y dejaba el contenido pegado al
   borde. */
.pi-suelta{display:grid;place-items:center;min-height:100vh;padding:var(--sp-16b)}

.pi-entrada{width:100%;display:grid;place-items:center}
.pi-entrada__caja{width:min(420px,100%);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg, 14px);
  padding:var(--sp-18b)}
.pi-entrada__marca{width:110px;color:var(--accent);margin-bottom:var(--sp-14b)}
.pi-entrada__marca svg{width:100%;height:auto;display:block}
.pi-entrada h1{margin:0 0 .25rem}

.pi-form{display:grid;gap:.35rem;margin-top:var(--sp-16b)}
.pi-form label{font-size:var(--fs-sm,.85rem);font-weight:var(--w-fuerte,600);margin-top:.7rem}
/* La caja de texto largo (`textarea`) lleva la MISMA caja que los demás
   campos: salía con el aspecto del navegador en Consultas y en Vecinos. Va
   también a secas, sin `.pi-form`, por la lección de los desplegables de abajo:
   el estilo se ata al elemento, no al sitio. */
.pi-form input,.pi-form textarea,textarea{padding:.7rem .9rem;border:1px solid var(--line);
  border-radius:var(--r-md, 10px);font:inherit;background:var(--bg);
  color:var(--text);min-height:var(--tap-min, 44px)}
/* ── Desplegables y buscadores ──────────────────────────────────────────────
   El desplegable llevaba el aspecto gris de fabrica del navegador, distinto de
   las cajas de texto de encima. Se le da la misma caja, y se le dibuja la
   flecha a mano porque al quitar el aspecto de fabrica se pierde tambien. La
   flecha va como imagen incrustada: la politica de contenido de esta
   aplicacion prohibe pedir recursos a otro sitio.

   OJO AL ALCANCE, que es donde fallo la primera version. Estas reglas se
   escribieron solo para `.pi-form`, o sea SOLO dentro de un formulario de
   alta. La barra de filtros no es un formulario de alta, asi que sus
   desplegables seguian saliendo grises. Alejandro lo vio: «a los selects no le
   estas anadiendo estilos!!».

   La leccion: el estilo se ata al ELEMENTO, no al sitio donde aparece. Ahora
   cubre las dos cosas, incluida `.db-select`, que es la pieza que el sistema
   de diseno ya tenia para los filtros. */
/* ── AHORA CUBRE TODOS LOS DESPLEGABLES, LLEVEN CLASE O NO ────────────────
   Estaba escrito para tres sitios concretos, y quedaron 30 desplegables fuera
   frente a 24 dentro: mas de la mitad salian con el aspecto que les pone el
   sistema operativo, gris y cuadrado en medio de la pantalla. Alejandro lo
   señalo en el de cambiar de papel: «cambia el select ponle estilos!».

   El propio comentario de arriba ya decia la leccion («el estilo se ata al
   ELEMENTO, no al sitio») y aun asi se escribio por sitios. Asi que ahora es
   `select` a secas: cualquier desplegable de la plataforma, esté donde esté. */
select{
  border:1px solid var(--line);
  border-radius:var(--r-md, 10px);font:inherit;background-color:var(--bg);
  color:var(--text);
  appearance:none;-webkit-appearance:none;
  /* La flecha va con TODO codificado, comillas incluidas (%22). Con comillas
     simples a pelo dentro de la direccion, el navegador rechaza la imagen
     entera y no dibuja nada: el desplegable se queda sin flecha y deja de
     parecer un desplegable. No avisa de ningun error. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23888888%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;
  background-size:16px}

/* Dentro de un formulario de alta ocupa la linea entera, como los campos de
   texto que tiene encima y debajo. */
select{padding:.7rem 2.4rem .7rem .9rem;
  min-height:var(--tap-min, 44px)}

/* Dentro de un formulario de alta ocupa la linea entera, como los campos de
   texto que tiene encima y debajo. */
.pi-form select{width:100%}

/* En la barra de filtros va compacto y en linea con los demas controles: ahi
   caben cinco seguidos y uno a ancho completo rompe la fila.

   Y aqui hay que REPETIR la flecha, aunque ya este arriba. Motivo: el sistema
   de diseno trae `.db-filtros .db-select{background: var(--surface)}` con la
   forma ABREVIADA, y una forma abreviada reinicia todo lo que no nombra: se
   lleva por delante la imagen de fondo, que es la flecha. Repetirla aqui con
   un selector de mas peso la devuelve. */
.db-filtros select,
.db-filtros select.db-select{padding:9px 2rem 9px 12px;font-size:13px;
  cursor:pointer;min-height:38px;width:auto;
  background-color:var(--bg);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23888888%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;
  background-size:16px}

/* El foco de los desplegables es el del sistema de diseño: ver el bloque del
   foco al final de esta hoja (decisión D-5, 16 de octubre de 2026). */

/* El menu desplegado lo pinta el sistema operativo y NO hereda el color del
   desplegable: sin esto, en tema oscuro sale texto claro sobre fondo claro. */
.pi-form select option,
.db-filtros select option{background:var(--bg);color:var(--text)}

/* El buscador de la barra de filtros. Misma caja que los desplegables de al
   lado, para que la fila se lea como una sola pieza y no como tres cosas
   pegadas de sitios distintos. */
.db-filtros input[type="search"],
.db-filtros input[type="text"]{
  padding:9px 12px;font:inherit;font-size:13px;
  border:1px solid var(--line);border-radius:var(--r-md, 10px);
  background:var(--bg);color:var(--text);min-height:38px;min-width:220px}

.pi-form .btn{margin-top:var(--sp-14b);width:100%;justify-content:center;
  min-height:var(--tap-min, 44px)}

/* ── Elegir entre dos vias, cada una en su tarjeta ──────────────────────────
   Antes eran dos botones de radio pelados metidos dentro de `db-filtros`, que
   en el sistema de diseno es la BARRA DE FILTRAR (la de «Estado y pagos ·
   Galeria»). Al no ser lo que esa clase espera, el circulo se separaba de su
   texto y el bloque salia descolocado.
   Ahora cada opcion es una tarjeta entera que se puede pulsar, con su
   explicacion dentro. Se ve cual esta elegida, y el area de pulsacion es toda
   la caja en vez de un circulo de catorce pixeles. */
/* `fieldset` es la etiqueta correcta para un grupo de opciones (los lectores de
   pantalla anuncian «1 de 2»), pero trae borde, relleno y margen de fabrica
   que hay que quitar para que no dibuje una caja dentro de otra. */
.pi-vias{display:grid;gap:.6rem;margin-top:.35rem;
  border:0;padding:0;margin-inline:0;min-inline-size:0;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pi-via{display:grid;grid-template-columns:auto 1fr;gap:.2rem .6rem;
  align-items:start;padding:.9rem 1rem;border:1px solid var(--line);
  border-radius:var(--r-md, 10px);background:var(--bg);cursor:pointer;
  margin-top:0}
.pi-via input{grid-row:1 / span 2;align-self:center;margin:0;
  width:18px;height:18px;min-height:0;accent-color:var(--accent)}
.pi-via__t{font-weight:var(--w-fuerte,600)}
.pi-via__d{font-size:var(--fs-sm,.85rem);color:var(--text-dim);
  grid-column:2;line-height:1.45}
/* La elegida se marca con el color de marca, no solo con el circulo. */
.pi-via:has(input:checked){border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent)}
/* El circulo de la opcion recibe el foco, pero el aro va en la tarjeta entera:
   es lo que se elige. Con el estilo del sistema de diseño (decisión D-5). */
.pi-via:has(input:focus-visible){outline:2px solid var(--focus-ring);
  outline-offset:2px}
.pi-via input:focus-visible{outline:none}

/* El pie del menú lateral: quién está dentro y el botón de salir. */
.db-side__pie{margin-top:auto;padding:var(--sp-14b);
  border-top:1px solid var(--line);display:grid;gap:.3rem}
.db-side__quien{font-size:var(--fs-sm,.88rem);color:var(--text-dim)}
.db-side__rol{font-size:var(--fs-xs,.8rem);color:var(--text-soft)}
.db-side__salir{margin-top:.5rem;min-height:var(--tap-min, 44px)}

/* Lo que llegará con sus fases: se ve apagado y no se enlaza. */
.db-side__link.is-proximo{opacity:.5;cursor:default;pointer-events:none}

@media(max-width:900px){
  .pi-main{margin-left:0;padding:var(--sp-14b)}
}

/* El hueco declarado de un panel sin datos. No es un error: es un dato que
   todavía no tiene origen decidido, y decirlo es mejor que dibujar una gráfica
   vacía o, peor, inventar una cifra. */
.db-vacio{display:grid;gap:.4rem;place-items:center;text-align:center;
  padding:var(--sp-18b) var(--sp-14b);color:var(--text-dim)}
.db-vacio__ico{width:34px;height:34px;color:var(--text-soft);opacity:.55}
.db-vacio__ico svg{width:100%;height:100%}
.db-vacio p{margin:0}

/* Un boton que espera a una pieza que todavia no existe (el enlace de
   referido, la tabla de cargos, el formulario de consultas) se ve apagado: si
   no, parece que el clic hace algo. El sistema no traia esta regla para
   .btn-primary/.btn-secondary, solo para .btn-circle y el paginador. */
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.btn:disabled:hover{box-shadow:none}

/* Una barra de filtros que es un formulario de verdad (con sus desplegables y
   su boton) necesita alinear piezas de alturas distintas. Sin esto las
   etiquetas quedan pegadas arriba y los botones bailan respecto a las cajas. */
form.db-filtros{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
form.db-filtros .db-filtros__grupo{align-items:center}

/* ── La campanita de avisos ──────────────────────────────────────────────────
   El numero encima es lo que la hace util: una campana sin contador obliga a
   pulsarla para saber si hay algo, y entonces nadie la pulsa. */
.pi-campana{position:relative;display:inline-grid;place-items:center;
  text-decoration:none}
.pi-campana__n{position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;padding:0 4px;
  display:grid;place-items:center;
  border-radius:999px;background:var(--accent);color:#fff;
  font-size:11px;font-weight:600;line-height:1;
  /* Un borde del color del fondo separa el numero del icono cuando se solapan. */
  box-shadow:0 0 0 2px var(--surface)}

/* ── Los enlaces dentro de una nota ──────────────────────────────────────────
   Medido: salian con el MISMO color que el texto de alrededor y sin subrayado,
   asi que no habia forma de saber que se podian pulsar. Se ve en las dos
   pantallas de acceso, y ahi importa: «Me acuerdo, quiero entrar» y «He
   olvidado mi contrasena» son el camino de vuelta de quien se ha equivocado de
   pantalla, que es justo quien esta perdido.

   Color de marca y subrayado. El subrayado no es decoracion: es lo unico que
   distingue un enlace para quien no percibe bien el color. */
.pi-nota a{color:var(--accent);text-decoration:underline;
  text-underline-offset:2px}
.pi-nota a:hover{text-decoration-thickness:2px}

/* ── Los enlaces dentro del texto de una fila (E-1, 19 de octubre de 2026) ──
   En Eventos, cada fila por venir lleva debajo del título «Unirse» y las
   cuatro formas de guardarla en el calendario, escritas como texto. Medido:
   salían con el gris apagado del texto de al lado y sin subrayado, así que no
   había forma de saber que se podían pulsar. Mismo tratamiento que los enlaces
   de una nota: color de letra de la marca y subrayado. Y 24 px de alto para el
   dedo: el texto de una fila va a 12,5 px y un enlace de una línea medía 16 px
   de alto, por debajo del mínimo de accesibilidad para algo que se pulsa (lo
   cazó el auditor de pantallas en «Outlook.com» a 375). */
.db-fila__txt a{color:var(--accent-ink);text-decoration:underline;
  text-underline-offset:2px;display:inline-block;min-height:24px;line-height:24px}
.db-fila__txt a:hover{text-decoration-thickness:2px}

/* ── El buscador de la barra superior ────────────────────────────────────────
   Va en la barra y no en el menu porque buscar es lo primero que se hace al
   atender una llamada, y bajar a una pantalla para poder buscar es un paso de
   mas cada vez.

   La caja se atiene al ELEMENTO y no al sitio, que es la leccion que ya costo
   una correccion con los desplegables: el estilo se escribe para el buscador,
   no para «los buscadores que esten dentro de la barra». */
.db-topbar__buscar{margin-left:auto;display:flex;align-items:center}
.db-topbar__buscar input[type="search"]{
  padding:8px 12px;font:inherit;font-size:13px;
  border:1px solid var(--line);border-radius:var(--r-md, 10px);
  background:var(--bg);color:var(--text);
  min-height:36px;width:min(260px, 34vw)}

/* En pantalla estrecha la barra ya lleva el boton del menu, el tema y el
   avatar: un buscador de 260px la parte en dos lineas. Se encoge en vez de
   desaparecer, porque quien atiende desde el movil tambien busca. */
@media(max-width:700px){
  .db-topbar__buscar input[type="search"]{width:min(140px, 30vw)}
}

/* ── El campo de contrasena con su ojito ─────────────────────────────────────
   El boton va DENTRO de la caja, superpuesto a la derecha. El campo reserva
   sitio a su derecha para que el texto no pase por debajo del icono: sin ese
   hueco, una contrasena larga se lee con el ojo encima. */
.pi-clave{position:relative;display:block}
.pi-clave input{width:100%;padding-right:2.9rem}

.pi-clave__ojo{position:absolute;top:50%;right:.55rem;transform:translateY(-50%);
  display:grid;place-items:center;width:2rem;height:2rem;
  padding:0;border:0;border-radius:var(--r-md, 8px);
  background:transparent;color:var(--text-dim);cursor:pointer}
.pi-clave__ojo svg{width:18px;height:18px}
.pi-clave__ojo:hover{color:var(--text);background:var(--bg-alt, rgba(0,0,0,.05))}

/* Cuando la contrasena esta a la vista, el icono lo dice: si no, no se sabe
   en que estado esta sin mirar el campo. */
.pi-clave__ojo[aria-pressed="true"]{color:var(--accent)}

/* ── Contraste sobre el fondo de marca ───────────────────────────────────────
   MEDIDO, no estimado. Sobre el rojo de marca (rgb 184,62,37) el sistema de
   diseno dejaba dos cosas por debajo del minimo legible (4,5):

     · el «€ al mes» salia en gris oscuro sobre rojo oscuro  ->  1,58
     · los rotulos pequenos salian al 90 % de blanco         ->  3,73

   El primero es el grave: el simbolo del euro era practicamente invisible al
   lado de la cifra, y es el dato que dice de que va el numero.

   La regla de la casa ya lo decia: sobre el color de marca, la letra va
   SIEMPRE en blanco. Aqui se aplica sin excepciones.

   Se corrige en esta hoja y NO en el sistema de diseno compartido, porque esa
   hoja la usan otros proyectos y el arreglo es de esta paleta. */
.db-kpi--marca .db-kpi__num small,
.db-kpi--marca .db-kpi__num span,
.db-kpi--marca small {
  color: var(--db-on-brand, #fff);
  opacity: 1;
}

/* Blanco entero, sin transparencia: ese 10 % que quitaba el sistema era
   justo lo que bajaba el contraste de 4,5 a 3,73. En texto de 12 px, que ya
   es pequeno, no se puede permitir. */
.db-kpi--marca .db-kpi__lbl,
.db-kpi--marca .db-kpi__ref {
  color: var(--db-on-brand, #fff);
}

/* Y el texto pequeno de las tarjetas NORMALES (fondo claro), que tambien se
   quedaba en 3,73 con el gris del sistema. */
.db-kpi:not(.db-kpi--marca) .db-kpi__lbl,
.db-kpi:not(.db-kpi--marca) .db-kpi__ref {
  color: var(--text, #2a2a2a);
}

/* ── El acceso al perfil, al pie del menu ────────────────────────────────────
   Antes habia un nombre suelto y un boton de «Salir». Eso no es un perfil: es
   una etiqueta y una puerta. Ahora es un enlace con cara y nombre. */
.db-side__perfil{display:flex;align-items:center;gap:.6rem;
  padding:.55rem;border-radius:var(--r-md, 10px);
  text-decoration:none;color:inherit}
.db-side__perfil:hover{background:var(--bg)}

.db-side__avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  object-fit:cover;display:grid;place-items:center}
.db-side__avatar--ini{background:var(--accent);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.02em}

.db-side__perfil-txt{display:grid;gap:.05rem;min-width:0}
.db-side__perfil .db-side__quien{white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}

/* ── La foto en la pantalla de perfil ────────────────────────────────────── */
.pi-perfil-foto{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.pi-perfil-foto__img{width:96px;height:96px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line)}
.pi-perfil-foto__ini{width:96px;height:96px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:#fff;
  font-size:30px;font-weight:600}
.pi-perfil-foto__acts{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* La etiqueta hace de boton: el campo de archivo de fabrica no se puede
   estilar y sale distinto en cada navegador. */
.pi-perfil-foto__acts label.btn{cursor:pointer;margin:0}

/* ── El aire de los bloques ──────────────────────────────────────────────────
   MEDIDO, no estimado. Tres pantallas (unidades, obra y reportes) tenian el
   contenido pegado a los bordes, y la causa no era la separacion ENTRE bloques
   (que ya era de 24 px) sino que los bloques no tenian relleno POR DENTRO.

   `.pi-panel` se usa en tres pantallas y NO ESTABA DEFINIDA EN NINGUNA HOJA:
   era una clase escrita en el marcado que nadie estilaba. Sin relleno, sin
   fondo y sin borde, el texto llegaba hasta el filo.

   Los valores salen del sistema de diseno (los mismos que usa `.db-panel`),
   no de un numero puesto a ojo. */
.pi-panel {
  padding: 18px 20px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
}

/* ── EL MARGEN NEGATIVO QUE HABIA AQUI ERA EL PROBLEMA ────────────────────
   Estaba escrito para «no acumular aire» cuando el panel contiene solo una
   tabla: se le daba relleno al panel y acto seguido se le quitaba con un
   margen negativo del mismo tamano. El resultado neto era cero, que es
   exactamente lo que se veia: el titulo pegado al borde de arriba y la primera
   fila pegada al titulo.

   Se quita. El panel manda su relleno y nadie se lo descuenta. Si una tabla
   trae su propio aire, se ajusta la tabla, nunca anulando el del panel. */

/* El titulo de un bloque, separado de lo que viene debajo.
   ── POR QUE NO VALE `> h3:first-child` ────────────────────────────────────
   Porque el titulo NO siempre es hijo directo del panel: en la ficha de una
   unidad vive dentro de la caja de la tabla. La regla escrita con `>` no le
   llegaba nunca, que es por lo que seguia pegado. */
.pi-panel h2:first-child,
.pi-panel h3:first-child,
.pi-panel .db-tablebox__t {
  margin: 0 0 .9rem;
}

/* Y la tabla de dentro, separada del titulo. La primera fila pegada al
   encabezado hace que se lean como una sola cosa. */
.pi-panel .db-tablebox > table,
.pi-panel .db-table {
  margin-top: .2rem;
}

/* La rejilla de unidades, en pantalla estrecha, va a una sola columna. Tres
   columnas a 400 px de ancho dejan cada tarjeta en 110 px, que no es una
   tarjeta sino una franja. La separación entre tarjetas NO se pone aquí: la
   pone la maqueta (`alias-unidades.css`), y esta hoja la pisaba con otra. */

@media (max-width: 1100px) {
  .pi-unidades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .pi-unidades { grid-template-columns: 1fr; }
}

/* Las tarjetas de dentro tambien necesitan su aire, y varias no lo traian. */
.pi-unidades > * {
  padding: 16px 18px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
}

/* ────────────────────────────────────────────────────────────────────────────
   El menu de quien soy, arriba a la derecha
   ────────────────────────────────────────────────────────────────────────────
   Antes el perfil vivia al fondo del menu lateral, debajo de trece pantallas.
   En un portatil habia que bajar para verlo. Aqui esta donde lo busca todo el
   mundo, y cerrar sesion queda a un gesto de distancia.

   Es un <details> del propio navegador: abre y cierra sin JavaScript. */
.pi-yo { position: relative; }

/* La flechita que Safari y Chrome pintan sola en un <details> aqui sobra:
   el circulo ya se explica por si mismo. */
.pi-yo > summary { list-style: none; cursor: pointer; }
.pi-yo > summary::-webkit-details-marker { display: none; }
.pi-yo > summary::marker { content: ''; }

/* El aro al pasar el raton: sin el, no parece pulsable. El del teclado es el
   del sistema de diseño, al final de esta hoja. */
.pi-yo > summary:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-fill) 22%, transparent); }

/* Cuando hay foto, ocupa el circulo entero. */
.pi-avatar { overflow: hidden; }
.pi-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pi-yo__caja {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 232px; padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 14px 38px -12px color-mix(in srgb, var(--text) 30%, transparent);
}

.pi-yo__quien {
  display: grid; gap: 2px; padding: 10px 12px 12px;
  border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.pi-yo__quien strong { font: 600 13.5px/1.3 var(--font-body); color: var(--text); }
/* El correo puede ser largo: se recorta en vez de ensanchar la caja. */
.pi-yo__quien span {
  font: 400 12px/1.4 var(--font-body); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px;
}

.pi-yo__op {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 9px;
  background: none; color: var(--text); text-decoration: none; cursor: pointer;
  font: 500 13px/1.2 var(--font-body); text-align: left;
}
.pi-yo__op:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.pi-yo__op svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .75; }

/* Salir se separa del resto con una linea: es lo unico que no se deshace. */
.pi-yo__salir { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.pi-yo__op--salir { color: var(--danger, #b3261e); }
.pi-yo__op--salir svg { opacity: .9; }

/* En movil la caja se pega al borde derecho de la pantalla, no del boton. */
@media (max-width: 520px) {
  .pi-yo__caja { right: -6px; min-width: 210px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   El interruptor de encendido y apagado
   ────────────────────────────────────────────────────────────────────────────
   Para lo que solo puede estar activado o desactivado. Una casilla de marcar
   sirve para elegir varias cosas de una lista; esto es una llave de la luz, y
   se entiende mejor con forma de llave de la luz.

   Debajo sigue habiendo una casilla de verdad, solo que oculta: asi el teclado,
   los lectores de pantalla y el navegador la tratan como lo que es. Lo que se
   ve es el dibujo. */
.pi-switch { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }

.pi-switch input {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.pi-switch__palanca {
  position: relative; flex: 0 0 auto; margin-top: 1px;
  width: 46px; height: 26px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 22%, transparent);
  transition: background .18s ease;
}
.pi-switch__palanca::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28);
  transition: transform .18s ease;
}

.pi-switch input:checked + .pi-switch__palanca { background: var(--brand-fill); }
.pi-switch input:checked + .pi-switch__palanca::after { transform: translateX(20px); }

/* El aro al tabular: quien navega con teclado tiene que ver dónde está. La
   casilla de verdad está oculta, así que el aro se dibuja en la palanca, con el
   estilo del sistema de diseño (decisión D-5). */
.pi-switch input:focus-visible + .pi-switch__palanca {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}

.pi-switch__txt { display: grid; gap: 3px; }
.pi-switch__t { font: 600 13.5px/1.35 var(--font-body); color: var(--text); }
.pi-switch__d { font: 400 12.5px/1.55 var(--font-body); color: var(--text-muted); }

/* Se guarda solo al moverlo, asi que hay que decirlo. */
.pi-switch__eco {
  margin: 10px 0 0; font: 400 12px/1.4 var(--font-body); color: var(--text-muted);
}

/* ────────────────────────────────────────────────────────────────────────────
   La foto de una tipología, en el panel
   ──────────────────────────────────────────────────────────────────────── */
.pi-tipo-foto {
  display: flex; gap: 20px; align-items: flex-start;
  flex-wrap: wrap; margin-bottom: 1.2rem;
}
.pi-tipo-foto__img {
  width: 200px; height: 150px; object-fit: cover;
  border-radius: var(--r-md, 10px); border: 1px solid var(--line); flex: 0 0 auto;
}
.pi-tipo-foto__hueco {
  width: 200px; height: 150px; flex: 0 0 auto;
  display: grid; place-content: center; gap: 6px; justify-items: center;
  border: 1px dashed var(--line); border-radius: var(--r-md, 10px);
  color: var(--text-muted); font: 400 12.5px/1.3 var(--font-body);
}
.pi-tipo-foto__hueco svg { width: 22px; height: 22px; opacity: .6; }
.pi-tipo-foto__form { flex: 1 1 260px; min-width: 0; }

/* ────────────────────────────────────────────────────────────────────────────
   La galería de una vivienda, en el panel
   ────────────────────────────────────────────────────────────────────────────
   Cada foto con lo suyo debajo y sus tres botones: subir, bajar y quitar. Las
   flechas no son un adorno: sin poder ordenar, las fotos salen por fecha de
   subida, que casi nunca es el orden en que se quieren enseñar. */
.pi-galeria-admin {
  display: grid; gap: 16px; margin-bottom: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.pi-galeria-admin__pieza {
  margin: 0; display: grid; gap: 8px;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md, 10px);
  background: var(--surface, #fff);
}
.pi-galeria-admin__pieza img {
  width: 100%; height: 160px; object-fit: cover;
  border-radius: var(--r-sm, 7px); display: block;
}
.pi-galeria-admin__pieza figcaption { display: grid; gap: 2px; }
.pi-galeria-admin__pieza figcaption strong {
  font: 600 12.5px/1.3 var(--font-body); color: var(--text);
}
.pi-galeria-admin__pieza figcaption span {
  font: 400 11.5px/1.4 var(--font-body); color: var(--text-muted);
}
/* La descripción puede ser larga: se recorta a dos líneas en vez de estirar
   la tarjeta y descuadrar la rejilla entera. */
.pi-galeria-admin__alt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pi-galeria-admin__acts { display: flex; gap: 6px; }
.pi-galeria-admin__acts form { display: contents; }
.pi-galeria-admin__acts .btn-circle { width: 30px; height: 30px; }
.pi-galeria-admin__acts .btn-circle svg { width: 15px; height: 15px; }

/* ────────────────────────────────────────────────────────────────────────────
   El documento de un reporte
   ──────────────────────────────────────────────────────────────────────── */
.pi-doc { display: grid; gap: 14px; margin: 1.2rem 0; }

/* El botón de abrir el informe, en la tarjeta del leaseholder. */
.pi-tarjeta__doc {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: .7rem; align-self: flex-start;
}
.pi-tarjeta__doc svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ────────────────────────────────────────────────────────────────────────────
   El tercer botón: que se vea como un botón
   ────────────────────────────────────────────────────────────────────────────
   La maqueta lo define transparente, sin borde y con el texto subrayado, así
   que se lee como un enlace suelto en medio de la pantalla. Alejandro lo
   señaló: «hay botones que son transparentes, los he visto en más páginas, eso
   no es así!!». Está en 28 pantallas.

   No se toca `components.css`, que es la copia rescatada de la maqueta
   aprobada. Se le da forma aquí: contorno fino, fondo suave y sin subrayado.
   Sigue siendo el más discreto de los tres (relleno < contorno < sólido), que
   es para lo que existe: la acción secundaria que no debe competir con la
   principal. */
.btn-ghost {
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 18px;
  text-decoration: none;
  color: var(--text);
  transition: background .15s ease, border-color .15s ease;
}
.btn-ghost:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border-color: color-mix(in srgb, var(--text) 26%, transparent);
  text-decoration: none;
}

/* Dentro de una fila de tabla no lleva contorno: veinte botones con borde en
   una columna ensucian más de lo que ayudan. Ahí basta con el texto, que la
   fila entera ya se resalta al pasar por encima. */
.db-table .btn-ghost,
.db-fila__acts .btn-ghost {
  border-color: transparent;
  background: none;
  padding: 7px 12px;
}
.db-table .btn-ghost:hover,
.db-fila__acts .btn-ghost:hover {
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border-color: transparent;
}

/* ────────────────────────────────────────────────────────────────────────────
   Un bloque que se despliega al pulsarlo
   ────────────────────────────────────────────────────────────────────────────
   Para los formularios de «añadir algo» que no se usan en cada visita. El de
   subir un documento ocupaba media pantalla siempre, aunque vinieras a mirar
   la lista. */
.pi-plegable {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-bottom: var(--sp-13b);
  overflow: hidden;
}

/* Las medidas, todas del sistema de diseño (11 de noviembre de 2026; antes
   iban escritas a mano). El interlineado pasa de 1,2 a `--lh-subtitulo` (1,25),
   el más cercano de la escala: el botón crece menos de un píxel. */
.pi-plegable__btn {
  display: flex; align-items: center; gap: var(--sp-9);
  padding: var(--sp-12b) var(--sp-15); cursor: pointer;
  font: 600 var(--t-14)/var(--lh-subtitulo) var(--font-body); color: var(--text);
  list-style: none;
}
.pi-plegable__btn::-webkit-details-marker { display: none; }
.pi-plegable__btn::marker { content: ''; }
.pi-plegable__btn:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
/* La caja recorta lo que se sale (`overflow: hidden`): el aro del sistema va
   por dentro del borde o no se vería. */
.pi-plegable__btn:focus-visible { outline-offset: calc(-1 * var(--sp-1)); }

/* La flecha gira al abrir: es lo que dice si está abierto o cerrado sin tener
   que leer nada. */
.pi-plegable__btn svg {
  width: var(--sp-13); height: var(--sp-13); flex: 0 0 auto;
  transition: transform .18s ease; opacity: .7;
}
.pi-plegable[open] > .pi-plegable__btn svg { transform: rotate(180deg); }
.pi-plegable[open] > .pi-plegable__btn { border-bottom: 1px solid var(--line); }

.pi-plegable__cuerpo { padding: var(--sp-14) var(--sp-15) var(--sp-15); }
.pi-plegable__cuerpo > h3:first-child { margin: 0 0 var(--sp-13); }

/* ────────────────────────────────────────────────────────────────────────────
   La fila de una tabla que lleva a algún sitio
   ────────────────────────────────────────────────────────────────────────────
   Antes la tabla se pintaba al pasar el ratón, pero solo se podía pulsar el
   enlace del final. El resaltado prometía algo que no cumplía. Ahora la fila
   entera lleva al mismo sitio, así que el resaltado dice la verdad. */
.db-table__fila-ir { cursor: pointer; }
.db-table__fila-ir.is-active > th,
.db-table__fila-ir.is-active > td {
  background: color-mix(in srgb, var(--brand-fill) 9%, transparent);
}
/* La que se está editando lleva una marca a la izquierda, para no perderla de
   vista al bajar al formulario y volver a subir. */
.db-table__fila-ir.is-active > th:first-child {
  box-shadow: inset 3px 0 0 var(--brand-fill);
}

/* El enlace largo con su botón de copiar al lado. */
.pi-enlace-copiar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 .6rem;
}
/* El texto largo del enlace, con sitio para respirar.
   Antes iba muy pegado a su caja y con las esquinas muy redondeadas para lo
   estrecho que era: se leia apretado. Ahora más relleno y menos curva, que es
   lo que pidió Alejandro: «pon menos radius o mas espacio». */
.pi-enlace-copiar code,
.pi-enlace code {
  flex: 1 1 260px; min-width: 0;
  overflow-wrap: anywhere;
  font: 400 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  padding: 12px 15px; border-radius: 6px;
}
/* El mismo texto cuando va solo, sin botón al lado: el código de recomendación
   y el enlace recién creado. La clase se escribía en dos pantallas y no existía
   en ninguna hoja, así que el texto salía sin su caja. Lleva la misma caja que
   el de arriba, ajustada a lo que tiene dentro en vez de estirada. */
.pi-enlace { margin: 0 0 .6rem; }
.pi-enlace code { display: inline-block; max-width: 100%; }
/* Un plegable dentro de un aviso no lleva su propia caja: ya está dentro de
   una. Dos marcos anidados se leen como un error de maquetación.
   Y no recorta lo que asoma (`overflow: visible`): sin caja no hay esquinas
   que guardar, y sin relleno el borde izquierdo cae justo donde empieza la
   primera letra, así que el recorte de `.pi-plegable` se comía su primer
   trazo («It only works once» salía «'t only works once», 16 de octubre de
   2026). El panel lleva la misma regla en su hoja. */
.pi-plegable--suelto { border: 0; background: none; margin: var(--sp-9) 0 0; overflow: visible; }
.pi-plegable--suelto > .pi-plegable__btn { padding: var(--sp-7) 0; font-size: var(--t-13); }
.pi-plegable--suelto[open] > .pi-plegable__btn { border-bottom: 0; }
.pi-plegable--suelto .pi-plegable__cuerpo { padding: var(--sp-5) 0 0; }

/* ────────────────────────────────────────────────────────────────────────────
   Los permisos, con interruptor
   ────────────────────────────────────────────────────────────────────────────
   Cada permiso es un encendido/apagado independiente, no una lista donde se
   marcan varios. El interruptor lo dice sin tener que leer la palabra de al
   lado, y con veinte permisos en pantalla eso son veinte lecturas menos. */
.pi-switch--corto { align-items: center; gap: 10px; }
.pi-switch--corto .pi-switch__palanca { margin-top: 0; width: 40px; height: 23px; }
.pi-switch--corto .pi-switch__palanca::after { width: 17px; height: 17px; }
.pi-switch--corto input:checked + .pi-switch__palanca::after { transform: translateX(17px); }
.pi-switch--corto .pi-switch__t {
  font: 400 12.5px/1.3 var(--font-body); color: var(--text-muted); white-space: nowrap;
}
.pi-switch--corto input:checked ~ .pi-switch__txt .pi-switch__t {
  color: var(--text); font-weight: 600;
}

.db-fila__acts--permiso { gap: .7rem; align-items: center; }

/* Dos cosas a los extremos de una línea: título a la izquierda, acción a la
   derecha. Estaba escrito a mano dentro del marcado en varias pantallas. */
.pi-linea--extremos { justify-content: space-between; align-items: center; }

/* El título de cada grupo de permisos, separado del grupo anterior. */
.pi-grupo-perm { margin-top: 1.4rem; }

/* El interruptor a secas, sin texto al lado.
   La palanca ya dice si está encendido o apagado: la palabra «Concedido» era
   leer dos veces lo mismo. */
.pi-switch--solo { display: inline-flex; gap: 0; }
.pi-switch--solo .pi-switch__palanca { margin-top: 0; }

/* ────────────────────────────────────────────────────────────────────────────
   El aire de los títulos, de una vez y para todas las pantallas
   ────────────────────────────────────────────────────────────────────────────
   «falta aire en muchas partes!», con el título «Permisos, uno a uno» pegado
   al botón de debajo. Medido: ese título tenía CERO píxeles de separación.

   La causa es la misma de siempre: la maqueta pone los títulos a margen cero
   porque allí el hueco lo daba el bloque que los envolvía, y al portarlos a
   pantallas reales ese envoltorio no siempre está.

   Se arregla en el título, no pantalla por pantalla: así vale para las que hay
   y para las que vengan. No se toca `components.css`, que es la copia
   rescatada de la maqueta aprobada. */
.pi-vista h2,
.pi-vista h3,
.pi-vista h4 { margin-block-end: .9rem; }

/* Un título pegado a lo que tiene ENCIMA se lee como parte del bloque
   anterior. Separarlo por arriba es lo que agrupa cada sección con su título. */
.pi-vista h3 + *, .pi-vista h4 + * { margin-block-start: 0; }
.db-panel > h3:not(:first-child),
.db-panel > h4:not(:first-child) { margin-block-start: 1.6rem; }

/* Y el propio panel: los bloques de dentro respiran entre sí. */
.db-panel > * + * { margin-block-start: .9rem; }
.db-panel > h3 + *, .db-panel > h4 + * { margin-block-start: 0; }

/* ────────────────────────────────────────────────────────────────────────────
   Quitar el acceso a alguien del equipo
   ────────────────────────────────────────────────────────────────────────────
   Es lo más serio que se hace en esa pantalla, así que no va a un solo clic:
   se despliega, pide el motivo y entonces se confirma. El motivo no es
   burocracia, es lo que se mira cuando alguien pregunta por qué fulano ya no
   entra. */
.pi-quitar { position: relative; }
.pi-quitar > summary { list-style: none; cursor: pointer; }
.pi-quitar > summary::-webkit-details-marker { display: none; }
.pi-quitar > summary::marker { content: ''; }

.pi-quitar__form {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: 300px; display: grid; gap: 8px;
  padding: 16px; text-align: left;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 14px 38px -12px color-mix(in srgb, var(--text) 30%, transparent);
}
.pi-quitar__form label { font: 600 12.5px/1.3 var(--font-body); }
.pi-quitar__form input[type=text] {
  padding: 9px 12px; border: 1px solid var(--line);
  border-radius: var(--r-md, 10px); font: inherit; font-size: 13px;
}
.pi-quitar__form .pi-nota { margin: 2px 0 0; font-size: 11.5px; }

@media (max-width: 620px) {
  .pi-quitar__form { position: static; width: auto; margin-top: 10px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   Elegir persona escribiendo, no bajando por 424 nombres
   ────────────────────────────────────────────────────────────────────────────
   El desplegable de fábrica apila los 424 leaseholders en una columna y obliga
   a buscar un apellido a ojo con la rueda del ratón. Aquí se escriben tres
   letras y quedan los que coinciden.

   La caja de escribir lleva EXACTAMENTE el mismo aspecto que los demás campos
   del formulario (mismo borde, mismo redondeo, misma altura mínima de 44px
   para el dedo). No es un control nuevo que haya que aprender: es el campo de
   siempre, que además busca.

   Si el JavaScript no llega a cargarse, `.pi-buscap__select--oculto` nunca se
   pone y lo que se ve es el desplegable de siempre, funcionando. */
.pi-buscap{position:relative}

/* El desplegable sigue EN EL FORMULARIO y es lo que se envía: solo deja de
   verse. Nada de `display:none` a secas, que en algunos navegadores saca el
   campo de la comprobación de «obligatorio» y el formulario se enviaría vacío
   sin decir nada. */
.pi-buscap__select--oculto{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
  opacity:0;pointer-events:none}

.pi-buscap__campo{
  width:100%;
  padding:.7rem 2.4rem .7rem .9rem;
  border:1px solid var(--line);border-radius:var(--r-md, 10px);
  font:inherit;background:var(--bg);color:var(--text);
  min-height:var(--tap-min, 44px)}

/* Con una persona elegida, el nombre va en negrita: distingue de un vistazo
   «he escrito medio apellido» de «está elegida y es esta». */
.pi-buscap.is-elegida .pi-buscap__campo{font-weight:var(--w-fuerte,600)}

/* La equis para quitar la persona y volver a «de todos», sin borrar a mano. */
.pi-buscap__quitar{
  position:absolute;right:.55rem;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:grid;place-items:center;
  border:0;border-radius:var(--r-circle,50%);
  background:color-mix(in srgb, var(--text) 8%, transparent);
  color:var(--text-muted);font-size:var(--t-16,16px);line-height:1;
  cursor:pointer;padding:0}
.pi-buscap__quitar:hover{background:color-mix(in srgb, var(--text) 14%, transparent);
  color:var(--text)}
/* `hidden` es un atributo, y el navegador lo aplica con `display:block` de
   fabrica: `position:absolute` de la regla de arriba le gana y la equis se
   quedaba visible con el campo vacio, ofreciendo quitar una persona que nadie
   habia elegido. Hay que decirlo a mano. */
.pi-buscap__quitar[hidden]{display:none}

/* La lista de nombres. Va por encima de todo lo demás del formulario, o los
   campos de abajo la taparían. */
.pi-buscap__lista{
  position:absolute;left:0;right:0;top:calc(100% + 4px);
  z-index:var(--capa-menu,40);
  margin:0;padding:.3rem;list-style:none;
  max-height:264px;overflow-y:auto;
  background:var(--surface,#fff);
  border:1px solid var(--line);border-radius:var(--r-md, 10px);
  box-shadow:0 10px 30px rgba(0,0,0,.13)}
.pi-buscap__lista[hidden]{display:none}

.pi-buscap__op{
  padding:.55rem .7rem;border-radius:var(--r-sm,7px);
  font-size:var(--fs-sm,.85rem);color:var(--text);cursor:pointer}
/* El resaltado es el mismo se llegue con el ratón o con las flechas: si fueran
   distintos, parecerían dos cosas diferentes. */
.pi-buscap__op:hover,
.pi-buscap__op.is-marcada{background:color-mix(in srgb, var(--accent) 12%, transparent)}

/* La opción de volver a «de todos» se separa de los nombres con una línea: no
   es una persona más de la lista. */
.pi-buscap__op--neutra{
  margin-top:.3rem;border-top:1px solid var(--line);
  border-radius:0 0 var(--r-sm,7px) var(--r-sm,7px);
  padding-top:.6rem;color:var(--text-muted)}

.pi-buscap__nada{
  padding:.6rem .7rem;font-size:var(--fs-sm,.85rem);
  color:var(--text-muted)}

/* ────────────────────────────────────────────────────────────────────────────
   El selector de archivo, en español
   ────────────────────────────────────────────────────────────────────────────
   El campo de subir archivo que dibuja el navegador pone «Choose File / No
   file chosen», en inglés, y ese texto NO se puede traducir desde la página:
   lo pone el navegador. En una plataforma entera en español, canta.

   Así que el campo real se esconde y encima va un botón propio, que además
   dice el peso del archivo elegido. El peso importa porque el tope son 20 MB y
   lo normal es enterarse de que te has pasado después de subir. */
.pi-archivo{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:.55rem .7rem;
  border:1px solid var(--line);border-radius:var(--r-md, 10px);
  background:var(--bg);min-height:var(--tap-min, 44px)}
.pi-archivo.is-foco{outline:2px solid var(--focus-ring);outline-offset:2px}

/* El campo real sigue ahí y sigue recibiendo el foco del teclado: es lo que se
   envía y lo que abre la ventana de elegir archivo. */
.pi-archivo input[type="file"]{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap}

.pi-archivo__btn{
  flex:0 0 auto;
  padding:.45rem .9rem;
  border:1px solid var(--line);border-radius:var(--r-md, 10px);
  background:var(--surface,#fff);color:var(--text);
  font:inherit;font-size:var(--fs-sm,.85rem);font-weight:var(--w-fuerte,600);
  cursor:pointer}
.pi-archivo__btn:hover{background:color-mix(in srgb, var(--text) 5%, transparent)}

.pi-archivo__txt{
  font-size:var(--fs-sm,.85rem);color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pi-archivo.is-elegido .pi-archivo__txt{color:var(--text);font-weight:var(--w-medio,500)}


/* ═══════════════════════════════════════════════════════════════════════════
   Arreglos de la revisión del 2026-09-28
   Todo lo de aquí abajo usa variables del sistema de diseño. No hay ni un color
   ni una medida escritos a mano, y no cambia nada de lo que dibuja la maqueta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Lo que se oculta a la vista y se deja al lector de pantalla ────────────
   Diecisiete sitios pedían esta clase y no existía en ninguna hoja. Lo que
   tenía que estar oculto se veía: el selector de archivo del navegador, en
   inglés, al lado del botón «Elegir una imagen», y la palabra «Acciones» en la
   cabecera de dieciséis tablas. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* El campo de la foto está oculto y quien se ve es su botón. Cuando el campo
   recibe el foco del teclado, el contorno tiene que salir en el botón. */
.pi-perfil-foto__acts form:has(input[type="file"]:focus-visible) label.btn {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}

/* ── El menú plegado no se recorre con el teclado ───────────────────────────
   En móvil y tableta el menú se esconde deslizándolo fuera de la pantalla, pero
   sus enlaces seguían recibiendo el foco: diecisiete pulsaciones de tabulador
   sobre enlaces que nadie ve antes de llegar al primer botón. Con esto deja de
   existir para el teclado y para el lector de pantalla mientras está cerrado.
   La espera de la segunda transición es para que se vea cerrarse. */
@media (max-width: 1000px) {
  .db-side { visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  .db-side.is-open { visibility: visible; transition: transform .22s ease, visibility 0s; }
}

/* ── Un enlace dentro de un texto usa el color de LETRA de la marca ─────────
   Usaba el de relleno. En el tema claro son el mismo; en el oscuro el de
   relleno se queda en 3,4 de contraste sobre el fondo, y el de letra da 6,2.
   El sistema tiene los dos justo para esto. */
.pi-nota a,
.pi-clave__ojo[aria-pressed="true"] { color: var(--accent-ink); }

/* ── Las filas que llevan a algún sitio responden al ratón ──────────────────
   Se podían pulsar y no cambiaban al pasar por encima. */
.db-table__fila-ir:hover > th,
.db-table__fila-ir:hover > td,
a.db-fila:hover {
  background: color-mix(in srgb, var(--brand-fill) 6%, transparent);
}

/* ── Una tabla que se desplaza de lado se alcanza con el teclado ────────────
   El archivo de comportamiento le da el foco cuando no cabe; el aro es el del
   sistema de diseño, pero por dentro: la caja de la tabla recorta lo que sale. */
.db-tablebox__scroll:focus-visible { outline-offset: -2px; }

/* ── En móvil, una fila con un formulario dentro no cabe en una línea ───────
   En Ajustes el campo se montaba encima de su rótulo y el botón de guardar se
   salía 66 píxeles por la derecha. Por debajo de 640 el formulario baja a su
   propia línea y el campo se encoge lo que haga falta. */
@media (max-width: 640px) {
  .db-fila:has(> .db-fila__acts form) { flex-wrap: wrap; }
  .db-fila:has(> .db-fila__acts form) > .db-fila__txt { flex: 1 1 0; }
  .db-fila > .db-fila__acts:has(form) { flex: 1 0 100%; margin-left: 0; }
  .db-fila__acts form { display: flex; flex-wrap: wrap; gap: var(--s-2); width: 100%; }
  .db-fila__acts form input:not([type="hidden"]) { flex: 1 1 0; min-width: 0; }
}

/* ── El ojo de la contraseña, con sitio para un dedo ────────────────────── */
.pi-clave__ojo { min-width: var(--tap-min, 44px); min-height: var(--tap-min, 44px); }

/* ── Medidas que estaban escritas a mano dentro de las pantallas ─────────────
   Salen de la escala del sistema, no de un número puesto a ojo. */

/* Una cifra grande que en vez de número lleva una palabra («En obra»). */
.db-kpi__num--texto { font-size: var(--fs-2xl); }

/* El estado de la obra, encima de la foto de la vivienda. */
.db-badge--sobre-foto { position: absolute; bottom: var(--sp-9); left: var(--sp-9); }

/* ── En móvil, lo de la derecha de una fila no cae encima del texto ─────────
   MEDIDO a 375 de ancho: en 29 filas (25 en Documentos, 4 en Referidos) el
   distintivo de la derecha tapaba entre 19 y 62 píxeles del texto. La fila es
   la de la maqueta, pero lleva dentro más de lo que la maqueta le pone: el
   distintivo de «Dato de demostración», que no se parte, y en Documentos dos
   distintivos seguidos. El texto no podía encogerse y seguía por debajo.

   Cuando todo cabe, la fila es la de la maqueta y no cambia. Cuando no cabe,
   lo de la derecha baja a la línea siguiente y el distintivo que va dentro del
   texto puede partirse en dos líneas. El ancho mínimo del texto sale de la
   escala del sistema. */
@media (max-width: 560px) {
  .db-fila { flex-wrap: wrap; }
  .db-fila > .db-fila__txt {
    flex: 1 1 calc(var(--sp-22) * 2);
    grid-template-columns: minmax(0, 1fr);
  }
  .db-fila > .db-fila__txt .db-badge { white-space: normal; }
  .db-fila > .db-fila__acts { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
}

/* ── La tira de cifras del Resumen, cuando le faltan celdas ─────────────────
   La tira es de cuatro columnas. Si una sección está apagada para los
   leaseholders, su cifra no sale, y con tres celdas en cuatro columnas quedaba
   un hueco a la derecha. Las que quedan se reparten el ancho. Solo en pantalla
   ancha: por debajo de 860 la tira ya va a dos columnas. */
@media (min-width: 861px) {
  .stats-premium--3 { grid-template-columns: repeat(3, 1fr); }
  .stats-premium--2 { grid-template-columns: repeat(2, 1fr); }
  .stats-premium--1 { grid-template-columns: 1fr; }
}

/* ── Una pregunta frecuente: la fila que se abre ────────────────────────────
   En «Consultas», cada pregunta frecuente es una fila que al pulsarla enseña
   su respuesta debajo. La fila del sistema reparte a sus hijos en línea, y
   puesta en un <details> salía sin maquetar: el triángulo del navegador
   suelto, el icono encima del texto y la respuesta en una columna aparte.
   Aquí la línea es el resumen, y la respuesta va debajo, a la altura del texto. */
details.db-fila { display: block; }
details.db-fila > summary {
  display: flex; align-items: center; gap: var(--sp-12);
  min-width: 0; list-style: none; cursor: pointer;
}
details.db-fila > summary::-webkit-details-marker { display: none; }
details.db-fila > summary::marker { content: ''; }
details.db-fila > .pi-nota { margin: var(--sp-7) 0 0 calc(44px + var(--sp-12)); }
@media (max-width: 560px) {
  details.db-fila > .pi-nota { margin-left: calc(38px + var(--sp-12)); }
}

/* ── El texto de un dosier ───────────────────────────────────────────────────
   El texto que escribe el equipo se pinta como página, un panel por sección.
   El sistema pone a cero el relleno de toda lista, así que los puntos de las
   listas del dosier quedaban colgando fuera del texto, encima del borde del
   panel. Aquí recuperan su sangría. Lo usan la página del dosier y la vista
   previa del panel del equipo: la regla va en las dos hojas. */
.pi-dosier ul { padding-inline-start: var(--sp-15); }

/* ═══════════════════════════════════════════════════════════════════════════
   Decisiones de diseño D-5 y maquetación del leaseholder · 16 de octubre de 2026
   Todo con variables del sistema de diseño: ni un color ni una medida a mano.
   La hoja del panel lleva el mismo bloque (menos las tablas y el formulario
   de Consultas, que son de esta puerta).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── D-5 · Un solo estilo de foco: el del sistema de diseño ─────────────────
   Había dos: el del sistema (un contorno de 2 píxeles del color `--focus-ring`,
   separado 2 del borde, en `components.css`) y el del portal (2 píxeles del
   color de marca, separado 1), y en lo que no cubría ninguno (los enlaces del
   menú y los botones) salía el del navegador. Se queda el del sistema para todo
   lo que recibe el foco con el teclado, y se han quitado de esta hoja las
   reglas del otro. El ratón no lo enciende: `:focus-visible` es el del teclado. */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* En oscuro, el `--focus-ring` del sistema (su rojo hondo) se queda en 2,9
   contra el fondo, y un contorno necesita 3. Se usa el tono que el propio
   sistema define para el acento «haciendo de forma» en oscuro (`--accent-deep`,
   el coral de la paleta). Es el mismo estilo; cambia el tono, como cambia el
   sistema todos sus acentos al pasar a oscuro. */
html[data-theme="dark"] { --focus-ring: var(--accent-deep); }

/* Dentro de un panel o una cifra de color de marca, un aro rojo sobre rojo no
   se vería: va en blanco, que es la letra de esos paneles. */
.db-panel--marca :focus-visible,
.db-kpi--marca :focus-visible { outline-color: var(--brand-contrast); }

/* ── D-5 · El enlace para saltar al contenido ───────────────────────────────
   Es lo primero de la página en las dos puertas (`pagina.php`) y lleva a la
   región principal, `main#contenido`, que tienen todas las pantallas. No se ve
   hasta que recibe el foco: el primer Tab lo enseña arriba a la izquierda,
   encima de todo, e Intro se salta el menú entero. Es el botón principal del
   sistema (`btn btn-primary`); aquí solo se esconde y se coloca.
   No puede llamarse `skip-link`: el sistema de diseño esconde esa clase a
   propósito con `display: none !important` (`components.css`, que no se toca).
   La capa va por encima del menú en móvil (90), del panel lateral (95) y de los
   avisos que aparecen y se van (100), que son las capas del sistema. */
.pi-saltar:not(:focus) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pi-saltar:focus { position: fixed; top: var(--sp-13); left: var(--sp-13); z-index: 120; }

/* ── D-5 · El distintivo blanco sobre el panel de color de marca ────────────
   El sistema le pone de fondo un 20 % de blanco sobre el rojo de marca, y la
   letra blanca se quedaba en 3,91 de contraste (la norma pide 4,5): «Lo
   próximo» en Eventos y «Lo primero, para que quede claro» en Mis fechas. Con
   la mitad de blanco, el 10 %, sube a 4,69, medido en el navegador. Es la
   misma mezcla con las mismas
   variables; solo cambia la proporción. Vale para los dos temas, porque el
   relleno de marca es el mismo en claro y en oscuro. */
.db-panel--marca .db-badge {
  background: color-mix(in srgb, var(--brand-contrast) 10%, transparent);
}

/* ── Las tablas, enteras a partir de 1280 de ancho ───────────────────────────
   «Sensibilidad a la ocupación», «Las cuatro tipologías», «Histórico de
   pagos», «Los cuatro pools» y «Cómo se vería una liquidación» se cortaban por
   la derecha a 1280: pedían entre 45 y 344 píxeles más de los que tenían, y lo
   que no cabía quedaba detrás de una barra de desplazamiento que en un portátil
   con panel táctil ni se ve. Dos causas, y las dos se arreglan aquí:

   1. Cada columna tenía un mínimo de 112 píxeles (190 la primera) y los
      títulos de columna no se partían. El sistema lo pone para que una tabla
      de muchas columnas desborde en vez de aplastarse, y en una pantalla ancha
      sobra: los títulos se parten en dos líneas y cada columna mide lo que
      pide su contenido. Las cifras y los distintivos no se parten nunca.
   2. Dos de ellas vivían en una rejilla de dos tercios y un tercio, y en un
      tercio no cabe una tabla de cuatro columnas. Esa rejilla, cuando lleva una
      tabla, va a una sola columna por debajo de 1720 de ancho, que es donde la
      de «Sensibilidad» deja de caber en su tercio.

   Por debajo de 861 manda el sistema, sin cambios: la tabla se desplaza dentro
   de su caja y la página no se mueve de lado. */
@media (min-width: 861px) {
  .db-table thead th { white-space: normal; }
  .db-table tbody .db-num,
  .db-table tbody .db-badge { white-space: nowrap; }
  .db-table thead th,
  .db-table tbody td,
  .db-table--anclada tbody th[scope="row"],
  .db-table--anclada thead th:first-child { min-width: 0; }
}
@media (max-width: 1719px) {
  .db-grid--2-1:has(> .db-tablebox) { grid-template-columns: minmax(0, 1fr); }
}

/* ── La caja de texto largo, en el formulario ────────────────────────────────
   La caja es la de los demás campos (la regla de `.pi-form input`, arriba).
   Aquí va lo que solo tiene ella: ocupa la línea entera y crece hacia abajo.
   Con `:not([hidden])`, porque un `display` escrito aquí le ganaría al
   atributo `hidden` y enseñaría una caja escondida a propósito. */
.pi-form textarea:not([hidden]),
textarea:not([hidden]) { display: block; width: 100%; resize: vertical; line-height: 1.5; }

/* En Consultas, el bloque de «¿De qué va?» (el de «Otra cosa») ponía el rótulo
   y la caja en la misma línea: es un bloque dentro del formulario, y dentro de
   él el rótulo y la caja iban seguidos. Se reparte como el resto del
   formulario, uno debajo de otro y con su misma separación.
   OJO: el bloque nace con el atributo `hidden` y solo se enseña al elegir
   «Otra cosa». Un `display` escrito en una regla le gana a ese atributo, así
   que sin el `:not([hidden])` el campo salía siempre, también con «Cuotas y
   pagos» elegido. */
.pi-form > div:not([hidden]):has(> label + input:not([type="checkbox"]):not([type="radio"])) {
  display: grid; gap: inherit;
}

/* ── El subtítulo de un dosier ───────────────────────────────────────────────
   Dentro de cada sección, el subtítulo (lo que empieza por `##`, que se pinta
   como `h4`) salía casi igual que el título de la sección (`h3`): 15,2 frente
   a 15 píxeles y del mismo color. Lleva el estilo de las notas del sistema,
   más pequeño y en su gris, y sigue siendo un título para el lector de
   pantalla. La vista previa del panel lleva la misma regla. */
.pi-dosier h4 {
  font: 400 var(--fs-sm)/1.6 var(--font-body);
  letter-spacing: normal;
  color: var(--text-muted);
}

/* ── Mis fechas: los tres meses del calendario, con la misma altura ──────────
   Un mes ocupa cinco o seis semanas según el día en que empieza, y el de seis
   salía una fila más alto que sus vecinos: las tres rejillas no acababan a la
   misma altura. Ahora cada mes reserva siempre seis filas, también cuando le
   sobran: la rejilla de días tiene la proporción de siete columnas por seis
   filas, y cada fila es un sexto de su alto. Las casillas siguen cuadradas
   (la regla del sistema), porque una sexta parte de ese alto es lo que mide
   una séptima parte del ancho. No es una medida de diseño: es la forma de un
   mes, siete días por seis semanas como mucho. Solo lo usa «Mis fechas». */
.db-cal__dias {
  grid-template-rows: repeat(6, minmax(0, 1fr));
  aspect-ratio: 7 / 6;
}
/* Los días del primer mes anteriores a la primera noche que se puede pedir
   salen con su número y sin casilla. Con el color del texto se leían más
   fuertes que los libres, que van en gris; van con el gris suave del sistema,
   el de las iniciales de la semana. */
.db-cal__d--vacio { color: var(--text-soft); }

/* ── El error de un formulario, con el color de error del sistema ────────────
   Las pantallas escriben `db-aviso--no` cuando el servidor rechaza un envío, y
   `portal-extra.js` la busca para darle el foco y el papel de alerta. Pero el
   sistema de diseño solo define `--bien`, `--aviso` y `--mal`, así que el
   error salía con el fondo neutro de una nota. Esta es la misma regla que
   `dashboard.css` le da a `db-aviso--mal` (fondo, tinta, icono y párrafo), con
   sus variables: un alias, no un color nuevo. Se arregla aquí y no
   renombrando las pantallas (decisión del 20 de octubre de 2026). El panel
   lleva la misma regla en su hoja. */
.db-aviso--no { background: var(--db-err-bg); color: var(--db-err-ink); }
.db-aviso--no .db-aviso__ico { color: inherit; }
.db-aviso--no p { color: inherit; opacity: .92; }

/* ── Una conversación, como un chat ──────────────────────────────────────────
   Una sola caja: el nombre arriba, los mensajes en burbujas y la caja de
   escribir abajo, separados por una línea fina. Lo tuyo va a la derecha con el
   color de la marca y letra blanca; lo del vecino, a la izquierda, sobre el
   papel. Los mensajes se desplazan dentro de su caja con un tope de alto, para
   que escribir quede siempre a la vista, y `portal-extra.js` la abre por el
   final. El nombre y la hora de cada burbuja van sin transparencia: con ella,
   la letra pequeña sobre el rojo bajaría del contraste mínimo. Lo pidió
   Alejandro el 21 de octubre de 2026; solo lo usa `conversacion.php`. */
.db-panel.conv-hilo { padding: 0; display: flex; flex-direction: column; min-width: 0; }
.conv-cabecera {
  display: flex; align-items: center; gap: var(--sp-9); flex-wrap: wrap;
  padding: var(--sp-14) var(--sp-16b); border-bottom: var(--hair-soft);
}
.conv-cabecera h3 { margin: 0; font: 600 var(--fs-h3)/1.3 var(--font-body); }
.conv-cabecera h3 a { color: inherit; }
.conv-nota {
  display: flex; gap: var(--sp-7); align-items: flex-start; margin: 0;
  padding: var(--sp-12) var(--sp-16b) 0;
  color: var(--text-dim); font-size: var(--fs-sm); line-height: var(--lh-normal);
}
.conv-nota__ico { flex: none; display: inline-flex; margin-top: var(--sp-1); }
.conv-nota__ico svg { width: 16px; height: 16px; }
.conv-mensajes {
  display: flex; flex-direction: column; gap: var(--sp-11);
  padding: var(--sp-14) var(--sp-16b);
  min-height: 16rem; max-height: 60vh; overflow-y: auto;
}
.conv-paginas { margin: 0; text-align: center; }
.conv-vacio { margin: auto; padding: var(--sp-18b) 0; text-align: center; color: var(--text-dim); }
.msg {
  max-width: min(75%, 46rem); padding: var(--sp-9) var(--sp-12);
  border-radius: var(--r-card); align-self: flex-start;
  background: var(--surface-alt); color: var(--text);
}
.msg--propio { align-self: flex-end; background: var(--accent); color: var(--on-accent); }
.msg-quien {
  display: flex; gap: var(--sp-7); align-items: baseline; flex-wrap: wrap;
  margin-bottom: var(--sp-3); font-size: var(--fs-xs); color: var(--text-dim);
}
.msg--propio .msg-quien { color: inherit; }
.msg-quien strong { font-weight: var(--w-fuerte); }
.msg-cuando { margin-left: auto; white-space: nowrap; }
.msg-cuerpo { margin: 0; overflow-wrap: anywhere; line-height: var(--lh-normal); }
.msg--retirado .msg-cuerpo { color: var(--text-dim); }
.conv-escribir {
  display: grid; gap: var(--sp-11);
  padding: var(--sp-14) var(--sp-16b) var(--sp-16b); border-top: var(--hair-soft);
}
.conv-escribir .pi-form { margin-top: 0; }
.conv-escribir .pi-form .btn { width: auto; justify-self: start; margin-top: var(--sp-7); }
/* Lo que sirve a las demás pantallas con burbujas (escribir por primera vez,
   una consulta, y en el panel la conversación vista por el equipo y la
   bandeja de consultas). Va en las dos hojas: el panel lleva el mismo bloque.
   `msg--otro` es la segunda persona cuando mira alguien de fuera: a la derecha
   y sobre papel, porque el rojo de la marca quiere decir «lo tuyo». */
.msg--otro { align-self: flex-end; background: var(--surface-strong); color: var(--text); }
.msg-meta { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--text-dim); }
.msg--propio .msg-meta { color: inherit; }
.msg .pi-plegable--suelto { margin-top: var(--sp-3); }
.conv-mensajes--vacia { min-height: 0; }
.db-panel > .conv-mensajes--equipo { padding: var(--sp-12) 0; }
@media (max-width: 600px) {
  .msg { max-width: 92%; }
  .conv-cabecera, .conv-nota, .conv-mensajes, .conv-escribir { padding-left: var(--sp-13); padding-right: var(--sp-13); }
}

/* ── Bloque 3 (21 de octubre de 2026, G-6): la categoría encima de la foto ──
   Las tarjetas del blog son `.card-post` del sistema, con su categoría en una
   `.tag-pill--onmedia`. Esa pieza pinta la letra con `--text`, que se da la
   vuelta en oscuro, y su fondo (`--glass`) es claro en los dos temas: en oscuro
   salía letra clara sobre pastilla clara. Encima de una foto el tema no cambia
   nada, así que la letra es la del velo claro, que no gira (`--on-veil-light`,
   documentada en `docs/sistema/tokens.css`). */
.card-post .tag-pill--onmedia { color: var(--on-veil-light); }

/* ── Los textos legales y la línea del chat (G-7, 21 de octubre de 2026) ─────
   Los términos de uso y Privacidad son texto corrido dentro de un panel, con
   enlaces entre ellos y dos listas. Medido: el sistema pone a todo enlace el
   color del texto y sin subrayado (`a{color:inherit;text-decoration:none}`),
   y a las listas sangría cero, así que «Privacidad», el correo de contacto y
   el enlace de la línea del chat no se distinguían, y los puntos de la lista
   colgaban hacia el borde del panel. Mismo tratamiento que los enlaces de una
   nota y de una fila: color de letra de la marca y subrayado, que es lo único
   que distingue un enlace para quien no percibe bien el color. En la línea del
   chat el enlace es lo que la justifica: sin él, no habría nada que pulsar. */
.pi-legal a, .conv-nota a{color:var(--accent-ink);text-decoration:underline;
  text-underline-offset:2px}
.pi-legal a:hover, .conv-nota a:hover{text-decoration-thickness:2px}
.pi-legal ul{padding-left:var(--sp-15)}

/* ── El plano de los Premium Duplex (5 de noviembre de 2026) ────────────────
   La unidad de quien mira lleva un contorno de 2 px, el que el sistema permite
   para marcar una selección. En la leyenda, el mismo cuadro, hueco. */
.pi-mapa i.pi-mapa__tuya{outline:2px solid var(--text);outline-offset:1px}
.pi-leyenda i.pi-mapa__tuya{background:transparent;box-shadow:inset 0 0 0 2px var(--text)}

/* ── El pie del menú, solo con iconos (5 de noviembre de 2026) ───────────────
   Sergio en la revisión: «quizá con los iconos sería suficiente». La web,
   Instagram y YouTube en una fila, cada uno con el fondo al pasar que tienen
   las demás entradas del menú. El nombre va oculto dentro del enlace. */
.db-side__foot[data-redes]{display:flex;gap:6px}
.db-side__foot[data-redes] .db-side__link{width:auto;padding:10px;justify-content:center}
.db-side__foot[data-redes] .db-side__link svg{width:19px;height:19px}

/* ── El relleno de una barra de avance, por clases ──────────────────────────
   La anchura iba en un atributo `style` escrito desde PHP, y la regla 6 del
   proyecto no quiere estilos en la etiqueta (deuda del 20 de octubre de 2026).
   Una clase por cada punto, del 0 al 100: `db-meter__fill--p62` es el 62 %. */
.db-meter__fill--p0 { width: 0%; }
.db-meter__fill--p1 { width: 1%; }
.db-meter__fill--p2 { width: 2%; }
.db-meter__fill--p3 { width: 3%; }
.db-meter__fill--p4 { width: 4%; }
.db-meter__fill--p5 { width: 5%; }
.db-meter__fill--p6 { width: 6%; }
.db-meter__fill--p7 { width: 7%; }
.db-meter__fill--p8 { width: 8%; }
.db-meter__fill--p9 { width: 9%; }
.db-meter__fill--p10 { width: 10%; }
.db-meter__fill--p11 { width: 11%; }
.db-meter__fill--p12 { width: 12%; }
.db-meter__fill--p13 { width: 13%; }
.db-meter__fill--p14 { width: 14%; }
.db-meter__fill--p15 { width: 15%; }
.db-meter__fill--p16 { width: 16%; }
.db-meter__fill--p17 { width: 17%; }
.db-meter__fill--p18 { width: 18%; }
.db-meter__fill--p19 { width: 19%; }
.db-meter__fill--p20 { width: 20%; }
.db-meter__fill--p21 { width: 21%; }
.db-meter__fill--p22 { width: 22%; }
.db-meter__fill--p23 { width: 23%; }
.db-meter__fill--p24 { width: 24%; }
.db-meter__fill--p25 { width: 25%; }
.db-meter__fill--p26 { width: 26%; }
.db-meter__fill--p27 { width: 27%; }
.db-meter__fill--p28 { width: 28%; }
.db-meter__fill--p29 { width: 29%; }
.db-meter__fill--p30 { width: 30%; }
.db-meter__fill--p31 { width: 31%; }
.db-meter__fill--p32 { width: 32%; }
.db-meter__fill--p33 { width: 33%; }
.db-meter__fill--p34 { width: 34%; }
.db-meter__fill--p35 { width: 35%; }
.db-meter__fill--p36 { width: 36%; }
.db-meter__fill--p37 { width: 37%; }
.db-meter__fill--p38 { width: 38%; }
.db-meter__fill--p39 { width: 39%; }
.db-meter__fill--p40 { width: 40%; }
.db-meter__fill--p41 { width: 41%; }
.db-meter__fill--p42 { width: 42%; }
.db-meter__fill--p43 { width: 43%; }
.db-meter__fill--p44 { width: 44%; }
.db-meter__fill--p45 { width: 45%; }
.db-meter__fill--p46 { width: 46%; }
.db-meter__fill--p47 { width: 47%; }
.db-meter__fill--p48 { width: 48%; }
.db-meter__fill--p49 { width: 49%; }
.db-meter__fill--p50 { width: 50%; }
.db-meter__fill--p51 { width: 51%; }
.db-meter__fill--p52 { width: 52%; }
.db-meter__fill--p53 { width: 53%; }
.db-meter__fill--p54 { width: 54%; }
.db-meter__fill--p55 { width: 55%; }
.db-meter__fill--p56 { width: 56%; }
.db-meter__fill--p57 { width: 57%; }
.db-meter__fill--p58 { width: 58%; }
.db-meter__fill--p59 { width: 59%; }
.db-meter__fill--p60 { width: 60%; }
.db-meter__fill--p61 { width: 61%; }
.db-meter__fill--p62 { width: 62%; }
.db-meter__fill--p63 { width: 63%; }
.db-meter__fill--p64 { width: 64%; }
.db-meter__fill--p65 { width: 65%; }
.db-meter__fill--p66 { width: 66%; }
.db-meter__fill--p67 { width: 67%; }
.db-meter__fill--p68 { width: 68%; }
.db-meter__fill--p69 { width: 69%; }
.db-meter__fill--p70 { width: 70%; }
.db-meter__fill--p71 { width: 71%; }
.db-meter__fill--p72 { width: 72%; }
.db-meter__fill--p73 { width: 73%; }
.db-meter__fill--p74 { width: 74%; }
.db-meter__fill--p75 { width: 75%; }
.db-meter__fill--p76 { width: 76%; }
.db-meter__fill--p77 { width: 77%; }
.db-meter__fill--p78 { width: 78%; }
.db-meter__fill--p79 { width: 79%; }
.db-meter__fill--p80 { width: 80%; }
.db-meter__fill--p81 { width: 81%; }
.db-meter__fill--p82 { width: 82%; }
.db-meter__fill--p83 { width: 83%; }
.db-meter__fill--p84 { width: 84%; }
.db-meter__fill--p85 { width: 85%; }
.db-meter__fill--p86 { width: 86%; }
.db-meter__fill--p87 { width: 87%; }
.db-meter__fill--p88 { width: 88%; }
.db-meter__fill--p89 { width: 89%; }
.db-meter__fill--p90 { width: 90%; }
.db-meter__fill--p91 { width: 91%; }
.db-meter__fill--p92 { width: 92%; }
.db-meter__fill--p93 { width: 93%; }
.db-meter__fill--p94 { width: 94%; }
.db-meter__fill--p95 { width: 95%; }
.db-meter__fill--p96 { width: 96%; }
.db-meter__fill--p97 { width: 97%; }
.db-meter__fill--p98 { width: 98%; }
.db-meter__fill--p99 { width: 99%; }
.db-meter__fill--p100 { width: 100%; }