/* Importar solo theme (variables CSS) + utilities, SIN Preflight.
 * El Preflight (CSS reset) es responsabilidad de la app consumidora.
 * Cargar dos Preflights causa conflictos de layout y tipografía. */
@import "tailwindcss/theme";
@import "tailwindcss/utilities";

/* ── SidebarV2 / MobileSidebarV2 — utilidades explícitas ──────────────────────────────
 * Estas clases se construyen dinámicamente en C# (string interpolation) por lo que
 * el scanner JIT de Tailwind no las detecta. Se definen aquí literalmente para que
 * siempre estén disponibles en el paquete NuGet.
 * ─────────────────────────────────────────────────────────────────────────────────── */

/* Responsive: mostrar / ocultar sidebar en lg+ */
@media (width >= 1024px) {
    .lg\:flex   { display: flex; }
    .lg\:hidden { display: none; }
}

/* Anchos del sidebar expandido / colapsado */
.w-\[262px\] { width: 262px; }
.w-\[88px\]  { width: 88px; }

/* Fondo blanco semitransparente (items de menú) */
.bg-white\/5  { background-color: rgb(255 255 255 / 0.05); }
.bg-white\/8  { background-color: rgb(255 255 255 / 0.08); }
.bg-white\/10 { background-color: rgb(255 255 255 / 0.10); }
.bg-white\/15 { background-color: rgb(255 255 255 / 0.15); }

/* Hover: fondo blanco semitransparente */
.hover\:bg-white\/5:hover  { background-color: rgb(255 255 255 / 0.05); }
.hover\:bg-white\/8:hover  { background-color: rgb(255 255 255 / 0.08); }
.hover\:bg-white\/10:hover { background-color: rgb(255 255 255 / 0.10); }
.hover\:bg-white\/15:hover { background-color: rgb(255 255 255 / 0.15); }
.hover\:text-white:hover   { color: #ffffff; }

/* Texto blanco semitransparente */
.text-white\/40 { color: rgb(255 255 255 / 0.40); }
.text-white\/60 { color: rgb(255 255 255 / 0.60); }
.text-white\/70 { color: rgb(255 255 255 / 0.70); }
.text-white\/80 { color: rgb(255 255 255 / 0.80); }

/* Borde blanco semitransparente */
.border-white\/10 { border-color: rgb(255 255 255 / 0.10); }

/* Borde brand accent */
.border-brand-accent { border-color: var(--color-brand-accent); }

/* Sombra del item activo en el sidebar */
.shadow-\[0_8px_20px_rgba\(20\,212\,201\,0\.30\)\] {
    box-shadow: 0 8px 20px rgba(20, 212, 201, 0.30);
}

/*@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;
}

.link {
    width: 100%;
    height: 2.5rem;
    padding: 0.25rem 0.75rem;
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    border-radius: 0.375rem;
    color:  #E2E8F0; /* #4a5568; */ /* text-neutral-600 */
    transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

.link svg {
    fill: currentColor;
}

.link:hover {
    color: #FFFFFF; /* #0E73F6; */
    background-color: #123D91; /* #D7EDFF; */
}

.link--active {
    color: #FFFFFF; /* #0E73F6; */
    background-color: #00CCAE; /* #D7EDFF; */
}

@theme {
    /* Brand colors — requeridos por SidebarV2, HeaderV2 y otros componentes del DS */
    --color-brand-primary: #141A48;
    --color-brand-secondary: #00BFA5;
    --color-brand-accent: #00CCAE;

    --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;
}


.bg-brand-accent {
    background-color: var(--color-brand-accent);
}

.bg-brand-primary {
    background-color: var(--color-brand-primary);
}

.bg-brand-primary\/5 {
    background-color: color-mix(in srgb, #141A48 5%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-brand-primary) 5%, transparent);
    }
}

.bg-brand-primary\/10 {
    background-color: color-mix(in srgb, #141A48 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-brand-primary) 10%, transparent);
    }
}

.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;
    }
}

.column-link-dinamic {
    color: var(--mi-color-base, #2563eb);
}

.column-link-dinamic:hover {
    color: var(--mi-color-hover, #1e40af) !important;
}

.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;
    }
}



/* NOTA: font-family global eliminado.
 * Definir font-family en html/body aquí sobreescribía la tipografía de TODA la
 * app consumidora cuando se cargaba outputComponents.css. Cada app debe definir
 * su propia fuente base. Las clases .nunito-* / .inter-* siguen disponibles. */

.ellipsis-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* importante para que funcione */
}