:root {
  --og-bg: #0c0a09;
  --og-bg-alt: #16110e;
  --og-card: #1c1512;
  --og-border: #332621;
  --og-text: #f3ede9;
  --og-text-muted: #a89a92;
  --og-primary: #ff5722;
  --og-primary-light: #ff8a3d;
  --og-primary-hover: #e8480f;
  --og-success: #2ecc71;
  --og-danger: #e6483a;
  --og-warning: #f1c40f;
  --og-radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--og-bg);
  color: var(--og-text);
  line-height: 1.55;
  overflow-x: hidden; /* red de seguridad: ningun elemento puede empujar la pagina entera de lado */
}

a { color: var(--og-primary-light); text-decoration: none; }
a:hover { text-decoration: underline; }

.og-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.og-header {
  background: rgba(18, 13, 11, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--og-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.og-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  gap: 16px;
  position: relative;
}
.og-logo { height: 40px; display: block; filter: drop-shadow(0 0 6px rgba(255, 87, 34, 0.35)); }
.og-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; min-width: 0; max-width: 55vw; }
.og-brand:hover { text-decoration: none; }
.og-brand-text {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(120deg, var(--og-primary-light), var(--og-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.og-nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.og-nav a { color: var(--og-text-muted); font-weight: 600; font-size: 14px; transition: color 0.15s ease; white-space: nowrap; }
.og-nav a:hover { color: var(--og-primary-light); text-decoration: none; }

/* Mobile hamburger menu -> dropdown panel */
.og-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: var(--og-bg-alt);
  border: 1px solid var(--og-border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  z-index: 101;
}
.og-nav-toggle span { display: block; width: 20px; height: 2px; background: var(--og-text); transition: transform 0.2s ease, opacity 0.2s ease; }
.og-nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.og-nav-toggle.open span:nth-child(2) { opacity: 0; }
.og-nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* El menu hamburguesa entra en juego mas temprano (1024px) porque con mas
   opciones (Cuenta, Pedidos, Saldo, Descargas, Admin, Salir, etc.) los
   links dejan de caber en una sola fila bastante antes del breakpoint
   "movil" clasico de 760px. Asi evitamos que se desborden en
   tablets/laptops chicas antes de colapsar al menu. */
@media (max-width: 1024px) {
  .og-nav-toggle { display: flex; }
  .og-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 1px;
    background: var(--og-bg-alt);
    border: 1px solid var(--og-border);
    border-top: none;
    border-radius: 0 0 var(--og-radius) var(--og-radius);
    box-shadow: 0 12px 24px rgba(0,0,0,0.45);
    padding: 8px;
    z-index: 99;
    max-height: 80vh;
    overflow-y: auto;
  }
  .og-nav.open { display: flex; }
  .og-nav a { width: 100%; padding: 12px 10px; border-radius: 8px; white-space: normal; }
  .og-nav a:hover, .og-nav a:active { background: rgba(255,87,34,0.1); }
}

/* Main */
.og-main { min-height: 70vh; padding: 30px 0 60px; }

/* Alerts */
.og-alert { padding: 12px 16px; border-radius: var(--og-radius); margin-bottom: 20px; font-size: 14px; }
.og-alert-error { background: rgba(230,72,58,0.14); border: 1px solid var(--og-danger); color: #ff9188; }
.og-alert-success { background: rgba(46,204,113,0.14); border: 1px solid var(--og-success); color: #7bffb0; }

/* Cards / Grid */
.og-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 24px;
}
/* Grid horizontal para pocos elementos (ej: licencias) - a diferencia de
   auto-fill, no deja columnas "fantasma" vacias cuando hay pocas cards. */
.og-flex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 24px;
}
.og-flex-grid > .og-card {
  flex: 1 1 320px;
  max-width: 400px;
}
.og-card {
  background: var(--og-card);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.og-card:hover { transform: translateY(-4px); border-color: var(--og-primary); box-shadow: 0 14px 28px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,87,34,0.15); }
.og-card-img { width: 100%; height: 160px; object-fit: cover; background: var(--og-bg-alt); }
.og-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.og-card-body h3 { margin: 0 0 8px; font-size: 17px; }
.og-card-body p { color: var(--og-text-muted); font-size: 14px; flex: 1; }
.og-card-price { font-weight: 700; color: var(--og-primary-light); margin-top: 8px; }

/* Buttons */
.og-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--og-primary-light), var(--og-primary));
  color: #fff;
  padding: 11px 22px;
  border: none;
  border-radius: var(--og-radius);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 4px 14px rgba(255, 87, 34, 0.25);
  transition: box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}
.og-btn:hover { text-decoration: none; filter: brightness(1.07); box-shadow: 0 6px 20px rgba(255, 87, 34, 0.4); }
.og-btn:active { transform: translateY(1px); }
.og-btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; box-shadow: none; }
.og-btn-secondary { background: var(--og-bg-alt); border: 1px solid var(--og-border); color: var(--og-text); box-shadow: none; }
.og-btn-secondary:hover { filter: none; border-color: var(--og-primary); box-shadow: none; }
.og-btn-danger { background: var(--og-danger); box-shadow: 0 4px 14px rgba(230,72,58,0.25); }
.og-btn-sm { padding: 6px 12px; font-size: 12px; }
.og-btn-icon { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; flex-shrink: 0; }
.og-btn-block { width: 100%; }

/* Forms */
.og-form { max-width: 460px; margin: 0 auto; background: var(--og-card); border: 1px solid var(--og-border); border-radius: var(--og-radius); padding: 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.og-form-wide { max-width: 720px; }
.og-form h1, .og-form h2 { margin-top: 0; }
.og-field { margin-bottom: 16px; }
.og-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--og-text-muted); }
.og-field input[type=text], .og-field input[type=email], .og-field input[type=password],
.og-field input[type=number], .og-field input[type=file], .og-field select, .og-field textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--og-border);
  background: var(--og-bg-alt); color: var(--og-text); font-size: 14px;
  transition: border-color 0.15s ease;
}
.og-field input:focus, .og-field select:focus, .og-field textarea:focus {
  outline: none; border-color: var(--og-primary);
}
.og-field textarea { min-height: 100px; resize: vertical; }
.og-help { font-size: 12px; color: var(--og-text-muted); margin-top: 4px; }

/* Input suelto, para casos fuera de .og-field (ej: formularios inline cortos) */
.og-input {
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--og-border);
  background: var(--og-bg-alt); color: var(--og-text); font-size: 14px;
  transition: border-color 0.15s ease;
}
.og-input::placeholder { color: var(--og-text-muted); }
.og-input:focus { outline: none; border-color: var(--og-primary); }

/* Tables */
.og-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.og-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.og-table th, .og-table td { padding: 10px 12px; border-bottom: 1px solid var(--og-border); text-align: left; font-size: 14px; }
.og-table th { color: var(--og-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }

/* Badges */
.og-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.og-badge-pending { background: rgba(241,196,15,0.15); color: var(--og-warning); }
.og-badge-paid { background: rgba(46,204,113,0.15); color: var(--og-success); }
.og-badge-failed { background: rgba(230,72,58,0.15); color: var(--og-danger); }
.og-badge-refunded { background: rgba(168,154,146,0.2); color: var(--og-text-muted); }
.og-badge-processing { background: rgba(255,87,34,0.15); color: var(--og-primary-light); }
.og-badge-delivered { background: rgba(46,204,113,0.15); color: var(--og-success); }

/* Binance payment info */
.og-binance-pay-box { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; background: var(--og-bg-alt); border: 1px solid var(--og-border); border-radius: var(--og-radius); padding: 16px; margin-bottom: 16px; }
.og-binance-qr { width: 160px; height: 160px; object-fit: contain; background: #fff; border-radius: 8px; padding: 6px; }
.og-binance-id-box { flex: 1; min-width: 200px; }
.og-binance-id-value { font-family: monospace; font-size: 15px; background: var(--og-bg); border: 1px solid var(--og-border); border-radius: 6px; padding: 8px 10px; word-break: break-all; display: inline-block; margin-top: 6px; }

/* Product video */
.og-video-wrap { position: relative; width: 100%; padding-top: 56.25%; margin-top: 16px; border-radius: var(--og-radius); overflow: hidden; background: #000; }
.og-video-wrap iframe, .og-video-wrap video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Product detail */
.og-product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 20px; }
.og-product-detail img { width: 100%; border-radius: var(--og-radius); border: 1px solid var(--og-border); }
.og-durations { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.og-duration-option {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  border: 1px solid var(--og-border); border-radius: 8px; padding: 12px 16px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.og-duration-option input { margin-right: 10px; }
.og-duration-option.selected { border-color: var(--og-primary); background: rgba(255,87,34,0.08); }

/* Admin */
.og-admin-layout { display: flex; gap: 24px; align-items: flex-start; }
.og-admin-sidebar { width: 220px; background: var(--og-card); border: 1px solid var(--og-border); border-radius: var(--og-radius); padding: 16px; flex-shrink: 0; }
.og-admin-sidebar a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--og-text-muted); font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.og-admin-sidebar a:hover, .og-admin-sidebar a.active { background: rgba(255,87,34,0.1); color: var(--og-primary-light); text-decoration: none; }
.og-admin-content { flex: 1; min-width: 0; }
.og-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 20px; }
.og-stat-card { background: var(--og-card); border: 1px solid var(--og-border); border-radius: var(--og-radius); padding: 18px; }
.og-stat-card .value { font-size: 26px; font-weight: 800; color: var(--og-primary-light); }
.og-stat-card .label { font-size: 13px; color: var(--og-text-muted); margin-top: 4px; }

/* Social icons (legacy, ya no se usa directamente pero se mantiene por compatibilidad) */
.og-social-links { display: flex; justify-content: center; gap: 16px; margin-bottom: 14px; }
.og-social-icon { display: inline-flex; }
.og-social-icon img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; opacity: 0.85; transition: opacity 0.15s ease; }
.og-social-icon:hover img { opacity: 1; }

/* Soporte - seccion en el footer con etiqueta clara */
.og-support-footer-wrap { text-align: center; margin-bottom: 18px; }
.og-support-links { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.og-support-link {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--og-bg); border: 1px solid var(--og-border); border-radius: 999px;
  padding: 8px 16px 8px 8px; color: var(--og-text); font-size: 13px; font-weight: 600;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.og-support-link:hover { border-color: var(--og-primary); text-decoration: none; transform: translateY(-2px); }
.og-support-link img { width: 24px; height: 24px; object-fit: contain; border-radius: 50%; }

/* Soporte - botones flotantes, visibles en toda la tienda */
.og-support-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  z-index: 200;
}
.og-support-fab-btn {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--og-card); border: 1px solid var(--og-border);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.og-support-fab-btn:hover {
  transform: scale(1.08);
  border-color: var(--og-primary);
  box-shadow: 0 12px 28px rgba(255,87,34,0.3);
  text-decoration: none;
}
.og-support-fab-btn img { width: 30px; height: 30px; object-fit: contain; border-radius: 50%; }

@media (max-width: 760px) {
  .og-support-fab { right: 14px; bottom: 14px; gap: 10px; }
  .og-support-fab-btn { width: 48px; height: 48px; }
  .og-support-fab-btn img { width: 26px; height: 26px; }
}

/* Payment method badges (footer trust signals) */
.og-payment-badges-wrap { text-align: center; margin-bottom: 16px; }
.og-payment-badges-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--og-text-muted); margin-bottom: 10px; }
.og-payment-badges { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.og-payment-badge { height: 28px; max-width: 90px; object-fit: contain; opacity: 0.9; background: #fff; border-radius: 6px; padding: 4px 8px; }

/* Footer */
.og-footer { border-top: 1px solid var(--og-border); padding: 28px 0 24px; color: var(--og-text-muted); font-size: 13px; text-align: center; background: var(--og-bg-alt); }

/* Utility */
.og-flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.og-flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.og-mt { margin-top: 20px; }
.og-text-center { text-align: center; }

/* Hero */
.og-hero {
  text-align: center;
  padding: 60px 0 34px;
  position: relative;
}
.og-hero::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  height: 420px;
  max-width: 100%;
  background: radial-gradient(ellipse at center, rgba(255,87,34,0.16) 0%, rgba(255,87,34,0.05) 45%, transparent 72%);
  pointer-events: none;
  z-index: -1;
}
.og-hero h1 {
  font-size: 36px;
  margin-bottom: 10px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.og-hero p { color: var(--og-text-muted); font-size: 16px; max-width: 560px; margin: 0 auto; }

@media (max-width: 760px) {
  .og-product-detail { grid-template-columns: 1fr; }
  .og-admin-layout { flex-direction: column; }
  .og-admin-sidebar { width: 100%; }
  .og-hero { padding: 40px 0 24px; }
  .og-hero h1 { font-size: 27px; }
  .og-flex-grid > .og-card { flex-basis: 100%; max-width: 100%; }
}