/* Tarjetas y formularios */
.card{
  width: 390px; max-width: 92vw;
  background: rgba(16,24,39,.8);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  padding: 22px;
}
.card.wide{ width:auto; }
.card h2{ font-size:18px; font-weight:700; margin-bottom:16px; color:#cfd7e6; }

.field{ margin-bottom:12px; }
.label{ display:block; font-size:12px; color:#9fb0c4; margin-bottom:8px; }

.input{
  width:100%; padding:12px 12px; border-radius:10px;
  background:#0b1424; color:#e9eef8; border:1px solid #1a2437;
  outline:none; transition:border .2s, box-shadow .2s;
}
.input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43,108,176,.0); }

/* Input focus “acorde a accent” si hay color-mix disponible */
@supports (color: color-mix(in oklab, #000, #fff)) {
  .input:focus{ box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent); }
}

.select{
  width:100%; padding:12px; border-radius:10px;
  background:#0b1424; color:#e9eef8; border:1px solid #1a2437;
}

.btn{
  width:auto; padding:10px 12px; border-radius:10px; border:none; cursor:pointer;
  color:white; font-weight:600;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.btn.small{ padding:8px 10px; font-size:12px; border-radius:8px; }
.btn:disabled{ opacity:.7; cursor:not-allowed; }

/* Variante de botón degradado */
.btn-gradient{
  width:100%;
  padding:14px 16px;
  border-radius:12px; border:none; cursor:pointer; font-weight:800; letter-spacing:.3px;
  color:#fff;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 26px rgba(0,0,0,.45);
}

.muted{ font-size:12px; color:#9fb0c4; }

/* Utils */
.row{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.row .input{ width:auto; min-width:220px; }

/* ===== Borde degradado SIMPLE y COMPATIBLE =====
   Aplica el gradiente al borde usando el accent actual */
.gborder{
  border:1px solid transparent;
  border-radius:14px;
  background:
    linear-gradient(rgba(16,24,39,.85), rgba(16,24,39,.85)) padding-box,
    linear-gradient(90deg, var(--accent), var(--accent-2)) border-box;
}

/* Drawer */
.scrim{ position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .2s; z-index:30; }
.scrim.show{ opacity:1; pointer-events:auto; }
.drawer{
  position: fixed; left: 12px; top: 64px; bottom: 24px; width: 300px;
  background: rgba(16,24,39,.92); border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:10px; overflow:auto; z-index: 40;
  transform: translateX(-120%); opacity: 0; pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
.drawer.open{ transform: translateX(0); opacity: 1; pointer-events: auto; }
.drawer h3{ font-size:13px; color:#a8b4c7; margin:6px 10px 10px; letter-spacing:.4px; }

.platform-item{ display:flex; align-items:center; justify-content:space-between; padding:12px; border-radius:12px; cursor:pointer; border:1px solid #1a2437; background:#0b1424; margin-bottom:8px; }
.platform-item.active{ border-color: var(--item-accent, var(--accent)); }

/* resplandor dinámico según el color de la plataforma activa */
@supports (color: color-mix(in oklab, #000, #fff)) {
  .platform-item.active{ box-shadow: 0 0 0 3px color-mix(in oklab, var(--item-accent, var(--accent)) 35%, transparent); }
}
.p-left{ display:flex; align-items:center; gap:10px; }
.icon-badge{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:#0b1424; border:1px solid #1b263a; color:#e2e8f0; font-weight:700; }
.icon-badge img{ width:24px; height:24px; object-fit:contain; display:block; }
.dot{ width:10px; height:10px; border-radius:50%; background: var(--accent); }
.tag{ font-size:11px; color:#9fb0c4; }

/* Resultado genérico */
.result{ margin-top:12px; border-radius:10px; padding:12px; background:#0b1424; border:1px solid #1a2437; display:none; }
.result.show{ display:block; }
.code{ font-size:28px; font-weight:800; letter-spacing:6px; color:#e3f5ff; text-align:center; }

/* ===== Hero (logo + chips + ventajas) ===== */
.brand-logo{
  width: 84px; height: 84px;
  display:block; margin: 0 auto 10px;
  border-radius: 18px;
  padding: 6px;
  background: #0b1424;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  object-fit: contain;
}
.brand-logo.hidden{ display:none; }
.hero-badges{
  list-style:none; padding:0; margin:12px 0 6px;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.pill{
  display:inline-flex; align-items:center;
  font-weight:600; font-size:12px;
  padding:8px 12px; border-radius:999px;
  background:#0b1424; color:#dbe7ff;
  border:1px solid #1b263a;
  letter-spacing:.2px;
}
.pill-red{   background:linear-gradient(90deg,#dc2626,#ef4444); color:#fff; border:none; }
.pill-amber{ background:linear-gradient(90deg,#f59e0b,#fbbf24); color:#1b1b1b; border:none; }
.feature-list{
  list-style:none; padding:0; margin:6px 0 0;
  display:flex; flex-wrap:wrap; gap:18px; justify-content:center;
  color:#9fb0c4; font-size:13px;
}
.feature-list li{ display:inline-flex; align-items:center; gap:6px; }

/* ===== Admin (también está en admin.css; se deja para compatibilidad) ===== */
.admin-screen{ padding-top:72px; padding-bottom:32px; min-height:100vh; }
.admin-grid{ width:1200px; max-width:96vw; margin:0 auto; display:grid; grid-template-columns:260px 1fr; gap:20px; }
.side{ background:rgba(16,24,39,.8); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:12px; }
.side h3{ font-size:13px; color:#a8b4c7; margin:6px 8px 12px; letter-spacing:.4px; }
.nav-item{ display:block; padding:10px 12px; border-radius:10px; border:1px solid #1a2437; background:#0b1424; color:#d7dfeb; margin-bottom:8px; cursor:pointer; }
.nav-item.active{ border-color:var(--accent); }
.main{ display:flex; flex-direction:column; gap:16px; }
.actions{ display:flex; gap:6px; flex-wrap:wrap; }
.hr{ height:1px; background:#1a2437; margin:12px 0; border:none; }
.table{ width:100%; border-collapse: collapse; font-size:14px; }
.table th, .table td{ border-bottom:1px solid #1a2437; padding:10px 8px; text-align:left; }
.table th{ color:#9fb0c4; font-weight:600; }
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background:#0b1424; border:1px solid #1a2437; color:#cfe6ff; }

/* Responsive común */
@media (max-width:900px){
  .content{ width:94vw; }
  .drawer{ width:88vw; left:6vw; }
  .admin-grid{ grid-template-columns:1fr; }
}