/* Módulo Miembros y Gestión de planes · v1.8.0. Solo clases con prefijo mx; usa los tokens del panel admin (--card, --bd, --ac…). */
.mxh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.mxtt{font:800 34px/1 "Barlow Condensed",Impact,sans-serif;margin:0 0 4px}
.mxh p{margin:0}
.btn.mxb,.mxdf .btn,.mxpf .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.mxk{margin-bottom:16px}
.mxk .kpi .v{overflow-wrap:anywhere}
.mxcard{padding:0;overflow:hidden}
.mxch{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;padding:18px 20px 0}
.mxch .mu{font-size:14px}

/* barra de búsqueda y filtros */
.mxtool{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 20px 16px;border-bottom:1px solid var(--bd)}
.mxsrch{position:relative;flex:1 1 260px;min-width:0;margin:0;color:var(--mu)}
.mxsrch svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none}
.mxsrch input{padding-left:38px}
.mxtg{display:flex;gap:8px;flex-wrap:wrap}
.mxtg select{width:auto;min-width:150px}
.mxtg .btn{padding:10px 14px;font-size:15px}
.spin svg{animation:mxspin .7s linear infinite}
@keyframes mxspin{to{transform:rotate(360deg)}}

/* tabla */
.mxtb{min-width:980px}
.mxtb th{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:12px 10px;background:var(--in)}
.mxtb td{padding:12px 10px;vertical-align:middle}
.mxtb th:first-child,.mxtb td:first-child{padding-left:18px}
.mxtb th:last-child,.mxtb td:last-child{padding-right:18px}
.mxtb tbody:not(.op) tr:first-child:hover{background:var(--in)}
.mxwho{display:flex;align-items:center;gap:12px}
.mxav{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;font:800 15px "Barlow Condensed",sans-serif;letter-spacing:.03em;color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent);border:1px solid color-mix(in srgb,var(--ac) 40%,transparent)}
.mxav.lg{width:58px;height:58px;font-size:22px}
.mxsm{font-size:13px}
.mxcode{display:inline-block;margin-top:3px;font:700 12px ui-monospace,Menlo,monospace;letter-spacing:.04em;color:var(--mu);border:1px solid var(--bd);border-radius:6px;padding:1px 6px}
.mxpln{font-weight:600}
.mxdue.warn{color:var(--am);font-weight:700}.mxdue.bad{color:var(--er);font-weight:700}
.mxp{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:13px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.mxp::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.mxp.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.mxp.bad{color:var(--er);background:color-mix(in srgb,var(--er) 12%,transparent);border-color:color-mix(in srgb,var(--er) 35%,transparent)}
.mxp.prog{color:#3b82f6;background:rgba(59,130,246,.13);border-color:rgba(59,130,246,.4)}
.mxp.ice{color:#0ea5e9;background:rgba(14,165,233,.13);border-color:rgba(14,165,233,.4)}
.mxp.none{color:var(--mu);background:var(--in);border-color:var(--bd)}
.mxact{display:flex;justify-content:flex-end;gap:4px}
.mxic{width:34px;height:34px;flex:none;display:inline-grid;place-items:center;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--mu);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.mxic:hover,.mxic.on{background:var(--in);color:var(--ac);border-color:var(--bd)}
.mxic.bd{border-color:var(--bd)}
.mxempty{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:40px 16px;white-space:normal}

/* paginación */
.mxpg{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--bd);font-size:14px}
.mxpn{display:flex;align-items:center;gap:4px}
.mxpb{min-width:36px;height:36px;border-radius:10px;border:1px solid var(--bd);background:transparent;color:var(--tx);font:700 14px Barlow,sans-serif;cursor:pointer}
.mxpb.w{padding:0 12px}
.mxpb:hover:not(:disabled){border-color:var(--ac);color:var(--ac)}
.mxpb.on{background:var(--ac);border-color:var(--ac);color:var(--acx)}
.mxpb:disabled{opacity:.4;cursor:not-allowed}

/* menú ⋮ flotante */
.mxmenu{position:fixed;z-index:130;min-width:220px;background:var(--card);border:1px solid var(--bd);border-radius:14px;box-shadow:0 18px 45px rgba(0,0,0,.4);padding:6px;animation:mxpop .12s ease-out}
.mxmenu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;color:var(--tx);font:600 15px Barlow,sans-serif;padding:9px 12px;border-radius:9px;cursor:pointer}
.mxmenu button svg{color:var(--mu)}
.mxmenu button:hover:not(:disabled),.mxmenu button:focus-visible{background:var(--in);outline:none}
.mxmenu button:disabled{opacity:.4;cursor:not-allowed}
.mxmenu .dng,.mxmenu .dng svg{color:var(--er)}
.mxmenu hr{border:0;border-top:1px solid var(--bd);margin:5px 4px}
@keyframes mxpop{from{opacity:0;transform:scale(.97)}}

/* modales */
body.mxlock{overflow:hidden}
.mxov{position:fixed;inset:0;z-index:110;background:rgba(2,6,23,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px;padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
.mxdlg{width:100%;max-width:520px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;background:var(--card);color:var(--tx);border:1px solid var(--bd);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:mxpop .15s ease-out}
.mxdlg.sm{max-width:440px}.mxdlg.lg{max-width:680px}
.mxdh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:22px 24px 0}
.mxdh h2{font-size:30px}
.mxdh p{margin:4px 0 0;font-size:14px}
.mxdb{padding:12px 24px 20px;overflow-y:auto}
.mxdb #mxerr{margin:12px 0 0;font-weight:600}
.mxdf{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:14px 24px 22px;border-top:1px solid var(--bd)}
.mxform{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.mxform>div{min-width:0}.mxform .full{grid-column:1/-1}
.mxdb label em{font-style:normal;opacity:.75}
.mxdb textarea{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--bd);background:var(--in);color:var(--tx);font:inherit;resize:vertical}
.mxhint{display:block;font-size:13px;color:var(--mu);margin:6px 0 0}
.mxseg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:var(--in);border:1px solid var(--bd)}
.mxseg button{border:0;background:transparent;color:var(--mu);font:700 14px Barlow,sans-serif;padding:7px 12px;border-radius:9px;cursor:pointer}
.mxseg button.on{background:var(--ac);color:var(--acx)}
.mxprev{margin-top:14px;padding:12px 14px;border:1px dashed var(--bd);border-radius:12px;min-height:48px;font-size:14px;line-height:1.55}
.mxprev b{color:var(--tx)}
.mxtot{margin-top:6px;font-size:16px;color:var(--tx)}.mxtot b{color:var(--ac);font-size:20px}
.mxok,.mxwarn{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;margin:12px 0 0;font-size:14px}
.mxok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--tx)}.mxok svg{color:var(--ok);flex:none;margin-top:2px}
.mxwarn{background:color-mix(in srgb,var(--am) 14%,transparent);color:var(--am);font-weight:600}
.mxph{display:flex;align-items:center;gap:14px;margin:6px 0 16px}
.mxph h3{font:800 28px/1 "Barlow Condensed",sans-serif;margin:0}
.mxkv{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:14px;overflow:hidden}
.mxkv>div{background:var(--card);padding:11px 14px;min-width:0}
.mxkv small{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.mxkv b{font-weight:600;overflow-wrap:anywhere}
.mxsl{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mu);margin:20px 0 8px}
.mxlist{display:flex;flex-direction:column;gap:6px}
.mxlr{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:9px 12px;border-radius:10px;background:var(--in);font-size:14px}
.mxlr>:first-child{flex:1 1 160px;min-width:0}
.mxmm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mxmm>div{background:var(--in);border:1px solid var(--bd);border-radius:14px;padding:12px 14px;min-width:0}
.mxmm small{display:block;font-size:12px;color:var(--mu)}
.mxmm b{font:800 26px/1.1 "Barlow Condensed",sans-serif;overflow-wrap:anywhere}
.mxfeat{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mxfeat div{display:flex;align-items:center;gap:8px;font-weight:600}
.mxfeat svg{color:var(--ok);flex:none}

/* tarjetas de planes */
.mxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.mxpc{display:flex;flex-direction:column;gap:16px;min-width:0;padding:20px;border-radius:16px;border:1px solid var(--bd);background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 45%),var(--card);box-shadow:0 18px 40px -24px rgba(0,0,0,.65);transition:border-color .2s,box-shadow .2s,transform .2s}
.mxpc:hover{border-color:rgba(245,158,11,.4);box-shadow:0 18px 40px -24px rgba(0,0,0,.65),0 0 30px -10px var(--glow,rgba(245,158,11,.28));transform:translateY(-2px)}
.mxpc.off{opacity:.7}
.mxpt{display:flex;align-items:flex-start;gap:12px}
.mxpbg{width:48px;height:48px;flex:none;border-radius:13px;display:grid;place-items:center;font:800 19px "Barlow Condensed",sans-serif;color:#1a1204;background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 0 22px -6px rgba(245,158,11,.7)}
.mxpbg.lg{width:58px;height:58px;font-size:22px}
.mxpc.off .mxpbg{background:var(--in);color:var(--mu);box-shadow:none;border:1px solid var(--bd)}
.mxpn2{flex:1;min-width:0}
.mxpn2 h3{font:800 24px/1.05 "Barlow Condensed",sans-serif;margin:0;overflow-wrap:break-word;text-wrap:balance}
.mxpst{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}.mxpst .mxcat{margin:0}
.mxcat{display:inline-block;margin-top:5px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mu)}
.mxprice{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.mxprice b{font:800 36px/1 "Barlow Condensed",sans-serif;color:var(--ac)}
.mxps{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 0;border-top:1px dashed var(--bd);border-bottom:1px dashed var(--bd)}
.mxps small{display:block;font-size:12px;color:var(--mu)}
.mxps b{font-size:17px}
.mxpf{display:flex;gap:8px;align-items:center;margin-top:auto}
.mxpf .btn{flex:1}
.mxadd{align-items:center;justify-content:center;text-align:center;border-style:dashed;background:transparent;box-shadow:none;color:var(--mu);cursor:pointer;min-height:260px;font:inherit;gap:6px}
.mxadd b{color:var(--tx);font-size:17px}
.mxadd:hover{color:var(--ac)}

@media(max-width:640px){
 .mxtt{font-size:30px}.mxh .btn{width:100%}
 .mxk{grid-template-columns:1fr 1fr;gap:10px}.mxk .kpi{padding:12px}.mxk .kpi .v{font-size:30px}.mxk .kpi small{font-size:11px}
 .mxtg,.mxtg select{width:100%}.mxtg select{flex:1;min-width:0}.mxtg .btn{flex:1}
 .mxform,.mxkv,.mxfeat{grid-template-columns:1fr}.mxmm{grid-template-columns:1fr}
 .mxch,.mxtool,.mxpg{padding-left:14px;padding-right:14px}
 .mxdh{padding:18px 18px 0}.mxdb{padding:10px 18px 18px}.mxdf{padding:12px 18px 18px}
}
@media(prefers-reduced-motion:reduce){.mxmenu,.mxdlg,.mxpc,.spin svg{animation:none;transition:none}}

/* v1.8.1: el ícono del calendario y el selector nativo siguen el tema del panel */
html[data-theme="dark"] body input[type="date"]{color-scheme:dark}
html[data-theme="light"] body input[type="date"]{color-scheme:light}
input[type="date"]{cursor:pointer}

/* v1.8.2: Renovaciones y detalle de plan */
.mxrg{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.mxrb{padding:14px 20px 20px}
.mxrf .mxprev:empty{display:none}
.mxav.sm{width:30px;height:30px;font-size:12px}
.mxscroll{max-height:260px;overflow-y:auto;padding-right:2px}
@media(max-width:900px){.mxrg{grid-template-columns:1fr}}
@media(max-width:640px){.mxrb{padding:12px 14px 16px}}

/* v1.9.0: avatares siempre circulares dentro de las listas (Detalle del plan) */
.mxlr>.mxav,.mxlr .mxav{flex:0 0 auto;aspect-ratio:1}
.mxlr>.mxav.sm{width:32px;height:32px;min-width:32px}