/* ANDROID-ARCADE-PREMIUM-001 — skin "Robot Verde Arcade" de Cliente V3.
   Capa SOBRE Black Edition: solo aplica con <html data-theme="black"
   data-skin="arcade"> (default dentro de la app Android, ver
   _theme_bootstrap.html). Sin data-skin esta hoja no cambia nada.
   Componentes: fondo metalico, tarjetas con borde de neon, botones arcade
   de plastico brillante (3D, se hunden al tocar), indicadores, Monochrome
   Mode del panel de configuracion y espacios de ANUNCIO de demostracion. */

:root[data-skin="arcade"]{
  --arc-neon:#39ff88;
  --arc-neon-deep:#0fbf5c;
  --arc-cyan:#38e1ff;
  --arc-magenta:#ff3fb4;
  --arc-amber:#ffc53d;
  --arc-red:#ff4757;
  --arc-metal-1:#1b2024;
  --arc-metal-2:#0d1013;
  --arc-panel:#141a1e;
  --arc-panel-edge:#2b353b;
  --arc-text:#eef7f1;
  --arc-muted:#9fb3a8;
  --arc-radius:18px;
  --arc-press:5px;
  --arc-font:"Arial Black","Segoe UI Black","Roboto",system-ui,sans-serif;
}

/* ---------- fondo metalico oscuro ---------- */
[data-skin="arcade"] body,
[data-skin="arcade"][data-theme="black"] .apc-page,
[data-skin="arcade"][data-theme="black"] .apc-shell,
[data-skin="arcade"][data-theme="black"] .apc-wallet-shell,
[data-skin="arcade"][data-theme="black"] .apc-dest-shell,
[data-skin="arcade"][data-theme="black"] .apc-flow-shell{
  background:
    radial-gradient(ellipse at 50% -80px, rgba(57,255,136,.16) 0, transparent 360px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--arc-metal-1) 0, var(--arc-metal-2) 100%) !important;
  color:var(--arc-text) !important;
}

/* ---------- tipografia y jerarquia ---------- */
[data-skin="arcade"] .apc-screen-kicker,
[data-skin="arcade"] .apc-experience-label,
[data-skin="arcade"] .apc-section-heading{
  font-family:var(--arc-font) !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
  color:var(--arc-neon) !important;
  text-shadow:0 0 10px rgba(57,255,136,.55);
}
[data-skin="arcade"] .apc-screen-header h1,
[data-skin="arcade"] .apc-qr-title,
[data-skin="arcade"] .apc-qr-title-long{
  font-family:var(--arc-font) !important;
  letter-spacing:.02em;
  color:#fff !important;
  text-shadow:0 2px 0 #000, 0 0 18px rgba(57,255,136,.35);
}

/* ---------- tarjetas con borde de neon ---------- */
[data-skin="arcade"][data-theme="black"] .apc-card-ui,
[data-skin="arcade"][data-theme="black"] .apc-m-card,
[data-skin="arcade"][data-theme="black"] .apc-wallet-card,
[data-skin="arcade"][data-theme="black"] .apc-premium-card,
[data-skin="arcade"][data-theme="black"] .apc-config-info-card,
[data-skin="arcade"][data-theme="black"] .apc-current-controls,
[data-skin="arcade"][data-theme="black"] .apc-wallet-info,
[data-skin="arcade"][data-theme="black"] .apc-qr-screen{
  background:linear-gradient(180deg, #1a2226 0, var(--arc-panel) 100%) !important;
  border:1px solid var(--arc-panel-edge) !important;
  border-radius:var(--arc-radius) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(57,255,136,.18),
    0 0 22px rgba(57,255,136,.10),
    0 12px 28px rgba(0,0,0,.55) !important;
}

/* ---------- boton arcade de plastico brillante ---------- */
[data-skin="arcade"] .apc-button,
[data-skin="arcade"] .apc-m-main-btn,
[data-skin="arcade"] .apc-search-go-btn,
[data-skin="arcade"] .apc-rotate-btn,
[data-skin="arcade"] .apc-wallet-add-text{
  --arc-btn:var(--arc-neon);
  --arc-btn-deep:var(--arc-neon-deep);
  --arc-btn-ink:#062b14;
  position:relative;
  min-height:56px;
  border:0 !important;
  border-radius:999px !important;
  font-family:var(--arc-font) !important;
  font-size:16px !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--arc-btn-ink) !important;
  background:
    radial-gradient(ellipse 70% 55% at 50% 18%, rgba(255,255,255,.75) 0, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--arc-btn) 0, var(--arc-btn-deep) 100%) !important;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.22),
    inset 0 2px 0 rgba(255,255,255,.5),
    0 var(--arc-press) 0 color-mix(in srgb, var(--arc-btn-deep) 60%, #000),
    0 0 18px color-mix(in srgb, var(--arc-btn) 45%, transparent),
    0 calc(var(--arc-press) + 8px) 18px rgba(0,0,0,.55) !important;
  transform:translateY(0);
  transition:transform .08s ease, box-shadow .08s ease, filter .3s ease;
  -webkit-tap-highlight-color:transparent;
}
[data-skin="arcade"] .apc-button:active,
[data-skin="arcade"] .apc-m-main-btn:active,
[data-skin="arcade"] .apc-search-go-btn:active,
[data-skin="arcade"] .apc-rotate-btn:active,
[data-skin="arcade"] .apc-wallet-add-text:active{
  transform:translateY(var(--arc-press));
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.25),
    inset 0 2px 0 rgba(255,255,255,.45),
    0 0 0 color-mix(in srgb, var(--arc-btn-deep) 60%, #000),
    0 0 26px color-mix(in srgb, var(--arc-btn) 60%, transparent) !important;
}
[data-skin="arcade"] .apc-button:focus-visible,
[data-skin="arcade"] .apc-m-main-btn:focus-visible,
[data-skin="arcade"] .apc-rotate-btn:focus-visible,
[data-skin="arcade"] .apc-experience-card:focus-visible{
  outline:3px solid var(--arc-cyan) !important;
  outline-offset:3px;
}
/* variantes de color: secundario cian, fantasma metal, peligro rojo */
[data-skin="arcade"] .apc-button-secondary{ --arc-btn:var(--arc-cyan); --arc-btn-deep:#0f8fb0; --arc-btn-ink:#04222b; }
[data-skin="arcade"] .apc-button-ghost{ --arc-btn:#5b6870; --arc-btn-deep:#323b41; --arc-btn-ink:#eef7f1; }
[data-skin="arcade"] .apc-button-danger,
[data-skin="arcade"] .apc-file-remove{ --arc-btn:var(--arc-red); --arc-btn-deep:#b3202d; --arc-btn-ink:#fff; }
[data-skin="arcade"] .apc-rotate-btn{ --arc-btn:var(--arc-amber); --arc-btn-deep:#c88a00; --arc-btn-ink:#2b1d00; min-height:52px; padding:0 20px; }
[data-skin="arcade"] .apc-button[disabled],
[data-skin="arcade"] .apc-m-main-btn[disabled]{ filter:saturate(.2) brightness(.7); }

/* ---------- tarjetas de modalidad = gabinetes arcade ---------- */
[data-skin="arcade"][data-theme="black"] .apc-experience-card{
  min-height:84px;
  border-radius:22px !important;
  border:2px solid var(--arc-card-neon, var(--arc-neon)) !important;
  background:linear-gradient(180deg, #1d262b 0, #11171a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 16px color-mix(in srgb, var(--arc-card-neon, var(--arc-neon)) 40%, transparent),
    0 6px 0 #05080a,
    0 14px 24px rgba(0,0,0,.6) !important;
  transition:transform .08s ease, box-shadow .08s ease;
}
[data-skin="arcade"][data-theme="black"] .apc-experience-card:active{
  transform:translateY(5px);
  box-shadow:0 0 22px color-mix(in srgb, var(--arc-card-neon, var(--arc-neon)) 60%, transparent), 0 1px 0 #05080a !important;
}
[data-skin="arcade"] .apc-experience-mostrador{ --arc-card-neon:var(--arc-neon); }
[data-skin="arcade"] .apc-experience-buzon{ --arc-card-neon:var(--arc-cyan); }
[data-skin="arcade"] .apc-experience-wallet{ --arc-card-neon:var(--arc-amber); }
[data-skin="arcade"] .apc-experience-atm{ --arc-card-neon:var(--arc-magenta); }
[data-skin="arcade"] .apc-wordmark-main{ font-family:var(--arc-font) !important; color:#fff !important; }
[data-skin="arcade"] .apc-wordmark-pill{
  background:var(--arc-card-neon, var(--arc-neon)) !important;
  color:#061a0e !important;
  box-shadow:0 0 12px color-mix(in srgb, var(--arc-card-neon, var(--arc-neon)) 70%, transparent);
}

/* ---------- pestañas, toggles e indicadores ---------- */
[data-skin="arcade"][data-theme="black"] .apc-tab{
  min-height:44px;
  border-radius:999px !important;
  font-family:var(--arc-font) !important;
  letter-spacing:.05em;
}
[data-skin="arcade"][data-theme="black"] .apc-tab-active{
  background:var(--arc-neon) !important;
  color:#062b14 !important;
  box-shadow:0 0 14px rgba(57,255,136,.6) !important;
}
[data-skin="arcade"][data-theme="black"] .apc-item-toggle button,
[data-skin="arcade"][data-theme="black"] .apc-dist-option{
  min-height:46px;
  border-radius:14px !important;
  background:linear-gradient(180deg,#27323a 0,#192126 100%) !important;
  border:1px solid #33414a !important;
  color:var(--arc-text) !important;
  box-shadow:0 3px 0 #070a0c !important;
}
[data-skin="arcade"][data-theme="black"] .apc-item-toggle button.active,
[data-skin="arcade"][data-theme="black"] .apc-dist-option.active{
  background:radial-gradient(ellipse 70% 60% at 50% 15%, rgba(255,255,255,.6) 0, transparent 70%), linear-gradient(180deg,var(--arc-neon) 0,var(--arc-neon-deep) 100%) !important;
  color:#062b14 !important;
  border-color:transparent !important;
  box-shadow:0 0 14px rgba(57,255,136,.55), 0 3px 0 #064d25 !important;
}
[data-skin="arcade"] .apc-progress-track{ background:#0a0d0f !important; box-shadow:inset 0 1px 3px #000; }
[data-skin="arcade"] .apc-progress-fill{
  background:linear-gradient(90deg,var(--arc-neon-deep),var(--arc-neon)) !important;
  box-shadow:0 0 12px rgba(57,255,136,.8);
}
[data-skin="arcade"] .apc-progress-label{ font-family:var(--arc-font); letter-spacing:.08em; color:var(--arc-muted) !important; }
[data-skin="arcade"] .apc-metric b,
[data-skin="arcade"] .apc-wallet-balance-row b,
[data-skin="arcade"] #apcWalletInfoSaldo{
  font-family:var(--arc-font) !important;
  color:var(--arc-neon) !important;
  text-shadow:0 0 10px rgba(57,255,136,.6);
}
[data-skin="arcade"][data-theme="black"] .apc-input{ min-height:52px; border-radius:14px !important; box-shadow:inset 0 2px 4px rgba(0,0,0,.6) !important; }

/* QR: marco blanco limpio (nunca se tiñe ni se tapa: escaneo intacto) */
[data-skin="arcade"] .apc-qr-frame{
  background:#fff !important;
  padding:14px !important;
  border-radius:20px !important;
  box-shadow:0 0 0 4px var(--arc-neon), 0 0 28px rgba(57,255,136,.55) !important;
  filter:none !important;
}

/* ---------- ROTAR 90° (todas las skins) ---------- */
.apc-rotate-control{ display:flex; align-items:center; gap:12px; }
.apc-rotate-btn{ min-height:44px; padding:0 16px; border-radius:12px; font-weight:800; cursor:pointer; }
.apc-rotate-value{ min-width:3.2em; text-align:center; font-variant-numeric:tabular-nums; }
/* Configurar acomoda los controles en una grilla fija (filas 1-3: hoja,
   orientacion, modo/cantidad/AÑADIR). Giro y etiqueta B/N van debajo, a lo
   ancho, para no apretar la fila de modo. */
.apc-config-page .apc-current-controls .apc-rotate-row{grid-column:1/-1!important;grid-row:4!important;display:block!important}
.apc-config-page .apc-current-controls .apc-mono-badge{grid-column:1/-1!important;grid-row:5!important;margin:0!important}
.apc-config-page .apc-current-controls .apc-m-warning{grid-row:6!important}
.apc-rotate-control .apc-rotate-btn{flex:1; white-space:nowrap}
[data-skin="arcade"] .apc-rotate-value{ font-family:var(--arc-font); color:var(--arc-amber); text-shadow:0 0 8px rgba(255,197,61,.6); }

/* ---------- Monochrome Mode (todas las skins) ----------
   Solo el panel de configuracion y su decoracion: queda un 5-10 % del
   color (saturate .08). Fuera del filtro, a proposito: la fila BN/Color
   (para volver a Color), la etiqueta B/N, AÑADIR AL CARRITO y alertas. */
.apc-current-controls .apc-selected-title,
.apc-current-controls .apc-item-row:not(.apc-mode-row){ transition:filter .45s ease; }
.apc-current-controls.apc-mono .apc-selected-title,
.apc-current-controls.apc-mono .apc-item-row:not(.apc-mode-row){ filter:saturate(.08); }
.apc-current-controls.apc-mono{ transition:box-shadow .45s ease, border-color .45s ease; }
[data-skin="arcade"][data-theme="black"] .apc-current-controls.apc-mono{
  border-color:#3a3f42 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(200,210,205,.14), 0 0 18px rgba(57,255,136,.025), 0 12px 28px rgba(0,0,0,.55) !important;
}
.apc-mono-badge{
  margin:10px 0 2px;
  padding:8px 12px;
  border-radius:10px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.06em;
  background:#111;
  color:#fff;
  border:2px solid #fff;
  text-align:center;
}
.apc-mono-badge[hidden]{ display:none; }

/* ---------- espacios de ANUNCIO (demostracion) ----------
   Ocultos salvo <html data-ads="demo"> (?anuncios=demo). Nunca encima del
   QR ni de botones: van en el flujo, debajo del contenido principal. */
.apc-ad-slot{ display:none; }
[data-ads="demo"] .apc-ad-slot{
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 0;
  padding:12px 14px;
  min-height:72px;
  border-radius:14px;
  border:1px dashed #8a949a;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px), #1a1f22;
  color:#cfd8d3;
  font-size:13px;
  line-height:1.35;
}
.apc-ad-slot-tag{
  flex:none;
  padding:3px 8px;
  border-radius:6px;
  background:#ffc53d;
  color:#2b1d00;
  font-weight:900;
  font-size:11px;
  letter-spacing:.12em;
}
.apc-ad-slot b{ display:block; color:#fff; }

/* PDF-SELECT-ARCADE-001: en pantallas angostas los botones de confirmacion
   (modal de pedido y apcConfirm) no deben quedar con el texto pegado al
   borde: menos tracking y padding, mismo alto tactil (>= 52 px). */
@media(max-width:420px){
  [data-skin="arcade"] .apc-confirm-actions .apc-button{
    font-size:14px !important;
    letter-spacing:.02em;
    line-height:1.15;
    padding:6px 10px;
    min-height:52px;
  }
}