/* 🎨 Variables principales: Cambia aquí los colores globales */
:root {
    --bs-primary: #FFD700; /* Color principal (botones, acentos) */
    --bs-secondary: #343a40; /* Color secundario (textos oscuros, header/footer) */
    --bs-dark: #212529; /* Color oscuro general */
    --bs-light: #f8f9fa; /* Color claro general (fondos) */
    --bs-gray-600: #6c757d; /* Gris para textos secundarios */
    --bs-primary-rgb: 255, 215, 0;
    --bs-success-rgb: 25, 135, 84; /* Verde de éxito */
    --bs-warning-rgb: 255, 193, 7; /* Amarillo de advertencia */
    --bs-info-rgb: 13, 202, 240; /* Azul de información */
    --light-primary: rgba(var(--bs-primary-rgb), 0.1);
    --light-success: rgba(var(--bs-success-rgb), 0.1);
    --light-warning: rgba(var(--bs-warning-rgb), 0.1);
    --light-info: rgba(var(--bs-info-rgb), 0.1);
}

/* 📝 Tipografía general */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
}

/* 🔍 Textos con recorte y sin bordes al enfocar */
h1:focus, .project-title, .overlay-text {
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 🔗 Links */
a, .btn-link {
    color: #006bb7; /* Color de los enlaces */
    transition: color 0.2s ease;
}

    .btn-link:hover, .hover-dark:hover {
        color: var(--bs-dark) !important; /* Color al pasar el mouse */
    }

/* 🔘 Botones */
.btn-primary {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    font-weight: bold;
    transition: all 0.2s ease;
}

.btn-outline-primary {
    background-color: transparent;
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

    .btn-outline-primary:hover {
        background-color: var(--bs-primary);
        color: #fff;
    }

/* ✏️ Formulario */
.btn:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; /* Borde al enfocar */
}

.form-control, .form-select {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border-color: #dee2e6; /* Color del borde */
}

    .form-control::placeholder {
        color: #6c757d; /* Color del placeholder */
        opacity: 0.7;
    }

.form-floating .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .25);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* ✅ Validación */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050; /* Verde de éxito */
}

.invalid, .validation-message {
    color: #e50000; /* Rojo de error */
    outline: 1px solid #e50000;
}

/* 📌 Navegación */
.nav-link {
    transition: color 0.3s ease-in-out;
}

    .nav-link.hover-primary:hover {
        color: var(--bs-primary) !important;
    }

.header-scrolled {
    background-color: #343a40 !important; /* Fondo del header al hacer scroll */
    transition: background-color 0.3s ease-in-out;
}

/* 🖼️ Proyectos y Tienda */
.project-item, .store-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .project-item:hover, .store-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }

    .project-item img, .store-item-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .project-item:hover img, .store-card:hover .store-item-img {
        transform: scale(1.05);
    }

/* 📊 Paneles */
.admin-container, .login-container, .content-panel, .account-management-container {
    border-radius: 0.75rem;
    background-color: #fff;
}

.admin-card, .stat-box {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-width: 2px !important;
}

    .admin-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
    }

/* ⚠️ Errores Blazor */
.blazor-error-boundary {
    background: #b32121; /* Fondo del error */
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

/* 🗺️ Mapas */
.map-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 📦 Tarjetas */
.card-title {
    font-size: 1.3rem;
}

.card-text {
    font-size: 0.9rem;
    line-height: 1.4;
}

.card-body {
    padding: 1.25rem;
}

.card-img-top-container {
    height: 200px;
    overflow: hidden;
}

/* ✂️ Texto truncado */
.text-truncate-line-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-truncate-multiline {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 🖼️ Galería */
.gallery-img-wrapper {
    overflow: hidden;
    border-radius: 0.5rem;
}

.gallery-img {
    transition: transform 0.3s ease-in-out;
}

    .gallery-img:hover {
        transform: scale(1.05);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

.img-fluid:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
    transition: 0.3s ease;
}

/* 🔔 Toasts */
.blazored-toast {
    position: fixed !important;
    top: 145px;
    right: 0;
    margin: 1rem;
    z-index: 1100 !important;
    max-width: 320px;
}

/* 📄 Estructura página */
.page {
    min-height: calc(100vh - 95px - 200px); /* Alto total - header - footer */
}
.logo-responsive {
    height: 120px; /* tamaño grande para escritorio */
    object-fit: contain;
    margin-left: 50px;
    transition: height 0.3s ease, margin-left 0.3s ease;
}

@media (max-width: 768px) {
    .logo-responsive {
        height: 60px; /* más pequeño en tablet y móvil */
        margin-left: 15px; /* menos margen a la izquierda */
    }
}