/* /Pages/Home/Components/DynamicPanel.razor.rz.scp.css */
/* Search Wrapper - Contenedor independiente del buscador */
.search-wrapper[b-fkxx6hjwiu] {
    position: absolute;
    top: 20px;
    left: 240px;
    width: 400px;
    z-index: 26;
    /* Siempre visible */
    opacity: 1;
    pointer-events: auto;
    transition: left 0.4s ease-in-out;
}

    .search-wrapper.sidebar-collapsed[b-fkxx6hjwiu] {
        left: 100px;
    }

/* Dynamic Content Panel */
.dynamic-panel[b-fkxx6hjwiu] {
    position: absolute;
    top: 75px;
    left: 240px;
    /* Aligned with top bar when sidebar is open (220px + 20px gap) */
    width: 400px;
    /* Same width as search bar */
    max-height: calc(100vh - 100px);
    /* Limit height to not overflow */
    background: #9aa1ab72;
    /* Dark blue glass */
    backdrop-filter: blur(10px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 25;
    display: flex;
    flex-direction: column;
    /* Animation */
    opacity: 0;
    pointer-events: none;
    transform: translatex(-20px);
    transition: all 0.4s ease-in-out;
}

    .dynamic-panel.visible[b-fkxx6hjwiu] {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Adjust when sidebar is collapsed */
    .dynamic-panel.sidebar-collapsed[b-fkxx6hjwiu] {
        left: 100px;
        /* Aligned with collapsed sidebar (100px for topbar) */
    }

.dynamic-panel-header[b-fkxx6hjwiu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dynamic-panel-title[b-fkxx6hjwiu] {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
}

.dynamic-panel-close-btn[b-fkxx6hjwiu] {
    background: transparent;
    border: none;
    color: #a0a0b0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
}

    .dynamic-panel-close-btn:hover[b-fkxx6hjwiu] {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }

.dynamic-panel-content[b-fkxx6hjwiu] {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    color: #a0a0b0;
}

.panel-placeholder[b-fkxx6hjwiu] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 1.2rem;
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

/* Search Bar dentro del Dynamic Panel */
.search-container[b-fkxx6hjwiu] {
    background: #9aa1abeb;
    backdrop-filter: blur(1px);
    border-radius: 30px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.search-input[b-fkxx6hjwiu] {
    background: transparent;
    border: none;
    color: #1f2f45;
    width: 100%;
    margin-left: 10px;
    outline: none;
    font-size: 0.95rem;
}

    .search-input[b-fkxx6hjwiu]::placeholder {
        color: white;
    }

/* Inbox Card Container */
.inbox-card-container[b-fkxx6hjwiu] {
    padding: 10px 0;
}

.inbox-card[b-fkxx6hjwiu] {
    background: rgba(31, 47, 69, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    transition: all 0.3s;
    cursor: pointer;
}

    .inbox-card:hover[b-fkxx6hjwiu] {
        background: rgba(31, 47, 69, 0.7);
        border-color: rgba(255, 255, 255, 0.2);
    }

.inbox-card-image[b-fkxx6hjwiu] {
    width: 100px;
    height: 100px;
    background: rgba(154, 161, 171, 0.3);
    border-radius: 12px;
    flex-shrink: 0;
}

.inbox-card-info[b-fkxx6hjwiu] {
    flex: 1;
    color: white;
}

    .inbox-card-info h3[b-fkxx6hjwiu] {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 8px;
        color: white;
    }

    .inbox-card-info p[b-fkxx6hjwiu] {
        font-size: 0.9rem;
        color: #a0aab0;
        line-height: 1.5;
    }

/* Animación de ocultar search wrapper */
.search-wrapper.hidden[b-fkxx6hjwiu] {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

/* Animación de ocultar panel principal */
.dynamic-panel.hiding[b-fkxx6hjwiu] {
    animation: panelHideAnimation-b-fkxx6hjwiu 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

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

    40% {
        opacity: 1;
        transform: translateY(0) scale(0.8);
    }

    100% {
        opacity: 0;
        transform: translateX(-40px) scale(0.9);
    }
}

/*Animacion de re-entrada cuando vuelve del expanded view*/
.dynamic-panel.returning[b-fkxx6hjwiu] {
    animation: panelReturnAnimation-b-fkxx6hjwiu 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes panelReturnAnimation-b-fkxx6hjwiu {
    0% {
        opacity: 0;
        transform: translateX(-40px) scale(0.9);
    }

    60% {
        opacity: 1;
        transform: translateY(0) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Inbox card clickeable */


/* Expanded Card View */
.expanded-card-view[b-fkxx6hjwiu] {
    position: absolute;
    top: 20px;
    left: 240px;
    width: 400px;
    height: calc(100vh - 40px);
    background: rgba(31, 47, 69, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 27;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.5) translateX(75px);
    pointer-events: none;
    transition: opacity 0.8s cubic-bezier(0.6, 0, 0.2, 1), transform 0.8s cubic-bezier(0.6, 0, 0.2, 1), left 0.4s ease-in-out;
    transform-origin: left;
}

    .expanded-card-view.active[b-fkxx6hjwiu] {
        opacity: 1;
        transform: scale(1) translateX(0);
        pointer-events: auto;
    }

    .expanded-card-view.sidebar-collapsed[b-fkxx6hjwiu] {
        left: 100px;
    }

.expanded-card-header[b-fkxx6hjwiu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.back-btn[b-fkxx6hjwiu] {
    background: transparent;
    border: none;
    color: #e500cd;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 8px;
    transition: all 0.2s;
}

    .back-btn:hover[b-fkxx6hjwiu] {
        background: rgba(229, 0, 205, 0.1);
    }

.expanded-card-header h2[b-fkxx6hjwiu] {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    flex: 1;
    text-align: center;
}

.close-expanded-btn[b-fkxx6hjwiu] {
    background: transparent;
    border: none;
    color: #a0a0b0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
}

    .close-expanded-btn:hover[b-fkxx6hjwiu] {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }

.expanded-card-content[b-fkxx6hjwiu] {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.expanded-card-image[b-fkxx6hjwiu] {
    width: 100%;
    height: 250px;
    background: rgba(154, 161, 171, 0.3);
    border-radius: 20px;
    flex-shrink: 0;
}

.expanded-card-details[b-fkxx6hjwiu] {
    color: white;
}

    .expanded-card-details h3[b-fkxx6hjwiu] {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 15px;
        color: #e500cd;
    }

    .expanded-card-details p[b-fkxx6hjwiu] {
        font-size: 1rem;
        color: #c8d0db;
        line-height: 1.6;
        margin-bottom: 12px;
    }

/* --- RESPONSIVE DESIGN (Móvil) --- */
@media (max-width: 768px) {

    /* 1. Buscador: Centrado y ancho fluido (90% de la pantalla) */
    .search-wrapper[b-fkxx6hjwiu] {
        left: 5vw;
        /* 5% desde la izquierda */
        width: 90vw;
        /* 90% del ancho */
        top: 15px;
    }

        /* Ignoramos el estado del sidebar en móvil */
        .search-wrapper.sidebar-collapsed[b-fkxx6hjwiu] {
            left: 5vw;
        }

    /* 2. Panel Dinámico: Centrado y ancho fluido */
    .dynamic-panel[b-fkxx6hjwiu] {
        left: 5vw;
        width: 90vw;
        top: 70px;
    }

        .dynamic-panel.sidebar-collapsed[b-fkxx6hjwiu] {
            left: 5vw;
        }

    /* 3. Tarjeta Expandida: Pantalla completa para mejor lectura */
    .expanded-card-view[b-fkxx6hjwiu] {
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        /* Sin bordes redondeados en pantalla completa */
        z-index: 100;
        /* Asegura que tape todo */
    }

        .expanded-card-view.sidebar-collapsed[b-fkxx6hjwiu] {
            left: 0;
        }

    /* Ajuste del contenido interno para móvil */
    .expanded-card-image[b-fkxx6hjwiu] {
        height: 200px;
        /* Un poco más pequeña la imagen */
    }
}
/* /Pages/Home/Home.razor.rz.scp.css */
/* Container for the entire dashboard */
.dashboard-container[b-03x8r00w0l] {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #1f2f45;
    font-family: 'Inter', sans-serif;
}

/* Full-screen Map */
#map[b-03x8r00w0l] {
    /* Lo hacemos más grande que el marco (100% + desborde) */
    width: 110%;
    height: 110%;
    /* Lo centramos negativamente para compensar el tamaño extra */
    position: absolute;
    top: -5%;
    left: -5%;
    /* Quitamos propiedades que ahora maneja el marco */
    border-radius: 0;
    transition: none;
    /* El mapa no se mueve, se mueve el marco */
}

.map-frame[b-03x8r00w0l] {
    /* 1. Posición y Tamaño (Lo que antes tenía #map) */
    position: absolute;
    top: 10px;
    left: 220px;
    width: calc(100% - 230px);
    height: calc(100% - 20px);
    /* 2. Estética y Recorte */
    border-radius: 30px;
    overflow: hidden;
    /* ¡CLAVE! Esto corta lo que sobre del mapa */
    z-index: 0;
    /* 3. Transiciones (El marco es el que se anima) */
    transition: left 0.4s ease-in-out, width 0.4s ease-in-out;
}

/* Map adjustment when Chat is Open */
.dashboard-container.chat-open .map-frame[b-03x8r00w0l] {
    width: calc(100% - 230px - 350px);
    /* Sidebar (220) + Chat (350) */
}

.dashboard-container.sidebar-collapsed .map-frame[b-03x8r00w0l] {
    left: 80px;
    width: calc(100% - 90px);
}

.dashboard-container.sidebar-collapsed.chat-open .map-frame[b-03x8r00w0l] {
    width: calc(100% - 100px - 330px);
}

/* Sidebar (Glassmorphism) */
.sidebar-glass[b-03x8r00w0l] {
    position: absolute;
    top: 0;
    left: 0;
    width: 220px;
    height: 100%;
    background: #1f2f45;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    z-index: 10;
    box-sizing: border-box;
    color: white;
    transition: width 0.4s ease-in-out;
    overflow: hidden;
}

.dashboard-container.sidebar-collapsed .sidebar-glass[b-03x8r00w0l] {
    width: 80px;
}

/* Header */
.sidebar-header[b-03x8r00w0l] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Always start */
    gap: 0;
    margin-bottom: 30px;
    padding-left: 0;
}

/* Logo wrapper - Fixed width to keep icon static */
.sidebar-icon.logo-icon[b-03x8r00w0l] {
    width: 80px;
    /* Fixed width matching collapsed sidebar */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.app-title[b-03x8r00w0l] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.4s ease-in-out, width 0.4s ease-in-out;
    opacity: 1;
    width: 120px;
    margin-top: 8px;
}

.dashboard-container.sidebar-collapsed .app-title[b-03x8r00w0l] {
    opacity: 0;
    width: 0;
}

.title-main[b-03x8r00w0l] {
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
}

.title-sub[b-03x8r00w0l] {
    font-size: 0.7rem;
    color: #a0a0b0;
}

/* Section Header */
.sidebar-section-header[b-03x8r00w0l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #5d6b82;
    font-size: 0.9rem;
    margin-bottom: 10px;
    padding-bottom: 10px;
    /* BORRA O COMENTA ESTA LÍNEA DEL BORDE: */
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
    padding-left: 30px;
    padding-right: 0;
    /* BORRA LOS MÁRGENES QUE PUSISTE ANTES: */
    /* margin-left: 30px; */
    /* margin-right: 30px; */
    /* AGREGA ESTO: */
    position: relative;
    /* Necesario para poder dibujar la línea libremente */
}

    .sidebar-section-header[b-03x8r00w0l]::after {
        content: "";
        position: absolute;
        bottom: 0;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.1);
        /* El color de la línea */
        left: 30px;
        /* Empieza a 30px de la izquierda */
        right: 30px;
        /* Termina a 30px de la derecha */
    }

    .sidebar-section-header span[b-03x8r00w0l] {
        transition: opacity 0.2s ease-in-out;
        opacity: 1;
        white-space: nowrap;
    }

.dashboard-container.sidebar-collapsed .sidebar-section-header[b-03x8r00w0l] {
    justify-content: center;
    /* Center icon when collapsed */
    padding-left: 0;
    border-bottom: none;
}

    .dashboard-container.sidebar-collapsed .sidebar-section-header span[b-03x8r00w0l] {
        opacity: 0;
        display: none;
    }

/* Union Icon Wrapper */
.sidebar-icon.union-icon[b-03x8r00w0l] {
    width: 80px;
    /* Fixed width for static position */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

/* Menu Items */
.sidebar-menu[b-03x8r00w0l] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.sidebar-item[b-03x8r00w0l] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    cursor: pointer;
    padding: 10px 0;
    padding-left: 0;
    overflow: hidden;
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 10px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Regla para RESETEAR los márgenes cuando el sidebar está cerrado */
.dashboard-container.sidebar-collapsed .sidebar-item[b-03x8r00w0l] {
    width: 100%;
    margin: 0;
    border-radius: 0;
}

/* Icon Wrapper - Fixed width to keep icon static */
.sidebar-icon[b-03x8r00w0l] {
    width: 60px;
    /* Fixed width matching collapsed sidebar */
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #a0a0b0;
    flex-shrink: 0;
    margin: 0;
    user-select: none;
}

.sidebar-text[b-03x8r00w0l] {
    font-size: 1rem;
    color: white;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
    padding-left: 10px;
}

.dashboard-container.sidebar-collapsed .sidebar-text[b-03x8r00w0l] {
    opacity: 0;
    width: 0;
    padding-left: 0;
}

/* 1. Efecto HOVER (Gris difuminado) para ítems NO seleccionados */
.sidebar-item:not(.add-button):not(.active):hover[b-03x8r00w0l] {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    /* Gris transparente */
    border-radius: 12px;
    backdrop-filter: blur(5px);
    /* Opcional: añade un poco de desenfoque */
}

/* 2. Efecto ACTIVE (Amarillo) para el ítem seleccionado */
.sidebar-item.active[b-03x8r00w0l] {
    color: white;
    background-color: #e5b900;
    border-radius: 12px;
    overflow: hidden;
}

/* Hover effect needs to respect the fixed icon width */
.dashboard-container.sidebar-collapsed .sidebar-item:not(.add-button):hover[b-03x8r00w0l],
.dashboard-container.sidebar-collapsed .sidebar-item.active[b-03x8r00w0l] {
    width: 45px;
    height: auto;
    margin-left: 17.5px;
    padding-left: 0;
    justify-content: center;
    border-radius: 12px;
}

.sidebar-icon img[b-03x8r00w0l] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    pointer-events: none;
}

.sidebar-icon.logo-icon img[b-03x8r00w0l] {
    width: 43px;
    /* Cambia este valor */
    height: 43px;
    /* Cambia este valor */
}

.sidebar-icon.union-icon img[b-03x8r00w0l] {
    width: 18px;
    /* Cambia este valor */
    height: 18px;
    /* Cambia este valor */
}

/* Bottom Section */
.sidebar-bottom[b-03x8r00w0l] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: align-items 0.3s ease-in-out;
}

.add-button[b-03x8r00w0l] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

    .add-button .fab[b-03x8r00w0l] {
        margin: 0 auto;
        /* Centra el botón en su espacio si es necesario, o usa un wrapper */
    }


.sidebar-item.add-button[b-03x8r00w0l] {
    padding-left: 0;
}



    .sidebar-item.add-button .fab[b-03x8r00w0l] {
        width: 45px;
        height: 45px;
        margin-left: 7.5px;
        margin-right: 0;
        /* (80 - 45) / 2 = 17.5px. Mantenlo SIEMPRE así para que esté en la columna de 80px */
    }


.fab[b-03x8r00w0l] {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #e500cd;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(229, 0, 205, 0.4);
    cursor: pointer;
    transition: transform 0.2s;
    border: none;
    flex-shrink: 0;
    /* Center FAB in the 80px column */
    /* (80 - 45) / 2 */
}


    .fab:hover[b-03x8r00w0l] {
        transform: scale(1.1);
    }

/* User Profile in Sidebar */
.sidebar-user-profile[b-03x8r00w0l] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

.sidebar-avatar[b-03x8r00w0l] {
    width: 80px;
    /* Fixed width wrapper for avatar */
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.avatar-inner[b-03x8r00w0l] {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    /* border: 2px solid #00ff88; */
    /* Green border */
    padding: 2px;
}

.user-info[b-03x8r00w0l] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.4s ease-in-out, width 0.4s ease-in-out;
    opacity: 1;
    width: 110px;
    padding-left: 0px;
}

.dashboard-container.sidebar-collapsed .user-info[b-03x8r00w0l] {
    opacity: 0;
    width: 0;
    padding-left: 0;
}

.user-name[b-03x8r00w0l] {
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
}

.user-role[b-03x8r00w0l] {
    font-size: 0.8rem;
    color: #e500cd;
}

/* Top Search Bar */
.top-bar[b-03x8r00w0l] {
    position: absolute;
    top: 20px;
    left: 240px;
    right: 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 10;
    pointer-events: none;
    transition: left 0.4s ease-in-out, right 0.4s ease-in-out;
}

.dashboard-container.sidebar-collapsed .top-bar[b-03x8r00w0l] {
    left: 100px;
}

.dashboard-container.chat-open .top-bar[b-03x8r00w0l] {
    right: 357px;
}

.search-container[b-03x8r00w0l] {
    pointer-events: auto;
    background: #9aa1abeb;
    backdrop-filter: blur(1px);
    border-radius: 30px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    width: 400px;
}

.search-input[b-03x8r00w0l] {
    background: transparent;
    border: none;
    color: #1f2f45;
    width: 100%;
    margin-left: 10px;
    outline: none;
    font-size: 0.95rem;
}

    .search-input[b-03x8r00w0l]::placeholder {
        color: white;
    }

/* User Profile (Top Right) */
.user-profile[b-03x8r00w0l] {
    pointer-events: auto;
    background: #9aa1ab72;
    backdrop-filter: blur(10px);
    padding: 8px 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-right: 20px;
    margin-top: 10px;
}

.user-profile-staging[b-03x8r00w0l] {
    background: #ffc107;
    color: #000;
}

.user-profile-dev[b-03x8r00w0l] {
    background: #dc3545;
}

.user-profile-text[b-03x8r00w0l] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.workspace-name[b-03x8r00w0l] {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    line-height: 1;
}

.workspace-subtitle[b-03x8r00w0l] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #e500cd;
    line-height: 1;
}

.avatar[b-03x8r00w0l] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e500cd;
}

/* Message Floating Button */
.message-floating-btn[b-03x8r00w0l] {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #9aa1ab72;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
    color: white;
}

    .message-floating-btn:hover[b-03x8r00w0l] {
        transform: scale(1.1);
        background-color: #9aa1ab72;
    }

/* Chat Panel Styles */
.chat-panel[b-03x8r00w0l] {
    position: absolute;
    top: 20px;
    right: -400px;
    width: 350px;
    height: calc(100% - 20px);
    background-color: #1f2f45;
    z-index: 30;
    transition: right 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
}

    .chat-panel.open[b-03x8r00w0l] {
        right: 0;
    }

.chat-header[b-03x8r00w0l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-top: -20px;
    margin-bottom: -20px;
}

.chat-title-dropdown[b-03x8r00w0l] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 15px;
    border-radius: 20px;
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
}

.close-chat-btn[b-03x8r00w0l] {
    background: transparent;
    border: none;
    color: #a0a0b0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.2s;
}

    .close-chat-btn:hover[b-03x8r00w0l] {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }

.chat-body[b-03x8r00w0l] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    color: #a0a0b0;
    text-align: center;
}

.welcome-message[b-03x8r00w0l] {
    font-size: 1.1rem;
    font-weight: 500;
    max-width: 80%;
}

.chat-footer[b-03x8r00w0l] {
    /* Margen para que flote y no toque los bordes */
    margin: 20px;
    /* Relleno interno */
    padding: 10px 20px;
    /* Flexbox para alinear los iconos y texto */
    display: flex;
    align-items: center;
    gap: 10px;
    /* COLOR DE FONDO DE LA CÁPSULA (Ajusta este color al gris azulado de tu imagen) */
    background: #2b394f;
    /* BORDES REDONDEADOS (Esto crea el efecto cápsula) */
    border-radius: 50px;
}

.chat-input[b-03x8r00w0l] {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    outline: none;
    font-size: 0.9rem;
    border-radius: 50px;
}

    .chat-input[b-03x8r00w0l]::placeholder {
        color: #5d6b82;
    }

.chat-action-btn[b-03x8r00w0l] {
    background: transparent;
    border: none;
    color: #a0a0b0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: color 0.2s;
}

    .chat-action-btn:hover[b-03x8r00w0l] {
        color: white;
        background: rgba(255, 255, 255, 0.05);
    }

.add-button .sidebar-text[b-03x8r00w0l] {
    padding-left: 17.5px;
    /* Usamos left, no right */
}

.dashboard-container.sidebar-collapsed .add-button .sidebar-text[b-03x8r00w0l] {
    padding-left: 17.5px;
}

/* Restaurar posición del botón FAB al colapsar */
.dashboard-container.sidebar-collapsed .sidebar-item.add-button .fab[b-03x8r00w0l] {
    margin-left: 17.5px;
}


/* Restaurar ancho del ícono al colapsar */
.dashboard-container.sidebar-collapsed .sidebar-icon[b-03x8r00w0l] {
    width: 80px;
}

.dashboard-container.sidebar-collapsed .sidebar-item.active .sidebar-icon[b-03x8r00w0l],
.dashboard-container.sidebar-collapsed .sidebar-item:not(.add-button):hover .sidebar-icon[b-03x8r00w0l] {
    width: 100%;
    /* Se adapta a los 45px del cuadrado amarillo */
}


/* --- RESPONSIVE DESIGN (Móvil) --- */
@media (max-width: 768px) {

    /* 1. Sidebar: Se oculta visualmente para dar espacio */
    .sidebar-glass[b-03x8r00w0l] {
        width: 0;
        padding: 0;
        overflow: hidden;
    }

    /* Aseguramos que colapsado también sea 0 en móvil */
    .dashboard-container.sidebar-collapsed .sidebar-glass[b-03x8r00w0l] {
        width: 0;
    }

    /* 2. Mapa: Ocupa toda la pantalla y se quitan los bordes redondeados */
    .map-frame[b-03x8r00w0l] {
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        top: 0;
    }

    .dashboard-container.sidebar-collapsed .map-frame[b-03x8r00w0l] {
        left: 0;
        width: 100%;
    }

    /* 3. Barra Superior: Se ajusta a los márgenes de la pantalla */
    .top-bar[b-03x8r00w0l] {
        left: 10px;
        right: 10px;
        width: auto;
        justify-content: space-between;
    }

    .dashboard-container.sidebar-collapsed .top-bar[b-03x8r00w0l] {
        left: 10px;
    }

    /* Ocultamos el perfil de usuario en móvil para ahorrar espacio (opcional) */
    .user-profile[b-03x8r00w0l] {
        display: none;
    }

    /* 4. Chat Panel: Ocupa el 100% de la pantalla al abrirse */
    .chat-panel[b-03x8r00w0l] {
        width: 100%;
        right: -100%;
        /* Se esconde completamente a la derecha */
    }

        .chat-panel.open[b-03x8r00w0l] {
            right: 0;
        }
}
/* /Pages/LandinPage/About.razor.rz.scp.css */
/* --- HERO SECTION (Texto grande inicial con la imagen de fondo) --- */
.about-hero-section[b-5wryko4w50] {
    background: url('/about.png') no-repeat center center;
    /* Tu imagen de fondo */
    background-size: cover;
    min-height: 400px;
    /* Altura de la sección */
    display: flex;
    align-items: flex-end;
    /* Centra el texto verticalmente */
    justify-content: flex-start;
    /* Centra el texto horizontalmente */
    padding: 80px 5%;
    /* Espaciado interno */
    text-align: left;
    color: #fff;
    position: relative;
    z-index: 1;
}

    .about-hero-section[b-5wryko4w50]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        /* Capa oscura para mejor contraste del texto */
        z-index: -1;
    }

.about-hero-content h1[b-5wryko4w50] {
    font-size: 1.5rem;
    font-weight: 400;
    max-width: 900px;
    line-height: 1.3;
    font-style: italic;
    /* Para que el texto sea inclinado */
}

/* --- SECCIÓN MISIÓN, VISIÓN, VALORES --- */
.mission-vision-values-section[b-5wryko4w50] {
    background-color: #172232;
    /* El color oscuro de fondo */
    padding: 70px 1%;
    color: #fff;
    text-align: center;
}

.mvv-container[b-5wryko4w50] {
    max-width: 1300px;
    /* Ancho máximo para el contenido */
    margin: 0 auto;
}

.mission-vision-grid[b-5wryko4w50] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Dos columnas para Misión y Visión */
    gap: 60px;
    /* Espacio entre las columnas */
    margin-bottom: 80px;
    /* Espacio antes de la sección de Valores */
}

.mvv-item h2[b-5wryko4w50] {
    font-size: 4rem;
    font-weight: 10;
    margin-bottom: 30px;
    text-align: left;
    /* Alinea los títulos a la izquierda */
}

.mvv-card[b-5wryko4w50] {
    background: #1f2f457c;
    /* Fondo oscuro de las tarjetas */
    padding: 20px;
    border-radius: 16px;
    text-align: right;
    /* Alinea el texto dentro de las tarjetas */
    min-height: 200px;
    /* Altura mínima para que las tarjetas se vean bien */
    display: flex;
    /* Para centrar el párrafo si es corto */
    align-items: center;
    /* Centrado vertical */
}

    .mvv-card p[b-5wryko4w50] {
        font-size: 0.95rem;
        font-style: italic;
        color: #d0d0d0;
    }

/* Sección de Valores (abajo) */
.values-section h2[b-5wryko4w50] {
    font-size: 4rem;
    font-weight: 400;
    margin-bottom: 30px;
    text-align: center;
    /* Alinea el título a la izquierda */
}

.values-card[b-5wryko4w50] {
    text-align: left;
    padding: 40px;
    max-width: 900px;
    /* <--- Agrega esta línea para limitar el ancho */
    margin: 0 auto;
}

    .values-card p strong[b-5wryko4w50] {
        color: #e500cd;
        /* Color rosa para destacar los títulos de los valores */
        font-weight: 600;
        margin-bottom: 5px;
        /* Pequeño espacio debajo del strong */
        display: block;
        /* Para que cada strong esté en su propia línea */
    }

    .values-card p br[b-5wryko4w50] {
        margin-bottom: 10px;
        text-align: center;
    }

/* --- Media Queries (Responsiveness) --- */
@media (max-width: 900px) {
    .about-hero-content h1[b-5wryko4w50] {
        font-size: 2rem;
    }

    .mission-vision-grid[b-5wryko4w50] {
        grid-template-columns: 1fr;
        /* Apila Misión y Visión en móvil */
        gap: 40px;
    }

    .mvv-item h2[b-5wryko4w50],
    .values-section h2[b-5wryko4w50] {
        text-align: center;
        /* Centra los títulos en móvil */
        font-size: 2rem;
    }

    .mvv-card[b-5wryko4w50] {
        padding: 25px;
        min-height: auto;
        /* Desactiva la altura mínima en móvil */
    }

        .mvv-card p[b-5wryko4w50] {
            font-size: 0.95rem;
        }
}

@media (max-width: 600px) {
    .about-hero-content h1[b-5wryko4w50] {
        font-size: 1.6rem;
    }

    .mission-vision-values-section[b-5wryko4w50] {
        padding: 60px 5%;
    }
}

/* --- SECCIÓN CONTACTO INDEPENDIENTE --- */
.contact-section[b-5wryko4w50] {
    background-color: #172232;
    /* <--- AHORA SÍ: Color de fondo para TODA la franja de contacto (más oscuro que el anterior) */
    padding: 80px 5%;
    /* Espaciado arriba y abajo */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .contact-section h2[b-5wryko4w50] {
        font-size: 4rem;
        font-weight: 400;
        margin-bottom: 30px;
        color: #fff;
    }

/* Estilos de la tarjeta (igual que antes) */
.contact-card[b-5wryko4w50] {
    max-width: 600px;
    width: 100%;
    background: #1f2f457c;
    /* Color de la tarjeta */
    padding: 40px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Alinea contenido a la derecha */
    justify-content: center;
    text-align: right;
}

.contact-content p[b-5wryko4w50] {
    font-size: 0.95rem;
    font-style: italic;
    color: #e0e0e0;
    margin-bottom: 10px;
    line-height: 1.4;
}

.contact-link[b-5wryko4w50] {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}

    .contact-link:hover[b-5wryko4w50] {
        border-bottom: 1px solid #fff;
    }

/* Media Queries */
@media (max-width: 600px) {
    .contact-section h2[b-5wryko4w50] {
        font-size: 2.5rem;
    }

    .contact-card[b-5wryko4w50] {
        align-items: center;
        text-align: center;
    }
}
/* /Pages/LandinPage/Comunity.razor.rz.scp.css */
/* Community Page Styles */

.community-container[b-gk0p9tiosn] {
    width: 100%;
    min-height: 100vh;
    background-color: #1a2332;
}

/* Hero Section */
.hero-section[b-gk0p9tiosn] {
    width: 100%;
    height: 400px;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=1200') center/cover;
    position: relative;
}

.hero-overlay[b-gk0p9tiosn] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
}

.hero-content[b-gk0p9tiosn] {
    text-align: center;
    color: white;
    max-width: 700px;
    padding: 2rem;
}

.hero-title[b-gk0p9tiosn] {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #fff;
}

.hero-subtitle[b-gk0p9tiosn] {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.hero-buttons[b-gk0p9tiosn] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.btn-join[b-gk0p9tiosn] {
    background-color: #1e2d41;
    color: white;
    border: none;
    padding: 0.9rem 2rem;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-join:hover[b-gk0p9tiosn] {
        background-color: #2a3f5f;
    }

.btn-explore[b-gk0p9tiosn] {
    background-color: white;
    color: #333;
    border: none;
    padding: 0.9rem 2rem;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

    .btn-explore:hover[b-gk0p9tiosn] {
        background-color: #f0f0f0;
    }

.icon-users[b-gk0p9tiosn] {
    font-size: 1.2rem;
}

/* Tabs Section - Positioned at bottom of hero */
.tabs-section[b-gk0p9tiosn] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(30, 45, 65, 0.95);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
}

.tabs-container[b-gk0p9tiosn] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding: 0 2rem;
}

.tab-item[b-gk0p9tiosn] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    padding: 0.5rem 0;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

    .tab-item:hover[b-gk0p9tiosn] {
        color: white;
    }

    .tab-item.active[b-gk0p9tiosn] {
        color: white;
    }

        .tab-item.active[b-gk0p9tiosn]::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: white;
        }

.btn-ask[b-gk0p9tiosn] {
    margin-left: auto;
    background-color: #e500cd;
    color: white;
    border: none;
    padding: 0.6rem 1.8rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-ask:hover[b-gk0p9tiosn] {
        background-color: #cb00b6;
    }

/* Questions Section */
.questions-section[b-gk0p9tiosn] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.question-card[b-gk0p9tiosn] {
    background-color: #243447;
    border-radius: 8px;
    display: flex;
    gap: 2rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s;
}

    .question-card:hover[b-gk0p9tiosn] {
        background-color: #2a3f5f;
    }

.question-stats[b-gk0p9tiosn] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 100px;
}

.stat-item[b-gk0p9tiosn] {
    text-align: center;
}

.stat-number[b-gk0p9tiosn] {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
}

.stat-label[b-gk0p9tiosn] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem;
}

.question-content[b-gk0p9tiosn] {
    flex: 1;
}

.question-title[b-gk0p9tiosn] {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.8rem;
}

.question-text[b-gk0p9tiosn] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
}

.question-footer[b-gk0p9tiosn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-info[b-gk0p9tiosn] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.user-avatar[b-gk0p9tiosn] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #5a6c84;
}

.user-name[b-gk0p9tiosn] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.question-time[b-gk0p9tiosn] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero-section[b-gk0p9tiosn] {
        height: 350px;
    }

    .hero-title[b-gk0p9tiosn] {
        font-size: 2.5rem;
    }

    .hero-subtitle[b-gk0p9tiosn] {
        font-size: 1rem;
    }

    .tabs-container[b-gk0p9tiosn] {
        padding: 0 1.5rem;
        gap: 1rem;
    }

    .tab-item[b-gk0p9tiosn] {
        font-size: 0.9rem;
    }

    .btn-ask[b-gk0p9tiosn] {
        padding: 0.5rem 1.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .hero-section[b-gk0p9tiosn] {
        height: auto;
        min-height: 450px;
    }

    .hero-title[b-gk0p9tiosn] {
        font-size: 2rem;
    }

    .hero-subtitle[b-gk0p9tiosn] {
        font-size: 0.95rem;
    }

    .hero-content[b-gk0p9tiosn] {
        padding: 1.5rem;
    }

    .hero-buttons[b-gk0p9tiosn] {
        flex-direction: column;
        width: 100%;
        gap: 0.8rem;
    }

    .btn-join[b-gk0p9tiosn],
    .btn-explore[b-gk0p9tiosn] {
        width: 100%;
        max-width: 300px;
    }

    .tabs-section[b-gk0p9tiosn] {
        position: relative;
        background-color: #1e2d41;
    }

    .tabs-container[b-gk0p9tiosn] {
        flex-wrap: wrap;
        gap: 0.8rem;
        padding: 1rem;
        justify-content: center;
    }

    .tab-item[b-gk0p9tiosn] {
        font-size: 0.85rem;
    }

    .btn-ask[b-gk0p9tiosn] {
        margin-left: 0;
        width: 100%;
        max-width: 150px;
    }

    .questions-section[b-gk0p9tiosn] {
        padding: 1rem;
    }

    .question-card[b-gk0p9tiosn] {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .question-stats[b-gk0p9tiosn] {
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 1rem;
    }

    .question-title[b-gk0p9tiosn] {
        font-size: 1.1rem;
    }

    .question-text[b-gk0p9tiosn] {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .hero-title[b-gk0p9tiosn] {
        font-size: 1.5rem;
    }

    .hero-subtitle[b-gk0p9tiosn] {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
    }

    .btn-join[b-gk0p9tiosn],
    .btn-explore[b-gk0p9tiosn] {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }

    .tabs-container[b-gk0p9tiosn] {
        flex-direction: column;
        align-items: stretch;
    }

    .tab-item[b-gk0p9tiosn] {
        text-align: center;
        padding: 0.5rem;
    }

    .btn-ask[b-gk0p9tiosn] {
        max-width: 100%;
    }

    .stat-number[b-gk0p9tiosn] {
        font-size: 1.2rem;
    }

    .stat-label[b-gk0p9tiosn] {
        font-size: 0.75rem;
    }
}
/* /Pages/LandinPage/Divice.razor.rz.scp.css */
/* --- PRODUCT HERO SECTION --- */
.product-hero-section[b-n67vq40t4c] {
    position: relative;
    /* Cambia 'fondo-producto.png' por el nombre real de tu imagen de fondo */
    background: url('/productoPage.svg') no-repeat center center;
    background-size: cover;
    min-height: 100vh;
    /* Ocupa toda la pantalla */
    display: flex;
    align-items: center;
    /* Centra verticalmente */
    justify-content: center;
    padding: 100px 5%;
    color: #fff;
    overflow: hidden;
    /* Evita scroll innecesario */
}

.product-container[b-n67vq40t4c] {
    position: relative;
    z-index: 2;
    /* Para que el contenido quede encima del overlay */
    max-width: 1400px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Separa texto e imagen */
    gap: 50px;
}

/* --- COLUMNA IZQUIERDA (TEXTO) --- */
.product-content[b-n67vq40t4c] {
    flex: 1;
    /* Toma el espacio disponible */
    max-width: 600px;
    margin-left: 70px;
    margin-top: -70px;
}

    .product-content h1[b-n67vq40t4c] {
        font-size: 4rem;
        /* Texto grande */
        font-weight: 550;
        line-height: 1.1;
        margin-bottom: 15px;
        color: #e0e6ed;
        /* Blanco suave */
    }

    .product-content .subtitle[b-n67vq40t4c] {
        font-size: 1.2rem;
        color: #a0aab5;
        margin-bottom: 30px;
        font-weight: 400;
    }

/* Botón Rosa "Acerca de" */
.btn-pink[b-n67vq40t4c] {
    display: inline-block;
    background-color: #e500cd;
    color: #fff;
    padding: 12px 110px;
    border-radius: 8px;
    /* Bordes muy redondos */
    text-decoration: none;
    font-weight: 700;
    margin-bottom: 20px;
    transition: background 0.3s;
}

    .btn-pink:hover[b-n67vq40t4c] {
        background-color: #c200ad;
    }

/* Bloques de descarga */
.downloads-block[b-n67vq40t4c] {
    margin-bottom: 30px;
}

.os-label[b-n67vq40t4c] {
    font-size: 1rem;
    color: #a0aab5;
    margin-bottom: 15px;
}

.store-buttons[b-n67vq40t4c] {
    display: flex;
    gap: 15px;
}

/* Estilo para las imágenes dentro de los botones */
.btn-store img[b-n67vq40t4c] {
    width: 20px;
    /* Ajusta este tamaño según  iconos*/
    height: auto;
    /* Mantiene la proporción */
    margin-right: 10px;
    /* Espacio entre la imagen y el texto */
    object-fit: contain;
    /* Asegura que el logo no se estire feo */
    display: inline-block;
    pointer-events: none;
}


/* Botones de las tiendas (Transparentes con borde) */
.btn-store[b-n67vq40t4c] {
    display: flex;
    align-items: center;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px 25px;
    border-radius: 8px;
    /* Bordes ligeramente redondeados */
    font-size: 1rem;
    cursor: pointer;
    gap: 10px;
    transition: all 0.3s;
    min-width: 175px;
    /* Para que tengan el mismo ancho aprox */
    justify-content: center;
}

    .btn-store:hover[b-n67vq40t4c] {
        background: rgba(255, 255, 255, 0.1);
        border-color: #e500cd;
        /* Detalle rosa al pasar el mouse */
    }

    .btn-store .icon[b-n67vq40t4c] {
        font-size: 1.2rem;
    }

/* --- COLUMNA DERECHA (IMAGEN) --- */
.product-image-wrapper[b-n67vq40t4c] {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    /* Alinea la imagen a la derecha */
}

    .product-image-wrapper img[b-n67vq40t4c] {
        max-width: 190%;
        /* Se adapta al ancho */
        height: auto;
        margin-top: -160px;
        margin-right: -180px;
        position: relative;
        z-index: -1;
    }

.store-buttons.vertical-stack[b-n67vq40t4c] {
    flex-direction: column;
    /* Esto los pone uno bajo el otro */
    align-items: flex-start;
    /* Los alinea a la izquierda */
}

/* --- RESPONSIVE (Móvil) --- */
@media (max-width: 900px) {
    .product-hero-section[b-n67vq40t4c] {
        background-image: none;
        /* Elimina imagen de fondo */
        align-items: flex-start;
        /* Alinea al inicio para manejar mejor el padding */
        padding-top: 0;
    }

    .product-container[b-n67vq40t4c] {
        flex-direction: column;
        text-align: center;
        padding-top: 0;
        gap: 30px;
    }

    .product-content[b-n67vq40t4c] {
        max-width: 100%;
        margin-left: 0;
        /* Resetea margen negativo */
        margin-top: 0;
        /* Resetea margen negativo */
        margin-bottom: 20px;
        padding-top: 15vh;
        /* Baja el texto */
    }

        .product-content h1[b-n67vq40t4c] {
            font-size: 3rem;
        }

    .store-buttons[b-n67vq40t4c] {
        justify-content: center;
    }

    .product-image-wrapper[b-n67vq40t4c] {
        justify-content: center;
        margin-top: 0;
    }

        .product-image-wrapper img[b-n67vq40t4c] {
            max-width: 140%;
            /* Ajusta ancho de imagen */
            margin-top: 0;
            /* Resetea margen negativo */
            transform: translateX(-90px);
        }
}
/* /Pages/LandinPage/HomePage.razor.rz.scp.css */
/* --- ESTILOS DE TU HOMEPAGE --- */

.main-background[b-pbwbl0jf6k] {
    /* Define la imagen de fondo y evita que se repita */
    background: url('/index.svg') no-repeat;
    background-position: center bottom;
    /* Escala la imagen para que siempre cubra el div, 
       priorizando mostrar la parte de abajo. */
    background-size: cover;
    /* Altura de pantalla completa */
    min-height: 110vh;
    /* Posicionamiento para el contenido interior */
    position: relative;
    overflow: hidden;
}

.homepage-content[b-pbwbl0jf6k] {
    padding-top: 10%;
    /* Incrementa este valor para bajar todo el contenido */
    padding-left: 10vw;
    color: #fff;
    max-width: 56078px;
    z-index: 2;
}

.highlight-pink[b-pbwbl0jf6k] {
    color: #e500cd;
    /* Red Normal (de la paleta) */
    font-size: 4.5rem;
    /* tamaño de las letras */
    font-weight: 1111113;
    /* grosor de las letras*/
}

.homepage-title[b-pbwbl0jf6k] {
    font-size: 4.5rem;
    /* tamaño de las letras */
    font-weight: 13;
    /* grosor de las letras*/
}

.homepage-header h1[b-pbwbl0jf6k] {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.homepage-description[b-pbwbl0jf6k] {
    max-width: 580px;
    font-size: 1rem;
    margin-bottom: 32px;
    color: #fff;
    /* Puedes ajustar según el contraste */
}

.homepage-buttons[b-pbwbl0jf6k] {
    display: flex;
    gap: 16px;
}

.btn-pink[b-pbwbl0jf6k] {
    background: #e500cd;
    /* Red Normal */
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

    .btn-pink:hover[b-pbwbl0jf6k] {
        background: #cb00b6;
        /* Red Normal:Active */
    }

.btn-outline[b-pbwbl0jf6k] {
    background: transparent;
    color: white;
    border: 2px solid white;
    padding: 10px 28px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

    .btn-outline:hover[b-pbwbl0jf6k] {
        border-color: #cb00b6;
        color: #cb00b6;
    }

@media (max-width: 900px) {
    .main-background[b-pbwbl0jf6k] {
        background-image: none;
    }

    .homepage-content[b-pbwbl0jf6k] {
        padding-top: 17vh;
        transform: translateX(-20px);
    }
}

/*
-------------------------------------
  SECCIÓN 2: ACERCA DE (CORREGIDO)
-------------------------------------
*/

/* 1. El contenedor principal de la sección */
.section-about[b-pbwbl0jf6k] {
    /* --- TUS ESTILOS DE FONDO (ESTÁN PERFECTOS) --- */
    background: url('/fondoHome.png') no-repeat;
    background-position: center bottom;
    background-size: cover;
    /* --- ALTURA Y POSICIÓN (LIMPIADO) --- */
    min-height: 150vh;
    position: relative;
    overflow: hidden;
    /* Evita que el contenido se salga */
    box-sizing: border-box;
    color: #fff;
    z-index: 1;
    /* --- LA SOLUCIÓN ---
      Usamos flex AQUÍ solo para centrar verticalmente 
      el .about-container dentro de la sección.
    */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 5%;
    /* Mantenemos tu padding */
}

/* 2. El contenedor que crea las 2 columnas (El div de ADENTRO) */
.about-container[b-pbwbl0jf6k] {
    /* AQUÍ es donde creamos las 2 columnas.
    */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 120px;
    /* Espacio entre la imagen y el texto */
    /* Le damos un ancho máximo */
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    /* Asegura el centrado */
}

/* 3. Columna izquierda (imagen del teléfono) */
.about-image-wrapper[b-pbwbl0jf6k] {
    flex: 1;
    /* La columna toma la mitad del espacio */
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-mockup[b-pbwbl0jf6k] {
    width: 160%;
    max-width: none;
    /* Ajusta el tamaño del teléfono */
    transform: rotateZ(0deg) translateY(90px);
    /* Ligera rotación como en la imagen */
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
}

/* 4. Columna derecha (título y tarjetas) */
.about-content[b-pbwbl0jf6k] {
    flex: 1.5;
    /* La columna de texto es un poco más ancha */
    text-align: right !important;
    /* <-- CAMBIO APLICADO: Alinea todo a la derecha */
}

    .about-content h2[b-pbwbl0jf6k] {
        font-size: 3.5rem;
        /* <-- CAMBIO APLICADO: Tamaño de título ajustado */
        font-weight: bold;
        margin-bottom: 40px;
    }

    .about-content p[b-pbwbl0jf6k] {
        font-size: 1rem;
        /* <-- CAMBIO APLICADO: Tamaño de descripción ajustado */
        color: #d0d0d0;
        /* Un gris claro */
        margin-bottom: 80px;
        margin-left: 180px;
    }

/* 5. El grid de 2x2 para las características */
.features-grid[b-pbwbl0jf6k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 columnas de igual tamaño */
    gap: 20px;
    /* Espacio entre los bloques */
}

/* 6. Los bloques con el efecto "vidrio" */
.feature-item[b-pbwbl0jf6k] {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.2s ease-in-out;
    text-align: right !important;
    /* <-- CAMBIO APLICADO: Alinea texto de tarjeta a la izquierda */
}

    .feature-item:hover[b-pbwbl0jf6k] {
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(-5px);
    }

/* 7. El círculo blanco del icono */
.feature-icon[b-pbwbl0jf6k] {
    background: white;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    /* 8. La imagen del icono dentro del círculo */
    .feature-icon img[b-pbwbl0jf6k] {
        /* Corregí el error de '..' */
        max-width: 50px;
        /* Tamaño correcto para el círculo de 80px */
        max-height: 50px;
        width: auto;
        height: auto;
    }

.feature-item span[b-pbwbl0jf6k] {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: right;
    flex: 1;
}


/* --- Media Query para Móviles --- */
@media (max-width: 900px) {
    .about-container[b-pbwbl0jf6k] {
        flex-direction: column;
        /* Apila las columnas en vertical */
        /* text-align: center; */
        /* <-- CAMBIO APLICADO: Línea eliminada */
    }

    .about-content[b-pbwbl0jf6k] {
        align-items: center;
    }

        .about-content p[b-pbwbl0jf6k] {
            max-width: 100%;
        }
}

@media (max-width: 500px) {
    .features-grid[b-pbwbl0jf6k] {
        grid-template-columns: 1fr;
        /* 1 columna en móviles pequeños */
    }

    .about-content h2[b-pbwbl0jf6k] {
        font-size: 2rem;
    }
}

/*
-------------------------------------
  SECCIÓN 3: ESPACIOS DE TRABAJO
-------------------------------------
*/

/* 1. Contenedor principal de la sección */
.section-workspaces[b-pbwbl0jf6k] {
    background: #192432;
    color: #fff;
    padding: 100px 5%;
    text-align: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* 2. Contenedor para centrar el contenido */
.workspaces-container[b-pbwbl0jf6k] {
    max-width: 1400px;
    margin: 0 auto;
}

.section-workspaces h2[b-pbwbl0jf6k] {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 24px;
}

.workspaces-description[b-pbwbl0jf6k] {
    font-size: 1rem;
    color: #d0d0d0;
    max-width: 750px;
    margin: 0 auto 60px auto;
    line-height: 1.6;
}

/* 3. La cuadrícula para las 3 tarjetas */
.workspaces-grid[b-pbwbl0jf6k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: left;
}

/* 4. Estilo de cada tarjeta (AHORA ES FLEX) */
.workspace-card[b-pbwbl0jf6k] {
    background: #0D131B;
    padding: 30px;
    border-radius: 16px;
    box-sizing: border-box;
    display: flex;
    /* <-- CAMBIO CLAVE */
    align-items: center;
    /* Alinea el ícono arriba con el texto */
    gap: 25px;
    /* Espacio entre ícono y bloque de texto */
}

/* 5. Contenedor del ícono */
.workspace-icon[b-pbwbl0jf6k] {
    flex-shrink: 0;
    /* Evita que el ícono se encoja */
}

    /* 6. Estilo del ícono */
    .workspace-icon img[b-pbwbl0jf6k] {
        width: 40px;
        height: 40px;
        filter: invert(27%) sepia(99%) saturate(5439%) hue-rotate(293deg) brightness(94%) contrast(100%);
    }

/* 7. Contenedor del texto */
.workspace-content[b-pbwbl0jf6k] {
    flex: 1;
    /* Ocupa el resto del espacio */
}

/* 8. Título de la tarjeta */
.workspace-card h3[b-pbwbl0jf6k] {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    /* <-- CORREGIDO (devuelta) */
    color: #fff;
}

/* 9. Subtítulo de la tarjeta */
.workspace-card .card-subtitle[b-pbwbl0jf6k] {
    font-size: 0.8rem;
    color: #c0c0c0;
    margin-bottom: 15px;
    font-weight: 500;
}

/* 10. Párrafo principal de la tarjeta */
.workspace-card p[b-pbwbl0jf6k] {
    font-size: 0.8rem;
    color: #d0d0d0;
    line-height: 1.6;
}


/* --- Media Query para Móviles --- */
@media (max-width: 900px) {
    .workspaces-grid[b-pbwbl0jf6k] {
        grid-template-columns: 1fr;
        /* Apila las tarjetas en 1 columna */
    }

    .section-workspaces h2[b-pbwbl0jf6k] {
        font-size: 2.5rem;
    }
}
/* /Pages/LandinPage/Pricing.razor.rz.scp.css */
/* --- SECCIÓN PRECIOS --- */
.pricing-section[b-5xtgykdtq7] {
    /* Fondo oscuro con un degradado sutil morado abajo a la derecha */
    background: radial-gradient(circle at bottom right, #4a1a55 0%, #0f172a 60%);
    min-height: 100vh;
    padding: 80px 5%;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Encabezado */
.pricing-header[b-5xtgykdtq7] {
    text-align: center;
    margin-bottom: 60px;
    max-width: 800px;
}

    .pricing-header h1[b-5xtgykdtq7] {
        font-size: 3.5rem;
        font-weight: 700;
        margin-bottom: 20px;
        color: #e0e0e0;
    }

    .pricing-header p[b-5xtgykdtq7] {
        font-size: 1rem;
        color: #a0aab5;
        line-height: 1.6;
    }

/* Grid de Tarjetas */
.pricing-grid[b-5xtgykdtq7] {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap; /* Para que bajen en pantallas pequeñas */
    width: 100%;
    max-width: 1200px;
}

/* --- ESTILOS GENERALES DE LA TARJETA --- */
.pricing-card[b-5xtgykdtq7] {
    flex: 1; /* Todas ocupan el mismo ancho */
    min-width: 300px; /* Ancho mínimo antes de colapsar */
    max-width: 380px;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empuja el botón al final */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .pricing-card:hover[b-5xtgykdtq7] {
        transform: translateY(-10px); /* Pequeña animación al pasar el mouse */
    }

    /* Icono (SVG) */
    .pricing-card .icon[b-5xtgykdtq7] {
        margin-bottom: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.pricing-icon[b-5xtgykdtq7] {
    width: 64px;
    height: 64px;
    color: #e500cd; /* Fuccia */
    filter: drop-shadow(0 0 5px rgba(229, 0, 205, 0.5)); /* Glow effect */
}

/* Títulos y Textos */
.pricing-card h2[b-5xtgykdtq7] {
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.card-description[b-5xtgykdtq7] {
    font-size: 0.9rem;
    color: #d1d5db;
    margin-bottom: 20px;
    font-style: italic;
    min-height: 40px; /* Para alinear alturas */
}

/* Lista de características */
.features[b-5xtgykdtq7] {
    text-align: left; /* Alineamos la lista a la izquierda */
    margin-bottom: 30px;
    font-size: 0.9rem;
    color: #e5e7eb;
}

    .features strong[b-5xtgykdtq7] {
        display: block;
        margin-bottom: 10px;
        color: #fff;
    }

    .features ul[b-5xtgykdtq7] {
        list-style: none;
        padding: 0;
    }

    .features li[b-5xtgykdtq7] {
        margin-bottom: 8px;
        line-height: 1.4;
    }

/* Botón de Precio */
.btn-price[b-5xtgykdtq7] {
    background-color: #d930b5; /* El rosa de tu diseño */
    color: white;
    border: none;
    padding: 12px;
    width: 100%;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
    font-family: 'Inter', sans-serif;
    font-style: italic;
}

    .btn-price:hover[b-5xtgykdtq7] {
        background-color: #b02090;
    }

/* --- COLORES ESPECÍFICOS DE CADA TARJETA --- */

/* 1. Plan Básico (Azul Oscuro) */
.pricing-card.basic[b-5xtgykdtq7] {
    background-color: #17254072;
    border: 1px solid #2a3b5e;
}

    .pricing-card.basic:hover[b-5xtgykdtq7] {
        /* Solo agregamos el neón y cambiamos el color del borde al rosa */
        box-shadow: 0 0 20px 5px rgba(229, 0, 205, 0.6), 0 0 40px 10px rgba(229, 0, 205, 0.3);
        border-color: #e500cd;
    }

/* 2. Plan Pro (Morado/Violeta) */
.pricing-card.pro[b-5xtgykdtq7] {
    background-color: #2d1b4e72;
    border: 1px solid #4a2b82;
}

    .pricing-card.pro:hover[b-5xtgykdtq7] {
        box-shadow: 0 0 20px 5px rgba(229, 0, 205, 0.6), 0 0 40px 10px rgba(229, 0, 205, 0.3);
        border-color: #e500cd;
    }

/* 3. Plan Premium (Casi Negro/Gris) */
.pricing-card.premium[b-5xtgykdtq7] {
    background-color: #1f1f1f72;
    border: 1px solid #333;
}

    .pricing-card.premium:hover[b-5xtgykdtq7] {
        box-shadow: 0 0 20px 5px rgba(229, 0, 205, 0.6), 0 0 40px 10px rgba(229, 0, 205, 0.3);
        border-color: #e500cd;
    }

/* Responsive */
@media (max-width: 900px) {
    .pricing-grid[b-5xtgykdtq7] {
        flex-direction: column;
        align-items: center;
    }

    .pricing-card[b-5xtgykdtq7] {
        width: 100%;
        max-width: 100%;
    }
}
/* /Pages/Login/Login.razor.rz.scp.css */
/* --- TUS ESTILOS ORIGINALES (Mantenidos igual) --- */
.login-left[b-lwdzw028cn] {
    background-color: #1E2D41;
}

.input-dark[b-lwdzw028cn] {
    background-color: rgba(25, 36, 49, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
    transition: none;
}

    .input-dark:focus[b-lwdzw028cn] {
        background-color: #192432;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
        outline: none;
    }

.login-right[b-lwdzw028cn] {
    background: url('/map_blur.svg') center/cover no-repeat;
    position: relative;
}

    .login-right[b-lwdzw028cn]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.01);
        backdrop-filter: blur(1px);
        z-index: 0;
    }

    .login-right > *[b-lwdzw028cn] {
        position: relative;
        z-index: 1;
    }

.text-pink[b-lwdzw028cn] {
    color: #FE00E4;
}

.btn-pink[b-lwdzw028cn] {
    width: 150px;
    background-color: #fe00e4;
    color: #fff;
    border: none;
    transition: 0.5s;
}

    .btn-pink:hover[b-lwdzw028cn] {
        background-color: #CB00B6;
    }

.btn-white[b-lwdzw028cn] {
    width: 150px;
    background-color: white;
    transition: 0.5s;
}

    .btn-white:hover[b-lwdzw028cn] {
        background-color: #FE00E4;
        color: #fff;
    }

.social-icons a img[b-lwdzw028cn] {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.social-icons a:hover img[b-lwdzw028cn] {
    transform: scale(1.15);
    filter: drop-shadow(0 0 6px rgba(255, 105, 180, 0.2)) brightness(1.2);
}

.env-footer .env-link[b-lwdzw028cn] {
    background: transparent;
    border: none;
    color: #fe00e4;
    text-decoration: underline;
    font-weight: 600;
    padding: 0;
}

.env-footer .env-link:hover[b-lwdzw028cn] {
    color: #CB00B6;
}

.env-chips .badge[b-lwdzw028cn] {
    font-weight: 600;
}

.env-modal-backdrop[b-lwdzw028cn] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.env-modal[b-lwdzw028cn] {
    width: min(560px, 90vw);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.env-option[b-lwdzw028cn] {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.env-option:last-child[b-lwdzw028cn] {
    border-bottom: none;
}

.env-connection[b-lwdzw028cn] {
    border: 1px dashed rgba(0, 0, 0, 0.2);
}

/* ======================================================== */
/* === ZONA DE PROTECCIàN DE ESCRITORIO Y AJUSTE MàVIL === */
/* ======================================================== */


@media (min-width: 992px) {
    .login-left[b-lwdzw028cn] {
        /* Esto restaura el 'rounded-start-3' original pero solo en PC */
        border-top-left-radius: var(--bs-border-radius-lg) !important;
        border-bottom-left-radius: var(--bs-border-radius-lg) !important;
    }

    /* Si tu dise¤o original ten¡a la parte derecha cuadrada, esto lo mantiene as¡ */
    .login-right[b-lwdzw028cn] {
        border-radius: 0 !important;
    }
}

/* 2. REGLAS PARA MàVIL/TABLET (Responsive) */
/* Se activan solo si la pantalla es menor a 991px */
@media (max-width: 991px) {

    /* Parche para permitir scroll en m¢viles muy peque¤os aunque uses vh-100 */
    .h-auto-mobile[b-lwdzw028cn] {
        height: auto !important;
        min-height: 100vh;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .login-container[b-lwdzw028cn] {
        width: 95% !important; /* Casi todo el ancho */
        margin-top: 4rem !important;
    }

    .login-left[b-lwdzw028cn] {
        /* En m¢vil redondeamos arriba */
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        padding: 2rem !important;
    }

    .login-right[b-lwdzw028cn] {
        /* En m¢vil redondeamos abajo */
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        padding: 3rem 1rem !important;
    }
}
/* /Pages/Register/Register.razor.rz.scp.css */
/* === ESTILOS BASE === */
.login-right[b-ir055ggt9o] {
    background-color: #1E2D41;
    /* Quitamos border-radius fijo para manejarlo en responsive */
}

/* Estilo unificado para inputs (Igual que en Login) */
.input-dark[b-ir055ggt9o] {
    background-color: rgba(25, 36, 49, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 0.5rem;
}

    .input-dark:focus[b-ir055ggt9o] {
        background-color: #192432 !important;
        border-color: #e43fad !important;
        box-shadow: none !important;
        outline: none;
    }

/* Arreglo para el select y sus opciones */
select.input-dark option[b-ir055ggt9o] {
    background-color: #1E2D41;
    color: white;
}

.btn-pink[b-ir055ggt9o] {
    background-color: #e43fad;
    color: #fff;
    border: none;
    transition: background 0.3s;
}

    .btn-pink:hover[b-ir055ggt9o] {
        background-color: #ff5ecb;
        color: white;
    }

.login-left[b-ir055ggt9o] {
    background: url('/map_blur.svg') center/cover no-repeat;
    position: relative;
    color: white;
}

    .login-left[b-ir055ggt9o]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.01);
        backdrop-filter: blur(1px);
        z-index: 0;
    }

    .login-left > *[b-ir055ggt9o] {
        position: relative;
        z-index: 1;
    }

.text-pink[b-ir055ggt9o] {
    color: #FE00E4;
}

.btn-white[b-ir055ggt9o] {
    background-color: white;
    color: #333;
    transition: 0.5s;
    border: none;
}

    .btn-white:hover[b-ir055ggt9o] {
        background-color: #FE00E4;
        color: #fff;
    }

.social-icons a img[b-ir055ggt9o] {
    transition: transform 0.2s ease;
}

.social-icons a:hover img[b-ir055ggt9o] {
    transform: scale(1.15);
}


/* === RESPONSIVE (Lógica unificada) === */

/* ESCRITORIO (Pantallas grandes > 992px) */
@media (min-width: 992px) {
    .login-container[b-ir055ggt9o] {
        max-width: 1100px; /* Un poco más ancho para el registro */
    }

    /* Panel Izquierdo (Mapa): Bordes redondeados a la izquierda */
    .login-left[b-ir055ggt9o] {
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
    }

    /* Panel Derecho (Formulario): Bordes redondeados a la derecha */
    .login-right[b-ir055ggt9o] {
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }

    /* Anchos específicos para distribuir mejor el espacio */
    .w-lg-40[b-ir055ggt9o] {
        width: 40% !important;
    }

    .w-lg-60[b-ir055ggt9o] {
        width: 60% !important;
    }
}

/* MÓVIL Y TABLET (Pantallas < 991px) */
@media (max-width: 991px) {
    .login-container[b-ir055ggt9o] {
        width: 95% !important;
        /* Margen superior grande para evitar choque con el navbar */
        margin-top: 6rem !important;
        margin-bottom: 2rem !important;
    }

    /* Panel Izquierdo (Mapa): Va arriba, bordes redondeados arriba */
    .login-left[b-ir055ggt9o] {
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        padding: 3rem 1rem !important;
    }

    /* Panel Derecho (Formulario): Va abajo, bordes redondeados abajo */
    .login-right[b-ir055ggt9o] {
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        padding: 2rem 1rem !important;
    }
}