/* Tailwind base styles, utilities, and custom color variables */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles for Hypra and theming */

:root {
    /* Modo claro */
    --bg-primary: #f7f7f7;
    /* Fondo claro general */
    --text-primary: #333333;
    /* Texto principal (gris oscuro, accesible) */
    --bg-secondary: #00008B;
    /* Fondo encabezado (Azul BPTIC) */
    --text-secondary: #FFFFFF;
    /* Texto claro en encabezados */
    --accent-color: #ff7819;
    /* Naranja BPTIC para elementos destacados */
    --gray-dark: #5b5b5b;
    /* Gris oscuro mejorado para subtítulos */
    --gray-medium: #828282;
    /* Gris medio para detalles secundarios */
    --gray-light: #c9c9c9;
    /* Gris claro para bordes o fondos suaves */
}

.dark {
    /* Modo oscuro */
    --bg-primary: #333333;
    /* Fondo oscuro accesible */
    --text-primary: #f7f7f7;
    /* Texto blanco para alto contraste */
    --bg-secondary: #00008B;
    /* Azul BPTIC (sin cambio para identidad de marca) */
    --text-secondary: #FFFFFF;
    /* Texto blanco en fondos oscuros */
    --accent-color: #ff7819;
    /* Naranja BPTIC consistente para elementos destacados */
    --gray-dark: #828282;
    /* Gris oscuro ajustado para mejor contraste en modo oscuro */
    --gray-medium: #5b5b5b;
    /* Gris medio para etiquetas y subtítulos */
    --gray-light: #c9c9c9;
    /* Gris claro para detalles sutiles en modo oscuro */
}

.font-logo {
    font-family: 'Black Ops One', sans-serif;
}

/* General body styling */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Roboto', sans-serif;
}

/* Buttons */
.btn-primary {
    @apply bg-accent-color text-white py-2 px-6 rounded-lg;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: darken(var(--accent-color), 10%);
}

/* Hero Section background pattern */
.bg-hero-pattern {
    background-image: url('/assets/images/hero-bg.jpg');
}

/* Dark Mode Styling */
.dark .btn-primary {
    background-color: var(--accent-color);
}

/* Heading and text customization */
h1,
h2,
h3 {
    font-family: 'Exo', sans-serif;
    font-weight: 600;
    /* Títulos con más grosor */
}

p {
    font-size: 1rem;
    line-height: 1.6;
}

/* Links */
a {
    color: var(--accent-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Estilos para el botón de cambio de tema */
#theme-toggle {
    color: var(--text-secondary);
    background-color: var(--accent-color);
}

/* Cambio de color en hover para los íconos */
a.text-white:hover,
button#theme-toggle:hover {
    color: var(--accent-color);
}

/* Estilos adicionales */
.btn-primary {
    background-color: var(--accent-color);
    color: var(--text-secondary);
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-primary:hover {
    background-color: darken(var(--accent-color), 10%);
    color: var(--text-primary);
}

/* Clase para aplicar transiciones de colores */
.transition-colors {
    transition-property: background-color, color;
}

/* Background image */
.bg-hero-pattern {
    background-image: url("/images/image.webp");
}

/* Video styles */
#heroVideo {
    display: none;
}

@media screen and (min-width: 768px) {

    /* Ensure better visibility for large screens */
    .bg-hero-pattern {
        background-size: cover;
        background-position: center;
    }
}

/* Display the video on Vision OS devices or newer platforms */
@supports (-webkit-touch-callout: none) {
    #heroVideo {
        display: block;
    }

    .bg-hero-pattern {
        display: none;
    }
}

/* Estilos para las imágenes de las características en la sección */
/* Imágenes rectangulares que ocupan todo el ancho de su contenedor */
.feature-image {
    width: 100%; /* Ocupar todo el ancho */
    height: auto; /* Mantener proporción */
    max-height: 200px; /* Limitar la altura máxima para mantener proporciones adecuadas */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin perder proporción */
    border-radius: 0.5rem; /* Esquinas redondeadas */
}

/* Hover suave para las cajas de características */
.feature:hover {
    background-color: var(--gray-light);
}

/* Texto fluido, alineado a la izquierda */
.feature-description {
    text-align: left;
    line-height: 1.8;
    font-size: 1rem;
}

/* Estilos para las listas dentro del texto */
.feature-description ul {
    list-style-type: none; /* Elimina el estilo por defecto */
    padding-left: 0;
}

.feature-description ul li {
    position: relative;
    padding-left: 1.5em; /* Espacio para el ícono */
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Añadir el ícono de FontAwesome como bullet */
.feature-description ul li::before {
    content: "\f00c"; /* Código de FontAwesome para un icono de check (puedes cambiarlo por otro) */
    font-family: "Font Awesome 5 Free"; /* Asegúrate de que FontAwesome esté disponible */
    font-weight: 900; /* Peso del ícono */
    color: var(--accent-color); /* Color del ícono en naranja BPTIC */
    position: absolute;
    left: 0; /* Alinear el ícono a la izquierda */
    top: 0;
    font-size: 1.2rem; /* Ajustar el tamaño del ícono */
}




/* Estilos específicos para la sección de contacto */
#contact .flex {
    display: flex;
    align-items: center;
}

#contact .h-12 {
    height: 3rem;
}

#contact .mr-4 {
    margin-right: 1rem;
}

#contact .bg-gray-100 {
    background-color: #f7f7f7;
}

#contact .bg-white {
    background-color: #ffffff;
}

#contact .text-blue-600 {
    color: #1877F2;
}

#contact .text-blue-700 {
    color: #0A66C2;
}

#contact .text-blue-400 {
    color: #1DA1F2;
}

#contact a:hover {
    color: var(--accent-color);
}

.bptic-logo {
    font-family: 'Black Ops One', sans-serif;
    /* Use Black Ops One font */
    font-size: 2.5rem;
    /* Adjust size as needed */
    font-weight: 700;
    display: inline-flex;
}

.bptic-bp {
    color: #00008B;
    /* BPTIC Blue for the BP */
}

.bptic-tic {
    color: #ff7819;
    /* BPTIC Orange for the TIC */
}

/* Estilos para el Footer en modo claro y oscuro */
footer {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Enlaces dentro del footer */
footer a {
    color: var(--text-primary);
    transition: color 0.3s ease;
}

/* Hover en enlaces */
footer a:hover {
    color: var(--accent-color);
}

/* Ajustes para modo oscuro */
.dark footer {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
}

.dark footer a {
    color: var(--text-secondary);
}

.dark footer a:hover {
    color: var(--accent-color);
}

/* Estilos específicos para la sección de dispositivos */
#devices .device {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease;
}

#devices .device:hover {
    background-color: var(--gray-light);
}

#devices .device img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-bottom: 1rem;
    border-radius: 0.375rem;
}

#devices .device i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--accent-color);
}

#devices h2 {
    font-family: 'Exo', sans-serif;
    font-size: 2rem;
    font-weight: 700;
}

#devices h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

#devices p {
    font-size: 1rem;
    line-height: 1.6;
}

/* Modo oscuro */
.dark #devices .device {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.dark #devices .device:hover {
    background-color: var(--gray-medium);
}