/* Créditos Plus styles (idéntico look & feel) */
:root{ --cl-gray:#e5e7eb; --cl-dark:#111827; }
.creditos-badge{ position:fixed; top:12px; right:12px; background:#fff; border:1px solid #e5e7eb; box-shadow:0 10px 20px rgba(0,0,0,.06); border-radius:12px; width:200px; z-index:9999; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.creditos-badge .cb-top{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-bottom:1px solid #f1f5f9; }
.creditos-badge .cb-title{ font-weight:600; color:#111827; }
.creditos-badge .cb-logout{ background:#ef4444; color:#fff; border:0; border-radius:8px; padding:4px 8px; cursor:pointer; }
.creditos-badge .cb-body{ padding:10px; }
.creditos-badge .cb-amount{ font-size:26px; line-height:1; }
.creditos-badge .cb-email{ font-size:12px; color:#6b7280; margin-top:4px; }

.creditos-packs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.cp-card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px; text-align:center; box-shadow:0 6px 12px rgba(0,0,0,.05); }
.cp-title{ font-weight:700; margin-bottom:8px; }
.cp-credits{ font-size:18px; margin-bottom:4px; }
.cp-price{ color:#6b7280; margin-bottom:10px; }
.cp-buy{ background:#111827; color:#fff; border:0; padding:10px 14px; border-radius:10px; cursor:pointer; }

.creditos-modal{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:99999; }
.cm-content{ background:#fff; border-radius:14px; width:100%; max-width:420px; padding:20px; position:relative; }
.cm-close{ position:absolute; top:8px; right:10px; background:#e5e7eb; border:0; border-radius:50%; width:28px; height:28px; cursor:pointer; }
#cplus-form label{ display:block; margin-bottom:10px; }
#cplus-form input{ width:100%; padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; }
#cplus-form button{ background:#111827; color:#fff; border:0; padding:10px 14px; border-radius:10px; cursor:pointer; width:100%; margin-top:6px; }

.creditos-price .cp-pay{ margin-left:10px; background:#111827; color:#fff; border:0; padding:8px 12px; border-radius:10px; cursor:pointer; }
.creditos-price .cp-label{ margin-right:8px; }
.creditos-price .cp-balance{ margin-left:8px; color:#6b7280; }

.creditos-login-wrap form{ max-width:360px; background:#fff; padding:16px; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 6px 12px rgba(0,0,0,.05);}
.creditos-login-wrap label{ display:block; margin-bottom:10px; }
.creditos-login-wrap input{ width:100%; padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; }
.creditos-login-wrap button{ background:#111827; color:#fff; border:0; padding:10px 14px; border-radius:10px; cursor:pointer; width:100%; margin-top:6px; }

/* Banner / Panel */
.creditos-banner{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; border:1px solid var(--cl-gray); border-radius:14px; padding:16px; background:#fff; box-shadow:0 6px 12px rgba(0,0,0,.05); }
.creditos-banner .cbg-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.creditos-banner .cbg-title{ font-weight:700; font-size:18px; }
.creditos-banner .cb-logout{ background:#ef4444; color:#fff; border:0; border-radius:8px; padding:8px 10px; cursor:pointer; }
.creditos-banner .cbg-stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin:10px 0; }
.creditos-banner .cbg-stat{ background:#f9fafb; border:1px solid #f3f4f6; border-radius:12px; padding:10px; text-align:center; }
.creditos-banner .cbg-stat .label{ font-size:12px; color:#6b7280; }
.creditos-banner .cbg-stat .value{ font-size:20px; font-weight:700; }
.creditos-banner .cbg-bar{ position:relative; height:10px; background:#f3f4f6; border-radius:9999px; overflow:hidden; margin-bottom:14px; }
.creditos-banner .cbg-bar .used{ position:absolute; left:0; top:0; bottom:0; background:#ef4444; }
.creditos-banner .cbg-bar .left{ position:absolute; right:0; top:0; bottom:0; background:#10b981; }
.creditos-banner .cbg-history .cbg-h-title{ font-weight:600; margin-bottom:8px; }
.creditos-banner .cbg-table{ width:100%; border-collapse:collapse; }
.creditos-banner .cbg-table th, .creditos-banner .cbg-table td{ border-bottom:1px solid #f1f5f9; padding:8px; text-align:left; font-size:14px; }
.creditos-banner .cbg-table tr.neg td:last-child{ color:#ef4444; font-weight:700; }
.creditos-banner .cbg-table tr.pos td:last-child{ color:#10b981; font-weight:700; }
.creditos-banner .cbg-empty{ color:#6b7280; }