/* Javi 1.2 — "Mi plan" (02/10/2026): plan actual, precios, cómo pagar, reportar la referencia y canjear un código.
   Capa a pantalla completa, igual que la del panel Administrador. */

#planes-capa {
  position: fixed; inset: 0; z-index: 71; display: none; flex-direction: column;
  background: var(--carbon); height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: contain;
}
#planes-capa.on { display: flex; }
#planes-capa .barra {
  flex: none; display: flex; align-items: center; gap: 8px; position: relative;
  height: calc(46px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0;
  background: linear-gradient(180deg, rgba(40, 8, 12, .92), rgba(15, 12, 14, .92)); border-bottom: 1px solid var(--borde);
}
#planes-capa .barra button {
  padding: 6px 12px; border-radius: 10px; border: 1px solid var(--borde); background: rgba(0,0,0,.4);
  font: 600 12.5px var(--f-texto); color: var(--oro2); white-space: nowrap;
}
#planes-capa .barra .titulo {
  flex: 1; min-width: 0; text-align: right; font: 700 12px var(--f-titulo); letter-spacing: 2px; color: var(--oro2); text-transform: uppercase;
}
#planes-capa .cuerpo {
  flex: 1; min-height: 0; overflow-y: auto; padding: 10px; padding-bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 640px; margin: 0 auto; font-size: 13.5px;
}
#planes-capa .tarjeta-p { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; }
#planes-capa h4 { margin: 0 0 8px; font: 700 10.5px var(--f-titulo); letter-spacing: 2px; color: var(--oro); text-transform: uppercase; }
#planes-capa .nota { color: var(--mut); font-size: 12.5px; padding: 4px 0; }
#planes-capa .err { color: var(--rojo2); font-size: 12.5px; padding: 4px 0; }
#planes-capa .ok { color: var(--ok); font-size: 12.5px; padding: 4px 0; }
#planes-capa .insignia-plan { display: inline-block; padding: 4px 12px; border-radius: 14px; border: 1px solid var(--oro); color: var(--oro3); font: 700 13px var(--f-titulo); letter-spacing: 1px; }
#planes-capa .insignia-plan.gratis { border-color: var(--borde); color: var(--mut); }
#planes-capa .grande { font: 700 22px var(--f-titulo); color: var(--oro3); margin: 6px 0; }
#planes-capa .precios { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
#planes-capa .precio { flex: 1; min-width: 120px; background: rgba(0,0,0,.3); border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; text-align: center; }
#planes-capa .precio b { display: block; font: 700 18px var(--f-titulo); color: var(--oro3); }
#planes-capa .precio span { color: var(--mut); font-size: 11.5px; }
#planes-capa .datos-pago { background: rgba(0,0,0,.3); border: 1px dashed var(--borde); border-radius: 10px; padding: 8px 10px; margin: 6px 0; user-select: all; }
#planes-capa label { display: block; margin: 8px 0 2px; color: var(--mut); font-size: 12px; }
#planes-capa input, #planes-capa select {
  width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--borde); background: rgba(0,0,0,.4); color: var(--fg); font: inherit;
}
#planes-capa button.enviar {
  margin-top: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--oro); background: rgba(220,171,36,.14);
  color: var(--oro3); font: 700 12px var(--f-titulo); letter-spacing: 1.5px; text-transform: uppercase;
}
#planes-capa button.enviar:disabled { opacity: .5; }
#planes-capa .pago { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 12.5px; }
#planes-capa .pago small { color: var(--mut); }
#planes-capa .estado-pendiente { color: var(--oro2); }
#planes-capa .estado-aprobado { color: var(--ok); }
#planes-capa .estado-rechazado { color: var(--rojo2); }