/* Aysatec Color Palette - Bright Yellow Primary, Soft Blue Secondary */

:root {
    /* Soft Blue Palette - Secondary Colors */
    --aysatec-soft-blue-primary: #4B75F2;
    --aysatec-soft-blue-secondary: #4064CF;
    --aysatec-soft-blue-tertiary: #3350A6;
    --aysatec-soft-blue-dark: #273C7D;
    --aysatec-soft-blue-darker: #1A2954;
    
    /* Bright Yellow Palette - Primary Colors */
    --aysatec-yellow-primary: #D3D929;
    --aysatec-yellow-secondary: #B0B522;
    --aysatec-yellow-tertiary: #888C1B;
    --aysatec-yellow-dark: #616313;
    --aysatec-yellow-darker: #393B0B;
    
    /* Vivid Orange Palette */
    --aysatec-orange-primary: #F27405;
    --aysatec-orange-secondary: #CF6304;
    --aysatec-orange-tertiary: #A64F03;
    --aysatec-orange-dark: #7D3C02;
    --aysatec-orange-darker: #542802;
    
    /* Strong Red Palette */
    --aysatec-red-primary: #BF2121;
    --aysatec-red-secondary: #ED2828;
    --aysatec-red-tertiary: #9C1A1A;
    --aysatec-red-dark: #731414;
    --aysatec-red-darker: #4A0D0D;
}

/* Primary color applications - Bright Yellow */

/* Primary buttons - using bright yellow */
.btn-primary {
    background-color: var(--aysatec-yellow-primary) !important;
    border-color: var(--aysatec-yellow-primary) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

.btn-primary:hover {
    background-color: var(--aysatec-yellow-secondary) !important;
    border-color: var(--aysatec-yellow-secondary) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

/* Secondary buttons - using soft blue */
.btn-secondary {
    background-color: var(--aysatec-soft-blue-primary) !important;
    border-color: var(--aysatec-soft-blue-primary) !important;
    color: #ffffff !important;
}

.btn-secondary:hover {
    background-color: var(--aysatec-soft-blue-secondary) !important;
    border-color: var(--aysatec-soft-blue-secondary) !important;
    color: #ffffff !important;
}

/* Navigation links - bright yellow for active/hover */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--aysatec-soft-blue-primary) !important;
}

.navbar .navbar-nav .nav-link {
  color: var(--aysatec-soft-blue-darker) !important;
}

/* Feature icons - bright yellow background */
.feature-icon {
    background: var(--aysatec-yellow-primary) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

.feature-item:hover .feature-icon {
    background: var(--aysatec-yellow-secondary) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

/* Service items - bright yellow accent */
.service .service-inner::before {
    background: linear-gradient(45deg, var(--aysatec-yellow-primary), var(--aysatec-yellow-secondary)) !important;
}

.service .service-item:hover h5,
.service .service-item:hover a {
    color: var(--aysatec-yellow-primary) !important;
}

/* Progress bars - bright yellow */
.experience .progress .progress-bar {
    background: linear-gradient(45deg, var(--aysatec-yellow-primary), var(--aysatec-yellow-secondary)) !important;
}

/* Testimonial navigation - bright yellow */
.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    background: var(--aysatec-yellow-primary) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--aysatec-yellow-secondary) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

/* Footer links - darker yellow for better readability */
.footer .btn.btn-link {
    color: var(--aysatec-yellow-darker) !important;
}

.footer .btn.btn-link:hover {
    color: var(--aysatec-yellow-dark) !important;
}

/* Copyright links - darker yellow for better readability */
.copyright a {
    color: var(--aysatec-yellow-darker) !important;
}

.copyright a:hover {
    color: var(--aysatec-yellow-dark) !important;
}

/* About section accent - bright yellow */
.about-img::before {
    background: linear-gradient(45deg, var(--aysatec-yellow-primary), var(--aysatec-yellow-secondary)) !important;
}

/* Newsletter section - bright yellow accent */
.newsletter {
    background: linear-gradient(135deg, rgba(211, 217, 41, 0.1), rgba(176, 181, 34, 0.1)) !important;
}

/* Team social buttons - bright yellow */
.team .team-item .team-social .btn {
    background: var(--aysatec-yellow-primary) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

.team .team-item:hover .team-social .btn {
    background: var(--aysatec-yellow-secondary) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

/* Appointment section - subtle yellow background */
.appoinment {
    background: linear-gradient(135deg, rgba(211, 217, 41, 0.05), rgba(176, 181, 34, 0.05)) !important;
}

/* Carousel indicators - bright yellow accent */
.carousel .carousel-indicators [data-bs-target] {
    border-color: var(--aysatec-yellow-primary) !important;
}

.carousel .carousel-indicators [data-bs-target].active {
    background-color: var(--aysatec-yellow-primary) !important;
}

/* Form focus states - bright yellow */
.form-control:focus {
    border-color: var(--aysatec-yellow-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(211, 217, 41, 0.25) !important;
}

/* Links - darker yellow for better readability */
a {
    color: var(--aysatec-yellow-darker) !important;
}

a:hover {
    color: var(--aysatec-yellow-dark) !important;
}

/* Text highlights - subtle yellow background */
::selection {
    background-color: rgba(211, 217, 41, 0.3) !important;
}

::-moz-selection {
    background-color: rgba(211, 217, 41, 0.3) !important;
}

/* Subtle background accents for sections */
.feature-row {
    background: linear-gradient(135deg, rgba(211, 217, 41, 0.02), rgba(75, 117, 242, 0.02)) !important;
}

/* Hover effects for interactive elements */
.btn-outline-primary {
    color: var(--aysatec-yellow-primary) !important;
    border-color: var(--aysatec-yellow-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--aysatec-yellow-primary) !important;
    border-color: var(--aysatec-yellow-primary) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

/* Card hover effects */
.service .service-item:hover {
    border-color: var(--aysatec-yellow-primary) !important;
}

/* Section headers - bright yellow accent */
.section-title::after {
    background: var(--aysatec-yellow-primary) !important;
}

/* Timeline elements - bright yellow */
.timeline-item::before {
    background: var(--aysatec-yellow-primary) !important;
}

/* Alert components - using Aysatec colors */
.alert-primary {
    background-color: rgba(211, 217, 41, 0.1) !important;
    border-color: var(--aysatec-yellow-primary) !important;
    color: var(--aysatec-yellow-darker) !important;
}

.alert-info {
    background-color: rgba(75, 117, 242, 0.1) !important;
    border-color: var(--aysatec-soft-blue-primary) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

.alert-warning {
    background-color: rgba(242, 116, 5, 0.1) !important;
    border-color: var(--aysatec-orange-primary) !important;
    color: var(--aysatec-orange-darker) !important;
}

.alert-danger {
    background-color: rgba(191, 33, 33, 0.1) !important;
    border-color: var(--aysatec-red-primary) !important;
    color: var(--aysatec-red-darker) !important;
}

/* Badge components */
.badge-primary {
    background-color: var(--aysatec-yellow-primary) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

.badge-secondary {
    background-color: var(--aysatec-soft-blue-primary) !important;
    color: #ffffff !important;
}

.badge-warning {
    background-color: var(--aysatec-orange-primary) !important;
    color: #ffffff !important;
}

.badge-danger {
    background-color: var(--aysatec-red-primary) !important;
    color: #ffffff !important;
}

/* Loading spinner - bright yellow */
#spinner {
    border-color: var(--aysatec-yellow-primary) !important;
    border-top-color: transparent !important;
}

/* Back to top button - bright yellow */
.back-to-top {
    background: var(--aysatec-yellow-primary) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

.back-to-top:hover {
    background: var(--aysatec-yellow-secondary) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

/* Topbar - bright yellow background */
.bg-primary {
    background-color: var(--aysatec-yellow-tertiary) !important;
}
.bg-secondary {
    background-color: var(--aysatec-soft-blue-primary) !important;
}

/* Sticky navbar - subtle yellow accent */
.sticky-top {
    border-bottom: 2px solid var(--aysatec-yellow-primary) !important;
}

/* Dropdown menus - subtle yellow accent */
.dropdown-menu {
    border-top: 3px solid var(--aysatec-yellow-primary) !important;
}

.dropdown-item:hover {
    background-color: rgba(211, 217, 41, 0.1) !important;
    color: var(--aysatec-yellow-darker) !important;
}

/* Form labels - soft blue for contrast */
label {
    color: var(--aysatec-soft-blue-darker) !important;
}

/* Input placeholders - soft blue */
::placeholder {
    color: var(--aysatec-soft-blue-tertiary) !important;
    opacity: 0.7 !important;
}

/* Table headers - soft blue */
.table thead th {
    background-color: rgba(75, 117, 242, 0.05) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

/* Pagination - darker yellow for better readability */
.page-item.active .page-link {
    background-color: var(--aysatec-yellow-darker) !important;
    border-color: var(--aysatec-yellow-darker) !important;
    color: #ffffff !important;
}

.page-link {
    color: var(--aysatec-yellow-darker) !important;
}

.page-link:hover {
    color: var(--aysatec-yellow-dark) !important;
}

/* Modal headers - bright yellow accent */
.modal-header {
    border-bottom: 3px solid var(--aysatec-yellow-primary) !important;
}

/* Tooltip - bright yellow */
.tooltip-inner {
    background-color: var(--aysatec-yellow-primary) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--aysatec-yellow-primary) !important;
}

/* Popover - bright yellow header */
.popover-header {
    background-color: var(--aysatec-yellow-primary) !important;
    color: var(--aysatec-soft-blue-darker) !important;
}

/* Breadcrumb - darker yellow active */
.breadcrumb-item.active {
    color: var(--aysatec-yellow-darker) !important;
}

/* List group - darker yellow active */
.list-group-item.active {
    background-color: var(--aysatec-yellow-darker) !important;
    border-color: var(--aysatec-yellow-darker) !important;
    color: #ffffff !important;
} 

.border-aysatec-primary {
  border-color: var(--aysatec-yellow-primary, #D3D929) !important;
} 

.navbar .navbar-nav .dropdown-menu .dropdown-item,
.navbar .navbar-nav .dropdown-menu .dropdown-item:active {
  color: var(--aysatec-soft-blue-darker) !important;
}

.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar .navbar-nav .dropdown-menu .dropdown-item.active {
  color: var(--aysatec-soft-blue-primary) !important;
}

/* Estilos para reCAPTCHA v2 */
.g-recaptcha {
    margin: 15px 0;
    padding: 10px;
    border: 1px solid var(--aysatec-yellow-primary);
    border-radius: 8px;
    background-color: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 78px;
}

/* Asegurar que el reCAPTCHA sea responsivo */
@media (max-width: 576px) {
    .g-recaptcha {
        transform: scale(0.85);
        transform-origin: center;
        margin: 10px -10px;
    }
}