/* ==========================================================================
   IPSmart Secret Key — capa de marca sobre el web vault
   Paleta canónica IPSmart (2026-08-24): violeta #7c3aed · indigo #4f46e5 ·
   cyan #06b6d4. Login 65/35 según el estándar de la casa.
   No se toca el JS de la bóveda: sólo tokens de color, tipografía y layout.
   ========================================================================== */

:root{
  --ipsk-violet:#7c3aed;
  --ipsk-indigo:#4f46e5;
  --ipsk-cyan:#06b6d4;
  --ipsk-magenta:#d946ef;
  --ipsk-os-bg:#05060f;
  --ipsk-ok:#34d399; --ipsk-warn:#fbbf24; --ipsk-err:#f87171; --ipsk-ia:#a78bfa;
  --ipsk-gradient:linear-gradient(135deg,var(--ipsk-violet) 0%,var(--ipsk-indigo) 45%,var(--ipsk-cyan) 100%);
  --ipsk-font:Inter,"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

/* --- 1. La escala de marca del vault pasa a violeta IPSmart ---------------- */
html.theme_light, html.theme_dark, html{
  --color-brand-050:#f5f3ff;
  --color-brand-100:#ede9fe;
  --color-brand-200:#ddd6fe;
  --color-brand-300:#c4b5fd;
  --color-brand-400:#a78bfa;
  --color-brand-500:#8b5cf6;
  --color-brand-600:#7c3aed;
  --color-brand-700:#6d28d9;
  --color-brand-800:#5b21b6;
  --color-brand-900:#4c1d95;
  --color-brand-950:#2e1065;
}

/* Escala antigua (tripletas RGB). En claro se usa #6d28d9 para que el texto
   pequeño sobre blanco pase AA; en oscuro, violeta claro. */
html.theme_light{
  --color-primary-100:237 233 254;
  --color-primary-300:167 139 250;
  --color-primary-600:109 40 217;
  --color-primary-700:91 33 182;
}
html.theme_dark{
  --color-primary-100:76 29 149;
  --color-primary-300:139 92 246;
  --color-primary-600:167 139 250;
  --color-primary-700:196 181 253;
}

/* --- 2. Tipografía de la casa --------------------------------------------- */
html,body,button,input,select,textarea,.tw-font-sans{ font-family:var(--ipsk-font) !important; }
body{ -webkit-font-smoothing:antialiased; }

/* --- 3. Login 65/35 -------------------------------------------------------
   `body.layout_frontend` es la clase que el vault pone en las pantallas sin
   sesión (login, registro, recuperación). Ahí, y sólo ahí, partimos la
   pantalla: escena a la izquierda, acceso a la derecha.                       */
.ipsk-hero{ display:none; }

body.layout_frontend{
  display:grid;
  grid-template-columns:65% 35%;
  min-height:100vh;
  background:var(--ipsk-os-bg);
}
body.layout_frontend > app-root{
  grid-column:2; grid-row:1;
  min-width:0; min-height:100vh;
  overflow-y:auto;
  background:var(--color-background,#fff);
}
html.theme_dark body.layout_frontend > app-root{ background:#0b0d1a; }

body.layout_frontend > .ipsk-hero{
  display:block;
  grid-column:1; grid-row:1;
  position:relative; overflow:hidden;
  background:
    radial-gradient(70% 60% at 30% 20%,rgba(124,58,237,.35),transparent 60%),
    radial-gradient(60% 60% at 80% 90%,rgba(6,182,212,.28),transparent 60%),
    radial-gradient(120% 120% at 15% 10%,#1b0f3a 0%,#0a0820 45%,#05060f 100%);
}
.ipsk-hero .ipsk-scene{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.85; pointer-events:none;
}
.ipsk-hero .ipsk-veil{
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(5,6,15,.65) 0%,rgba(5,6,15,.15) 45%,transparent 100%);
}
.ipsk-copy{
  position:absolute; left:clamp(32px,5vw,72px); bottom:clamp(40px,6vh,80px);
  right:clamp(32px,5vw,72px); color:#e8e9f3;
}
.ipsk-copy .ipsk-eyebrow{
  display:inline-block; margin-bottom:18px;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#c4b5fd;
}
.ipsk-copy h1{
  margin:0 0 16px; font-size:clamp(30px,3.4vw,48px); line-height:1.1;
  font-weight:700; letter-spacing:-.02em; color:#fff;
}
.ipsk-copy p{
  margin:0 0 24px; max-width:56ch;
  font-size:clamp(15px,1.15vw,18px); line-height:1.6; color:#b9bccd;
}
.ipsk-copy ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ipsk-copy li{
  display:flex; align-items:center; gap:12px;
  font-size:15px; color:#d5d7e5;
}
.ipsk-copy li::before{
  content:""; width:10px; height:10px; border-radius:3px; flex:0 0 auto;
  background:var(--ipsk-gradient);
}

/* --- 4. La tarjeta de acceso ---------------------------------------------- */
body.layout_frontend .new-logo-themed{ width:190px !important; height:auto; }

/* --- 5. Móvil: la escena estorba, el formulario manda --------------------- */
@media (max-width:768px){
  body.layout_frontend{ grid-template-columns:1fr; min-height:100dvh; }
  body.layout_frontend > .ipsk-hero{ display:none; }
  body.layout_frontend > app-root{ grid-column:1; }
}

/* --- 6. Marca dentro del vault -------------------------------------------
   Los componentes del layout anónimo traen el logotipo de Vaultwarden como
   SVG incrustado en el bundle: no se puede sustituir por archivo, así que se
   oculta y se pinta el nuestro de fondo. Los selectores son nombres de
   componente Angular (bit-landing-*), estables entre versiones.            */
bit-landing-header a{ width:212px !important; }
bit-landing-header bit-svg > svg{ display:none !important; }
bit-landing-header bit-svg{
  display:block !important;
  width:212px; height:48px;
  background:url("../images/logo.svg") no-repeat center/contain;
}
html.theme_dark bit-landing-header bit-svg{ background-image:url("../images/logo-white.svg"); }

/* La ilustración de la caja fuerte tampoco es nuestra: va el sello IPSmart */
bit-landing-hero bit-svg > svg{ display:none !important; }
bit-landing-hero bit-svg{
  display:block !important; width:100%; height:100%;
  background:url("../images/icon-white.svg") no-repeat center/contain;
}

/* El pie de atribución a Bitwarden/Vaultwarden se conserva (licencia AGPL),
   sólo se atenúa para que no compita con el formulario. */
bit-landing-footer{ opacity:.75; }

/* Las ilustraciones decorativas del vault (engranajes) quedan recortadas
   dentro del 35% y ensucian: fuera. */
bit-landing-layout div.md\:tw-block:has(> bit-svg){ display:none !important; }