/* ==========================================================================
   Marca Saucedo: carbón #1E2226, gris #5B636B, naranja #F26A21.
   Logotipo (LogoSaucedo.razor) y la "s." animada del login (LogoS.razor).
   ========================================================================== */

:root {
    --marca-carbon: #1E2226;
    --marca-gris: #5B636B;
    --marca-naranja: #F26A21;

    --logo-palabra: var(--marca-carbon);
    --logo-sub: var(--marca-gris);
    --logo-s: var(--marca-carbon);
}

html.dark {
    --logo-palabra: #ffffff;
    --logo-sub: #a3abb4;
    --logo-s: #ffffff;
}

/* --------------------------------------------------------------------------
   Botones principales. Tailwind tiene "blue" = naranja (App.razor), pero el
   botón principal va en carbón como la palabra "saucedo", y el naranja queda
   de acento (como el punto). En oscuro, el carbón se perdería: va naranja.
   ":root" sube la especificidad para ganarle al CSS que inyecta Tailwind.
   -------------------------------------------------------------------------- */

:root .bg-blue-600 { background-color: var(--marca-carbon); }
:root .hover\:bg-blue-700:hover { background-color: #3a4047; }
html.dark .bg-blue-600 { background-color: var(--marca-naranja); }
html.dark .hover\:bg-blue-700:hover { background-color: #ff7d36; }

/* Enlaces sueltos sin clase (texto de ayuda, etc.): naranja oscuro legible. */
a:not([class]) { color: #C9520E; }
html.dark a:not([class]) { color: #ff9a5c; }

/* Selección de texto y foco de teclado con la marca. */
::selection { background: rgb(242 106 33 / .25); }
:focus-visible { outline-color: var(--marca-naranja); }

.ss-logo-palabra { fill: var(--logo-palabra); }
.ss-logo-sub { fill: var(--logo-sub); }
.ss-logo-punto,
.ss-s-punto { fill: var(--marca-naranja); }

.ss-s-trazo { fill: var(--logo-s); }

/* Sobre el panel carbón del login la s siempre es blanca. */
.ss-sobre-carbon { --logo-s: #ffffff; --logo-palabra: #ffffff; --logo-sub: #a3abb4; }

/* --------------------------------------------------------------------------
   Animación del login
   0.0–1.4s  el contorno de la s se dibuja
   1.1–1.7s  se rellena
   1.6–2.0s  el punto cae
   2.0s      aterriza: se aplasta, rebota y salpica gotas + onda
   -------------------------------------------------------------------------- */

.ss-logo-s { overflow: visible; }

.ss-logo-s-animado .ss-s-trazo {
    stroke: var(--logo-s);
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    fill-opacity: 0;
    animation:
        ss-s-dibujar 1.4s cubic-bezier(.65, 0, .35, 1) .15s forwards,
        ss-s-rellenar .6s ease-out 1.1s forwards;
}

@keyframes ss-s-dibujar {
    to { stroke-dashoffset: 0; }
}

@keyframes ss-s-rellenar {
    to { fill-opacity: 1; stroke-width: 0; }
}

.ss-logo-s-animado .ss-s-punto {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ss-punto-cae 1.05s linear 1.6s both;
}

/* Cae acelerando, se aplasta al tocar, rebota un poco y se asienta. */
@keyframes ss-punto-cae {
    0%   { transform: translateY(-90px) scale(.9, 1.15); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    8%   { opacity: 1; }
    38%  { transform: translateY(0) scale(1.35, .55); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
    55%  { transform: translateY(-9px) scale(.88, 1.15); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
    70%  { transform: translateY(0) scale(1.12, .88); }
    85%  { transform: translateY(0) scale(.97, 1.03); }
    100% { transform: translateY(0) scale(1, 1); opacity: 1; }
}

.ss-gotas circle {
    fill: var(--marca-naranja);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.ss-logo-s-animado .ss-gotas circle {
    animation: ss-gota .75s cubic-bezier(.15, .7, .4, 1) var(--retraso, 2.05s) both;
}

/* Sale disparada y luego cae por "gravedad" mientras se encoge. */
@keyframes ss-gota {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    55%  { opacity: 1; transform: translate(calc(var(--dx) * .8), var(--dy)) scale(.9); }
    100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 18px)) scale(.3); }
}

.ss-onda {
    fill: none;
    stroke: var(--marca-naranja);
    stroke-width: 1.2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.ss-logo-s-animado .ss-onda { animation: ss-onda .7s ease-out 2.0s both; }

@keyframes ss-onda {
    0%   { opacity: .9; transform: scale(.3); }
    100% { opacity: 0; transform: scale(2.6); }
}

/* --------------------------------------------------------------------------
   Modo bucle (pantallas de carga): la misma secuencia comprimida en 2.6s,
   se desvanece al final y vuelve a empezar.
   -------------------------------------------------------------------------- */

.ss-logo-s-bucle .ss-s-trazo {
    stroke: var(--logo-s);
    stroke-linejoin: round;
    stroke-dasharray: 1;
    animation: ss-s-bucle 2.6s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes ss-s-bucle {
    0%   { stroke-dashoffset: 1; stroke-width: 1.6; fill-opacity: 0; opacity: 1; }
    38%  { stroke-dashoffset: 0; stroke-width: 1.6; fill-opacity: 0; }
    50%  { stroke-dashoffset: 0; stroke-width: 0; fill-opacity: 1; }
    88%  { stroke-dashoffset: 0; stroke-width: 0; fill-opacity: 1; opacity: 1; }
    100% { stroke-dashoffset: 0; stroke-width: 0; fill-opacity: 1; opacity: 0; }
}

.ss-logo-s-bucle .ss-s-punto {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ss-punto-bucle 2.6s linear infinite;
}
@keyframes ss-punto-bucle {
    0%, 48% { transform: translateY(-90px); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    50%  { opacity: 1; }
    62%  { transform: translateY(0) scale(1.35, .55); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
    68%  { transform: translateY(-7px) scale(.9, 1.12); }
    74%  { transform: translateY(0) scale(1.08, .92); }
    80%  { transform: translateY(0) scale(1, 1); opacity: 1; }
    88%  { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(0); opacity: 0; }
}

.ss-logo-s-bucle .ss-gotas circle { animation: ss-gota-bucle 2.6s cubic-bezier(.15, .7, .4, 1) infinite; }
@keyframes ss-gota-bucle {
    0%, 61% { opacity: 0; transform: translate(0, 0) scale(1); }
    62%  { opacity: 1; transform: translate(0, 0) scale(1); }
    71%  { opacity: 1; transform: translate(calc(var(--dx) * .8), var(--dy)) scale(.9); }
    82%, 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 18px)) scale(.3); }
}

.ss-logo-s-bucle .ss-onda { animation: ss-onda-bucle 2.6s ease-out infinite; }
@keyframes ss-onda-bucle {
    0%, 61% { opacity: 0; transform: scale(.3); }
    62%  { opacity: .9; transform: scale(.3); }
    80%, 100% { opacity: 0; transform: scale(2.6); }
}

/* --------------------------------------------------------------------------
   Intro de entrada (login → página principal): pantalla completa carbón con
   la s completa, saludo, y se abre como telón hacia arriba.
   -------------------------------------------------------------------------- */

/* Cubre la pantalla desde que se presiona "Entrar" hasta que la intro se pinta,
   para que no se asome el dashboard a medio cargar. */
html.intro-pendiente::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: var(--marca-carbon);
}

/* "Levantamos la cortina del taller": la intro es una cortina metálica de
   negocio (láminas acanaladas, rieles a los lados, barra con jaladera) que
   sube a jalones. El sonido lo sintetiza js/ui.js (intern.sonidoCortina) con
   los mismos tiempos: si cambias la animación, ajusta también allá. */
.ss-intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    --logo-s: #fff;
    background-color: #24282d;
    background-image:
        /* sombreado general: más oscuro arriba y en las orillas */
        linear-gradient(to right, rgb(0 0 0 / .35), transparent 12%, transparent 88%, rgb(0 0 0 / .35)),
        linear-gradient(to bottom, rgb(0 0 0 / .25), transparent 30%),
        /* láminas: brillo arriba, cuerpo, ranura oscura abajo (cada 18px) */
        repeating-linear-gradient(to bottom,
            #3a4047 0px, #2c3136 2px, #24282d 9px, #1f2327 15px, #121417 16px, #121417 18px);
    box-shadow: 0 18px 40px rgb(0 0 0 / .55);
    animation: ss-cortina-sube 1.5s linear 3.1s forwards;
}

/* Rieles laterales por donde corre la cortina. */
.ss-intro::before,
.ss-intro::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 14px;
    background: linear-gradient(to right, #0d0f11, #2e3338 45%, #0d0f11);
}
.ss-intro::before { left: 0; }
.ss-intro::after { right: 0; }

/* Sube a jalones como cortina real: jalón inicial, se atora tantito, agarra
   vuelo y frena arriba. */
@keyframes ss-cortina-sube {
    0%   { transform: translateY(0);       animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
    9%   { transform: translateY(-7%);     animation-timing-function: ease-out; }
    15%  { transform: translateY(-5.5%);   animation-timing-function: cubic-bezier(.4, 0, .7, 1); }
    34%  { transform: translateY(-24%);    animation-timing-function: ease-out; }
    39%  { transform: translateY(-23%);    animation-timing-function: cubic-bezier(.45, 0, .75, 1); }
    82%  { transform: translateY(-88%);    animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
    100% { transform: translateY(-100%); }
}

/* Barra inferior de la cortina con su jaladera y el candado ya abierto. */
.ss-cortina-barra {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    background: linear-gradient(to bottom, #4a5057, #2b2f34 40%, #1a1d20);
    border-top: 1px solid #5b626a;
    box-shadow: 0 -2px 6px rgb(0 0 0 / .4);
}
.ss-cortina-jaladera {
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 64px;
    height: 12px;
    margin-left: -32px;
    border: 3px solid #8a9199;
    border-top: 0;
    border-radius: 0 0 8px 8px;
}
/* Franja naranja de la marca pintada en la barra: avanza mientras carga. */
.ss-cortina-franja {
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 100%;
    background: var(--marca-naranja);
    transform-origin: left;
    animation: ss-grow-x 3.1s linear both;
}

.ss-intro-saludo {
    margin-top: 2rem;
    color: #fff;
    text-align: center;
    animation: ss-fade-up .7s var(--ss-ease) 2.3s backwards;
}
.ss-intro-saludo small {
    display: block;
    color: #a3abb4;
    letter-spacing: .35em;
    text-transform: uppercase;
    font-size: .7rem;
    font-weight: 600;
    margin-bottom: .4rem;
}


/* --------------------------------------------------------------------------
   Aviso de reconexión (App.razor, #components-reconnect-modal)
   -------------------------------------------------------------------------- */

.ss-reconexion {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9990;
    align-items: center;
    justify-content: center;
    background: rgb(20 22 25 / .55);
    backdrop-filter: blur(4px);
}
.ss-reconexion.components-reconnect-show,
.ss-reconexion.components-reconnect-failed,
.ss-reconexion.components-reconnect-rejected { display: flex; animation: ss-fade .25s ease-out; }

.ss-reconexion-caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 2.5rem;
    border-radius: 1rem;
    background: var(--marca-carbon);
    color: #fff;
    --logo-s: #fff;
    box-shadow: 0 20px 50px rgb(0 0 0 / .5);
    font-size: .9rem;
    text-align: center;
    animation: ss-modal .4s var(--ss-spring);
}
.ss-reconexion-caja p { display: none; }
.components-reconnect-show .ss-rc-mostrar,
.components-reconnect-failed .ss-rc-fallo,
.components-reconnect-rejected .ss-rc-rechazo { display: block; }
.ss-reconexion-caja button {
    display: block;
    margin: .75rem auto 0;
    padding: .5rem 1rem;
    border-radius: .5rem;
    background: var(--marca-naranja);
    color: #fff;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Respuestas de los bots (MarkdownSimple)
   -------------------------------------------------------------------------- */

.ss-md p { margin: 0 0 .15rem; line-height: 1.55; }
.ss-md .ss-md-h { font-weight: 700; margin-top: .5rem; color: inherit; }
.ss-md .ss-md-ul { margin: .25rem 0 .4rem 1.1rem; list-style: disc; }
.ss-md .ss-md-ul li { margin: .1rem 0; line-height: 1.5; }
.ss-md .ss-md-code { font-family: "IBM Plex Mono", monospace; font-size: .85em; background: rgb(30 34 38 / .07); padding: .05rem .3rem; border-radius: .3rem; }
.ss-md .ss-md-pre { font-family: "IBM Plex Mono", monospace; font-size: .8rem; background: #1E2226; color: #e4e6e8; padding: .75rem 1rem; border-radius: .6rem; overflow-x: auto; white-space: pre-wrap; margin: .4rem 0; }
html.dark .ss-md .ss-md-code { background: rgb(255 255 255 / .08); }
html.dark .ss-md .ss-md-pre { background: #0f1113; }

/* Cargas rápidas: el indicador aparece hasta los 150 ms para no parpadear. */
.ss-page > .ss-cargando,
.ss-cargando { animation: ss-fade .3s ease-out .15s backwards; }

/* El texto "Soluciones saucedo." entra después de que el punto aterriza. */
.ss-hero-tarde {
    animation: ss-fade-up .8s var(--ss-ease) 2.2s backwards;
}