@tailwind base;
@tailwind components;
@tailwind utilities;


/* Definimos las variables CSS raíz con los colores exactos */
    :root {
        --color-iap-red: 211, 47, 47; /* Rojo para línea y quizás botones */
        --color-iap-fuchsia: 201, 1, 102; /* Fucsia principal para botones y otros elementos */
        --color-iap-dark-fuchsia: 168, 0, 81; /* Fucsia más oscuro para hover */
        --color-iap-green: 0, 152, 135;
        --verde-logo-iap: 0, 99, 65;
        /* En :root de app.css */
        --color-iap-dark-green: 0, 122, 110; /* Ejemplo */
        --color-iap-dark-red: 180, 30, 30; /* Ejemplo */


    --iap-dark: #1A1A1A;
    --iap-dark-800: #23272b;
    --iap-white: #fff;
    --iap-gray-300: #d1d5db;
    --iap-gray-400: #9ca3af;
    --iap-fuchsia: #c90166;
    --iap-red: #d32f2f;
    --iap-green: #009887;
    --iap-white-50: rgba(255,255,255,0.5);
    --iap-white-75: rgba(255,255,255,0.75);
    }
        /* Clases de utilidad en app.css */
        .bg-iap-dark-green { background-color: rgb(var(--color-iap-dark-green)); }
        .bg-iap-dark-red { background-color: rgb(var(--color-iap-dark-red)); }
        .bg-iap-dark { background-color: var(--iap-dark) !important; }
        .bg-iap-dark-800 { background-color: var(--iap-dark-800) !important; }
        .text-iap-white { color: var(--iap-white) !important; }
        .text-iap-gray-300 { color: var(--iap-gray-300) !important; }
        .text-iap-gray-400 { color: var(--iap-gray-400) !important; }



    /* Definiciones de clases de Tailwind personalizadas usando las variables */
    /* Fondos */
    .bg-iap-red { background-color: rgb(var(--color-iap-red)); }
    .bg-iap-red\/10 { background-color: rgba(var(--color-iap-red), 0.1); } /* Para el círculo de los iconos */

    .bg-iap-fuchsia { background-color: rgb(var(--color-iap-fuchsia)); }
    .bg-iap-fuchsia-hover { background-color: rgb(var(--color-iap-dark-fuchsia)); }
    .bg-iap-fuchsia\/10 { background-color: rgba(var(--color-iap-fuchsia), 0.1); }

    .bg-iap-green { background-color: rgb(var(--color-iap-green)) !important; }

    /* Colores de texto */
    .text-iap-red { color: var(--iap-red) !important; }
    .text-iap-fuchsia { color: var(--iap-fuchsia) !important; }
    .text-iap-green { color: var(--iap-green) !important; }
    .text-iap-dark-fuchsia { color: rgb(var(--color-iap-dark-fuchsia)) !important; }

    /* Colores de borde */
    .border-iap-red { border-color: rgb(var(--color-iap-red)); }
    .border-iap-fuchsia { border-color: rgb(var(--color-iap-fuchsia)); }


/* Nuevas clases para gradientes de jade */
.bg-gradient-iap-jade-70 {
    background-image: linear-gradient(to right, transparent, rgba(var(--color-iap-green), 0.85));
}

.bg-gradient-iap-jade-full {
    background-image: linear-gradient(to right, transparent, rgb(var(--color-iap-green)));
}



/* ... Tus variables de color personalizadas como --color-iap-red, etc. ... */
/* ... Tus clases de utilidades personalizadas como .bg-iap-red, .text-iap-red, etc. ... */


/* --- AJUSTES FINOS DE LA TIPOGRAFÍA --- */

/* Estilos para el cuerpo general del texto */
body {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem; /* Tamaño base, comúnmente 16px */
    line-height: 1.5; /* Altura de línea estándar para buena legibilidad, puedes probar 1.6 */
    font-weight: 400; /* Peso normal para el texto del cuerpo */
    color: #374151; /* Un gris oscuro general (text-gray-700 en Tailwind por defecto) */
    -webkit-font-smoothing: antialiased; /* Para suavizar bordes de fuentes en navegadores webkit */
    -moz-osx-font-smoothing: grayscale; /* Para suavizar bordes de fuentes en Firefox (Mac) */
    --color-iap-light-green: 0, 170, 153; /* Este es rgb(0, 170, 153) */

}
/* Ahora, define el gradiente y la clase hover */
.bg-gradient-iap-green {
    background-color: rgb(var(--color-iap-green));
}

.tool-box:hover { /* Asumo una clase 'tool-box' para los cuadros, si es otra, ajústala */
    background-color: rgb(var(--color-iap-bright-green)); /* Fondo más brillante al pasar el ratón */
}

/* Estilos para todos los párrafos (p) */
p {
    font-size: 1rem; /* Aseguramos que los párrafos mantengan el tamaño base */
    line-height: 1.5; /* Altura de línea para párrafos */
    margin-bottom: 1rem; /* Margen inferior estándar para párrafos */
}

/* Ajustes específicos para los párrafos dentro de las tarjetas de herramientas y noticias (resúmenes) */
/* Asumo que estos son los textos que se veían "demasiado grandes" en el resumen de noticias */
.tool-card p,
.news-card .p-6 > p:nth-of-type(2) { /* Selector más específico para el segundo párrafo dentro de p-6 */
    font-size: 0.875rem; /* Esto es 'text-sm' en Tailwind (14px). Si aún es grande, prueba 0.8rem o text-xs (12px) */
    line-height: 1.4; /* Un poco más ajustado para resúmenes */
    margin-bottom: 1rem; /* Mantener el margen inferior si es necesario */
}

/* Si los títulos también se ven diferentes, podemos ajustarlos */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700; /* Negrita para todos los encabezados por defecto */
    line-height: 1.2; /* Altura de línea más ajustada para títulos */
   /* Un color oscuro para los títulos (gray-900 por defecto de Tailwind) */
}

/* ... El resto de tus estilos personalizados ... */

@layer components {
    .topbar-link {
        font-size: 0.875rem; /* Equivalente a text-sm de Tailwind */
        line-height: 1.25rem; /* Equivalente a text-sm de Tailwind */
        color: white; /* Equivalente a text-white de Tailwind */
    }
    .topbar-link:hover {
        color: #D4AF37 !important; /* Color dorado para el hover */
    }
    .topbar-contact-link {
        font-size: 0.75rem;  /* Equivalente a text-xs de Tailwind */
        line-height: 1rem;   /* Equivalente a text-xs de Tailwind */
        color: white; /* Equivalente a text-white de Tailwind */
    }
    .topbar-contact-link:hover {
        color: #D4AF37 !important; /* Color dorado para el hover */
    }
    .main-nav-link {
        color: white !important; /* Asegura que el texto sea blanco por defecto */
        position: relative;
        display: inline-block; /* Asegura que el ancho del enlace se ajuste al contenido para el ::after */
    }
    .main-nav-link:hover {
        color: rgb(var(--color-iap-fuchsia)) !important; /* Usando tu variable para el color fucsia en hover */
    }
    .main-nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -2px; /* Ajusta según el diseño si es necesario */
        left: 0;
        background-color: rgb(var(--color-iap-fuchsia)); /* Usando tu variable */
        transition: width 0.3s ease;
    }
    .main-nav-link:hover::after {
        width: 100%;
    }

    /* Ajuste de tamaño de fuente para el menú de navegación en pantallas más pequeñas */
    @media (max-width: 1549px) { /* Para pantallas con un ancho menor a 1550px */
        .main-nav-link {
            font-size: 0.875rem !important; /* Equivalente a text-sm de Tailwind */
        }
        .LogoNombre{
            font-size: 0.80rem !important;

        }
    }

    .footer-heading {
        font-size: 1.125rem !important;/* text-lg */
        font-weight: 600 !important;   /* font-semibold */
        margin-bottom: 1rem !important; /* mb-4 */
        color: white !important; /* Asegura que el texto sea blanco */
    }
    .footer-link {
        color: var(--iap-gray-300);
        transition: color 0.3s;
        font-size: 0.95rem;
        text-decoration: none;
    }
    .footer-link:hover,
.hover\:text-iap-white:hover {
    color: var(--iap-white) !important;
}
    .footer-social-link {
        color: var(--iap-fuchsia);
        transition: color 0.3s;
    }
    .footer-social-link:hover {
        color: var(--iap-white) !important;
    }
    .footer-contact-icon {
        margin-right: 1rem;
        margin-top: 0.25rem;
        color: var(--iap-white);
    }
    .copyright-bar {
        display: flex;
        flex-direction: row; /* Cambiado a row para que los elementos estén en la misma línea */
        justify-content: space-between; /* Alinea el primer elemento a la izquierda y el segundo a la derecha */
        align-items: center; /* Centra verticalmente los elementos */
        background-color: rgb(var(--verde-logo-iap)) !important;
        color: var(--iap-white);
        font-size: 0.9rem; /* Mantener el tamaño de fuente */
        padding: 1rem; /* Aumentado el padding a 1rem en todos los lados */
    }

    .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1s ease-in-out;
        /* Mobile first: ensure full image is visible, centered */
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat; /* Importante para 'contain' */
    }
    .slide.active {
        opacity: 1;
    }

    /* For medium screens and up, revert to cover to fill the space */
    @media (min-width: 768px) { /* Tailwind's 'md' breakpoint */
        .slide {
            background-size: cover;
        }
    }
    .tab-content {
        display: none;
    }
    .tab-content.active {
        display: block;
    }
    .tool-card:hover .tool-icon {
        transform: translateY(-10px);
    }
    .tool-icon {
        transition: transform 0.3s ease;
    }

    .menu-mobile-link {
        display: block !important;
        padding: 0.75rem 1rem !important;
        color: var(--iap-white) !important;
        border-radius: 0.5rem !important;
        transition: background 0.3s, color 0.3s !important;
        font-size: 1rem !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        background-color: transparent !important;
        border: none !important;
        width: 100% !important; /* Ensure it takes full width */
        text-align: left !important; /* Ensure text aligns left */
    }
    .menu-mobile-link:hover {
        background: var(--iap-fuchsia) !important;
        color: var(--iap-white) !important;
        text-decoration: none !important;
    }
}

/* En public/css/app.css, dentro de @layer components o al final */

.btn-slider {
    /* Estilos comunes para todos los botones del slider si los necesitas aquí,
       o puedes aplicar clases de Tailwind directamente en el Blade.
       El Blade ya tiene: text-white px-4 py-2 rounded text-sm font-medium transition duration-300
       Así que esta clase podría estar vacía o usarse para algo muy específico. */
}
.btn-slider-fuchsia {
    background-color: var(--iap-fuchsia);
    color: var(--iap-white);
    transition: background 0.3s;
}
.btn-slider-fuchsia:hover {
    background-color: #a8004f;
}
.btn-slider-red {
    background-color: var(--iap-red);
    color: var(--iap-white);
    transition: background 0.3s;
}
.btn-slider-red:hover {
    background-color: #a62828;
}

/* Estilos para los puntos del slider */
.slider-dots .dot.active {
    background-color: rgb(var(--color-iap-fuchsia)); /* O el color que prefieras para el punto activo */
}

.slider-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: var(--iap-white-50);
    border-radius: 9999px;
    transition: background 0.3s;
    border: none;
    outline: none;
    margin: 0 0.25rem;
}
.slider-dot.active,
.slider-dot:hover,
.slider-dot:focus {
    background: var(--iap-white-75);
}

/*.fb-page,
.fb-page > span,
.fb-page iframe {
        min-width: 500px !important;
         max-width: 100% !important;
}*/