/* Mini — lo propio de la app, encima del sistema de diseño interno (public/sistema/sistema.css, v2.1, que no se edita:
   se trae con su actualizar.sh). Solo tokens del sistema (var(--…)): ni un color suelto. Lo que el sistema ya tiene
   (armazón con lateral, botones, campos, tablas, avisos, baldosas, control de día y noche) se usa tal cual; acá van
   las piezas de Mini que el sistema no trae (tarjetas con cabecera, listas, tabla apilada, pestañas, diálogo, avisos
   flotantes de base.js, el Inicio) y unos pocos ajustes del sistema a Mini, marcados como tales.
   Cortes: celular ≤ 720 px · lateral plegado en «Menú» ≤ 1023 px (los del sistema). */

/* ---------- Base ---------- */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
p { margin: 0; }
h3 { font-size: var(--t-m); font-weight: 700; }
img, svg { max-width: 100%; }
::selection { background: var(--acento-f); }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Revisión 8 (teclado): «Saltar al contenido», visible solo con el foco; y la casilla del menú del celular fuera del
   orden de Tab en la computadora, donde el menú está siempre a la vista. */
.saltar { position: absolute; left: var(--e2); top: -200px; z-index: 100; padding: var(--e2) var(--e3); border-radius: var(--r-chico); background: var(--sup); color: var(--texto); border: 2px solid var(--acento); font-weight: 600; }
.saltar:focus { top: var(--e2); }
#contenido:focus { outline: none; }
@media (min-width: 1024px) { .menu-check { display: none; } }
.texto-2, .texto-3 { color: var(--texto-2); }
.pequeno { font-size: var(--t-s); }
.mono { font-family: var(--mono); }
.cortar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.negativo { color: var(--peligro); }
/* Lo que escribe (data-escribe) solo se ve con dueño o administración; mientras no se sabe el permiso, tampoco. */
:root:not([data-permiso="dueno"]):not([data-permiso="administracion"]) [data-escribe] { display: none !important; }

/* ---------- Armazón (el del sistema; esto es lo que Mini le suma) ---------- */
.nav-titulo { padding: var(--e3) 8px var(--e1); font-size: var(--t-xs); font-weight: 700; color: var(--barra-texto-2); text-transform: uppercase; letter-spacing: .06em; }
.nav a.nav-separado { margin-top: var(--e2); }
.tema .icono-b { min-height: 0; }
.principal { display: flex; flex-direction: column; gap: var(--e5); }
.barra { display: flex; align-items: center; gap: var(--e3); padding-bottom: var(--e3); border-bottom: 1px solid var(--linea); min-width: 0; }
.barra-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); font-size: var(--t-s); font-weight: 600; }
.selector-espacio { margin-left: auto; display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.selector-espacio label { margin: 0; }
.selector-espacio select { width: auto; min-width: 0; max-width: 320px; font-weight: 600; background: var(--sup); }
.contenido { width: 100%; min-width: 0; }
.contenido.estrecho { max-width: 760px; }
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e5); }
.cabecera h1 { margin: 0; }
.cabecera p { color: var(--texto-2); margin-top: var(--e1); }
.migas { font-size: var(--t-s); color: var(--texto-2); margin: 0 0 var(--e2); }
.migas a { color: var(--texto-2); }
.acciones { gap: var(--e2); }
@media (max-width: 1023px) {
  .principal { gap: var(--e4); }
}
@media (max-width: 720px) {
  .ocultar-movil { display: none; }
  .selector-espacio { flex: 1; justify-content: flex-end; }
  .selector-espacio select { max-width: 100%; }
  .cabecera { align-items: flex-start; }
}

/* ---------- Botones: los del sistema, con los nombres que usan Mini y base.js ---------- */
.boton { white-space: nowrap; }
.boton:hover { text-decoration: none; }
.boton.principal-b { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); font-weight: 700; box-shadow: var(--sombra-acento); }
.boton.principal-b:hover { filter: brightness(1.08); }
.boton.fantasma { background: none; border-color: transparent; color: var(--texto-2); padding: 0 var(--e3); }
.boton.fantasma:hover { background: var(--sup-2); color: var(--texto); }
.boton.peligro.lleno { background: var(--peligro); border-color: var(--peligro); color: var(--sup); }
.boton.pequeno { min-height: 36px; padding: 0 var(--e3); font-size: var(--t-s); }
.boton.pequeno.fantasma { padding: 0 var(--e2); }
.boton[aria-busy="true"] { cursor: progress; }
button.boton:disabled { box-shadow: none; filter: none; }
.enlace-boton { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--acento); font: inherit; font-weight: 600; cursor: pointer; }
.enlace-boton:hover { text-decoration: underline; }
@media (max-width: 720px) { .boton.pequeno { min-height: var(--toque); } }

/* ---------- Campos ---------- */
.campo { margin-bottom: var(--e4); }
.campo > label, .rotulo-campo { font-size: var(--t-s); font-weight: 600; color: var(--texto-2); }
.campo > label { display: block; } /* ajuste del sistema: en Mini el rótulo va solo, no envuelve al campo */
.campo .ayuda { font-size: var(--t-xs); }
.campo .error { font-size: var(--t-xs); font-weight: 600; color: var(--peligro); }
.campo .alerta-saldo { display: block; font-weight: 600; color: var(--alerta); background: var(--alerta-f); border-radius: var(--r-chico); padding: var(--e1) var(--e2); margin-top: var(--e1); }
.obligatorio::after { content: " *"; color: var(--peligro); }
textarea { min-height: 96px; }
input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea { background: var(--sup); }
::placeholder { color: var(--texto-2); opacity: .8; }
.rejilla-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e4); }
.rejilla-form .entera { grid-column: 1 / -1; }
label.casilla { display: inline-flex; flex-direction: row; align-items: center; gap: var(--e2); min-height: var(--toque); font-size: var(--t-m); font-weight: 500; color: var(--texto); cursor: pointer; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0; }
.formulario-pie { display: flex; justify-content: flex-end; gap: var(--e2); margin-top: var(--e2); flex-wrap: wrap; }
.con-prefijo { display: flex; align-items: center; gap: var(--e2); }
.con-prefijo span { color: var(--texto-2); font-weight: 600; min-width: 2.2em; text-align: right; }
.con-prefijo input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.opciones { display: flex; gap: var(--e4); flex-wrap: wrap; }
fieldset.sin-borde { border: 0; padding: 0; margin: 0; min-width: 0; }
@media (max-width: 720px) { .rejilla-form { grid-template-columns: minmax(0, 1fr); } }

/* Filtros con su rótulo encima */
.filtros { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--e4); }
.campo-filtro { display: flex; flex-direction: column; gap: 6px; }
.campo-filtro input, .campo-filtro select { width: auto; min-width: 150px; }
.botones-filtro { flex-direction: row; gap: var(--e1); }
.filtros-error { flex-basis: 100%; font-size: var(--t-xs); font-weight: 600; color: var(--peligro); }
@media (max-width: 720px) {
  .campo-filtro { flex: 1 1 140px; }
  .campo-filtro input, .campo-filtro select { width: 100%; min-width: 0; }
  .botones-filtro { flex-basis: 100%; }
}

/* ---------- Tarjetas (ajuste del sistema: la de Mini lleva cabecera y cuerpo propios, sin el relleno del sistema) ---------- */
.tarjeta { display: block; padding: 0; margin-top: 0; }
.tarjeta + .tarjeta { margin-top: var(--e5); }
.tarjeta-cuerpo { padding: var(--e5); }
.tarjeta-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e4) var(--e5); border-bottom: 1px solid var(--linea); }
.tarjeta-cabecera h2, .tarjeta-cabecera h3 { font-size: var(--t-m); font-weight: 700; margin: 0; }
.nota-lista { margin-top: 2px; }
.rejilla { display: grid; gap: var(--e4); }
.rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla > .tarjeta + .tarjeta { margin-top: 0; }
.cifra { padding: var(--e4) var(--e5); font-family: var(--sans); }
.cifra .rotulo { font-size: var(--t-s); color: var(--texto-2); font-weight: 600; }
.cifra .valor { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-top: var(--e1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cifra .valor.secundario { font-size: var(--t-l); margin-top: 2px; }
.cifra .nota { font-size: var(--t-s); color: var(--texto-2); margin-top: var(--e1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); }
.saludo p { color: var(--texto-2); margin-top: var(--e1); }
@media (max-width: 720px) {
  .rejilla.dos { grid-template-columns: minmax(0, 1fr); }
  .tarjeta-cuerpo { padding: var(--e4); }
  .tarjeta-cabecera { padding: var(--e3) var(--e4); }
  .cifra { padding: var(--e3) var(--e4); }
}

/* ---------- Etiquetas (como la etiqueta del sistema: palabra sobre su fondo teñido) ---------- */
.etiqueta-e { display: inline-flex; align-items: center; padding: 0 8px; border-radius: var(--r-mini); font-size: var(--t-xs); font-weight: 700; line-height: 1.6; background: var(--sup-2); color: var(--texto-2); white-space: nowrap; }
.etiqueta-e.acento, .etiqueta-e.info { background: var(--acento-f); color: var(--acento); }
.etiqueta-e.ok { background: var(--ok-f); color: var(--ok); }
.etiqueta-e.alerta { background: var(--alerta-f); color: var(--alerta); }
.etiqueta-e.peligro { background: var(--peligro-f); color: var(--peligro); }
a.etiqueta-e { text-decoration: none; }

/* ---------- Avisos en la página (los del sistema, con ícono a la izquierda) ---------- */
.aviso-caja { display: flex; gap: var(--e3); padding: var(--e3) var(--e4); border-radius: var(--r-chico); font-size: var(--t-s); background: var(--acento-f); color: var(--texto); border-left: 4px solid var(--acento); }
.aviso-caja.ok { background: var(--ok-f); color: var(--ok); border-left-color: var(--ok); }
.aviso-caja.alerta { background: var(--alerta-f); color: var(--alerta); border-left-color: var(--alerta); }
.aviso-caja.peligro { background: var(--peligro-f); color: var(--peligro); border-left-color: var(--peligro); font-weight: 600; }
.aviso-caja a { color: inherit; font-weight: 700; }
form .aviso-caja { margin-bottom: var(--e4); }

/* ---------- Listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e5); border-top: 1px solid var(--linea); min-width: 0; }
.lista > li:first-child { border-top: 0; }
.lista .principal-l { flex: 1; min-width: 0; }
.lista .titulo-l { font-weight: 600; }
.lista .detalle-l { font-size: var(--t-s); color: var(--texto-2); }
.acciones-fila { display: flex; gap: var(--e1); justify-content: flex-end; }
.vacio-lista { padding: var(--e4) var(--e5); margin: 0; }
@media (max-width: 720px) { .lista > li { padding: var(--e3) var(--e4); } }

/* ---------- Tablas: las del sistema; en el celular, las de más de tres columnas se apilan ---------- */
.tabla-envoltura { overflow-x: auto; max-width: 100%; }
.tabla td { vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla th:first-child, .tabla td:first-child { padding-left: var(--e5); }
.tabla th:last-child, .tabla td:last-child { padding-right: var(--e5); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla td:first-child { white-space: nowrap; }
.tabla .saldo, .tabla .importe { font-weight: 600; white-space: nowrap; }
.tabla .detalle-fila { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.tabla .origen { white-space: normal; min-width: 12ch; }
.tabla td.col-acciones { width: 1%; }
.tabla td.col-acciones .acciones-fila { flex-wrap: nowrap; }
.fila-inicial td { color: var(--texto-2); font-style: italic; }
.paginacion { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e5); font-size: var(--t-s); color: var(--texto-2); border-top: 1px solid var(--linea); }
@media (max-width: 720px) {
  .tabla.apilada thead { display: none; }
  .tabla.apilada, .tabla.apilada tbody, .tabla.apilada tr, .tabla.apilada td { display: block; width: 100%; }
  .tabla.apilada tr { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea); }
  .tabla.apilada tr:last-child { border-bottom: 0; }
  .tabla.apilada td, .tabla.apilada td:first-child, .tabla.apilada td:last-child { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); padding: 3px 0; border: 0; white-space: normal; text-align: right; }
  .tabla.apilada td::before { content: attr(data-etiqueta); color: var(--texto-2); font: 400 var(--t-s) var(--sans); text-align: left; flex: none; }
  .tabla.apilada td:first-child { display: block; text-align: left; font-weight: 600; padding-bottom: var(--e1); }
  .tabla.apilada td:first-child::before { display: none; }
  .tabla.apilada td:empty { display: none; }
  .tabla.apilada td.origen { text-align: right; }
  .tabla.apilada td.col-acciones { display: block; width: 100%; padding-top: var(--e2); }
  .tabla.apilada td.col-acciones .acciones-fila { flex-wrap: wrap; justify-content: flex-start; }
  .tabla .detalle-fila { max-width: none; white-space: normal; }
  .paginacion { padding: var(--e3) var(--e4); }
}

/* ---------- Pestañas ---------- */
.pestanas { display: flex; gap: var(--e1); border-bottom: 1px solid var(--linea); overflow-x: auto; }
.pestanas button { min-height: var(--toque); padding: 0 var(--e3); border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; color: var(--texto-2); font: 600 var(--t-s) var(--sans); white-space: nowrap; margin-bottom: -1px; }
.pestanas button:hover { color: var(--texto); border-color: transparent; border-bottom-color: var(--linea-campo); }
.pestanas [aria-selected="true"], .pestanas [aria-selected="true"]:hover { color: var(--texto); border-bottom-color: var(--acento); }

/* ---------- Vacíos ---------- */
.vacio { text-align: center; padding: var(--e6) var(--e5); color: var(--texto-2); }
.vacio .icono-v { width: 52px; height: 52px; margin: 0 auto var(--e4); border-radius: var(--r-chico); display: grid; place-items: center; background: var(--hoy-f); color: var(--hoy); font-size: 22px; font-weight: 700; }
.vacio h3 { color: var(--texto); margin-bottom: var(--e2); }
.vacio p { max-width: 440px; margin: 0 auto var(--e4); }
.acciones.centradas { justify-content: center; margin-bottom: var(--e4); }
.sin-margen-arriba { margin-top: 0; margin-bottom: var(--e4); }

/* ---------- Archivos (comprobante) ---------- */
.archivo { display: flex; align-items: center; gap: var(--e3); padding: var(--e3); border: 1px solid var(--linea); border-radius: var(--r-chico); background: var(--sup); }
.archivo-icono { width: 38px; height: 38px; border-radius: var(--r-chico); display: grid; place-items: center; flex: none; font: 700 var(--t-xs)/1 var(--sans); text-transform: uppercase; background: var(--hoy-f); color: var(--hoy); }
.archivo .principal-l { min-width: 0; flex: 1; }
.adj-nombre { font-weight: 600; }
.acciones-adjunto { display: flex; gap: var(--e1); flex-wrap: wrap; }
#comprobante-actual { margin-bottom: var(--e3); }
.zona-subida { display: flex; flex-direction: column; gap: 4px; align-items: center; border: 2px dashed var(--linea-campo); border-radius: var(--r); padding: var(--e5); text-align: center; color: var(--texto-2); cursor: pointer; }
.zona-subida:focus-within, label.zona-subida:hover, .zona-subida.encima { border-color: var(--acento); }
.zona-subida.encima { background: var(--acento-f); }
@media (max-width: 720px) { .archivo { flex-wrap: wrap; } .acciones-adjunto { width: 100%; justify-content: flex-end; } }

/* ---------- Avisos flotantes y confirmaciones (los arma base.js) ---------- */
.avisos { position: fixed; right: var(--e5); bottom: var(--e5); display: flex; flex-direction: column; gap: var(--e2); z-index: 100; }
.aviso-flotante { display: flex; align-items: center; gap: var(--e3); min-width: 260px; max-width: 380px; padding: var(--e3) var(--e4); border-radius: var(--r-chico); background: var(--texto); color: var(--fondo); box-shadow: var(--sombra); font-size: var(--t-m); }
.aviso-flotante.error { background: var(--peligro-f); color: var(--peligro); border-left: 4px solid var(--peligro); font-weight: 600; }
dialog.dialogo { border: 0; padding: 0; border-radius: var(--r); background: var(--sup); color: var(--texto); box-shadow: var(--sombra); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); }
dialog.dialogo::backdrop { background: color-mix(in srgb, var(--barra) 55%, transparent); }
.dialogo-cabecera { padding: var(--e5) var(--e5) var(--e2); }
.dialogo-cabecera h3 { font-size: var(--t-l); }
.dialogo-cabecera p { color: var(--texto-2); margin-top: var(--e1); }
.dialogo-cuerpo { padding: var(--e3) var(--e5); overflow-y: auto; }
.dialogo-pie { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--e2); padding: var(--e4) var(--e5) var(--e5); }
@media (max-width: 720px) { .avisos { left: var(--e4); right: var(--e4); bottom: var(--e4); } .aviso-flotante { max-width: none; min-width: 0; } }

/* ---------- Entrar, código, contraseña, segundo factor, restablecer ---------- */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: var(--e5); }
.entrar .tarjeta { width: min(420px, 100%); }
.entrar .tarjeta.ancha { width: min(520px, 100%); }
.entrar .marca-fila { margin-bottom: var(--e5); padding: 0; }
.entrar .marca { font-size: var(--t-l); }
.entrar h1 { font-size: var(--t-xl); }
.entrar .bajada { color: var(--texto-2); margin: 0 0 var(--e5); }
.entrar .formulario-pie .boton { width: 100%; }
.centro-pie { text-align: center; margin-top: var(--e4); }
input.codigo { font: 600 var(--t-l) var(--mono); letter-spacing: .3em; text-align: center; }
.pasos { margin: 0 0 var(--e4); padding-left: 1.2em; color: var(--texto-2); }
.pasos li { margin-bottom: var(--e1); }
.qr { display: grid; place-items: center; margin: var(--e3) 0; }
/* El QR va siempre sobre blanco (la app autenticadora lo lee así): el único blanco fijo del sistema es el de la barra. */
.qr img { width: 200px; height: 200px; border-radius: var(--r-chico); background: var(--barra-activo-texto); padding: 6px; image-rendering: pixelated; }
.clave-tipear { font-family: var(--mono); font-size: var(--t-s); word-break: break-all; text-align: center; background: var(--sup-2); border-radius: var(--r-chico); padding: var(--e2) var(--e3); margin: 0 0 var(--e4); user-select: all; }
.nota-clave { text-align: center; margin-bottom: var(--e1); }
.codigos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2) var(--e4); list-style: none; padding: var(--e3); margin: var(--e3) 0; border: 1px dashed var(--linea-campo); border-radius: var(--r-chico); font-family: var(--mono); font-size: var(--t-m); text-align: center; }
.estado-2fa { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e3); }
@media (max-width: 720px) { .entrar { padding: var(--e4); align-items: start; } }

/* ---------- Cuentas, libro mayor, ingresos y salidas, registro ---------- */
.espacio-linea { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.espacio-titulo { min-width: 0; }
.espacio-titulo h2 { margin: 2px 0 0; }
.rotulo { font-size: var(--t-s); color: var(--texto-2); }
#espacio-actual > .aviso-caja { margin-bottom: var(--e4); }
.solo-lectura { margin: 0 0 var(--e4); }
.solo-lectura-config { margin-bottom: var(--e4); }
.aviso-copia { margin-bottom: var(--e4); }
.pendientes-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2) var(--e3); margin: 0 0 var(--e4); font-size: var(--t-l); font-weight: 600; }
.pendientes-linea a { text-decoration: none; padding: var(--e2) var(--e3); border-radius: var(--r-chico); background: var(--sup); box-shadow: var(--sombra); }
.pendientes-linea a:hover, .pendientes-linea a:focus-visible { color: var(--acento); }
.archivadas { border-top: 1px solid var(--linea); }
.archivadas summary { padding: var(--e3) var(--e4); color: var(--texto-2); font-size: var(--t-s); }
.archivadas .tabla td { color: var(--texto-2); }
.saldo-grande { display: flex; flex-direction: column; align-items: flex-end; }
.saldo-grande b { font-size: var(--t-xl); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .saldo-grande { align-items: flex-start; } .pendientes-linea { font-size: var(--t-m); } }

/* ---------- Configuración: contrapartes, categorías, agentes, espacios ---------- */
.listas-config { margin-bottom: var(--e5); }
.listas-config > *, .listas-config .principal-l { min-width: 0; }
.listas-config .tarjeta-cabecera { align-items: flex-start; }
.listas-config .lista li.archivada .titulo-l { color: var(--texto-2); }
.ultimos-agente { list-style: none; margin: var(--e2) 0 0; padding: 0; display: grid; gap: 2px; }
.ultimos-agente li { color: var(--texto-2); overflow-wrap: anywhere; }
.lista > li.agente { align-items: flex-start; }
.lista-espacios > li.elegido { background: var(--sup-2); }
.lista-espacios > li.archivada .titulo-l { color: var(--texto-2); }
.lista-espacios .acciones-fila, .lista-miembros .acciones-fila { display: flex; gap: var(--e1); align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.lista-miembros .permiso-miembro { width: auto; min-width: 150px; }
.form-compartir { border-top: 1px solid var(--linea); padding: var(--e4) var(--e5); }
.form-compartir h3 { margin: 0 0 var(--e1); }
.form-compartir > p { margin: 0 0 var(--e3); }
.fila-compartir { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 0 var(--e3); align-items: end; }
.fila-compartir .campo { min-width: 0; }
.nota-agentes { padding: 0 var(--e5) var(--e4); margin: 0; }
.salir-espacio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); border-top: 1px solid var(--linea); padding: var(--e3) var(--e5); }
#miembros .aviso-caja { margin: var(--e3) var(--e5); }
@media (max-width: 720px) {
  .listas-config .lista li, .lista-espacios > li, .lista-miembros > li { flex-wrap: wrap; }
  .listas-config .lista li .acciones-fila, .lista-espacios .acciones-fila, .lista-miembros .acciones-fila { width: 100%; justify-content: flex-end; }
  .lista-miembros .permiso-miembro { flex: 1; min-width: 0; }
  .fila-compartir { grid-template-columns: minmax(0, 1fr); }
  .boton-compartir .boton { width: 100%; }
  .form-compartir { padding: var(--e4); }
  .nota-agentes { padding: 0 var(--e4) var(--e4); }
  #miembros .aviso-caja { margin: var(--e3) var(--e4); }
}

/* ---------- Inicio (carta 038): saldos, a cobrar y a pagar, ingresos y salidas por mes, ranking ---------- */
/* Lo que entra y lo que sale: los colores de estado «entra» y «sale» del sistema. */
:root { --c-ingreso: var(--libre); --c-salida: var(--sale); }
.titulo-seccion { font-size: var(--t-m); color: var(--texto-2); font-weight: 700; margin: 0 0 var(--e3); }
#tablero > * + *, #estadisticas > * + *, #estadisticas-moneda > * + * { margin-top: var(--e5); }
#tablero .titulo-seccion + .rejilla { margin-top: 0; }
.rejilla.saldos { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.saldos .valor, .pendientes-tarjetas .valor { white-space: nowrap; }
.enlace-tarjeta { display: block; color: inherit; text-decoration: none; min-width: 0; }
.enlace-tarjeta:hover .rotulo, .enlace-tarjeta:focus-visible .rotulo { color: var(--acento); text-decoration: underline; }
.cifra .valores { min-width: 0; }
.tarjeta-pendiente { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); }
.tarjeta-pendiente .enlace-tarjeta { align-self: stretch; }
.tarjeta-pendiente:has(.enlace-tarjeta:hover) { box-shadow: var(--sombra), inset 0 0 0 1px var(--acento); }
.vencidos { font-weight: 700; }
a.vencidos:hover, a.vencidos:focus-visible { text-decoration: underline; }
.linea-moneda { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.linea-moneda .pestanas { border-bottom: 0; }
.tarjeta-cabecera.con-periodo, .cabecera-ranking { flex-wrap: wrap; }
.cabecera-ranking { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.cabecera-ranking .titulo-seccion { margin: 0; }
.periodo select { width: auto; }
.vacio-estadistica { color: var(--texto-2); padding: var(--e4) 0; margin: 0; text-align: center; }
.leyenda { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-s); color: var(--texto-2); margin-bottom: var(--e2); }
.leyenda .clave { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.leyenda .clave-salida { margin-left: var(--e3); }
.clave-ingreso, .relleno-ingreso { background: var(--c-ingreso); }
.clave-salida, .relleno-salida { background: var(--c-salida); }
.grafico { width: 100%; min-width: 0; }
.grafico svg { display: block; width: 100%; height: auto; }
.svg-meses .guia { stroke: var(--linea); stroke-width: 1; }
.svg-meses .eje { stroke: var(--linea-campo); stroke-width: 1; }
.svg-meses .rotulo-eje { fill: var(--texto-2); font: 500 11px var(--sans); }
.svg-meses .barra-ingreso { fill: var(--c-ingreso); }
.svg-meses .barra-salida { fill: var(--c-salida); }
.tabla-meses { margin-top: var(--e3); }
.tabla-meses td:last-child, .tabla-meses th:last-child { padding-right: 0; }
.tabla-meses .resultado { font-weight: 700; }
.tabla-meses td.mes { font-weight: 600; }
.meses-quietos { margin: var(--e3) 0 0; }
.ranking { margin-top: var(--e3); }
.ranking .pestanas { margin: 0; padding: 0 var(--e4); }
.cuerpo-ranking { padding: var(--e3) var(--e5) var(--e4); }
.lista-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.linea-ranking { display: flex; align-items: baseline; gap: var(--e2); min-width: 0; }
.linea-ranking .puesto { color: var(--texto-2); font-size: var(--t-s); width: 1.6em; flex: none; font-variant-numeric: tabular-nums; }
.linea-ranking .nombre-ranking { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.linea-ranking .importe-ranking { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sin-nombre .nombre-ranking { color: var(--texto-2); font-style: italic; }
.barra-ranking { height: 6px; border-radius: 3px; background: var(--sup-2); margin: 4px 0 0 calc(1.6em + var(--e2)); overflow: hidden; }
.barra-ranking span { display: block; height: 100%; border-radius: 3px; }
@media (max-width: 720px) {
  .rejilla.saldos { grid-template-columns: minmax(0, 1fr); }
  .cuerpo-ranking { padding: var(--e3) var(--e4); }
  .ranking .pestanas { padding: 0 var(--e2); }
  .periodo, .periodo select { width: 100%; }
  .tarjeta-cabecera.con-periodo .periodo { flex-basis: 100%; }
}

/* Transferencias (carta 039): el formulario se abre arriba del listado. */
#tarjeta-form + .filtros { margin-top: var(--e5); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .lateral, .barra, .acciones, .avisos, .menu-check { display: none !important; } .armazon { display: block; } }