:root {
    
    
    /* Main colors */
    --cop-yellow: #F8BB3D;
    --cop-green: #36B1A9;
    --cop-red: #E55536;
    --black:#000000;
    --white: #FFFFFF;

    --cop-green-dark: #36b1a983;
    --cop-red-dark: #e5563692;


    --bg-whitelight: #f2efefe0;
    --bg-difuminaded: #f2efefe0;
    --bg-cop-lightred: #ed725651;
    --bg-header: white;
    --bg-body: linear-gradient(179.71deg, #FFFFFF -9.35%, #c7bdc1 108.03%);
    --bg-card: #ecececad;
    --bg-label: #E4E4E4;
    --bg-input-text: #ebe7e6;
    --bg-grey:rgba(217, 217, 217, 0.98);
    --bg-grey-dark:#878282d0;
    --bg-grey-new: #a6a6a6ad;


    --bg-bt-cop-yellow: #f8ba3d33;

    --stroke-icon: #8a8888;

    /* Text colors */
    --main-text: #324F5E;
    --normal-text: #616675;
    --normal-text2: #a9c2ce;
    --input-text: #aeacacba;
    /* Buttons colors */
    --button-cop-red: #E55536;
    --button-cop-yellow: #F8BB3D;
    --button-cop-lightred: #8c2710;
    --button-cop-darkred: #8c2710;
    --button-lightred: #da454ae3;
    --button-cop-lightyellow: #8b6924;

    --button-verylightred: #e14e6174;
    --button-pending: #FFC542;
    --button-confirmed: #3DD598;
    --button-press-gray: #aeacacba;

    --complete-state: #36B1A9;
    --pending-state: #cac7c7e0;
    --label-blue: #275ea0d5;
    --bg-blue: #cbd5e2c1;

    --font-type: 'Quicksand', sans-serif;

    /* Text sizes */
    --basesize: 16px;
    --sssm: 0.5rem;
    --ssm: 0.75rem;
    --sm: 0.875rem;
    --md: 1rem;
    --lg: 1.125rem;
    --xl: 1.25rem;
    --xxl: 1.5rem;
    --xxxl: 1.625rem;
    
    /* Text weight */
    --light: 400;
    --normal: 500;
    --bold:600;
    --big-bold:700;

    --background: linear-gradient(179.71deg, #FFFFFF -9.35%, #c7bdc1 108.03%);

    --grey-title: #4e4c4c;
    --grey-section-title: #7c7979d8;  
    --grey-label: #616675;
    --grey-light-text:#8b8b8bea;
    --grey-normal-text:#949191d8; 
    --grey-dark-text:#595757d0;
    --grey-dark2-text:#454444eb;

    --text-input-field: #f0ecec9f;

    --very-light-pink: #aeacacba;
    --very-light-background: #e6e2e2a1;

    --dark: #232830;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Animación de carga */
.spinner {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spinner-border {
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--cop-red);
    border-radius: 50%;
    width: 50px; /* Valor explícito en lugar de 100% */
    height: 50px;
    animation: spin 1s linear infinite;
}

.spinner-icon {
    position: absolute;
    width: 30px; /* Ajusta según el tamaño deseado del icono */
    height: 30px; /* Ajusta según el tamaño deseado del icono */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Asegura que el logo esté sobre el spinner pero no afecte su forma */
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}