/* ==========================================================================
   sakura-bg.css — fondo de sakura para el sistema CADI
   --------------------------------------------------------------------------
   Capa decorativa opcional. NO incluye estilos de login ni de formularios:
   aquí sólo vive el escenario de fondo.

   Se activa con:
       <html data-bg="sakura" data-theme="hanami">

   Todo el escenario vive dentro de .sk-scene, que se pinta en z-index -1:
   así nunca tapa el contenido y no hay que tocar los z-index existentes.
   ========================================================================== */

/* ---------------------------------------------------------- 1. Paleta */

html[data-bg="sakura"] {
    --sk-bg-1: #FFF6F4;
    --sk-bg-2: #F9DEE5;
    --sk-bg-3: #EDB9CA;
    --sk-bg-glow1: rgba(255, 255, 255, .92);
    --sk-bg-glow2: rgba(255, 202, 216, .60);
    --sk-bokeh-c: rgba(255, 255, 255, .90);
    --sk-bokeh-warm: rgba(255, 222, 212, .55);
    --sk-bokeh-op: .55;
    --sk-vignette: rgba(150, 78, 104, .17);

    --petal-a: #FBD0DC;
    --petal-b: #EFA8BE;
    --petal-c: #D87492;
    --petal-core: #A94E67;

    --bloom-op: .95;
}

/* ------------------------------------------------------- 2. Escenario */

.sk-scene {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: var(--sk-bg-1);
}

/* Si por algún motivo el escenario quedara en un tema no-sakura, se oculta */
html:not([data-bg="sakura"]) .sk-scene { display: none !important; }

/* Gradiente base */
.sk-scene .bg-grad {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(120% 90% at 18% 6%, var(--sk-bg-glow1) 0%, transparent 58%),
        radial-gradient(100% 80% at 82% 94%, var(--sk-bg-glow2) 0%, transparent 62%),
        linear-gradient(160deg, var(--sk-bg-1) 0%, var(--sk-bg-2) 46%, var(--sk-bg-3) 100%);
}

/* Viñeta: hunde las esquinas para que las tarjetas floten */
.sk-scene .bg-grad::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(115% 95% at 50% 48%, transparent 34%, var(--sk-vignette) 100%);
}

/* Grano fotográfico */
.sk-scene .bg-atmos {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.sk-scene .bg-atmos::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    opacity: .05;
}

/* Luz de amanecer */
html[data-bg="sakura"][data-theme="hanami"] .sk-scene .bg-atmos::after {
    content: '';
    position: absolute;
    top: -44vh;
    left: -24vw;
    width: 78vw;
    height: 78vw;
    max-width: 1150px;
    max-height: 1150px;
    background: radial-gradient(circle,
            rgba(255, 255, 255, .80) 0%,
            rgba(255, 240, 232, .30) 36%,
            rgba(255, 214, 206, .09) 60%,
            transparent 78%);
}

/* Bokeh */
.sk-scene .bg-bokeh {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: var(--sk-bokeh-op);
    overflow: hidden;
    background-image:
        radial-gradient(circle at 74% 16%, var(--sk-bokeh-warm) 0%, transparent 24%),
        radial-gradient(circle at 16% 80%, var(--sk-bokeh-warm) 0%, transparent 21%);
}

.sk-scene .bg-bokeh::before,
.sk-scene .bg-bokeh::after {
    content: '';
    position: absolute;
    inset: -12%;
    will-change: transform;
}

.sk-scene .bg-bokeh::before {
    background:
        radial-gradient(circle at 9% 16%, var(--sk-bokeh-c) 0%, transparent 24%),
        radial-gradient(circle at 24% 71%, var(--sk-bokeh-c) 0%, transparent 18%),
        radial-gradient(circle at 47% 28%, var(--sk-bokeh-c) 0%, transparent 28%),
        radial-gradient(circle at 68% 84%, var(--sk-bokeh-c) 0%, transparent 21%),
        radial-gradient(circle at 86% 41%, var(--sk-bokeh-c) 0%, transparent 25%),
        radial-gradient(circle at 33% 95%, var(--sk-bokeh-c) 0%, transparent 15%),
        radial-gradient(circle at 94% 8%, var(--sk-bokeh-c) 0%, transparent 19%);
    animation: skBokehA 46s ease-in-out infinite alternate;
}

.sk-scene .bg-bokeh::after {
    background:
        radial-gradient(circle at 15% 52%, var(--sk-bokeh-c) 0%, transparent 24%),
        radial-gradient(circle at 39% 12%, var(--sk-bokeh-c) 0%, transparent 30%),
        radial-gradient(circle at 58% 63%, var(--sk-bokeh-c) 0%, transparent 21%),
        radial-gradient(circle at 76% 22%, var(--sk-bokeh-c) 0%, transparent 26%),
        radial-gradient(circle at 91% 67%, var(--sk-bokeh-c) 0%, transparent 33%),
        radial-gradient(circle at 4% 83%, var(--sk-bokeh-c) 0%, transparent 25%);
    opacity: .75;
    animation: skBokehB 62s ease-in-out infinite alternate;
}

@keyframes skBokehA {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-2.5%, 1.8%, 0) scale(1.06); }
}
@keyframes skBokehB {
    from { transform: translate3d(0, 0, 0) scale(1.04); }
    to   { transform: translate3d(2.2%, -2.4%, 0) scale(1); }
}

/* Capas de pétalos */
.sk-scene .petal-layer {
    position: absolute;
    inset: -44px;
    width: calc(100vw + 88px);
    height: calc(100vh + 88px);
    pointer-events: none;
    will-change: transform;
}

.sk-scene .petal-layer[data-layer="back"]  { z-index: 3; }
.sk-scene .petal-layer[data-layer="mid"]   { z-index: 4; }
.sk-scene .petal-layer[data-layer="motes"] { z-index: 6; }
.sk-scene .petal-layer[data-layer="front"] { z-index: 7; }
.sk-scene .petal-layer[data-layer="near"]  { z-index: 8; }

/* Racimos en los bordes — nunca árboles */
.sk-scene .bloom {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    opacity: var(--bloom-op);
}

.sk-scene .bloom svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-origin: 50% 50%;
    animation: skBloomBreath 9s ease-in-out infinite;
}

@keyframes skBloomBreath {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.035) rotate(.8deg); }
}

.sk-scene .bloom--tl {
    top: 0; left: 0;
    width: clamp(240px, 28vw, 440px);
    transform: translate(-30%, -34%) rotate(-12deg);
}
.sk-scene .bloom--tr {
    top: 0; right: 0;
    width: clamp(230px, 27vw, 420px);
    transform: translate(30%, -32%) rotate(104deg);
}
.sk-scene .bloom--bl {
    bottom: 0; left: 0;
    width: clamp(215px, 25vw, 390px);
    transform: translate(-32%, 34%) rotate(18deg);
}
.sk-scene .bloom--br {
    bottom: 0; right: 0;
    width: clamp(205px, 24vw, 375px);
    transform: translate(32%, 36%) rotate(-96deg);
}
.sk-scene .bloom--lm {
    top: 34%; left: 0;
    width: clamp(160px, 16vw, 250px);
    transform: translate(-52%, 0) rotate(-30deg);
}
.sk-scene .bloom--rm {
    top: 46%; right: 0;
    width: clamp(150px, 15vw, 240px);
    transform: translate(52%, 0) rotate(150deg);
}

.sk-scene .bloom--tl svg { animation-delay: 0s; }
.sk-scene .bloom--tr svg { animation-delay: -2.4s; }
.sk-scene .bloom--bl svg { animation-delay: -4.1s; }
.sk-scene .bloom--br svg { animation-delay: -1.3s; }
.sk-scene .bloom--lm svg { animation-delay: -6.2s; }
.sk-scene .bloom--rm svg { animation-delay: -3.5s; }

/* ------------------------------------------------- 3. Ajustes sobre la UI

   El cristal de los paneles está calibrado sobre el fondo topológico (oscuro).
   Sobre un fondo claro y rosado, el mismo 75 % de blanco se lava. Estas reglas
   suben un poco la opacidad SÓLO cuando el fondo sakura está activo; el tema
   topológico no se toca.
   ------------------------------------------------------------------------- */

html[data-bg="sakura"] .unified-header {
    background: rgba(255, 255, 255, .84);
}

html[data-bg="sakura"] .panel-admin-content {
    background: rgba(255, 255, 255, .88);
}

/* En los paneles de trabajo hay mucho contenido encima: el degradado se
   aclara para que el texto no pierda contraste. Los pétalos siguen igual. */
html[data-bg="sakura"] body.dashboard-page-body .sk-scene .bg-grad {
    background:
        radial-gradient(120% 90% at 18% 6%, rgba(255, 255, 255, .96) 0%, transparent 60%),
        radial-gradient(100% 80% at 82% 94%, rgba(255, 214, 226, .42) 0%, transparent 64%),
        linear-gradient(160deg, #FFFCFB 0%, #FBEAEF 46%, #F2D5DE 100%);
}

html[data-bg="sakura"] body.dashboard-page-body .sk-scene .bg-grad::before {
    background: radial-gradient(115% 95% at 50% 48%, transparent 40%, rgba(150, 78, 104, .10) 100%);
}

/* ------------------------------------------------- 4. Responsive / a11y */

@media (max-width: 640px) {
    .sk-scene .bloom--lm,
    .sk-scene .bloom--rm { display: none; }

    .sk-scene .bloom { opacity: calc(var(--bloom-op) * .55); }
}

@media (max-height: 560px) and (orientation: landscape) {
    .sk-scene .bloom--bl,
    .sk-scene .bloom--br,
    .sk-scene .bloom--lm,
    .sk-scene .bloom--rm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sk-scene .bg-bokeh::before,
    .sk-scene .bg-bokeh::after,
    .sk-scene .bloom svg {
        animation: none !important;
    }
}