:root{
  --bg-void:#0a1a13;
  --bg-void-deep:#05100b;
  --accent:#18a458;
  --accent-soft:#3ddc84;
  --accent-deep:#0b4a2e;
  --nebula-a:#0f5132;
  --nebula-b:#0c7a4a;
  --surface:rgba(255,255,255,0.055);
  --surface-strong:rgba(255,255,255,0.09);
  --border:rgba(255,255,255,0.11);
  --border-soft:rgba(255,255,255,0.07);
  --text:#eefcf4;
  --text-muted:#9fc4ac;
  --text-faint:#6a8a76;
  --success:#34d399;
  --success-bg:rgba(52,211,153,0.12);
  --danger:#fb7185;
  --danger-bg:rgba(251,113,133,0.12);
  --warning:#fbbf24;
  --warning-bg:rgba(251,191,36,0.12);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
  --card-shadow:0 16px 50px rgba(0,0,0,.4);
  --card-backdrop:none;
  color-scheme:dark;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg-void);
  color:var(--text);
  font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  padding:0 20px;
}
h1,h2,h3,.brand-name{ font-family:'Unbounded',ui-sans-serif,system-ui,sans-serif; letter-spacing:-0.01em; }
code,.mono{ font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }

.cosmos{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 75% 15%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 65%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 55%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,.45) 50%, transparent 51%),
    linear-gradient(180deg, var(--bg-void-deep) 0%, var(--bg-void) 45%, #0d1c14 100%);
  background-repeat:repeat;
  background-size:220px 220px,260px 260px,180px 180px,300px 300px,200px 200px,100% 100%;
}
.nebula{ position:fixed; border-radius:50%; filter:blur(70px); z-index:-1; opacity:.32; mix-blend-mode:screen; }
.nebula-1{ width:520px; height:520px; background:var(--nebula-a); top:-160px; left:-120px; }
.nebula-2{ width:460px; height:460px; background:var(--nebula-b); bottom:-140px; right:-100px; }

.shell{ max-width:1040px; margin:0 auto; padding-block:28px 64px; min-height:100vh; }
.shell.wide{ max-width:1180px; }

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 18px; border-radius:var(--radius-md); background:var(--surface);
  border:1px solid var(--border-soft); margin-bottom:36px;
  backdrop-filter:var(--card-backdrop); -webkit-backdrop-filter:var(--card-backdrop);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:34px; height:34px; border-radius:10px;
  background:conic-gradient(from 210deg, var(--accent), var(--nebula-b), var(--accent-deep), var(--accent));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 4px 14px rgba(24,164,88,.35);
}
.brand-mark svg,.brand-mark img.brand-mark-img{ width:19px; height:19px; object-fit:contain; }
.brand-name{ font-size:1rem; font-weight:600; }
.user-cluster{ display:flex; align-items:center; gap:10px; }
.user-pill{
  display:flex; align-items:center; gap:7px; padding:7px 12px 7px 8px; border-radius:999px;
  background:var(--surface-strong); border:1px solid var(--border); font-size:.82rem; color:var(--text-muted);
}
.user-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 6px var(--success); }
.user-pill.admin{ color:var(--accent-soft); }
.user-pill.admin .dot{ background:var(--accent-soft); box-shadow:0 0 6px var(--accent-soft); }
.btn-ghost-sm{
  font-family:inherit; font-size:.8rem; font-weight:600; color:var(--text-muted); background:transparent;
  border:1px solid var(--border); padding:7px 13px; border-radius:999px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}
.btn-ghost-sm:hover{ color:var(--text); border-color:rgba(251,113,133,.5); background:rgba(251,113,133,.08); }
.btn-ghost-sm.accent:hover{ color:var(--text); border-color:rgba(24,164,88,.6); background:rgba(24,164,88,.1); }

.login-wrap{ display:flex; align-items:center; justify-content:center; min-height:80vh; }
.login-card{
  width:100%; max-width:380px; padding:36px 32px 30px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border); box-shadow:0 20px 60px rgba(0,0,0,.45); text-align:center;
}
.login-mark{
  width:64px; height:64px; margin:0 auto 18px; border-radius:18px;
  background:conic-gradient(from 210deg, var(--accent), var(--nebula-b), var(--accent-deep), var(--accent));
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 8px 24px rgba(24,164,88,.4);
}
.login-mark svg,.login-mark img.brand-mark-img{ width:34px; height:34px; object-fit:contain; }
.login-card h1{ font-size:1.3rem; margin:0 0 4px; }
.login-sub{ font-size:.85rem; color:var(--text-muted); margin:0 0 26px; }
.field{ text-align:left; margin-bottom:16px; }
.field label{ display:block; font-size:.76rem; font-weight:600; color:var(--text-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em; }
.field input,.field select{
  width:100%; font-family:inherit; font-size:.92rem; color:var(--text); background:rgba(255,255,255,.04);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 13px;
}
.field input:focus,.field select:focus{ border-color:var(--accent-soft); background:rgba(24,164,88,.06); outline:none; }
.btn-primary{
  width:100%; font-family:inherit; font-size:.94rem; font-weight:700; color:#0b0a16;
  background:linear-gradient(135deg, var(--accent-soft), var(--accent)); border:none; border-radius:var(--radius-sm);
  padding:12px 16px; cursor:pointer; box-shadow:0 8px 22px rgba(24,164,88,.35); text-decoration:none; display:inline-block; text-align:center;
}
.btn-primary.auto{ width:auto; }
.btn-secondary{
  font-family:inherit; font-size:.85rem; font-weight:600; color:var(--text-muted); background:transparent;
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 16px; cursor:pointer; text-decoration:none; display:inline-block;
}
.secure-note{ margin-top:18px; font-size:.74rem; color:var(--text-faint); }

.page-head{ text-align:center; margin-bottom:34px; }
.page-head.left{ text-align:left; }
.page-head h1{ font-size:1.6rem; margin:0 0 8px; }
.page-head p{ color:var(--text-muted); margin:0; font-size:.95rem; }

.platform-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:14px; }
.platform-card{
  border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border-soft); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--card-shadow);
  backdrop-filter:var(--card-backdrop); -webkit-backdrop-filter:var(--card-backdrop);
}
.platform-hero{ height:108px; overflow:hidden; }
.platform-hero-img{ width:100%; height:100%; object-fit:cover; display:block; }
.platform-name{ margin:0; font-family:'Unbounded',sans-serif; font-weight:700; font-size:1rem; }
.platform-body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.platform-body p{ margin:0; font-size:.76rem; color:var(--text-muted); line-height:1.4; flex:1; }
.platform-btn{
  font-family:inherit; font-size:.8rem; font-weight:700; color:#fff; border:none; border-radius:999px; padding:8px 12px;
  cursor:pointer; text-decoration:none; text-align:center; display:flex; align-items:center; justify-content:center; gap:6px;
}

.back-row{ display:flex; align-items:center; gap:12px; margin-bottom:26px; flex-wrap:wrap; }
.btn-back{
  font-family:inherit; font-size:.82rem; font-weight:600; color:var(--text-muted); background:var(--surface);
  border:1px solid var(--border-soft); border-radius:999px; padding:8px 14px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.platform-tag{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:.85rem; padding:6px 14px 6px 6px; border-radius:999px; color:#fff; display:inline-flex; align-items:center; gap:8px; }
.platform-tag-icon{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none; }

.panel-narrow{ max-width:480px; width:100%; margin:0 auto; }
.panel-narrow.wide{ max-width:640px; }

.mail-list-head{
  display:flex; align-items:center; gap:8px; padding:11px 14px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--border-soft); font-size:.82rem; color:var(--text-muted); margin-bottom:14px;
}
.mail-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.mail-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 14px;
  border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border-soft);
}
.mail-row-main{ min-width:0; }
.mail-row-subject{ font-weight:700; font-size:.88rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-row-meta{ font-size:.76rem; color:var(--text-faint); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-row-btn{
  flex:none; font-family:inherit; font-size:.8rem; font-weight:700; color:#fff; border:none; border-radius:999px;
  padding:8px 14px; cursor:pointer; text-decoration:none; display:flex; align-items:center; gap:6px;
}
.glass-panel{
  border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); padding:26px 26px 24px; box-shadow:var(--card-shadow);
  backdrop-filter:var(--card-backdrop); -webkit-backdrop-filter:var(--card-backdrop);
}
.glass-panel h2{ font-size:1.05rem; margin:0 0 4px; }
.panel-sub{ font-size:.82rem; color:var(--text-muted); margin:0 0 20px; }
.hint-box{ margin-top:14px; padding:11px 13px; border-radius:var(--radius-sm); background:rgba(24,164,88,.08); border:1px solid rgba(24,164,88,.22); font-size:.78rem; color:var(--accent-soft); line-height:1.5; }
.hint-box b{ color:var(--text); }
.msg{ margin-top:14px; padding:11px 13px; border-radius:var(--radius-sm); font-size:.82rem; }
.msg.error{ background:var(--danger-bg); border:1px solid rgba(251,113,133,.3); color:#ffd9de; }
.msg.success{ background:var(--success-bg); border:1px solid rgba(52,211,153,.3); color:#c8f7e4; }
.msg.warn{ background:var(--warning-bg); border:1px solid rgba(251,191,36,.3); color:#ffe9b3; }

.result-badge{ display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--success); background:var(--success-bg); border:1px solid rgba(52,211,153,.3); padding:7px 12px; border-radius:999px; width:fit-content; margin:0 0 18px; }
.result-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--success); }
.result-email{ font-size:.85rem; color:var(--text-muted); margin:0 0 20px; }
.result-email b{ color:var(--text); }
.code-box{ background:rgba(0,0,0,.28); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px 20px; text-align:center; margin-bottom:16px; }
.code-display{ font-size:2.4rem; font-weight:700; letter-spacing:.14em; color:var(--text); display:block; }
.code-meta{ margin-top:10px; font-size:.76rem; color:var(--text-faint); }
.code-actions{ display:flex; gap:10px; }

.email-card{ border-radius:var(--radius-lg); overflow:hidden; background:#fff; box-shadow:0 16px 50px rgba(0,0,0,.4); margin-bottom:18px; }
.email-card-header{ padding:20px 22px 16px; color:#fff; }
.email-card-title{ font-family:'Unbounded',sans-serif; font-size:1rem; font-weight:600; margin:0 0 9px; }
.email-card-meta{ display:flex; align-items:center; gap:8px; font-size:.76rem; opacity:.92; flex-wrap:wrap; }
.email-card-meta .dot-sep{ opacity:.65; }
.email-card-body{ padding:30px 26px 28px; color:#17181c; }
.email-card-body h2{ font-family:'Unbounded',sans-serif; font-size:1.28rem; line-height:1.35; margin:0 0 22px; color:#0e0e0e; }
.email-card-code{ font-family:'JetBrains Mono',monospace; font-size:2.3rem; font-weight:700; letter-spacing:.12em; color:#0e0e0e; margin-bottom:18px; }
.email-card-note{ font-size:.85rem; line-height:1.55; color:#565860; margin:0; }
.email-card-link-btn{ display:inline-block; margin-bottom:18px; }

.admin-grid{ display:grid; grid-template-columns:minmax(300px,1fr) minmax(340px,1.35fr); gap:20px; align-items:start; }
@media (max-width:860px){ .admin-grid{ grid-template-columns:1fr; } }
.admin-card{
  border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); padding:22px 22px 20px; box-shadow:var(--card-shadow);
  backdrop-filter:var(--card-backdrop); -webkit-backdrop-filter:var(--card-backdrop);
}
.admin-card h2{ font-size:1rem; margin:0 0 4px; }
.encrypt-note{ margin-top:16px; padding:10px 12px; border-radius:var(--radius-sm); background:rgba(24,164,88,.06); border:1px solid rgba(24,164,88,.18); font-size:.73rem; color:var(--text-muted); }

.email-row{ display:grid; grid-template-columns:132px 1fr 1fr 32px; gap:8px; align-items:center; margin-bottom:9px; }
@media (max-width:640px){ .email-row{ grid-template-columns:1fr; } }
.email-row select,.email-row input{ font-family:inherit; font-size:.85rem; color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:8px; padding:9px 10px; width:100%; }
.row-remove-btn{ width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text-faint); cursor:pointer; }
.btn-add-row{ font-family:inherit; font-size:.83rem; font-weight:600; color:var(--accent-soft); background:rgba(24,164,88,.08); border:1px dashed rgba(24,164,88,.4); border-radius:var(--radius-sm); padding:10px 14px; cursor:pointer; width:100%; margin:4px 0 16px; }

.table-scroll{ overflow-x:auto; border-radius:var(--radius-sm); border:1px solid var(--border-soft); }
table.data-table{ width:100%; border-collapse:collapse; font-size:.78rem; min-width:520px; }
table.data-table th{ text-align:left; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.68rem; color:var(--text-faint); padding:9px 12px; background:rgba(255,255,255,.03); border-bottom:1px solid var(--border-soft); white-space:nowrap; }
table.data-table td{ padding:9px 12px; border-bottom:1px solid var(--border-soft); color:var(--text); vertical-align:middle; }
table.data-table tr:last-child td{ border-bottom:none; }
.plat-chip{ display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:.7rem; font-weight:700; color:#fff; }
.badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:.7rem; font-weight:700; }
.badge.ok{ background:var(--success-bg); color:var(--success); }
.badge.warn{ background:var(--warning-bg); color:var(--warning); }
.row-del-link{ color:var(--text-faint); text-decoration:none; border:1px solid var(--border); border-radius:7px; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; }
.row-del-link:hover{ color:#ff9aa8; border-color:rgba(251,113,133,.5); background:rgba(251,113,133,.08); }
.reg-filter{ font-family:inherit; font-size:.82rem; color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:999px; padding:8px 14px; width:100%; margin-bottom:14px; }

footer.note{ text-align:center; margin-top:40px; padding-top:20px; font-size:.74rem; color:var(--text-faint); }

/* ---- Pantalla de inicio de sesión (dos paneles) ---- */
.auth-shell{
  position:fixed; inset:0; z-index:20; display:flex; overflow:auto;
  background:#eef3f0;
}
.auth-left{
  flex:1 1 46%; min-width:0; position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--accent-deep) 0%, #06140d 100%);
  padding:46px 44px; display:flex; flex-direction:column; color:#eafff2;
}
.auth-left::before{
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  background:var(--nebula-b); filter:blur(90px); opacity:.35; top:-140px; right:-140px; mix-blend-mode:screen;
}
.auth-left::after{
  content:""; position:absolute; width:360px; height:360px; border-radius:50%;
  background:var(--accent); filter:blur(100px); opacity:.25; bottom:-120px; left:-100px; mix-blend-mode:screen;
}
.auth-left-inner{ position:relative; z-index:1; display:flex; flex-direction:column; height:100%; }
.auth-brand{ display:flex; align-items:center; gap:10px; }
.auth-brand-mark{
  width:38px; height:38px; border-radius:11px;
  background:conic-gradient(from 210deg, var(--accent), var(--nebula-b), var(--accent-deep), var(--accent));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 6px 16px rgba(0,0,0,.35);
}
.auth-brand-mark img{ width:21px; height:21px; object-fit:contain; }
.auth-brand-text b{ display:block; font-family:'Unbounded',sans-serif; font-size:1rem; letter-spacing:-0.01em; }
.auth-brand-text span{ display:block; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:rgba(234,255,242,.55); margin-top:2px; }
.auth-headline{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:2rem; line-height:1.18; margin:44px 0 14px; max-width:420px; }
.auth-lead{ font-size:.95rem; color:rgba(234,255,242,.72); max-width:380px; line-height:1.6; margin:0; }
.auth-feature{
  margin-top:auto; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg); padding:18px 20px; backdrop-filter:blur(6px);
}
.auth-feature .tag{ font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:rgba(234,255,242,.6); font-weight:700; margin-bottom:7px; }
.auth-feature h3{ margin:0 0 6px; font-size:1rem; font-family:'Unbounded',sans-serif; }
.auth-feature p{ margin:0; font-size:.8rem; color:rgba(234,255,242,.68); line-height:1.55; }

.auth-right{ flex:1 1 54%; display:flex; align-items:center; justify-content:center; padding:32px 24px; }
.auth-card{
  width:100%; max-width:400px; background:#ffffff; border-radius:22px; padding:38px 34px 32px;
  box-shadow:0 30px 70px rgba(6,30,20,.16); color:#0d1f16;
}
.auth-card h2{ font-family:'Unbounded',sans-serif; font-size:1.2rem; margin:0 0 24px; color:#0d1f16; }
.auth-card .field label{ color:#5a6b62; }
.auth-card .field input{
  background:#f4f7f5; border:1px solid #e0e7e3; color:#0d1f16;
}
.auth-card .field input:focus{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(24,164,88,.14); outline:none; }
.auth-card .btn-primary{ color:#06140d; }
.auth-forgot{ display:block; text-align:right; font-size:.8rem; color:var(--accent); text-decoration:none; font-weight:700; margin:-8px 0 20px; }
.auth-forgot:hover{ text-decoration:underline; }
.auth-note{ margin-top:20px; font-size:.76rem; color:#7c8a83; text-align:center; line-height:1.55; }
.password-field{ position:relative; }
.password-toggle{
  position:absolute; right:9px; top:32px; background:none; border:none; cursor:pointer; color:#8b9891; padding:6px; line-height:0;
}
.auth-card .msg.error{ background:#fdecee; border:1px solid #f6c6cc; color:#a4283a; }

@media (max-width:860px){
  .auth-shell{ flex-direction:column; position:static; min-height:100vh; }
  .auth-left{ padding:32px 24px 36px; }
  .auth-headline{ font-size:1.6rem; margin:28px 0 10px; }
  .auth-feature{ margin-top:24px; }
  .auth-right{ padding:28px 22px 44px; }
}

/* ---- Modo claro (selector de Apariencia) ---- */
:root[data-theme="light"]{
  --bg-void:#eef3f0;
  --bg-void-deep:#e3ece6;
  --surface:rgba(13,31,22,0.045);
  --surface-strong:rgba(13,31,22,0.08);
  --border:rgba(13,31,22,0.13);
  --border-soft:rgba(13,31,22,0.09);
  --text:#0d1f16;
  --text-muted:#4d6358;
  --text-faint:#7c8a83;
  color-scheme:light;
}
:root[data-theme="light"] .cosmos{ opacity:.35; }
:root[data-theme="light"] .nebula{ opacity:.16; }
:root[data-theme="light"] .glass-panel,
:root[data-theme="light"] .admin-card,
:root[data-theme="light"] .login-card{ box-shadow:0 10px 34px rgba(13,31,22,.09); }

/* ---- Selector de Apariencia (botón + panel) ---- */
.ap-wrap{ position:relative; display:inline-flex; }
.ap-pop{
  position:absolute; top:calc(100% + 8px); right:0; z-index:40; width:230px;
  background:var(--bg-void); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px 14px 16px; box-shadow:0 18px 44px rgba(0,0,0,.4);
}
.ap-pop-label{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin:10px 0 8px; }
.ap-pop-label:first-child{ margin-top:0; }
.ap-mode-row{ display:flex; gap:8px; }
.ap-mode-btn{
  flex:1; font-family:inherit; font-size:.8rem; font-weight:600; color:var(--text-muted); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 6px; cursor:pointer;
}
.ap-mode-btn.active{ color:var(--text); border-color:var(--accent-soft); background:rgba(24,164,88,.12); }
.ap-swatch-row{ display:flex; flex-wrap:wrap; gap:8px; }
.ap-swatch{
  width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0;
  box-shadow:0 0 0 1px var(--border);
}
.ap-swatch.active{ border-color:var(--text); }
.ap-custom-row{
  display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-size:.78rem; color:var(--text-muted);
}
.ap-custom-row input[type="color"]{ width:34px; height:26px; border:1px solid var(--border); border-radius:7px; background:none; padding:0; cursor:pointer; }
.ap-style-col{ display:flex; flex-direction:column; gap:6px; }
.ap-style-btn{
  text-align:left; font-family:inherit; color:var(--text-muted); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; cursor:pointer;
}
.ap-style-btn.active{ border-color:var(--accent-soft); background:rgba(24,164,88,.1); color:var(--text); }
.ap-style-name{ display:block; font-size:.8rem; font-weight:700; color:var(--text); }
.ap-style-desc{ display:block; font-size:.7rem; margin-top:1px; }

/* ---- Estilo: Neón ---- */
:root[data-style="neon"]{ --card-shadow:0 0 0 1px var(--accent-soft), 0 0 26px -6px var(--accent-soft); }
:root[data-style="neon"] .topbar,
:root[data-style="neon"] .glass-panel,
:root[data-style="neon"] .admin-card,
:root[data-style="neon"] .platform-card,
:root[data-style="neon"] .ap-pop{ background:rgba(255,255,255,.015); border-color:var(--accent-soft); }
:root[data-style="neon"] h1,
:root[data-style="neon"] .brand-name,
:root[data-style="neon"] .platform-name{ text-shadow:0 0 14px var(--accent-soft); }
:root[data-style="neon"] .btn-primary{ box-shadow:0 0 22px -2px var(--accent-soft); }

/* ---- Estilo: Vidrio ---- */
:root[data-style="vidrio"]{ --card-backdrop:blur(18px); }
:root[data-style="vidrio"] .topbar,
:root[data-style="vidrio"] .glass-panel,
:root[data-style="vidrio"] .admin-card,
:root[data-style="vidrio"] .platform-card,
:root[data-style="vidrio"] .ap-pop{ background:rgba(255,255,255,.07); }
:root[data-theme="light"][data-style="vidrio"] .topbar,
:root[data-theme="light"][data-style="vidrio"] .glass-panel,
:root[data-theme="light"][data-style="vidrio"] .admin-card,
:root[data-theme="light"][data-style="vidrio"] .platform-card,
:root[data-theme="light"][data-style="vidrio"] .ap-pop{ background:rgba(255,255,255,.55); }

/* ---- Estilo: Bento ---- */
/* Fuerza una paleta clara completa (no solo el fondo de las tarjetas), para que el texto
   siga siendo legible sin importar si el modo actual es oscuro o claro. */
:root[data-style="bento"]{
  --bg-void:#eef3f0; --bg-void-deep:#e3ece6;
  --surface:#ffffff; --surface-strong:#ffffff;
  --border:rgba(13,31,22,.08); --border-soft:rgba(13,31,22,.06);
  --text:#0d1f16; --text-muted:#5a6b62; --text-faint:#8b9891;
  --card-shadow:0 2px 14px rgba(13,31,22,.1); --card-backdrop:none;
  color-scheme:light;
}
:root[data-style="bento"] .topbar,
:root[data-style="bento"] .glass-panel,
:root[data-style="bento"] .admin-card,
:root[data-style="bento"] .platform-card,
:root[data-style="bento"] .ap-pop{
  background:#fff; border:none; border-radius:22px;
}
:root[data-style="bento"] .cosmos{ opacity:.22; }
:root[data-style="bento"] .nebula{ opacity:.12; }
:root[data-style="bento"] .field input,
:root[data-style="bento"] .field select{ background:#f4f7f5; border-color:rgba(13,31,22,.1); }