@import "tailwindcss";

/*@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');*/
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Nunito:wght@200..1000&display=swap');

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url('/_content/Almar.Components.Razor/fonts/MaterialSymbolsOutlined.ttf') format('truetype');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

@theme {
    --color-primary: oklch(19.17% 0.0794 266.6) !important;
    --color-secondary: oklch(69.98% 0.0449 273.45) !important;
    --color-info: oklch(50.43% 0.1992 259.39) !important;
    --color-white: oklch(100% 0 0) !important;
    --color-black: oklch(0% 0 0) !important;
    --color-gray-dark: oklch(30.92% 0 0) !important;
    --color-gray: oklch(63.34% 0 0) !important;
    --color-gray-light: oklch(63.34% 0 0) !important;
    /* Primary Colors */
    --color-brand-primary-darkest: #070f38;
    --color-brand-primary-dark: #132fa2;
    --color-brand-primary-medium: #2453f8;
    --color-brand-primary-light: #c1d4ff;
    --color-brand-primary-lightest: #e7eaf1;
    /* Secondary Colors */
    --color-brand-secondary-darkest: #0e3f36;
    --color-brand-secondary-dark: #1c6556;
    --color-brand-secondary-medium: #35a78e;
    --color-brand-secondary-light: #b2d6d0;
    --color-brand-secondary-lightest: #d6ebe7;
    /* Informativo Colors */
    --color-feedback-success-darkest: #1b3c1a;
    --color-feedback-success-dark: #316c30;
    --color-feedback-success-medium: #449242;
    --color-feedback-success-light: #a6d3a9;
    --color-feedback-success-lightest: #dbf3dd;
    --color-feedback-informative-darkest: #12274b;
    --color-feedback-informative-dark: #1f4581;
    --color-feedback-informative-medium: #3067c2;
    --color-feedback-informative-light: #afc8ec;
    --color-feedback-informative-lightest: #dae5f5;
    --color-feedback-warning-darkest: #422e01;
    --color-feedback-warning-dark: #956a02;
    --color-feedback-warning-medium: #df9b00;
    --color-feedback-warning-light: #f7d383;
    --color-feedback-warning-lightest: #f5e5c2;
    --color-feedback-negative-darkest: #4e0000;
    --color-feedback-negative-dark: #7e0000;
    --color-feedback-negative-medium: #a80000;
    --color-feedback-negative-light: #f89e9f;
    --color-feedback-negative-lightest: #fcd8d9;
    /* Background */
    --color-background-light: #f1f2f6;
    /* Neutral Colors */
    --color-neutral-darkest: #141515;
    --color-neutral-dark: #3b403f;
    --color-neutral-medium: #636a68;
    --color-neutral-light: #8b9391;
    --color-neutral-lightest: #f2f3f4;
    /* Confirmación Colors */
    --color-transactional-confirm-darkest: #14462e;
    --color-transactional-confirm-dark: #226c47;
    --color-transactional-confirm-medium: #226c47;
    --color-transactional-confirm-light: #aed8c6;
    --color-transactional-confirm-lightest: #dff7ec;
    /* Destructivo Colors */
    --color-transactional-destructive-darkest: #540f0f;
    --color-transactional-destructive-dark: #921a1a;
    --color-transactional-destructive-medium: #bc2120;
    --color-transactional-destructive-light: #eea9a9;
    --color-transactional-destructive-lightest: #fce0e0;
}

.nunito-light {
    font-family: "Nunito", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.nunito-regular {
    font-family: "Nunito", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.nunito-medium {
    font-family: "Nunito", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.nunito-semibold {
    font-family: "Nunito", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.nunito-bold {
    font-family: "Nunito", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.inter-light {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.inter-regular {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.inter-medium {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.inter-semibold {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.inter-bold {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}


.btn {
    @apply cursor-pointer;
    @apply font-normal text-base;
    @apply px-4 py-2;

    @apply inline-flex items-center justify-center gap-x-2;

    @media (width >= 48rem) {
        @apply px-4 py-3;
    }

    @media (width >= 64rem) {
        @apply p-4;
    }
}

.btn-primary {
    @apply bg-primary border border-primary text-white rounded-[0.5rem];

    @variant hover {
        @apply bg-[#14235F] border-[#14235F];
    }

    @variant disabled {
        @apply bg-[#D9D9D9] text-[#B3B3B3] border-[#B3B3B3] cursor-not-allowed;
    }
}

.btn-neutral {
    @apply bg-[#E7EAF1] border border-[#959DBB] text-primary rounded-[0.5rem];

    @variant hover {
        @apply bg-[#D7DDEC] border-[#7782A8];
    }

    @variant disabled {
        @apply bg-[#D9D9D9] text-[#B3B3B3] border-[#B3B3B3] cursor-not-allowed;
    }
}

.btn-subtle {
    @apply bg-transparent border border-transparent text-primary rounded-[0.5rem];

    @variant hover {
        @apply border-[#D9DCE5];
    }

    @variant disabled {
        @apply bg-[#D9D9D9] text-[#B3B3B3] border-[#B3B3B3] cursor-not-allowed;
    }
}

.btn-success {
    @apply bg-[#0C9160] border border-[#0C9160] text-gray-100 rounded-[0.5rem];

    @variant hover {
        @apply bg-[#048254] border-[#005A39];
    }

    @variant disabled {
        @apply bg-[#D9D9D9] text-[#B3B3B3] border-[#B3B3B3] cursor-not-allowed;
    }
}

.btn-danger-primary {
    @apply bg-[#DC4144] border border-[#DC4144] text-neutral-100 rounded-[0.5rem];

    @variant hover {
        @apply bg-[#C62426] border-[#8E0002];
    }

    @variant disabled {
        @apply bg-[#D9D9D9] text-[#B3B3B3] border-[#B3B3B3] cursor-not-allowed;
    }
}

.btn-danger-subtle {
    @apply bg-transparent border border-transparent text-[#C62426] rounded-[0.5rem];

    @variant hover {
        @apply bg-[#FDD3D0] border-[#C62426];
    }

    @variant disabled {
        @apply bg-[#D9D9D9] text-[#B3B3B3] border-[#B3B3B3] cursor-not-allowed;
    }
}

.icon-btn {
    @apply rounded-full flex items-center justify-center cursor-pointer;
    @apply h-9 w-9 p-2;

    @media (width >= 48rem) {
        @apply p-3 h-11 w-11;
    }
}

.icon-btn-primary {
    @apply bg-primary border border-primary text-neutral-100;

    @variant hover {
        @apply bg-[#14235F] border-[#14235F];
    }

    @variant disabled {
        @apply bg-[#D9D9D9] border-[#B3B3B3] text-[#B3B3B3] cursor-not-allowed;
    }
}

.icon-btn-subtle {
    @apply bg-transparent border border-transparent text-[#IEIEIE];

    @variant hover {
        @apply bg-neutral-100;
    }

    @variant disabled {
        @apply bg-[#D9D9D9] border-[#B3B3B3] text-[#B3B3B3] cursor-not-allowed;
    }
}

.icon-btn-neutral {
    @apply bg-neutral-100 border border-[#D9D9D9] text-[#1E1E1E];

    @variant hover {
        @apply bg-[#E6E6E6];
    }

    @variant disabled {
        @apply bg-[#D9D9D9] border-[#B3B3B3] text-[#B3B3B3] cursor-not-allowed;
    }
}



html, body {
    font-family: 'Nunito', Helvetica, Arial, sans-serif;
}