/* ORCA CTI — "Frosted Glass" layer (iOS / One UI 9 inspired)
   Loaded after styles.css. Active while <html data-glass="on">; every knob is
   a CSS variable the Apariencia view (js/appearance.js) sets live:
     --glass-blur   backdrop blur radius (0–40px)
     --glass-alpha  panel opacity (0.20–0.90)
   plus data-wallpaper="aurora|violeta|oceano|atardecer|grafito" and
   data-motion="off" to freeze the animated background. Semantic colours
   (TLP, severity) are untouched — only surfaces become glass. */

:root {
  --glass-blur: 22px;
  --glass-alpha: 0.55;
  --glass-sat: 175%;
  --glass-radius: 22px;
  --glass-radius-sm: 14px;
  /* light glass */
  --glass-rgb: 255 255 255;
  --glass-inner: rgb(255 255 255 / 0.42);
  --glass-inner-hover: rgb(255 255 255 / 0.62);
  --glass-hairline: rgb(15 23 42 / 0.08);
  --glass-edge: rgb(255 255 255 / 0.65);
  --glass-shadow: 0 10px 40px -12px rgb(30 41 99 / 0.22), 0 2px 6px rgb(30 41 99 / 0.05);
  --glass-shine: linear-gradient(180deg, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0) 42%);
  --glass-overlay: rgb(15 20 45 / 0.28);
  /* wallpaper (aurora, light) */
  --wp-base: linear-gradient(135deg, #dfe8ff 0%, #ece3ff 48%, #dcf0ff 100%);
  --wp-a: #6f9dff; --wp-b: #b48cff; --wp-c: #6fd8ff;
}

html[data-theme="dark"] {
  --glass-alpha: 0.42;
  --glass-rgb: 20 26 52;
  --glass-inner: rgb(255 255 255 / 0.055);
  --glass-inner-hover: rgb(255 255 255 / 0.10);
  --glass-hairline: rgb(255 255 255 / 0.09);
  --glass-edge: rgb(255 255 255 / 0.14);
  --glass-shadow: 0 14px 44px -14px rgb(0 0 0 / 0.55), 0 2px 8px rgb(0 0 0 / 0.20);
  --glass-shine: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0) 40%);
  --glass-overlay: rgb(3 6 20 / 0.45);
  --wp-base: linear-gradient(140deg, #0a1033 0%, #1a1452 46%, #0b2148 100%);
  --wp-a: #2e63ff; --wp-b: #8b3ffc; --wp-c: #00a6ff;
}

/* ---- Wallpaper presets ---- */
html[data-wallpaper="violeta"] { --wp-base: linear-gradient(135deg, #efe4ff, #f7e6fb 50%, #e3e4ff); --wp-a: #a774ff; --wp-b: #ff8fd1; --wp-c: #7d8cff; }
html[data-theme="dark"][data-wallpaper="violeta"] { --wp-base: linear-gradient(140deg, #170b36, #2c0f4d 50%, #160f3d); --wp-a: #8b3ffc; --wp-b: #d1349a; --wp-c: #4b4dff; }
html[data-wallpaper="oceano"] { --wp-base: linear-gradient(135deg, #d9f3f6, #dcecff 50%, #d8f7ec); --wp-a: #38c6d9; --wp-b: #4f8cff; --wp-c: #3ddc97; }
html[data-theme="dark"][data-wallpaper="oceano"] { --wp-base: linear-gradient(140deg, #04202c, #062a4a 50%, #03261f); --wp-a: #0fa3b9; --wp-b: #1f5fd6; --wp-c: #0fbf7a; }
html[data-wallpaper="atardecer"] { --wp-base: linear-gradient(135deg, #ffe9dc, #ffe1ec 50%, #fff1d6); --wp-a: #ff9a62; --wp-b: #ff6fa8; --wp-c: #ffcc4d; }
html[data-theme="dark"][data-wallpaper="atardecer"] { --wp-base: linear-gradient(140deg, #2a0f1c, #3a1230 50%, #2b1a0b); --wp-a: #e8603c; --wp-b: #c2337a; --wp-c: #d99a1e; }
html[data-wallpaper="grafito"] { --wp-base: linear-gradient(135deg, #eceff4, #e6e9ef 50%, #f2f3f6); --wp-a: #b8c2d4; --wp-b: #cfd5e0; --wp-c: #a9b6cc; }
html[data-theme="dark"][data-wallpaper="grafito"] { --wp-base: linear-gradient(140deg, #0d1017, #141821 50%, #0f1219); --wp-a: #2b3445; --wp-b: #3a4253; --wp-c: #222a38; }

#glass-wallpaper { display: none; }
html[data-glass="on"] #glass-wallpaper {
  display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: var(--wp-base); pointer-events: none;
}
#glass-wallpaper .blob {
  position: absolute; width: 58vmax; height: 58vmax; border-radius: 50%;
  filter: blur(70px); opacity: 0.62; mix-blend-mode: normal; will-change: transform;
}
html[data-theme="dark"] #glass-wallpaper .blob { opacity: 0.55; }
#glass-wallpaper .blob.a { background: radial-gradient(circle at 35% 35%, var(--wp-a), transparent 65%); top: -18vmax; left: -12vmax; animation: orca-drift-a 34s ease-in-out infinite alternate; }
#glass-wallpaper .blob.b { background: radial-gradient(circle at 60% 40%, var(--wp-b), transparent 65%); bottom: -24vmax; right: -16vmax; animation: orca-drift-b 41s ease-in-out infinite alternate; }
#glass-wallpaper .blob.c { background: radial-gradient(circle at 50% 50%, var(--wp-c), transparent 65%); top: 30%; left: 38%; width: 40vmax; height: 40vmax; animation: orca-drift-c 47s ease-in-out infinite alternate; }
/* a faint film grain keeps large blurred gradients from banding */
#glass-wallpaper::after {
  content: ""; position: absolute; inset: 0; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes orca-drift-a { to { transform: translate(14vmax, 10vmax) scale(1.12); } }
@keyframes orca-drift-b { to { transform: translate(-16vmax, -8vmax) scale(1.08); } }
@keyframes orca-drift-c { to { transform: translate(-12vmax, 12vmax) scale(0.9); } }
html[data-motion="off"] #glass-wallpaper .blob { animation: none; }
@media (prefers-reduced-motion: reduce) { #glass-wallpaper .blob { animation: none; } }

/* ---- Page canvas: let the wallpaper through ---- */
html[data-glass="on"] body.bg-slate-950,
html[data-glass="on"] main.bg-slate-950 { background: transparent !important; }
html[data-glass="on"] body { background: transparent; }

/* ---- Primary glass surfaces ---- */
html[data-glass="on"] .cyber-card,
html[data-glass="on"] #app-sidebar,
html[data-glass="on"] header.h-16,
html[data-glass="on"] .toast,
html[data-glass="on"] .glass {
  background: rgb(var(--glass-rgb) / var(--glass-alpha)) !important;
  background-image: var(--glass-shine) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-color: var(--glass-edge) !important;
}
html[data-glass="on"] .cyber-card {
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .2s ease;
}
html[data-glass="on"] .cyber-card:hover { box-shadow: 0 18px 50px -16px rgb(30 41 99 / 0.30), inset 0 1px 0 var(--glass-edge); }
/* Nested glass doesn't need its own blur (the parent already blurred). */
html[data-glass="on"] .cyber-card .cyber-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-inner) !important; box-shadow: none; }

html[data-glass="on"] header.h-16 { border-bottom: 1px solid var(--glass-edge) !important; box-shadow: 0 1px 0 var(--glass-hairline); }
html[data-glass="on"] #app-sidebar { border-right: 1px solid var(--glass-edge) !important; }
html[data-glass="on"] .toast { border-radius: 18px; box-shadow: var(--glass-shadow); }

/* ---- Inner surfaces (inputs, table heads, wells) become clear glass ---- */
html[data-glass="on"] .bg-slate-950:not(body):not(main),
html[data-glass="on"] .bg-slate-950\/80, html[data-glass="on"] .bg-slate-950\/60, html[data-glass="on"] .bg-slate-950\/50,
html[data-glass="on"] .bg-slate-900:not(#app-sidebar), html[data-glass="on"] .bg-slate-900\/95:not(header),
html[data-glass="on"] .bg-slate-900\/90, html[data-glass="on"] .bg-slate-900\/80, html[data-glass="on"] .bg-slate-900\/70,
html[data-glass="on"] .bg-slate-900\/60, html[data-glass="on"] .bg-slate-900\/40 { background-color: var(--glass-inner) !important; }
/* .bg-white stays opaque on purpose: it backs QR codes (MFA enrolment). */
html[data-glass="on"] .bg-slate-800, html[data-glass="on"] .bg-slate-800\/60,
html[data-glass="on"] .bg-slate-800\/40, html[data-glass="on"] .bg-slate-800\/30 { background-color: var(--glass-inner-hover) !important; }
html[data-glass="on"] .hover\:bg-slate-800:hover, html[data-glass="on"] .hover\:bg-slate-700:hover,
html[data-glass="on"] .hover\:bg-slate-800\/40:hover { background-color: rgb(var(--glass-rgb) / 0.75) !important; }
html[data-theme="dark"][data-glass="on"] .hover\:bg-slate-800:hover,
html[data-theme="dark"][data-glass="on"] .hover\:bg-slate-700:hover,
html[data-theme="dark"][data-glass="on"] .hover\:bg-slate-800\/40:hover { background-color: rgb(255 255 255 / 0.12) !important; }

html[data-glass="on"] .border-slate-800, html[data-glass="on"] .border-slate-800\/80, html[data-glass="on"] .border-slate-800\/60,
html[data-glass="on"] .border-slate-700, html[data-glass="on"] .border-slate-700\/80, html[data-glass="on"] .border-slate-700\/70,
html[data-glass="on"] .divide-slate-800\/60 > * + * { border-color: var(--glass-hairline) !important; }

html[data-glass="on"] table tbody tr:hover { background: rgb(var(--glass-rgb) / 0.45); }
html[data-theme="dark"][data-glass="on"] table tbody tr:hover { background: rgb(255 255 255 / 0.05); }

/* ---- Controls: One UI pills and round icon buttons ---- */
html[data-glass="on"] button:not(.nav-item):not(.sidebar-section-toggle):not(.cyber-card) { border-radius: 999px; }
html[data-glass="on"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-glass="on"] select, html[data-glass="on"] textarea {
  border-radius: var(--glass-radius-sm) !important;
  border-color: var(--glass-hairline) !important;
}
html[data-glass="on"] .cyber-badge { border-radius: 10px; padding: 2px 9px; }
html[data-glass="on"] .skeleton { background: var(--glass-inner-hover); border-radius: var(--glass-radius-sm); }

/* ---- Sidebar: rounded pills instead of a left rule ---- */
html[data-glass="on"] #app-sidebar .nav-item { border-left: 0; border-radius: 14px; margin: 2px 0; }
html[data-glass="on"] #app-sidebar .nav-item.active {
  border-left: 0; background: rgb(var(--glass-rgb) / 0.85);
  box-shadow: 0 4px 14px -6px rgb(37 99 235 / 0.45), inset 0 0 0 1px rgb(59 130 246 / 0.35);
}
html[data-theme="dark"][data-glass="on"] #app-sidebar .nav-item.active { background: rgb(59 130 246 / 0.22); }
html[data-glass="on"] #app-sidebar .nav-item:hover { background: rgb(var(--glass-rgb) / 0.55); }
html[data-theme="dark"][data-glass="on"] #app-sidebar .nav-item:hover { background: rgb(255 255 255 / 0.07); }

/* ---- Modals: dim + blur the page behind, dialog is glass ---- */
html[data-glass="on"] .bg-black\/70 {
  background-color: var(--glass-overlay) !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.6)); backdrop-filter: blur(calc(var(--glass-blur) * 0.6));
}
html[data-glass="on"] .bg-black\/70 > div {
  border-radius: 26px !important;
  background: rgb(var(--glass-rgb) / max(var(--glass-alpha), 0.72)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow);
  animation: orca-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes orca-pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- View transitions ---- */
html[data-glass="on"] main > section:not(.hidden) { animation: orca-rise .32s cubic-bezier(.2,.8,.2,1); }
@keyframes orca-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html[data-motion="off"] main > section:not(.hidden),
html[data-motion="off"] .bg-black\/70 > div { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  main > section:not(.hidden), .bg-black\/70 > div { animation: none !important; }
}

/* ---- No backdrop-filter support: keep legibility with opaque-ish panels ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-glass="on"] .cyber-card, html[data-glass="on"] #app-sidebar, html[data-glass="on"] header.h-16 {
    background: rgb(var(--glass-rgb) / 0.92) !important;
  }
}

/* ---- Apariencia view controls ---- */
.ap-range { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; }
.ap-range::-webkit-slider-runnable-track { height: 30px; border-radius: 999px; background: var(--glass-inner-hover); box-shadow: inset 0 0 0 1px var(--glass-hairline); }
.ap-range::-moz-range-track { height: 30px; border-radius: 999px; background: var(--glass-inner-hover); box-shadow: inset 0 0 0 1px var(--glass-hairline); }
.ap-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .25); border: 0; }
.ap-range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .25); border: 0; }
.ap-swatch { width: 64px; height: 64px; border-radius: 20px; border: 2px solid transparent; cursor: pointer; position: relative; overflow: hidden; transition: transform .2s ease, border-color .2s ease; }
.ap-swatch:hover { transform: translateY(-2px); }
.ap-swatch.is-active { border-color: #3b82f6; box-shadow: 0 0 0 3px rgb(59 130 246 / 0.25); }
.ap-swatch[data-wp="aurora"] { background: radial-gradient(circle at 25% 25%, #6f9dff, transparent 60%), radial-gradient(circle at 80% 80%, #b48cff, transparent 60%), #e4e8ff; }
.ap-swatch[data-wp="violeta"] { background: radial-gradient(circle at 25% 25%, #a774ff, transparent 60%), radial-gradient(circle at 80% 80%, #ff8fd1, transparent 60%), #f1e6ff; }
.ap-swatch[data-wp="oceano"] { background: radial-gradient(circle at 25% 25%, #38c6d9, transparent 60%), radial-gradient(circle at 80% 80%, #3ddc97, transparent 60%), #dcf1f6; }
.ap-swatch[data-wp="atardecer"] { background: radial-gradient(circle at 25% 25%, #ff9a62, transparent 60%), radial-gradient(circle at 80% 80%, #ff6fa8, transparent 60%), #ffeae0; }
.ap-swatch[data-wp="grafito"] { background: radial-gradient(circle at 25% 25%, #b8c2d4, transparent 60%), radial-gradient(circle at 80% 80%, #8d99ae, transparent 60%), #eceff4; }
.ap-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--glass-inner-hover); box-shadow: inset 0 0 0 1px var(--glass-hairline); gap: 2px; }
.ap-seg button { padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; color: inherit; opacity: .75; }
.ap-seg button.is-active { background: rgb(var(--glass-rgb) / 0.95); opacity: 1; box-shadow: 0 2px 8px rgb(0 0 0 / .12); }
html[data-theme="dark"] .ap-seg button.is-active { background: rgb(255 255 255 / 0.16); }
.ap-preview { position: relative; height: 150px; border-radius: 24px; overflow: hidden; background: var(--wp-base); }
.ap-preview .blob { position: absolute; width: 140px; height: 140px; border-radius: 50%; filter: blur(30px); opacity: .8; }
.ap-preview .blob.a { background: var(--wp-a); top: -30px; left: -20px; }
.ap-preview .blob.b { background: var(--wp-b); bottom: -40px; right: -10px; }
.ap-preview .ap-preview-card {
  position: absolute; inset: 26px 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  background: rgb(var(--glass-rgb) / var(--glass-alpha)); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  font-weight: 700; letter-spacing: -0.01em;
}

/* ---- Header brand: never wrap the wordmark; drop the edition chip on phones ---- */
header .font-extrabold.tracking-wider { white-space: nowrap; }
@media (max-width: 640px) {
  header span.font-mono.font-bold { display: none; }
}