/* Titulo */
@font-face {
    font-family: 'Poppins1';
    src: url('/assets/fuentes/Poppins-Bold.woff2') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Texto */
@font-face {
    font-family: 'Poppins';
    src: url('/assets/fuentes/Poppins-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

/* Inputs */
@font-face {
    font-family: 'Nunito';
    src: url('/assets/fuentes/Nunito-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

:root {
    --color-primary: #024ddf;
    --color-secondary: #ff7714;
    --color-green: #22bf46;
    --color-red: #fa1b1b;
    --color-light: #f8f9fa;
    --color-dark: #343a40;
    --color-white: #ffffff;
    --color-border: #e0e0e0;
    
    --color-title: black;
    --color-subtitle: black;
    --color-text: black;
    --color-textt: #5C5E63;
    
    --border-radius-btn: 20px;
    --border-radius-field: 10px;
    --border-radius-cards: 15px;
    --border-radius-cards20: 20px;
    --border-radius-cards15: 15px;
    
    --hover-primary: #1f45b0;    
    --hover-red: #d91818;         
    --hover-secondary: #e66000;   
    --hover-green: #1b9b3a; 
}

:root {
    --swal2-outline: 0 0 0 3px rgba(2, 77, 223, 0.3) !important;
    --swal2-container-padding: 0.625em !important;
    --swal2-backdrop: rgba(0, 0, 0, 0.4) !important;
    --swal2-backdrop-transition: background-color 0.1s !important;
    --swal2-width: 32em !important;
    --swal2-padding: 0 0 1.25em !important;
    --swal2-border: none !important;
    --swal2-border-radius: var(--border-radius-cards) !important;
    --swal2-background: var(--color-white) !important;
    --swal2-color: var(--color-title) !important;
    --swal2-show-animation: swal2-show 0.3s !important;
    --swal2-hide-animation: swal2-hide 0.15s forwards !important;
    --swal2-icon-zoom: 1 !important;
    --swal2-icon-animations: true !important;
    --swal2-title-padding: 0.8em 1em 0 !important;
    --swal2-html-container-padding: 1em 1.6em 0.3em !important;
    --swal2-input-border: 1px solid var(--color-border) !important;
    --swal2-input-border-radius: var(--border-radius-field) !important;
    --swal2-input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px transparent !important;
    --swal2-input-background: var(--color-white) !important;
    --swal2-input-transition: border-color 0.2s, box-shadow 0.2s !important;
    --swal2-input-hover-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px transparent !important;
    --swal2-input-focus-border: 1px solid var(--color-primary) !important;
    --swal2-input-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(2, 77, 223, 0.3) !important;
    --swal2-progress-step-background: var(--color-light) !important;
    --swal2-validation-message-background: var(--color-light) !important;
    --swal2-validation-message-color: var(--color-title) !important;
    --swal2-footer-border-color: var(--color-border) !important;
    --swal2-footer-background: transparent !important;
    --swal2-footer-color: inherit !important;
    --swal2-close-button-position: initial !important;
    --swal2-close-button-inset: auto !important;
    --swal2-close-button-font-size: 2.5em !important;
    --swal2-close-button-color: var(--color-border) !important;
    --swal2-close-button-transition: color 0.2s, box-shadow 0.2s !important;
    --swal2-close-button-outline: initial !important;
    --swal2-close-button-box-shadow: inset 0 0 0 3px transparent !important;
    --swal2-close-button-focus-box-shadow: inset var(--swal2-outline) !important;
    --swal2-close-button-hover-transform: none !important;
    --swal2-actions-justify-content: center !important;
    --swal2-actions-width: auto !important;
    --swal2-actions-margin: 1.25em auto 0 !important;
    --swal2-actions-padding: 0 !important;
    --swal2-actions-border-radius: 0 !important;
    --swal2-actions-background: transparent !important;
    --swal2-action-button-transition: background-color 0.2s, box-shadow 0.2s !important;
    --swal2-action-button-hover: rgba(0, 0, 0, 0.1) !important;
    --swal2-action-button-active: rgba(0, 0, 0, 0.1) !important;
    
    --swal2-confirm-button-box-shadow: none !important;
    --swal2-confirm-button-border-radius: var(--border-radius-btn) !important;
    --swal2-confirm-button-background-color: var(--color-primary) !important;
    --swal2-confirm-button-color: var(--color-white) !important;

    --swal2-deny-button-box-shadow: none !important;
    --swal2-deny-button-border-radius: var(--border-radius-btn) !important;
    --swal2-deny-button-background-color: var(--color-red) !important;
    --swal2-deny-button-color: var(--color-white) !important;
    
    --swal2-cancel-button-box-shadow: none !important;
    --swal2-cancel-button-border-radius: var(--border-radius-btn) !important;
    --swal2-cancel-button-background-color: var(--color-secondary) !important;
    --swal2-cancel-button-color: var(--color-white) !important;
    
    --swal2-toast-show-animation: swal2-toast-show 0.5s !important;
    --swal2-toast-hide-animation: swal2-toast-hide 0.1s forwards !important;
    --swal2-toast-border: none !important;
    --swal2-toast-box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.075), 0 1px 2px hsl(0deg 0% 0% / 0.075), 1px 2px 4px hsl(0deg 0% 0% / 0.075), 1px 3px 8px hsl(0deg 0% 0% / 0.075), 2px 4px 16px hsl(0deg 0% 0% / 0.075) !important;
}

.swal2-confirm:hover {
    background-color: var(--hover-primary) !important;
}

.swal2-deny:hover {
    background-color: var(--hover-red) !important;
}

.swal2-cancel:hover {
    background-color: var(--hover-secondary) !important;
}



.alert {
    padding: 12px 20px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 15px;
}

.alert-success {
    color: var(--color-green);
    background-color: #fff;
    border: 1px solid var(--color-green);
}

.alert-danger {
    color: var(--color-red);
    background-color: #fff;
    border: 1px solid var(--color-red);
}

.alert-warning {
    color: var(--color-secondary);
    background-color: #fff;
    border: 1px solid var(--color-secondary);
}

.alert-error {
    color: var(--color-secondary);
    background-color: #fff;
    border: 1px solid var(--color-secondary);
}

.alert-info {
    color: var(--color-secondary);
    background-color: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-secondary);
    border-radius: 15px;
}


::-webkit-scrollbar {
  width: 10px; 
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

* {
  scrollbar-width: thin; 
  scrollbar-color: #888 #f1f1f1; 
}