/* Componentes y pantallas (Cargar, Gastos del mes, Resumen). Solo variables de tema: sirve para los 3 temas. */
.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.encabezado .sub { margin: 4px 0 0; }
.selectores { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 100%; }
.fuerte { font-weight: 600; }
.chico { font-size: 13px; color: var(--muted); }
.grande { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.pos { color: var(--blue); }
.ok { color: var(--ok); }
.col { display: flex; flex-direction: column; min-width: 0; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dos-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.dos-col-iguales { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.lateral-der { display: flex; flex-direction: column; gap: 16px; }
.solo-compu { display: none; }
.tarjeta + .tarjeta, .kpis + .tarjeta, .tarjeta + .kpis, .kpis + .kpis { margin-top: 16px; }
.dos-col > .tarjeta + .tarjeta, .lateral-der > .tarjeta + .tarjeta, .dos-col-iguales > .tarjeta + .tarjeta { margin-top: 0; }
.tarjeta h2 { font-size: 17px; font-weight: 600; }
.tarjeta-t { font-weight: 600; margin-bottom: 8px; }
.tarjeta a { font-size: 14px; }
.tarjeta a.boton-chico-link { color: var(--onprimary); }
.nota-chica { display: block; color: var(--muted); font-size: 12px; margin-top: 8px; line-height: 1.4; }

/* Pastillas */
.segmentos { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--seg); max-width: 100%; }
.seg { min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 500; cursor: pointer; }
.seg[aria-pressed="true"] { background: var(--pillon); color: var(--ink); font-weight: 600; }
.seg-grande { display: flex; width: 100%; }
.seg-grande .seg { flex: 1; }
.seg-meses { overflow-x: auto; flex-wrap: nowrap; }
.seg-meses .seg { padding: 0 10px; text-transform: capitalize; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.chips-t { color: var(--muted); font-size: 13px; }
.chip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--soft); color: var(--ink); cursor: pointer; font-size: 14px; }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--onprimary); border-color: var(--primary); font-weight: 600; }

/* Formularios */
.form-carga { display: flex; flex-direction: column; gap: 4px; }
.campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; border: 0; padding: 0; min-width: 0; }
.campo legend, .campo label, label.campo { font-size: 13px; font-weight: 600; color: var(--ink); }
.campo input, .campo select, .campo textarea, label.campo input, label.campo select, .buscador input {
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--line2); border-radius: 10px; width: 100%; color: var(--ink); background: var(--surface);
}
.campo textarea { resize: vertical; }
.fila-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.monto-caja { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line2); border-radius: 12px; padding: 0 14px; background: var(--surface); }
.monto-caja .simbolo { color: var(--muted); font-size: 22px; }
.monto-caja input { border: 0; outline: 0; background: transparent; font-size: 32px; font-weight: 700; min-height: 64px; padding: 0; width: 100%; }
.monto-caja:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.equiv { color: var(--muted); font-size: 13px; min-height: 18px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 8px; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; cursor: pointer; }
.check input { width: 22px; height: 22px; }
.sub-caja { border: 1px solid var(--line2); background: var(--soft); border-radius: 12px; padding: 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.sub-t { font-weight: 600; }
.resumen-linea { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.acciones .boton { flex: 1 1 160px; width: auto; }
.boton-peligro { background: #C2410C; color: #FFFFFF; }
.boton-chico { min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; }
.boton-chico[disabled] { opacity: 0.5; }
a.boton-chico-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 10px; background: var(--primary); text-decoration: none; font-weight: 600; width: auto; }
.boton-icono.chico { width: 44px; height: 44px; border-radius: 10px; }
.mensaje { margin-top: 8px; }
.aviso-dolar { margin-bottom: 16px; border-color: var(--infobd); background: var(--infobg); }
.chip-dolar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; padding: 4px 4px 4px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }

/* Filas */
.fila-dato { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 6px 0; }
.fila-mov, .fila-pend, .fila-venc { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line3); }
.fila-mov .col, .fila-pend .col, .fila-venc .col { flex: 1; }
.f-fecha { color: var(--muted); font-size: 13px; width: 78px; flex: none; }
.f-desc { font-weight: 500; overflow-wrap: anywhere; }
.f-acc { display: flex; gap: 4px; flex: none; }
.etiqueta { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--warnbg); color: var(--warnfg); font-size: 11px; border: 1px solid var(--warnbd); }
.sub { color: var(--muted); font-size: 13px; }
.fila-venc.hecho { }
.fila-venc.hecho .fuerte { text-decoration: line-through; }
.dia-caja { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: 10px; background: var(--soft2); line-height: 1.1; }
.dia-caja span { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.desglose { margin-top: 12px; border-top: 1px solid var(--line3); padding-top: 6px; }
.cat-fila { margin: 10px 0; }
.vacio { text-align: center; color: var(--muted); padding: 16px; margin: 0; }
.cab-mov { align-items: flex-end; margin-bottom: 8px; }
.acciones-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.buscador { display: block; }

/* Indicadores */
.kpis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi-t { color: var(--muted); font-size: 13px; font-weight: 500; }
.kpi-v { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.kpi-s { color: var(--muted); font-size: 13px; }
.vs { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; }

/* Barras y graficos en SVG */
.progreso { display: block; width: 100%; height: 8px; margin: 8px 0; }
.barra-fondo { fill: var(--soft3); }
.barra-valor { fill: var(--bluebg); }
.mini { width: 100%; height: 40px; }
.barra-act { fill: var(--bluebg); }
.barra-ant { fill: var(--infobd); }
.grafico { width: 100%; height: auto; display: block; margin: 8px 0; }
.grafico .eje { stroke: var(--line2); stroke-width: 1; }
.grafico .eje-t { fill: var(--muted); font-size: 11px; }
.grafico .eje-t.activo { fill: var(--ink); font-weight: 700; }
.barra-ing { fill: var(--chart2); }
.barra-gas { fill: var(--orange); }
.leyenda { display: flex; gap: 12px; font-size: 12px; color: var(--muted); }
.ley::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.ley-ing::before { background: var(--chart2); }
.ley-gas::before { background: var(--orange); }
figure.tarjeta { margin: 0; }
figcaption { color: var(--muted); font-size: 13px; }

/* Tablas */
.tabla-caja { overflow-x: auto; position: relative; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); }
.tabla td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line3); }
.nav-mes { display: inline-flex; align-items: center; gap: 4px; }
.nav-mes-t { min-width: 120px; text-align: center; font-weight: 600; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.55); overflow-y: auto; }
.modal-caja { width: 100%; max-width: 480px; max-height: 100%; overflow-y: auto; padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line2); color: var(--ink); margin: auto; }
html[data-tema="glass"] .modal-caja { background: #1E2140; }
.modal-caja h2 { margin-bottom: 12px; font-size: 20px; }

@media (min-width: 900px) {
  .solo-compu { display: table-cell; }
  .dos-col { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; }
  .dos-col-iguales { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acciones .boton { flex: 0 1 auto; min-width: 180px; }
}
.kpis > .tarjeta { margin-top: 0; }
.tarjeta a:not(.boton-chico-link) { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }

/* Contraste AA: textos chicos con color pleno del tema */
.nota-chica, .tabla th, .kpi-t, .kpi-s, .sub, .chico { color: var(--muted); }
html[data-tema="glass"] .tarjeta, html[data-tema="glass"] .modal-caja { background: rgba(14, 16, 32, 0.66); }
html[data-tema="claro"] .sub.ok, html[data-tema="claro"] .ok { color: #166534; }
.seg-meses { max-width: 100%; }

/* ---------- Etapa 3: fijos, anual, trabajo, patrimonio ---------- */
.naranja { color: var(--orange); }
.tarjeta + .dos-col, .kpis + .dos-col, .mensaje + .dos-col, .dos-col + .tarjeta, .dos-col-iguales + .tarjeta, .dos-col + .dos-col, .kpis + figure.tarjeta { margin-top: 16px; }
.dos-col > .tarjeta, .dos-col-iguales > .tarjeta { min-width: 0; }
.sel-anio { margin-bottom: 16px; overflow-x: auto; }
.datos-der { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Formularios en linea */
.form-inline { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; padding: 16px; border: 1px solid var(--ink); border-radius: 12px; }
.form-inline .campo { margin: 0; }
.form-inline .acciones { margin-top: 0; }
.grilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; align-items: end; }
.etiq { font-size: 13px; font-weight: 600; color: var(--ink); }
td.acc-fila { white-space: nowrap; text-align: right; }
td.acc-fila .boton-chico + .boton-chico { margin-left: 6px; }
.bajas { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line3); }
.tabla th[scope="row"] { color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; }

/* Alquiler y habitos */
.grafico-alq { width: 100%; height: 180px; display: block; margin: 12px 0 4px; }
.grafico-alq .eje { stroke: var(--line2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.barra-alq-viejo { fill: var(--idle); }
.barra-alq { fill: var(--orange); }
.barra-alq-hoy { fill: var(--orange2); }
.ley-alq-viejo::before { background: var(--idle); }
.ley-alq::before { background: var(--orange); }
.ley-alq-hoy::before { background: var(--orange2); }
.habitos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 24px; margin-top: 8px; }
.hab-barras { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; min-height: 120px; }
.hab-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.hab-v, .hab-a { font-size: 11px; color: var(--muted); }
.hab-barra { width: 100%; height: 90px; display: block; }
.barra-hab { fill: var(--soft3); }
.hab-barra .barra-act { fill: var(--orangebg); }

/* Anual y fuentes de ingreso */
.anios { display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.anio-col { flex: 1 0 48px; min-width: 48px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; border-radius: 10px; }
.anio-col.sel { background: var(--soft2); }
.anio-tasa { font-weight: 600; font-size: 13px; }
.anio-barras { width: 100%; max-width: 56px; height: 200px; display: block; }
.anio-et { font-size: 13px; color: var(--muted); }
.anio-neto { font-size: 11px; white-space: nowrap; }
.seg-sueldo { fill: var(--chart1); }
.seg-hazak { fill: var(--chart2); }
.seg-rend { fill: var(--chart3); }
.seg-extras { fill: var(--chart4); }
.ley-sueldo::before { background: var(--chart1); }
.ley-hazak::before { background: var(--chart2); }
.ley-rend::before { background: var(--chart3); }
.ley-extras::before { background: var(--chart4); border: 1px solid var(--line2); }
.leyenda { flex-wrap: wrap; }
.tabla-calor td { text-align: right; font-size: 12px; padding: 6px 6px; border-bottom: 0; min-width: 44px; }
.tabla-calor tfoot td { font-weight: 600; border-top: 1px solid var(--line); }
.tabla-calor tfoot th { border-top: 1px solid var(--line); }
.calor.c0 { background: var(--soft); color: var(--muted); }
.calor.c1 { background: var(--h1b); color: var(--h1f); }
.calor.c2 { background: var(--h2b); color: var(--h2f); }
.calor.c3 { background: var(--h3b); color: var(--h3f); }
.calor.c4 { background: var(--h4b); color: var(--h4f); }
.calor.c5 { background: var(--h5b); color: var(--h5f); }
.oculto td.m::after { left: auto; right: 6px; }
.tops { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 24px; }
.top h3 { font-size: 15px; margin-bottom: 6px; }

/* Trabajo */
.fila-hora { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.fila-hora .col { flex: 1; }
.fila-hora .progreso { height: 6px; margin: 2px 0; }
.barra-sueldo .barra-valor { fill: var(--chart1); }
.barra-hora .barra-valor { fill: var(--chart2); }
.hora-txt { width: 120px; flex: none; text-align: right; font-size: 13px; }
.dato-caja { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; background: var(--soft); margin-bottom: 12px; }
.grafico-hz { width: 100%; height: 90px; display: block; margin-top: 8px; }
.meses-letras { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); text-align: center; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.trabajos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 12px; }
.trabajo { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.trabajo.de-baja { background: var(--soft); }
.trabajo h3 { font-size: 17px; }
.valor-t { font-size: 22px; }
.estado-t { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--okbd); background: var(--okbg); color: var(--ok2); font-size: 12px; white-space: nowrap; }
.estado-t.baja { border-color: var(--line2); background: var(--soft2); color: var(--muted); }
.historial { border-top: 1px solid var(--line3); padding-top: 6px; }

/* Patrimonio */
.grafico-patri { width: 100%; height: 240px; display: block; margin: 8px 0; }
.patri-area { fill: var(--chart4); }
.patri-linea { fill: none; stroke: var(--bluebg); stroke-width: 3; stroke-linejoin: round; }
.patri-punto { stroke: var(--bluebg); stroke-width: 8; stroke-linecap: round; }
.peso-caja { display: flex; align-items: center; gap: 8px; }
.peso-caja .progreso { width: 90px; margin: 0; }
.fila-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font-weight: 600; }
.fila-toggle svg { transition: transform 0.2s ease; }
.fila-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
tr.abierta td { background: var(--soft); }
.detalle-cierre td { background: var(--soft); padding: 12px; }
.det-lista { max-width: 480px; }
.cuentas-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 12px; }
.cuenta-campo .fila-dato { margin: 0; }
.monto-linea { display: flex; align-items: center; gap: 6px; }
.resumen-cierre { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 14px; }
.barra-plata { width: 100%; height: 14px; display: block; margin: 8px 0 12px; border-radius: 999px; overflow: hidden; }
.barra-plata-usd { fill: var(--chart1); }
.barra-plata-ars { fill: var(--chart2); }
.barra-plata-brl { fill: var(--chart3); }
.lista-plata { gap: 14px; margin-bottom: 12px; }
.fila-plata { display: flex; gap: 10px; align-items: flex-start; }
.fila-plata .col { flex: 1; }
.punto { margin-top: 5px; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.plata-usd { background: var(--chart1); }
.plata-ars { background: var(--chart2); }
.plata-brl { background: var(--chart3); }

@media (min-width: 900px) {
  .tops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trabajos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anio-col { flex: 1 1 0; }
}
.boton.boton-chico-link { width: auto; padding: 0 16px; }
.tabla td > .m { white-space: nowrap; }
.tabla-calor thead th:not(:first-child) { text-align: right; }
.anio-col { flex: 1 0 64px; min-width: 64px; }
.anio-neto { font-size: 11px; }
.hab-v, .hab-a { color: var(--ink); }

/* ---------- Etapa 4: plata prestada, metas, reventa, revisar, ajustes, invitado ---------- */
.boton-auto { width: auto; padding: 0 18px; }
.encabezado .boton, .encabezado .campo { margin-bottom: 0; }
.kpi-aviso { border-color: var(--warnbd); background: var(--warnbg); }
.kpi-aviso .kpi-v, .kpi-aviso .kpi-s { color: var(--warnfg); }
.prestamo + .prestamo { margin-top: 16px; }
.prestamo-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.prestamo-quien { flex: 1 1 160px; }
.prestamo-falta { text-align: right; }
.inicial { width: 40px; height: 40px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--soft3); font-weight: 700; }
.estado-pill { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line2); }
.estado-listo { background: var(--soft2); color: var(--muted); }
.estado-atraso { background: var(--warnbg); color: var(--warnfg); border-color: var(--warnbd); }
.estado-dia { background: var(--okbg); color: var(--ok2); border-color: var(--okbd); }
.tabla-cuotas { min-width: 560px; }
.btn-cobrar.cobrada { background: var(--okbg); color: var(--ok2); border-color: var(--okbd); }
.aviso-atraso { color: var(--warnfg); }
.aviso-mes { color: var(--blue); }
.cuota-nueva { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-top: 8px; }
.cuotas-nuevas { display: flex; flex-direction: column; }
.acciones-cab { margin-top: 12px; }
.chip-tipo { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--infobg); border: 1px solid var(--infobd); }
.meta + .meta { margin-top: 16px; }
.meta .grande { margin: 6px 0; }
.fila-item { display: grid; grid-template-columns: minmax(90px, 1.2fr) minmax(50px, 2fr) auto auto; align-items: center; gap: 4px 10px; padding: 4px 0; }
.fila-venta { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.fila-item .progreso { margin: 0; }
.fila-item-n { min-width: 0; overflow-wrap: anywhere; }
.cuando { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line3); display: flex; flex-direction: column; gap: 8px; }
.cuando input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--bluebg); background: transparent; }
.revisar-item { margin-top: 12px; }
.revisar-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.revisar-desc { flex: 1 1 220px; }
.revisar-item .form-inline { margin-bottom: 0; }
.fila-ajuste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--line3); }
.fila-ajuste:first-of-type { border-top: 0; }
.interruptor { position: relative; flex: none; width: 56px; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.interruptor::before { content: ''; position: absolute; left: 0; top: 10px; width: 52px; height: 24px; border-radius: 999px; background: var(--idle); transition: background 0.2s; }
.interruptor[aria-checked="true"]::before { background: var(--bluebg); }
.interruptor[aria-disabled="true"] { cursor: not-allowed; opacity: 0.7; }
.interruptor-bola { position: absolute; left: 3px; top: 13px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; transition: transform 0.2s; }
.interruptor[aria-checked="true"] .interruptor-bola { transform: translateX(28px); }
.tabla-dolar input { width: 100%; min-width: 96px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 10px; background: var(--surface); }
.tabla-dolar { min-width: 560px; }
.seg-uso { flex: none; }
.banner-invitado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 16px 0; padding: 6px 6px 6px 14px; border: 1px solid var(--infobd); background: var(--infobg); border-radius: 12px; }
.banner-invitado[hidden] { display: none; }
.nav-link.bloqueado, .nav-m.bloqueado { opacity: 0.5; cursor: not-allowed; }
@media (min-width: 900px) { .banner-invitado { margin: 20px 32px 0; } }

/* Glass liviano (celular): tarjetas y modales mas opacos al no haber desenfoque */
@media (max-width: 760px), (pointer: coarse) {
  html[data-tema="glass"] .tarjeta, html[data-tema="glass"] .modal-caja { background: rgba(14, 16, 32, 0.8); }
}