/********************************************************************************
 * STYLESHEET PRINCIPAL - TODO MARIEL
 ********************************************************************************
 *
 * ÍNDICE DE ESTILOS:
 * 1. AJUSTES GLOBALES Y TIPOGRAFÍA FLUIDA
 * - Define la base para que las fuentes se adapten a cualquier pantalla.
 *
 * 2. ESTILOS DE COMPONENTES
 * - Tarjetas de Producto (Cards)
 * - Carrusel de Categorías
 *
 * 3. NAVEGACIÓN MÓVIL
 * - Menú Flotante (FAB - Floating Action Button)
 * - Panel Lateral Deslizante (Sidebar)
 * - Fondo Oscuro (Backdrop)
 *
 * 4. INTEGRACIÓN CON WEBVIEW DE ANDROID
 * - Reglas específicas para cuando la web se muestra en la app.
 *
 ********************************************************************************/


/* ==============================================================================
 * 1. AJUSTES GLOBALES Y TIPOGRAFÍA FLUIDA
 * ============================================================================== */

:root {
  /**
   * Se establece un tamaño de fuente base que escala suavemente con el ancho
   * de la pantalla (viewport width, vw).
   * clamp(MIN, IDEAL, MAX) -> clamp(14px, 1.6vw, 16px)
   * - El tamaño nunca será menor a 14px.
   * - El tamaño nunca será mayor a 16px.
   * - Intentará ser el 1.6% del ancho de la pantalla en tamaños intermedios.
   */
  font-size: clamp(14px, 1.6vw, 16px);
}

/**
 * Títulos Fluidos
 * Hacemos que los encabezados (h1, h2, etc.) también escalen de forma
 * proporcional para evitar que se vean demasiado grandes en la WebView.
 */
h1, .h1 {
    font-size: clamp(1.75rem, 5vw, 2.25rem); /* Ajusta entre ~28px y ~36px */
}
h2, .h2 {
    font-size: clamp(1.5rem, 4vw, 1.75rem);
}
h3, .h3 {
    font-size: clamp(1.25rem, 3.5vw, 1.5rem);
}
h4, .h4 {
    font-size: clamp(1.1rem, 3vw, 1.25rem);
}

/* ==============================================================================
 * 5. AJUSTES ESPECÍFICOS PARA LA WEBVIEW DE ANDROID
 * ============================================================================== */

/**
 * Cuando la web se muestra en la app, aplicamos estilos especiales para
 * mejorar la legibilidad y la presentación en pantallas más pequeñas.
 */
body.is-webview .product-card .card-img-top {
    /* Reducimos la altura de la imagen para un look más compacto */
    height: 180px;
}

body.is-webview .product-card .card-title {
    /* Forzamos a que el título ocupe una sola línea */
    white-space: nowrap;
    /* Ocultamos el texto que se desborde */
    overflow: hidden;
    /* Añadimos "..." al final del texto cortado */
    text-overflow: ellipsis;
    /* Damos una altura máxima para evitar saltos de línea inesperados */
    max-height: 1.5em; /* Ajusta a la altura de una línea de texto */
    margin-bottom: 0.5rem; /* Reduce el espacio debajo del título */
}

body.is-webview .product-card .card-body {
    /* Hacemos el padding un poco más pequeño en la app */
    padding: 0.75rem;
}
/* ==============================================================================
 * 2. ESTILOS DE COMPONENTES
 * ============================================================================== */

/**
 * Tarjetas de Producto (Cards)
 * Asegura que todas las imágenes de producto tengan un tamaño uniforme.
 */
.card-img-top {
  width: 100%;       /* Ocupa todo el ancho de la tarjeta */
  height: 250px;      /* Altura fija para mantener la consistencia */
  object-fit: cover; /* Recorta la imagen para que encaje sin deformarse */
}
/**
 * Ajustes para el carrusel de categorías en la WebView.
 * Hacemos los círculos más pequeños y el texto más corto.
 */
body.is-webview .category-circle img {
    /* Reducimos el tamaño de la imagen de la categoría */
    width: 80px;
    height: 80px;
}

body.is-webview .category-circle h6 {
    /* Forzamos a que el nombre ocupe una sola línea */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Damos un ancho máximo para que el "..." aparezca correctamente */
    max-width: 80px; /* Igual que el ancho de la imagen */
    margin: 0 auto; /* Centramos el texto cortado */
}
/**
 * Carrusel de Categorías
 * Estilos para el carrusel horizontal de categorías en la página principal.
 */
.categories-section {
    position: relative;
}
.categories-carousel-wrapper {
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* Oculta scrollbar en IE y Edge */
    scrollbar-width: none;     /* Oculta scrollbar en Firefox */
}
.categories-carousel-wrapper::-webkit-scrollbar {
    display: none;             /* Oculta scrollbar en Chrome, Safari, Opera */
}
.categories-carousel {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
}
.category-circle {
    flex: 0 0 auto;
    text-align: center;
    text-decoration: none;
    color: #212529;
    transition: transform 0.2s;
}
.category-circle:hover {
    transform: translateY(-5px);
    color: var(--bs-primary);
}
.category-circle img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: 0.75rem;
    border: 3px solid #fff;
}
.category-circle h6 {
    font-weight: bold;
}
.carousel-control-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    z-index: 10;
}
.carousel-control-btn.prev { left: -20px; }
.carousel-control-btn.next { right: -20px; }


/* ==============================================================================
 * 3. NAVEGACIÓN MÓVIL
 * ============================================================================== */

/**
 * Botón de Acción Flotante (FAB)
 * El círculo que abre el menú en pantallas pequeñas.
 */
.mobile-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: var(--bs-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1040;
    transition: transform 0.2s ease-in-out;
}
.mobile-fab:hover {
    transform: scale(1.1);
}

/**
 * Panel Lateral Móvil (Sidebar)
 * El menú que se desliza desde la parte inferior.
 */
.mobile-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #212529;
    color: white;
    padding: 15px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.25);
    transform: translateY(100%); /* Inicia oculto abajo */
    transition: transform 0.3s ease-in-out;
    z-index: 1045;
}
.mobile-sidebar.show {
    transform: translateY(0); /* Lo muestra deslizándose hacia arriba */
}
.mobile-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #495057;
}
.mobile-sidebar-header h5 {
    margin: 0;
    font-size: 1.1rem;
}
.mobile-sidebar .nav {
    display: flex;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    list-style: none;
}
.mobile-sidebar .nav-item {
    text-align: center;
}
.mobile-sidebar .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #adb5bd;
    font-size: 0.75rem;
    padding: 5px;
    border-radius: 8px;
    transition: background-color 0.2s, color 0.2s;
}
.mobile-sidebar .nav-link i {
    font-size: 1.5rem;
    margin-bottom: 5px;
}
.mobile-sidebar .nav-link.active,
.mobile-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

/**
 * Fondo Oscuro (Backdrop)
 * Cubre la página cuando el menú móvil está abierto.
 */
.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1039;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.sidebar-backdrop.show {
    opacity: 1;
    visibility: visible;
}


/* ==============================================================================
 * 4. INTEGRACIÓN CON WEBVIEW DE ANDROID
 * ============================================================================== */

/**
 * ¡IMPORTANTE! Ocultar Footer en la App
 * Esta es la regla clave. El JavaScript en footer.php añade la clase 'is-in-webview'
 * al <body> si detecta la app. Esta regla CSS usa esa clase para ocultar el
 * footer y así evitar la doble navegación.
 */
body.is-webview footer.bg-dark {
    display: none !important;
}


/* ==============================================================================
 * 5. ESTILOS RESPONSIVOS (MEDIA QUERIES)
 * ============================================================================== */

@media (max-width: 768px) {
    /* Ajusta el tamaño de las imágenes de categorías en móviles */
    .category-circle img {
        width: 80px;
        height: 80px;
    }
    /* Oculta los botones de flecha del carrusel en móvil (se usa el scroll táctil) */
    .carousel-control-btn {
        display: none;
    }
}

@media (min-width: 768px) {
    /* Oculta el menú flotante en pantallas grandes */
    .mobile-fab {
        display: none;
    }
}