/* FORJA Admin · membresía, pagos e identidad (membresia.js). */
.block { display: block; }
.warn { color: var(--warning, #FFB547); }
.warn-pill { color: var(--danger); border-color: rgba(255, 92, 92, .25); background: var(--dangerSoft); }
.live-pill .ic { width: 13px; height: 13px; }
.mini-resumen { font-size: 11px; color: var(--textMuted); padding: 0 4px 12px; }
.mini-resumen b { color: var(--text); }

/* Franja de membresía en Inicio */
.franja-pro { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-bottom: 14px; padding: 6px; border-radius: 16px; }
.franja-pro a { display: grid; gap: 3px; padding: 12px 14px; border-radius: 11px; color: inherit; text-decoration: none; transition: background .2s; }
.franja-pro a:hover { background: var(--surfaceRaised); }
.franja-pro a + a { border-left: 1px solid var(--border); }
.franja-pro small { font-size: 10px; color: var(--textMuted); }
.franja-pro b { font-size: 20px; letter-spacing: -.03em; font-weight: 600; }
.franja-pro em { font-style: normal; font-size: 10px; color: var(--textSecondary); }
.franja-pro a.alerta b { color: var(--accent); }

/* Planes */
.plan-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 12px; }
.plan-card { display: grid; gap: 4px; justify-items: start; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: rgba(16, 18, 18, .6); }
.plan-card span { font-size: 11px; color: var(--textSecondary); }
.plan-card b { font-size: 24px; letter-spacing: -.04em; }
.plan-card small { font-size: 10px; color: var(--textMuted); }

/* Ajustes */
.ajuste-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.ajuste-row b { display: block; font-size: 12px; font-weight: 600; }
.ajuste-row small { display: block; font-size: 10px; color: var(--textMuted); margin-top: 3px; line-height: 1.5; }
.ajuste-row .switch[disabled] { opacity: .4; cursor: not-allowed; }
.ajuste-tasa { margin-top: 14px; grid-template-columns: 1fr auto; align-items: end; }

/* Identidad */
.id-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.id-foto { margin: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #0b0d0c; }
.id-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; background: linear-gradient(110deg, #141816 30%, #1c211e 50%, #141816 70%); background-size: 200% 100%; animation: brillo 1.4s linear infinite; }
.id-foto img[src] { animation: none; }
.id-foto img.zoom { position: fixed; inset: 4vh 4vw; width: 92vw; height: 92vh; object-fit: contain; z-index: 90; background: #000d; cursor: zoom-out; border-radius: 14px; aspect-ratio: auto; }
.id-foto figcaption { font-size: 10px; color: var(--textMuted); padding: 7px 10px; }
@keyframes brillo { to { background-position: -200% 0; } }
.compara { width: 100%; font-size: 11px; border-collapse: collapse; margin-bottom: 10px; }
.compara th, .compara td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; }
.compara th { font-size: 10px; color: var(--textMuted); font-weight: 500; }
.compara td:first-child { color: var(--textMuted); }

/* Tiempo real: punto verde junto a la marca cuando el WebSocket está abierto */
.brand { position: relative; }
body.en-vivo .brand::after { content: ''; position: absolute; left: 44px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 8px var(--accent); }

@media (max-width: 1100px) {
  .franja-pro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .franja-pro a:nth-child(4) { border-left: 0; }
}
@media (max-width: 560px) {
  .franja-pro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .franja-pro a { border-left: 0 !important; }
  .plan-preview { grid-template-columns: 1fr; }
  .compara, .compara thead, .compara tbody, .compara tr, .compara th, .compara td { display: table; }
  .compara { display: table; }
  .compara thead { display: table-header-group; }
  .compara tbody { display: table-row-group; padding: 0; }
  .compara tr { display: table-row; border: 0; padding: 0; background: none; }
  .compara th, .compara td { display: table-cell; text-align: left; }
  .compara td::before { display: none; }
  .ajuste-tasa { grid-template-columns: 1fr; }
}

/* Pagos por revisar */
.revision-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.revision-card { padding: 14px; border-radius: 14px; display: grid; gap: 10px; }
.revision-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.revision-monto b { font-size: 22px; letter-spacing: -.03em; display: block; }
.revision-monto small { font-size: 10px; color: var(--textMuted); }
.revision-datos { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; color: var(--textSecondary); }
.revision-acciones { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.pago-detalle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.comprobante { margin: 14px 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #0b0d0c; }
.comprobante img { display: block; width: 100%; max-height: 420px; object-fit: contain; cursor: zoom-in; }
.comprobante img.zoom { position: fixed; inset: 4vh 4vw; width: 92vw; height: 92vh; max-height: none; z-index: 90; background: #000d; cursor: zoom-out; border-radius: 14px; }
.comprobante figcaption { font-size: 10px; color: var(--textMuted); padding: 7px 10px; }
.motivos { margin-bottom: 12px; }
.motivos .tag { cursor: pointer; }
@media (max-width: 700px) { .pago-detalle { grid-template-columns: 1fr; } }

/* Opciones de cobro (pago móvil) */
.opcion-cobro { border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin: 0 0 12px; display: grid; gap: 10px; }
.opcion-cobro legend { padding: 0 6px; font-size: 12px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.opcion-cobro .btn-danger { justify-self: start; }
.check-inline { display: flex !important; align-items: center; gap: 8px; flex-direction: row; }
.check-inline input { width: auto !important; }

/* Aplicación: control remoto de la app */
.ajuste-ico { display: flex; align-items: center; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack > .panel { margin: 0; }