/* Tamaños de fuente base */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
/*    body::before {
        width: 400px;
    }*/
}

/*@media (min-width: 1200px) {
    body::before {
        width: 500px;
    }
}*/

/* Estilos de enfoque */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Layout base */
html {
    position: relative;
    min-height: 100%;
}


body {
    margin-bottom: 60px;
    background: var(--bs-body-bg);
    position: relative;
}

    /*body::before {
        content: '';
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: auto;
        aspect-ratio: 254 / 332;
        background-image: url('/images/logo-clam.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.3;
        z-index: -1;
        pointer-events: none;
    }*/

/* Variables de tema claro (por defecto) - Estilo Laboratorio */
:root {
    --bs-body-bg: linear-gradient(135deg, #e8f5f7 0%, #f0f9fa 100%);
    --bs-body-bg-solid: #e8f5f7;
    --bs-body-color: #1a3a3d;
    --bs-border-color: #c5e3e8;
    --bs-card-bg: #ffffff;
    --bs-card-border: rgba(5, 150, 165, 0.12);
    --bs-primary: #0596a5;
    --bs-primary-hover: #047a87;
    --bs-success: #2d9f6f;
    --bs-success-hover: #258460;
    --bs-danger: #e63946;
    --bs-secondary: #5a7c85;
    --bs-info: #0dcaf0;
    --bs-muted: #6c8a94;
    --bs-shadow: rgba(5, 150, 165, 0.08);
    --bs-shadow-hover: rgba(5, 150, 165, 0.15);
    --bs-accent: #00d4aa;
    --bs-accent-light: rgba(0, 212, 170, 0.1);
}

/* Variables de tema oscuro */
[data-bs-theme="dark"] {
    --bs-body-bg: linear-gradient(135deg, #0f2027 0%, #203a43 100%);
    --bs-body-bg-solid: #0f2027;
    --bs-body-color: #e0f2f5;
    --bs-border-color: #2c4a52;
    --bs-card-bg: #1a2d35;
    --bs-card-border: rgba(13, 202, 240, 0.15);
    --bs-primary: #1a2d35;
    --bs-primary-hover: #243944;
    --bs-success: #2bb37c;
    --bs-success-hover: #3bc98a;
    --bs-danger: #ff6b6b;
    --bs-secondary: #7fa5b0;
    --bs-info: #0dcaf0;
    --bs-muted: #8fa9b3;
    --bs-shadow: rgba(0, 0, 0, 0.3);
    --bs-shadow-hover: rgba(13, 202, 240, 0.2);
    --bs-accent: #00ffcc;
    --bs-accent-light: rgba(0, 255, 204, 0.15);
}

    /*[data-bs-theme="dark"] body::before {
        opacity: 0.3;
    }*/

/* Aplicar variables a los elementos */
body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: background 0.3s ease, color 0.3s ease;
}

/* Cards y secciones con efecto cristal */
.bg-white,
section.bg-white,
.card {
    background-color: var(--bs-card-bg) !important;
    border: 1px solid var(--bs-card-border) !important;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

[data-bs-theme="light"] .bg-white,
[data-bs-theme="light"] section.bg-white {
    box-shadow: 0 2px 8px var(--bs-shadow), 0 0 1px rgba(5, 150, 165, 0.1);
}

/* Bordes */
.border,
.border-top,
.border-bottom {
    border-color: var(--bs-border-color) !important;
}

/* Sombras */
.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem var(--bs-shadow) !important;
}

/* Textos */
.text-dark {
    color: var(--bs-body-color) !important;
}

.text-muted {
    color: var(--bs-muted) !important;
}

/* Header con efecto cristal */
header.bg-primary {
    background: var(--bs-primary) !important;
    box-shadow: 0 4px 12px var(--bs-shadow);
    backdrop-filter: blur(8px);
}

[data-bs-theme="light"] header.bg-primary {
    background: linear-gradient(135deg, #0596a5 0%, #047a87 100%) !important;
}

[data-bs-theme="dark"] header.bg-primary {
    background: linear-gradient(135deg, #1a2d35 0%, #243944 100%) !important;
    border-bottom: 1px solid rgba(13, 202, 240, 0.1);
}

/* Botones */
.btn-success {
    background: linear-gradient(135deg, var(--bs-success) 0%, var(--bs-success-hover) 100%);
    border: none;
    box-shadow: 0 2px 8px rgba(45, 159, 111, 0.25);
    transition: all 0.3s ease;
}

    .btn-success:hover {
        background: linear-gradient(135deg, var(--bs-success-hover) 0%, var(--bs-success) 100%);
        box-shadow: 0 4px 12px rgba(45, 159, 111, 0.35);
        transform: translateY(-1px);
    }

/* Footer */
footer.bg-white {
    background-color: var(--bs-card-bg) !important;
    border-top-color: var(--bs-border-color) !important;
}

/* Inputs con estilo cristalino */
input.form-control {
    background-color: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    transition: all 0.3s ease;
}

    input.form-control:focus {
        background-color: var(--bs-card-bg);
        color: var(--bs-body-color);
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 0.2rem rgba(5, 150, 165, 0.15);
    }

[data-bs-theme="dark"] input.form-control:focus {
    border-color: var(--bs-accent);
    box-shadow: 0 0 0 0.2rem rgba(0, 255, 204, 0.2), 0 0 20px rgba(0, 255, 204, 0.1);
}

input.form-control::placeholder {
    color: var(--bs-muted);
    opacity: 0.6;
}

/* Barra de búsqueda mejorada */
[data-bs-theme="light"] .bg-white.rounded.shadow-sm {
    box-shadow: 0 4px 12px rgba(5, 150, 165, 0.08), 0 0 1px rgba(5, 150, 165, 0.12) !important;
}

/* Alertas */
.alert-info {
    background-color: rgba(13, 202, 240, 0.1);
    border-color: rgba(13, 202, 240, 0.2);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .alert-info {
    background-color: rgba(13, 202, 240, 0.15);
    border-color: rgba(13, 202, 240, 0.3);
}

.alert-success {
    background-color: rgba(25, 135, 84, 0.1);
    border-color: rgba(25, 135, 84, 0.2);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.15);
    border-color: rgba(25, 135, 84, 0.3);
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.2);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.3);
}

/* Badges */
.badge.bg-success {
    background-color: var(--bs-success) !important;
}

.badge.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

/* Tarjetas de navegación del home con efecto hover mejorado */
.btn.bg-white {
    background-color: var(--bs-card-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-card-border) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn.bg-white:hover {
        background-color: var(--bs-card-bg) !important;
        transform: translateY(-4px);
        box-shadow: 0 8px 24px var(--bs-shadow-hover) !important;
        border-color: var(--bs-primary) !important;
    }

[data-bs-theme="light"] .btn.bg-white:hover {
    box-shadow: 0 8px 24px rgba(5, 150, 165, 0.2), 0 0 20px rgba(5, 150, 165, 0.08) !important;
}

.btn.bg-transparent {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .btn.bg-transparent:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px var(--bs-shadow-hover) !important;
    }

[data-bs-theme="light"] .btn.bg-transparent:hover {
    box-shadow: 0 8px 24px rgba(5, 150, 165, 0.2), 0 0 20px rgba(5, 150, 165, 0.08) !important;
}

.btn.rounded {
    border-radius: 3.5rem !important;
}

/* Botones del menú principal (imágenes completas) */
.btn-menu-card {
    background: transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .btn-menu-card:hover {
        transform: translateY(-4px) scale(1.02);
    }

    .btn-menu-card:active {
        transform: translateY(-2px) scale(0.98);
    }

    .btn-menu-card img {
        transition: all 0.3s ease;
    }

    .btn-menu-card:hover img {
        filter: brightness(1.05);
    }

[data-bs-theme="light"] .btn-menu-card:hover img {
    box-shadow: 0 8px 24px rgba(5, 150, 165, 0.2), 0 0 20px rgba(5, 150, 165, 0.08);
}

[data-bs-theme="dark"] .btn-menu-card:hover img {
    box-shadow: 0 8px 24px rgba(13, 202, 240, 0.2), 0 0 20px rgba(0, 255, 204, 0.08);
}

/* Placeholders de iconos con efecto neón sutil */
.bg-info.bg-opacity-10 {
    background: linear-gradient(135deg, rgba(13, 202, 240, 0.12), rgba(0, 212, 170, 0.08)) !important;
}

.bg-success.bg-opacity-10 {
    background: linear-gradient(135deg, rgba(45, 159, 111, 0.12), rgba(0, 212, 170, 0.08)) !important;
}

.bg-danger.bg-opacity-10 {
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.12), rgba(255, 107, 107, 0.08)) !important;
}

.bg-secondary.bg-opacity-10 {
    background: linear-gradient(135deg, rgba(90, 124, 133, 0.12), rgba(127, 165, 176, 0.08)) !important;
}

[data-bs-theme="dark"] .bg-info.bg-opacity-10 {
    background: linear-gradient(135deg, rgba(13, 202, 240, 0.18), rgba(0, 255, 204, 0.12)) !important;
    box-shadow: inset 0 0 20px rgba(13, 202, 240, 0.1);
}

[data-bs-theme="dark"] .bg-success.bg-opacity-10 {
    background: linear-gradient(135deg, rgba(43, 179, 124, 0.18), rgba(0, 255, 204, 0.12)) !important;
    box-shadow: inset 0 0 20px rgba(43, 179, 124, 0.1);
}

[data-bs-theme="dark"] .bg-danger.bg-opacity-10 {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.18), rgba(230, 57, 70, 0.12)) !important;
    box-shadow: inset 0 0 20px rgba(255, 107, 107, 0.1);
}

[data-bs-theme="dark"] .bg-secondary.bg-opacity-10 {
    background: linear-gradient(135deg, rgba(127, 165, 176, 0.18), rgba(143, 169, 179, 0.12)) !important;
    box-shadow: inset 0 0 20px rgba(127, 165, 176, 0.1);
}

/* Transiciones suaves */
* {
    transition-property: background-color, border-color, color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* Excepciones a las transiciones */
.spinner-grow,
.spin-icon,
.pulse-dot,
button,
.btn {
    transition-property: all;
}

/* Splash Screen */
#splash-screen {
    background: linear-gradient(135deg, #29523c 0%, #2a543e 100%);
    backdrop-filter: blur(10px);
}

    #splash-screen img {
        animation: fadeInScale 0.6s ease-out;
    }

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Spinner del splash */
#splash-screen .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 0.3em;
}

.logo-clam {
    max-width: 150px;
    height: auto;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

    .logo-clam:hover {
        opacity: 1;
    }

@media (min-width: 768px) {
    .logo-clam {
        max-width: 180px;
    }
}