/* ============================================================================
   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-5, 1.5rem)}

.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-6, 2rem)}
.pi-entrada__marca{width:110px;color:var(--accent);margin-bottom:var(--sp-4, 1.2rem)}
.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-5, 1.5rem)}
.pi-form label{font-size:var(--fs-sm,.85rem);font-weight:var(--w-fuerte,600);margin-top:.7rem}
.pi-form input{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. */
.pi-form select,
.db-filtros select,
select.db-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. */
.pi-form select{padding:.7rem 2.4rem .7rem .9rem;
  min-height:var(--tap-min, 44px);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}

.pi-form select:focus-visible,
.db-filtros select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* 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}
.db-filtros input[type="search"]:focus-visible{outline:2px solid var(--accent);
  outline-offset:1px}

.pi-form input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pi-form .btn{margin-top:var(--sp-4, 1.2rem);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)}
.pi-via:has(input:focus-visible){outline:2px solid var(--accent);
  outline-offset:1px}

/* El pie del menú lateral: quién está dentro y el botón de salir. */
.db-side__pie{margin-top:auto;padding:var(--sp-4, 1.2rem);
  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-4, 1.2rem)}
}

/* 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-6, 2rem) var(--sp-4, 1.2rem);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}
.pi-nota a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  border-radius: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)}
.db-topbar__buscar input[type="search"]:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px}

/* 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)}
}

/* ── La conversacion con el servidor de correo ───────────────────────────────
   Se lee como un registro tecnico, asi que va en letra de ancho fijo: las
   lineas se alinean y se distingue de un vistazo lo que dijo cada parte.
   Con su propio desplazamiento, porque algunas respuestas son largas. */
.pi-charla{margin:0;padding:var(--sp-4, 1rem);
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-md, 10px);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;line-height:1.6;color:var(--text);
  white-space:pre;overflow-x:auto;max-height:420px;overflow-y:auto}