@import 'tailwindcss';

/* =========================================
   0. LIBRERÍAS EXTERNAS
   ========================================= */
/* Estilos para el selector de países (Banderas reales) */
@import 'intl-tel-input/build/css/intlTelInput.css';

/* =========================================
   1. FUENTES LOCALES (Gestionadas por Vite)
   ========================================= */
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/work-sans.woff2') format('woff2');
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url('../fonts/material-symbols.woff2') format('woff2');
}

/* =========================================
   2. CONFIGURACIÓN DE TAILWIND V4
   ========================================= */
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    /* Colores Corporativos Agropecuaria */
    --color-primary: #13ec13;
    --color-agro-dark: #1B4332;
    --color-agro-gold: #D4A373;
    --color-agro-accent: #BC6C25;
    --color-background-light: #F8F9FA;
    --color-background-dark: #102210;

    /* Tipografía */
    --font-display: "Work Sans", sans-serif;
    --font-sans: "Work Sans", ui-sans-serif, system-ui;

    /* Bordes */
    --radius-default: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;

    /* Animaciones Personalizadas */
    --animate-shimmer: shimmer 1.5s infinite;

    @keyframes shimmer {
        100% {
            transform: translateX(100%);
        }
    }
}

/* =========================================
   3. UTILIDADES PERSONALIZADAS
   ========================================= */

/* Iconos de Google Material Symbols */
@utility 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-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Ocultar barra de scroll (Para el menú móvil horizontal) */
@layer utilities {
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    .scrollbar-hide {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
}

/* =========================================
   4. OVERRIDES (CORRECCIONES DE LIBRERÍAS)
   ========================================= */

/* Forzar que el contenedor del teléfono ocupe el 100% del ancho.
   Por defecto la librería lo pone inline-block y se ve corto.
*/
.iti {
    width: 100%;
}

/* Ajuste fino para que la bandera no quede pegada al borde redondeado
   si usas inputs con mucho border-radius
*/
.iti__flag-container {
    border-top-left-radius: 0.75rem; /* Coincide con rounded-xl de Tailwind */
    border-bottom-left-radius: 0.75rem;
}