/* ==========================================================================
   ZICORE SPACE · ZIPLASH — tema para el motor OpenCode (/ide)
   Inyectado por /opt/opencode-portal/server.py. No modifica el framework:
   solo re-mapea la rampa de tokens --v2-* a la paleta Ziplash.
   Paleta: cian #06dbfa · azul #04a1f2 · indigo #2b61ec · violeta #9261f3
           azul profundo #15345c · hielo #ecf2f8 · niebla #a3b8d1
           negro azulado #01060c -> #0a1827
   ========================================================================== */

:root{
  /* ---------- rampa gris -> negro azulado ZICORE ---------- */
  --v2-grey-50:#eff8ff;
  --v2-grey-100:#d9e8f7;
  --v2-grey-200:#a3b8d1;
  --v2-grey-300:#7d95b5;
  --v2-grey-400:#5b7595;
  --v2-grey-500:#41597a;
  --v2-grey-600:#2c4260;
  --v2-grey-700:#1c2e46;
  --v2-grey-800:#122234;
  --v2-grey-900:#0a1827;
  --v2-grey-1000:#061120;
  --v2-grey-1100:#030b16;
  --v2-grey-1200:#01060c;

  /* ---------- rampa azul -> cian electrico ---------- */
  --v2-blue-100:#d6f4ff;
  --v2-blue-200:#8fe0ff;
  --v2-blue-300:#4ecdfb;
  --v2-blue-400:#06dbfa;
  --v2-blue-500:#04a1f2;
  --v2-blue-600:#2b61ec;
  --v2-blue-700:#215ccb;
  --v2-blue-800:#15345c;
  --v2-blue-900:#0f2542;

  /* ---------- rampa purpura ---------- */
  --v2-purple-100:#efe9ff;
  --v2-purple-200:#d8ccff;
  --v2-purple-300:#cbbcff;
  --v2-purple-400:#b18dff;
  --v2-purple-500:#9261f3;
  --v2-purple-600:#7442d4;
  --v2-purple-700:#5b32b8;
  --v2-purple-800:#3f217f;
  --v2-purple-900:#2a1656;

  /* ---------- alfas oscuros con tinte cian (bordes) ---------- */
  --v2-alpha-dark-2:#04a1f203;
  --v2-alpha-dark-4:#04a1f20a;
  --v2-alpha-dark-6:#04a1f20f;
  --v2-alpha-dark-8:#04a1f214;
  --v2-alpha-dark-10:#04a1f21a;
  --v2-alpha-dark-12:#04a1f21f;
  --v2-alpha-dark-14:#04a1f224;
  --v2-alpha-dark-16:#04a1f229;
  --v2-alpha-dark-20:#04a1f233;
  --v2-alpha-dark-24:#04a1f23d;
  --v2-alpha-dark-30:#04a1f24d;
  --v2-alpha-dark-40:#04a1f266;
  --v2-alpha-dark-50:#04a1f280;
  --v2-alpha-dark-60:#04a1f299;
  --v2-alpha-dark-70:#04a1f2b2;
  --v2-alpha-dark-80:#04a1f2cc;
  --v2-alpha-dark-90:#04a1f2e5;

/* ---------- superficies explicitas ----------
     El lienzo del IDE usa .bg-v2-background-bg-deep, asi que se deja
     translucido para que se vea el fondo de Ziplash detras. Los paneles
     del motor se siguen pintando encima (sus --v2-surface-* ya son casi
     transparentes), asi que el cosmos se ve tambien a traves de ellos. */
  --v2-background-bg-deep:rgba(2,8,16,.48);
  --v2-background-bg-base:rgba(6,17,32,.52);
  --v2-background-bg-layer-01:rgba(7,21,37,.56);
  --v2-background-bg-layer-02:rgba(10,28,48,.60);
  --v2-background-bg-layer-03:rgba(14,36,57,.64);
  --v2-background-bg-layer-04:rgba(18,44,69,.68);
  --v2-background-bg-accent:#2b61ec;
  --v2-background-bg-contrast:#122234;
  --v2-background-bg-inverse:#eff8ff;
  --v2-background-bg-button-neutral:#0a1c30;

  /* ---------- bordes ---------- */
  --v2-border-border-base:#04a1f21f;
  --v2-border-border-muted:#04a1f214;
  --v2-border-border-strong:#04a1f233;
  --v2-border-border-focus:#04a1f2;
  --v2-border-border-inverse:#01060c;

  /* ---------- realces con brillo Ziplash ---------- */
  --v2-elevation-button-neutral:
    0px 1px 1.5px 0px #04a1f21a,0px 0px 0px .5px #04a1f22e,0px 0px 18px -6px #04a1f233;
  --v2-elevation-button-contrast:
    0px 1px 1.5px 0px #04a1f233,0px 0px 0px .5px #061120,
    inset 0px 1px 2px 0px #04a1f224,inset 0px -1px 2px 0px #04a1f20f;
  --v2-elevation-elements:0px .5px .5px 0px #04a1f266;
  --v2-elevation-raised:
    0px 2px 4px 0px #04a1f24d,0px 1px 2px 0px #04a1f24d,0px 0px 0px .5px #04a1f21a;
  --v2-elevation-floating:
    0px 8px 16px 0px #04a1f24d,0px 4px 8px 0px #04a1f24d,0px 0px 0px .5px #04a1f21a,
    0px 0px 34px -12px #04a1f24d;
  --v2-elevation-overlay:
    0px 16px 32px 0px #04a1f24d,0px 8px 16px 0px #04a1f24d,0px 0px 0px .5px #04a1f21a,
    0px 0px 46px -14px #04a1f266;

  /* ---------- sintaxis (si el motor las usa) ---------- */
  --v2-syntax-keyword:#9261f3;
  --v2-syntax-string:#06dbfa;
  --v2-syntax-function:#4ecdfb;
  --v2-syntax-variable:#ecf2f8;
  --v2-syntax-property:#a3b8d1;
  --v2-syntax-comment:#41597a;
  --v2-syntax-operator:#2b61ec;
  --v2-syntax-number:#8fe0ff;
  --v2-syntax-type:#d8ccff;
  --v2-syntax-constant:#b18dff;
  --v2-syntax-tag:#06dbfa;
  --v2-syntax-attribute:#a3b8d1;
  --v2-syntax-builtin:#4ecdfb;
}

/* fuerza la aplicacion aunque el motor reescriba :root en caliente */
:root[data-theme]{ color-scheme:dark; }

/* Blindo de las superficies. El motor las declara en [data-color-scheme=dark],
   que tiene la MISMA especificidad que :root (0,1,0); aqui gana solo por orden
   del documento. Con !important ya no depende de ese orden ni de que el motor
   reescriba los tokens en caliente. Sin esto, el fondo volveria a quedar opaco. */
:root,
:root[data-color-scheme=dark],
:root[data-color-scheme=light]{
  --v2-background-bg-deep:rgba(2,8,16,.48) !important;
  --v2-background-bg-base:rgba(6,17,32,.52) !important;
  --v2-background-bg-layer-01:rgba(7,21,37,.56) !important;
  --v2-background-bg-layer-02:rgba(10,28,48,.60) !important;
  --v2-background-bg-layer-03:rgba(14,36,57,.64) !important;
  --v2-background-bg-layer-04:rgba(18,44,69,.68) !important;
}

/* fondo ZIPLASH detras del IDE.
   En CSS el primer background-image es la capa de ARRIBA, asi que aqui va
   primero el velo oscuro y debajo la fotografia del cosmos. El color de
   fondo de <html> lo pinta el propio motor con --v2-background-bg-deep.
   Velo medido sobre ziplash-bg-2560.jpg: el p95 del lienzo queda en ~88/255,
   con contraste 6.4:1 para el texto hielo (#ecf2f8), o sea por encima de AA. */
html{
  background-color:#01060c !important;
  background-image:
    radial-gradient(1200px 700px at 78% -12%,rgba(4,161,242,.10),transparent 62%),
    radial-gradient(900px 620px at 4% 108%,rgba(146,97,243,.09),transparent 64%),
    linear-gradient(180deg,rgba(1,6,12,.34) 0%,rgba(1,6,12,.22) 42%,rgba(1,6,12,.50) 100%),
    url("/assets/ziplash-bg-2560.jpg") !important;
  background-size:auto,auto,auto,cover !important;
  background-position:center,center,center,center !important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat !important;
  background-attachment:fixed,fixed,fixed,fixed !important;
}

/* si el motor pinta un fondo propio en <body>, se deja ver el de Ziplash */
body{background-color:transparent !important}

/* acentos finos */
::selection{background:rgba(6,219,250,.30) !important;color:#fff !important}
*:focus-visible{outline-color:#04a1f2 !important}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#030b16}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#06dbfa,#9261f3);
  border-radius:11px;border:2px solid #030b16;
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#04a1f2,#7442d4)}

/* barras de desplazamiento internas con scroll-view propio */
[data-theme] .scroll-view__thumb{
  background:linear-gradient(180deg,#06dbfa,#9261f3) !important;
  border-radius:11px !important;
}