:root {
    --color1: #f6a106;
    --color2: #f6a106;
    --color3: #1f6963;
    --color4: #e2e8f0;
}

#line-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--color1);
    z-index: 9999;
    overflow: hidden;
}

#line-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--color2), var(--color3), var(--color4));
    background-size: 200% 100%;
    animation: slide 1s linear infinite;
    transition: width 0.2s ease;
}

@keyframes slide {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 200% 0;
    }
}

#global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.9);
    /* Fondo semi-transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s;
}

.spinner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Degradado circular usando tus colores */
    background: conic-gradient(from 0deg, var(--color2), var(--color3));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 0);
    animation: spin 1s linear infinite;
}

@keyframes slide {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================
   DISEÑO MODERNO PARA SWEETALERT2
========================================= */

/* Contenedor principal */
.swal2-container {
    z-index: 99999999 !important;
}

/* Caja del Modal */
.swal2-popup {
    border-radius: 12px !important;
    /* Un poco menos curvo para verse más profesional */
    padding: 1.5rem !important;
    /* Mejor respiración, el 0.4rem ahogaba el contenido */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    /* Sombra estilo Tailwind lg */
    width: 24em !important;
    /* Ligeramente más compacto */
    font-family: inherit !important;
    /* Para que tome la fuente de tu sistema (ceagro) */
}

/* Ícono un poco más pequeño y sutil */
.swal2-icon {
    transform: scale(0.85) !important;
    margin: 1rem auto 0.5rem auto !important;
}

/* =========================================
   TEXTOS (Solución al tamaño gigante)
========================================= */

/* Título */
.swal2-title {
    font-size: 1.15rem !important;
    /* Tamaño más recatado */
    font-weight: 700 !important;
    color: #2c3e50 !important;
    /* Tu gris corporativo oscuro */
    margin-bottom: 0.25rem !important;
    padding: 0 !important;
}

/* Texto de descripción */
.swal2-html-container {
    font-size: 0.85rem !important;
    /* Texto más pequeño y legible (tipo text-sm) */
    color: #64748b !important;
    /* Gris suave */
    margin: 0.5rem 1rem 1rem 1rem !important;
    line-height: 1.5 !important;
}

.modal {
    z-index: 9900000 !important;
}

.modal-backdrop {
    z-index: 990000 !important;
}

.btn {
    border-radius: 15px !important;
}

/* Variables dinámicas que podrían depender de la empresa en el futuro */
.btn-main {
    background-color: #013f80 !important;
    color: #fff !important;
}

.btn-main:hover {
    background-color: #154c48 !important;
    color: #fff !important;
}

.aw-text-green-6 {
    color: #013f80 !important;
}

.text-primary {
    color: #013f80 !important;
    font-weight: 800 !important;
}


/* Clases personalizadas */
.font-ceagro-black {
    font-family: 'Flexo-Black', sans-serif;
}

.font-ceagro-bold {
    font-family: 'Flexo-Bold', sans-serif;
}

.font-ceagro-demi {
    font-family: 'Flexo-Demi', sans-serif;
}

.font-ceagro-light {
    font-family: 'Flexo-Light', sans-serif;
}

.font-ceagro-regular {
    font-family: 'Flexo-Regular', sans-serif;
}

.font-ceagro {
    font-family: 'Flexo-Medium', sans-serif;
}

.aw-container {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

.btn:focus,
.btn.focus,
.btn:active:focus,
.btn:active.focus {
    outline: none !important;
    box-shadow: none !important;
}

/* =========================================
   BOTONES (Estilo administrativo)
========================================= */
.swal2-container {
    z-index: 99999999 !important;
    font-family: 'Flexo-Medium', sans-serif !important;
}

.swal2-popup:not(.swal2-toast) {
    border-radius: 8px !important;
    padding: 1.25rem 1rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
    width: 22em !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon {
    transform: scale(0.65) !important;
    margin: 0.5rem auto 0.5rem auto !important;
}

.swal2-popup:not(.swal2-toast) .swal2-title {
    font-size: 1.1rem !important;
    font-family: 'Flexo-Bold', sans-serif !important;
    color: #013f80 !important;
    margin-bottom: 0.25rem !important;
    padding: 0 !important;
}

.swal2-popup:not(.swal2-toast) .swal2-html-container {
    font-size: 0.85rem !important;
    font-family: 'Flexo-Regular', sans-serif !important;
    color: #64748b !important;
    margin: 0.25rem 0.5rem 1rem 0.5rem !important;
    line-height: 1.4 !important;
}

.swal2-popup.swal2-toast {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px 16px !important;
    width: auto !important;
    max-width: 320px !important;
    min-height: 48px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

.swal2-popup.swal2-toast .swal2-icon {
    margin: 0 12px 0 0 !important;
    border-width: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
    font-size: 14px !important;
}

.swal2-popup.swal2-toast .swal2-title {
    display: flex !important;
    align-items: center !important;
    font-size: 0.85rem !important;
    font-family: 'Flexo-Bold', sans-serif !important;
    color: #1e293b !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.swal2-popup.swal2-toast .swal2-html-container,
.swal2-popup.swal2-toast .swal2-actions {
    display: none !important;
}

.swal2-actions {
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
}

.swal2-confirm {
    background-color: #013f80 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0.4rem 1.25rem !important;
    font-size: 0.75rem !important;
    font-family: 'Flexo-Bold', sans-serif !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
}

.swal2-confirm:hover {
    background-color: #012d5e !important;
}

.swal2-cancel {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    padding: 0.4rem 1.25rem !important;
    font-size: 0.75rem !important;
    font-family: 'Flexo-Bold', sans-serif !important;
    transition: all 0.2s ease-in-out !important;
}

.swal2-cancel:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

.aw-carousel-wrapper {
    position: relative;
    width: 100%;
}

.aw-carousel-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.aw-carousel-slide {
    flex-shrink: 0;
    box-sizing: border-box;
    opacity: 0.5;
    transition: opacity 0.5s ease;
}

.aw-carousel-slide.aw-slide-active {
    opacity: 1;
}

.aw-carousel-controls {
    display: flex;
    align-items: center;
    position: relative;
    gap: 1rem;
    margin-top: 1.5rem;
}

.controls-left {
    justify-content: flex-start;
}

.controls-center {
    justify-content: center;
}

.controls-right {
    justify-content: flex-end;
}

.aw-dot {
    width: 10px;
    height: 10px;
    background-color: #cbd5e1;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}

.aw-dot.active {
    background-color: #217b71;
    transform: scale(1.2);
}

.aw-arrow {
    background-color: white;
    border: 1px solid #e2e8f0;
    color: #217b71;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.aw-arrow:hover {
    border-color: #f4940a;
    color: #217b71;
    border-width: 2px;
}

.aw-arrow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

body.night-mode .aw-dot {
    background-color: #334155;
}

body.night-mode .aw-dot.active {
    background-color: #217b71;
}

body.night-mode .aw-arrow {
    background-color: #217b71;
    border-color: #217b71;
    color: #60a5fa;
}

body.night-mode .aw-arrow:hover {
    background-color: #334155;
    border-color: #60a5fa;
}

body.aw-video-active {
    overflow: hidden;
}

.aw-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #9ca3af;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.aw-nav-btn:hover {
    background-color: #4b5563;
}

.aw-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #e5e7eb;
    color: #9ca3af;
}

.play-overlay {
    transition: background-color 0.3s;
}

.video-card:hover .play-overlay {
    background-color: rgba(0, 0, 0, 0.2);
}

.video-card:hover .play-icon {
    transform: scale(1.1);
}

.aw-video-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.aw-video-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.aw-video-container {
    width: 90%;
    max-width: 900px;
    height: auto;
    max-height: 85vh;
    background: black;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 100000;
}

.aw-video-modal-overlay.active .aw-video-container {
    transform: scale(1);
}

#aw-video-player {
    width: 100%;
    height: auto;
    max-height: 85vh;
    object-fit: contain !important;
}

.aw-close-video {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 100001;
}

body.night-mode .aw-nav-btn {
    background-color: #374151;
    color: #e5e7eb;
}

body.night-mode .aw-nav-btn:hover {
    background-color: #4b5563;
}

body.night-mode .aw-nav-btn:disabled {
    background-color: #1f2937;
    color: #4b5563;
}

body.night-mode .aw-video-modal-overlay {
    background: rgba(0, 0, 0, 0.8);
}

.mask-shape {
    clip-path: circle(70% at 90% 50%);
}

.aw-bg-dotted-map {
    background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    position: relative;
}

.aw-bg-dotted-map::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

body.night-mode .aw-bg-dotted-map {
    background-image: radial-gradient(#374151 1.5px, transparent 1.5px);
    background-color: transparent !important;
}

[data-aw-effect] {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
    will-change: opacity, transform;
}

.aw-effect-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

[data-aw-effect="fade-up"] {
    transform: translateY(30px);
}

[data-aw-effect="fade-up"].aw-effect-active {
    opacity: 1;
    transform: translateY(0);
}

[data-aw-effect="fade-in"] {
    opacity: 0;
    transform: translateY(0);
}

[data-aw-effect="fade-in"].aw-effect-active {
    opacity: 1;
}

[data-aw-effect="zoom-in"] {
    transform: scale(0.9);
}

[data-aw-effect="zoom-in"].aw-effect-active {
    opacity: 1;
    transform: scale(1);
}

[data-home="fade-init"] {
    animation: homeFadeIn 1s ease-out forwards;
    opacity: 0;
}

@keyframes homeFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.awx-invisible {
    opacity: 0;
    visibility: hidden;
}

.cursor-blink::after {
    content: '|';
    margin-left: 2px;
    animation: awx-blink 1s infinite;
}

@keyframes awx-blink {
    50% {
        opacity: 0;
    }
}

.awx-scroll-show {
    opacity: 1;
    visibility: visible;
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
    transform: translateY(0) scale(1) rotate(0);
    filter: blur(0);
}

.awx-reveal-up {
    transform: translateY(40px);
}

.awx-reveal-down {
    transform: translateY(-40px);
}

.awx-reveal-left {
    transform: translateX(-40px);
}

.awx-reveal-right {
    transform: translateX(40px);
}

.awx-reveal-zoom {
    transform: scale(0.8);
}

.awx-reveal-blur {
    filter: blur(10px);
}

.awx-reveal-rotate {
    transform: rotate(15deg) translateY(20px);
}

.awx-glitch {
    position: relative;
    display: inline-block;
}

.awx-glitch::before,
.awx-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.awx-glitch::before {
    color: #0ff;
    z-index: -1;
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.awx-glitch::after {
    color: #f0f;
    z-index: -2;
    animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% {
        clip-path: inset(20% 0 80% 0);
        transform: translate(-2px, 0);
    }

    100% {
        clip-path: inset(80% 0 20% 0);
        transform: translate(2px, 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip-path: inset(10% 0 90% 0);
        transform: translate(2px, 0);
    }

    100% {
        clip-path: inset(90% 0 10% 0);
        transform: translate(-2px, 0);
    }
}

@layer utilities {
    @keyframes aw-scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    .aw-animate-scroll {
        animation: aw-scroll 40s linear infinite;
    }
}

body.night-mode .aw-bg-white {
    background-color: #1e1e1e !important;
    border-color: #2b2b2b !important;
    color: #e5e7eb !important;
}

body.night-mode .aw-text-gray-900 {
    color: #f3f4f6 !important;
}

body.night-mode .aw-text-gray-700,
body.night-mode .aw-text-gray-600,
body.night-mode .aw-text-gray-500 {
    color: #9ca3af !important;
}

body.night-mode .aw-bg-\[\#FFF8EB\] {
    background-color: #1a1612 !important;
    border-color: #2b2b2b !important;
}

body.night-mode .aw-bg-\[\#EBFBF7\] {
    background-color: #0c1f1d !important;
    border-color: #2b2b2b !important;
}

body.night-mode .aw-bg-gray-200,
body.night-mode .aw-bg-gray-100,
body.night-mode .aw-bg-gray-50 {
    background-color: #2d2d2d !important;
    color: #fff !important;
}

body.night-mode .aw-from-white {
    background-color: #222;
}

body.night-mode .aw-border-gray-200,
body.night-mode .aw-border-gray-100 {
    border-color: #333 !important;
}

body.night-mode .btn-light {
    background-color: #2d2d2d !important;
    color: #fff !important;
    border: 1px solid #333 !important;
}