/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
   MainLayout — CSS del shell.

   El layout lo gobierna MudBlazor (MudLayout + MudAppBar + MudDrawer +
   MudMainContent), así que aquí ya no vive nada de estructura.

   Se retiró en la limpieza del rediseño todo el CSS del shell viejo:
   .page, .sidebar (incluido el gradiente azul→morado que venía tal cual
   de la plantilla por defecto de Visual Studio y era el delator número
   uno de "app generada sin diseñar"), .top-row y sus media queries.

   Solo queda el encuadre de las pantallas sin shell (login, cambio de
   clave forzado y wizard de configuración), que no usan MudLayout.
   ============================================================ */

.page-login[b-h043qkfbcq] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
/* /Components/Pages/Login/Login.razor.rz.scp.css */
/* ============================================
   LOGIN — "Vidrio esmerilado"
   Elegido por el usuario el 2026-08-06 comparando seis propuestas.

   Ni un color escrito a mano: todo sale de los tokens --cw-login-* de
   wwwroot/css/theme.css, que traen su variante oscura. Cambiar el verde
   del login = tocar UN token, no este archivo.

   Truco central: dentro de .login-wrapper se reasigna la paleta primaria
   de MudBlazor al verde del login. Así MudTextField, MudButton y MudAvatar
   se tiñen solos, sin pelear con las clases internas de la librería.
   ============================================ */

.login-wrapper[b-qelvcm20id] {
    display: flex;
    /* "safe center" y no "center" a secas: cuando la tarjeta crece más que la
       pantalla —caso real: SQL caído, que suma dos avisos y dos botones— un
       centrado normal la desborda por ARRIBA y el logo, el usuario y la clave
       quedan fuera de alcance, justo cuando más falta hacen. Con safe, el
       exceso se va hacia abajo y se puede desplazar. El "center" de antes
       queda como respaldo para navegadores que no entienden la palabra. */
    align-items: center;
    align-items: safe center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: 1rem;
    position: relative;
    /* Solo horizontal: las burbujas ya se recortan solas dentro de .bubbles-bg,
       así que un overflow:hidden aquí no aportaba nada y sí impedía desplazar. */
    overflow-x: hidden;

    /* El login es la única pantalla verde del sistema */
    --mud-palette-primary: var(--cw-login-accent);
    --mud-palette-primary-rgb: var(--cw-login-accent-rgb);
    --mud-palette-primary-text: #ffffff;
    --mud-palette-primary-darken: var(--cw-login-accent-texto);
    --mud-palette-primary-lighten: var(--cw-login-accent-claro);
    --mud-palette-primary-hover: rgba(var(--cw-login-accent-rgb), 0.08);

    /* Fondo de agua: dos manchas del acento sobre el fondo del tema.
       El respaldo plano es para navegadores sin color-mix. */
    background: var(--mud-palette-background);
    background:
        radial-gradient(120% 90% at 12% 0%,
            color-mix(in srgb, var(--cw-login-accent) 14%, transparent) 0%, transparent 55%),
        radial-gradient(100% 80% at 92% 100%,
            color-mix(in srgb, var(--cw-login-accent) 8%, transparent) 0%, transparent 60%),
        var(--mud-palette-background);
}

/* === Tarjeta de cristal ===
   MudPaper es un componente hijo: necesita ::deep para recibir el estilo. */
[b-qelvcm20id] .login-card {
    width: 100%;
    max-width: var(--cw-login-card-width);
    padding: var(--cw-login-padding);
    border-radius: var(--cw-login-radius);
    position: relative;
    z-index: 1;
    animation: fadeInUp-b-qelvcm20id 0.5s ease-out;

    background: var(--cw-login-glass);
    border: 1px solid var(--cw-login-glass-border);
    box-shadow: var(--cw-login-shadow);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

@keyframes fadeInUp-b-qelvcm20id {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Campos y botón ===
   Esquinas rectas como la tarjeta, y el chip de la etiqueta flotante tiene
   que copiar el cristal o se ve un rectángulo blanco encima del borde. */
[b-qelvcm20id] .login-card .mud-input-outlined,
[b-qelvcm20id] .login-card .mud-input-outlined-border {
    border-radius: var(--cw-login-radius);
}

/* Densidad "Normal" del diseño aprobado: 49px de alto por campo.
   Los MudTextField se quedan en Margin.Dense (40px) porque Margin.Normal de
   MudBlazor se va a 56px y desalinea la etiqueta flotante; los 15px de relleno
   dan exactamente el alto del prototipo sin tocar el resto del componente. */
[b-qelvcm20id] .login-card .mud-input-outlined input {
    padding-top: 15px;
    padding-bottom: 15px;
}

[b-qelvcm20id] .login-card .mud-input-label-outlined.mud-input-label-inputcontrol {
    /* Verde más oscuro: el de marca da 3.7:1 sobre blanco y esto es texto
       pequeño, que WCAG exige a 4.5:1. */
    color: var(--cw-login-accent-texto);
}

/* Iconos de los campos en gris secundario (el verde se reserva para la
   etiqueta activa y el botón, que es la única acción de la pantalla). */
[b-qelvcm20id] .login-card .mud-input-adornment .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

/* Ojo de la contraseña: MudTextField ya gastó su único adorno en el candado,
   así que este botón se superpone. Los 12px salen de (49px de alto del campo
   - 26px del botón Small) / 2; si se cambia el relleno del campo de arriba,
   este número hay que recalcularlo con él. */
.campo-clave[b-qelvcm20id] {
    position: relative;
}

[b-qelvcm20id] .campo-clave .ojo-clave {
    position: absolute;
    top: 12px;
    right: 4px;
    z-index: 1;
    color: var(--mud-palette-text-secondary);
}

[b-qelvcm20id] .campo-clave .ojo-clave:hover {
    color: var(--cw-login-accent-texto);
}

[b-qelvcm20id] .campo-clave input {
    padding-right: 40px;
}

/* Botón: degradado, sin MAYÚSCULAS forzadas y más alto que el de fábrica.
   MudButton pinta background-color; el degradado va como background-image,
   que se dibuja encima, y el hover se resuelve con filter porque el cambio
   de color de fondo de MudBlazor quedaría tapado. */
[b-qelvcm20id] .login-boton {
    border-radius: var(--cw-login-radius);
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding-top: 13px;
    padding-bottom: 13px;
    background-image: linear-gradient(135deg, var(--cw-login-accent), var(--cw-login-accent-texto));
}

[b-qelvcm20id] .login-boton:hover:not(:disabled) {
    filter: brightness(0.94);
}

/* Chrome pinta de azul lavanda todo campo autocompletado y se lleva el
   cristal por delante. Se neutraliza con una sombra interior del color de
   la superficie; la transición eterna evita el parpadeo al enfocar. */
[b-qelvcm20id] .login-card input:-webkit-autofill,
[b-qelvcm20id] .login-card input:-webkit-autofill:hover,
[b-qelvcm20id] .login-card input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--mud-palette-surface) inset;
    -webkit-text-fill-color: var(--mud-palette-text-primary);
    caret-color: var(--mud-palette-text-primary);
    transition: background-color 9999s ease-in-out 0s;
}

/* === Ayuda dentro del mensaje de error === */
[b-qelvcm20id] .login-ayuda {
    color: var(--mud-palette-text-secondary);
    opacity: 0.95;
}

/* === Logo del negocio (viene de la configuración) === */
.login-logo-img[b-qelvcm20id] {
    width: 100%;
    max-width: 180px;
    max-height: 100px;
    height: auto;
    object-fit: contain;
    border-radius: var(--cw-login-radius);
}

/* === Burbujas de fondo (guiño al car wash) ===
   Mentoladas: mezcla del acento con blanco, no el acento puro, para que
   acompañen sin competir con el formulario ni con los errores. */
.bubbles-bg[b-qelvcm20id] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

[b-qelvcm20id] .bubbles-bg span {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 0;
    animation: floatBubble-b-qelvcm20id 13s infinite ease-in-out;
    background: #cdeee8;
    background: color-mix(in srgb, var(--cw-login-accent) 22%, #fff);
    border: 1.5px solid #9dded3;
    border-color: color-mix(in srgb, var(--cw-login-accent) 45%, #fff);
}

[b-qelvcm20id] .bubbles-bg span:nth-child(1) {
    width: 120px;
    height: 120px;
    left: 4%;
    bottom: -120px;
    animation-duration: 16s;
    animation-delay: 0s;
}

[b-qelvcm20id] .bubbles-bg span:nth-child(2) {
    width: 22px;
    height: 22px;
    left: 14%;
    bottom: -22px;
    animation-duration: 9s;
    animation-delay: 1.5s;
}

[b-qelvcm20id] .bubbles-bg span:nth-child(3) {
    width: 150px;
    height: 150px;
    left: 28%;
    bottom: -150px;
    animation-duration: 18s;
    animation-delay: 3s;
}

[b-qelvcm20id] .bubbles-bg span:nth-child(4) {
    width: 55px;
    height: 55px;
    left: 48%;
    bottom: -55px;
    animation-duration: 11s;
    animation-delay: 0.8s;
}

[b-qelvcm20id] .bubbles-bg span:nth-child(5) {
    width: 18px;
    height: 18px;
    left: 62%;
    bottom: -18px;
    animation-duration: 8s;
    animation-delay: 4s;
}

[b-qelvcm20id] .bubbles-bg span:nth-child(6) {
    width: 100px;
    height: 100px;
    left: 74%;
    bottom: -100px;
    animation-duration: 15s;
    animation-delay: 2s;
}

[b-qelvcm20id] .bubbles-bg span:nth-child(7) {
    width: 38px;
    height: 38px;
    left: 88%;
    bottom: -38px;
    animation-duration: 10s;
    animation-delay: 0.3s;
}

[b-qelvcm20id] .bubbles-bg span:nth-child(8) {
    width: 75px;
    height: 75px;
    left: 92%;
    bottom: -75px;
    animation-duration: 14s;
    animation-delay: 5s;
}

[b-qelvcm20id] .bubbles-bg span:nth-child(9) {
    width: 14px;
    height: 14px;
    left: 38%;
    bottom: -14px;
    animation-duration: 7s;
    animation-delay: 2.5s;
}

[b-qelvcm20id] .bubbles-bg span:nth-child(10) {
    width: 65px;
    height: 65px;
    left: 20%;
    bottom: -65px;
    animation-duration: 13s;
    animation-delay: 6s;
}

@keyframes floatBubble-b-qelvcm20id {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: var(--cw-login-bubble-op);
    }

    65% {
        opacity: calc(var(--cw-login-bubble-op) * 0.7);
    }

    100% {
        transform: translateY(-105vh) scale(0.7);
        opacity: 0;
    }
}

/* Respetar a quien pidió menos movimiento en el sistema operativo. */
@media (prefers-reduced-motion: reduce) {
    [b-qelvcm20id] .login-card {
        animation: none;
    }

    [b-qelvcm20id] .bubbles-bg span {
        animation: none;
        opacity: calc(var(--cw-login-bubble-op) * 0.35);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 520px) {
    [b-qelvcm20id] .login-card {
        max-width: 100%;
        padding: 26px;
    }

    .login-logo-img[b-qelvcm20id] {
        max-width: 140px;
        max-height: 80px;
    }
}
/* /Components/Pages/Setup/Configuracion.razor.rz.scp.css */
/* ============================================
   WIZARD DE CONFIGURACIÓN INICIAL — solo LAYOUT.
   ============================================
   Tras la migración a MudBlazor aquí no queda ni un color fijo: el fondo,
   la tarjeta y la línea del indicador salen del tema (var(--mud-palette-*)),
   por eso el wizard también se ve bien en modo oscuro. Antes este archivo
   repintaba a mano cada input, botón y banner con teal #0d9488, y eso era
   justo lo que se llevaba por delante el tema del sistema.
   ============================================ */

/* === Fondo a pantalla completa: esta página se dibuja SIN el shell
       (MainLayout renderiza solo @Body cuando está en modo configuración),
       así que el centrado tiene que resolverlo la propia página. === */
.setup-wrapper[b-l6hhbarqmc] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: 1.5rem;
    background: var(--mud-palette-background);
}

/* MudPaper es un componente hijo: necesita ::deep para recibir el estilo. */
[b-l6hhbarqmc] .setup-card {
    width: 100%;
    max-width: 560px;
    animation: fadeInUp-b-l6hhbarqmc 0.5s ease-out;
}

@keyframes fadeInUp-b-l6hhbarqmc {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step-content[b-l6hhbarqmc] {
    animation: fadeIn-b-l6hhbarqmc 0.3s ease;
}

@keyframes fadeIn-b-l6hhbarqmc {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* === Indicador de pasos === */
.steps-indicator[b-l6hhbarqmc] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

/* El margen inferior sube la línea a la altura del círculo: el contenedor
   centra verticalmente y cada paso mide círculo + etiqueta, no solo el círculo. */
.step-line[b-l6hhbarqmc] {
    width: 50px;
    height: 2px;
    margin: 0 0.5rem 1.5rem;
    background: var(--mud-palette-lines-default);
    transition: background 0.3s ease;
}

.step-line-activa[b-l6hhbarqmc] {
    background: var(--mud-palette-primary);
}

/* La cadena de conexión se lee mejor en monospace: son pares clave=valor
   donde un espacio de más o un punto y coma perdido rompen la conexión. */
[b-l6hhbarqmc] .setup-connstr textarea {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .steps-indicator[b-l6hhbarqmc] {
        padding: 0;
    }

    .step-line[b-l6hhbarqmc] {
        width: 30px;
    }

    /* En móvil los botones se apilan y la acción principal queda arriba
       (column-reverse), que es donde cae el pulgar. */
    .mode-toggle[b-l6hhbarqmc],
    .step-actions[b-l6hhbarqmc] {
        flex-direction: column;
    }

    .step-actions[b-l6hhbarqmc] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* /Components/Shared/ErrorContent.razor.rz.scp.css */
/* ============================================
   ERROR CONTENT - Estilo para errores globales
   ============================================
   Minimalista, consistente con el tema del sistema.
   ============================================ */

.error-page[b-vvec73oouh] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 2rem;
}

.error-card[b-vvec73oouh] {
    text-align: center;
    background: #ffffff;
    border: 1px solid #fee2e2;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.error-icon[b-vvec73oouh] {
    margin-bottom: 1rem;
}

/* El svg de MudIcon escala con font-size (width/height: 1em).
   El color lo pone el parámetro Color (Warning/Error), no esta hoja. */
[b-vvec73oouh] .error-icon .mud-icon-root {
    font-size: 2.8rem;
}

/* La tarjeta centra el texto; el alert va alineado a la izquierda como el original
   (.text-start .small .mb-3 de Bootstrap — mb-3 de Mud son 12px, aquí se preserva 1rem). */
[b-vvec73oouh] .error-alert {
    text-align: left;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* Separación entre "Reintentar" y "Recargar página" (antes ms-2 de Bootstrap = 8px). */
.error-actions[b-vvec73oouh] {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.error-title[b-vvec73oouh] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.error-message[b-vvec73oouh] {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.55;
    margin-bottom: 1.5rem;
}