/* public/membresias.css -- las piezas del modulo Membresias (M4b, public/membresias.js; lienzo aprobado el 3 nov, taller/diseno-membresias/).
   Solo tokens de Cuarto Oscuro (public/cuarto-oscuro.css): ningun color, sombra ni tamano de letra a mano (paridad-cuarto-oscuro). */

/* La tarjeta «Su membresia», arriba del panel del cliente */
.mb-card{ background:var(--piedra); border-radius:var(--r-flota); padding:var(--e-4) var(--e-5); display:flex; flex-direction:column; gap:var(--e-4); margin-bottom:var(--e-4); }
.mb-card.mb-cargando{ min-height:120px; }
.mb-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); }
.mb-t{ font-size:var(--t-campo); font-weight:500; color:var(--tinta); }
.mb-chip{ display:inline-flex; align-items:center; min-height:24px; padding:0 var(--e-3); border-radius:var(--r-pildora); font-size:var(--t-meta); background:var(--piedra-on); color:var(--tinta); white-space:nowrap; }
.mb-chip.urge{ color:var(--urge); }
.mb-card .mb-plan{ display:flex; align-items:baseline; gap:var(--e-2); flex-wrap:wrap; }
.mb-card .mb-plan-n{ font-size:var(--t-sub); color:var(--tinta); }
.mb-card .mb-plan-m{ color:var(--medio); }
.mb-datos{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--e-4); }
.mb-dato{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mb-dato-v{ color:var(--tinta); }
.mb-dato-v.urge{ color:var(--urge); }
.mb-dato-e{ font-size:var(--t-meta); color:var(--medio); }
.mb-acc{ display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap; }
.mb-falta{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-4); padding:var(--e-3) var(--e-4); border-radius:var(--r-flota); background:var(--pag); box-shadow:inset 0 0 0 1px var(--linea); }
.mb-falta-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mb-falta-t{ color:var(--tinta); }
.mb-falta-d{ font-size:var(--t-meta); color:var(--medio); }
.mb-compacta{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); padding:var(--e-3) var(--e-5); border-radius:var(--r-flota); background:var(--piedra); margin-bottom:var(--e-4); }
.mb-compacta-d{ color:var(--medio); }
.mb-grupo{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-3); margin:var(--e-5) 0 var(--e-1); }
.mb-grupo-t{ font-size:var(--t-campo); font-weight:500; color:var(--tinta); }
.mb-grupo-n{ margin-left:6px; font-weight:400; color:var(--apagado); }
.mb-grupo-l{ font-size:var(--t-meta); color:var(--medio); }
.mb-nota{ margin:0; font-size:var(--t-meta); color:var(--medio); line-height:1.5; }

/* Las hojas: registrar pago, darla, prueba, plan */
.mb-hoja{ display:flex; flex-direction:column; gap:var(--e-4); }
.mb-campo{ display:flex; flex-direction:column; gap:6px; }
.mb-campo > span{ font-size:var(--t-meta); color:var(--medio); }
.mb-campo input{ width:100%; min-height:44px; border:0; border-radius:var(--r-pildora); background:var(--pag); padding:10px var(--e-4); box-shadow:inset 0 0 0 1px var(--linea); font:inherit; font-size:var(--t-campo); color:var(--tinta); }
.mb-dos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-3); }
.mb-pills{ display:flex; gap:var(--e-2); flex-wrap:wrap; }
.mb-pill{ display:inline-flex; align-items:center; min-height:36px; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--pag); color:var(--medio); font:inherit; box-shadow:inset 0 0 0 1px var(--linea); cursor:pointer; }
.mb-pill.on{ background:var(--tinta); color:var(--pag); box-shadow:none; }
.mb-cubre{ display:flex; flex-direction:column; gap:2px; padding:var(--e-3) var(--e-4); border-radius:var(--r-flota); background:var(--pag); color:var(--medio); }
.mb-cubre-v{ color:var(--tinta); }
.mb-cubre-e{ font-size:var(--t-meta); color:var(--medio); }
.mb-enlace{ align-self:flex-start; border:0; background:transparent; padding:0; font:inherit; font-size:var(--t-meta); color:var(--medio); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.mb-err{ margin:0; font-size:var(--t-meta); color:var(--urge); }
.mb-err:empty{ display:none; }
.mb-planes-op{ display:flex; flex-direction:column; gap:var(--e-2); }
.mb-plan-op{ display:flex; align-items:center; gap:var(--e-3); min-height:56px; padding:var(--e-2) var(--e-4); border:0; border-radius:var(--r-flota); background:var(--pag); color:var(--texto); font:inherit; text-align:left; box-shadow:inset 0 0 0 1px var(--linea); cursor:pointer; }
.mb-plan-op.on{ box-shadow:inset 0 0 0 2px var(--tinta); }
.mb-plan-marca{ width:18px; height:18px; flex:none; border-radius:var(--r-pildora); box-shadow:inset 0 0 0 1.5px var(--punto); }
.mb-plan-op.on .mb-plan-marca{ box-shadow:inset 0 0 0 5px var(--tinta); }
.mb-plan-op .mb-plan-txt{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.mb-plan-op .mb-plan-n{ color:var(--tinta); }
.mb-plan-op .mb-plan-m{ font-size:var(--t-meta); color:var(--medio); }
.mb-plan-op .mb-plan-p{ color:var(--tinta); font-variant-numeric:tabular-nums; }

/* Servicios › Planes de membresia */
.mb-planes{ margin-bottom:var(--e-5); }
.mb-planes .mb-apagado .pz-fila-t{ color:var(--medio); }

/* Clientes: «Vino» en cada fila (D8) */
.lbr-btn.mb-vino.hecho{ background:transparent; color:var(--medio); box-shadow:inset 0 0 0 1px var(--linea); }

@media (max-width:560px){
  .mb-datos{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-3); }
  .mb-acc .pz-b-p, .mb-acc .pz-b-s{ flex:1 1 auto; min-height:44px; }
  .mb-falta{ flex-direction:column; align-items:stretch; }
  .mb-card{ padding:var(--e-4); }
}