/*
    ================================================================
    ARCHIVO DE ESTILOS PARA VISTA MÓVIL (max-width: 768px)
    ================================================================
    Este archivo contiene todas las reglas CSS para adaptar la
    interfaz de escritorio a una vista móvil. Se aplica únicamente
    en pantallas con un ancho máximo de 768px.
*/

/* --- 1. REGLAS GENERALES Y NAVEGACIÓN --- */

/* Ajuste del cuerpo y contenedores principales */
body {
    font-size: 14px; /* Reducir tamaño de fuente base para móviles */
}

.py-6 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

main.max-w-7xl {
    padding: 0; /* Eliminar padding horizontal del main */
}

/* --- MENÚ HAMBURGUESA Y NAVEGACIÓN MÓVIL --- */

/* Ocultar el menú de escritorio por defecto en móvil */
nav .hidden.sm\:flex {
    display: none;
}

/* Mostrar el botón hamburguesa solo en móvil */
.mobile-menu-button {
    display: inline-flex;
}

/* Ocultar el botón hamburguesa en escritorio */
.sm\:hidden {
    display: inline-flex;
}
@media (min-width: 640px) {
    .sm\:hidden {
        display: none;
    }
}

/* Estilos para el menú móvil desplegable */
.mobile-menu {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 64px; /* Debajo de la barra de navegación */
    left: 0;
    width: 100%;
    background-color: white;
    border-bottom: 1px solid #e5e7eb;
    z-index: 50;
}

.mobile-menu.active {
    display: block;
}

.mobile-menu a {
    display: flex;
    padding: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

/* Botones de acción: Ocultar texto, mostrar solo icono */
#refreshBtn .mr-2,
#pdfReportBtn .mr-2 {
    margin-right: 0; /* Eliminar margen del icono */
}

/* Seleccionamos los span que NO son parte de los iconos feather */
#refreshBtn > span,
#pdfReportBtn > span,
a[href="nuevo-pedido.php"] > span,
a[href="logout.php"] > span,
a[href="pedidos.php"] > span {
    display: none; /* Ocultar el texto */
}

#refreshBtn,
#pdfReportBtn,
a[href="nuevo-pedido.php"],
a[href="logout.php"] {
    padding: 0.5rem; /* Ajustar padding para que sea más cuadrado */
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Re-centrar el icono dentro del botón/enlace */
#refreshBtn > i,
#pdfReportBtn > i,
a[href="nuevo-pedido.php"] > i,
a[href="logout.php"] > i,
a[href="pedidos.php"] > i {
    margin-right: 0 !important;
}

/* Campo de búsqueda más pequeño */
#searchInput {
    width: 100%; /* Ocupar todo el ancho disponible */
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
    padding-left: 2.5rem; /* Espacio para el icono de lupa */
}

/* --- 2. TRANSFORMACIÓN DE TABLAS A TARJETAS --- */

/* Ocultar encabezados de tabla */
table thead {
    display: none;
}

/* Convertir filas en bloques (tarjetas) */
table tbody,
table tr {
    display: block;
    width: 100%;
}

/* Estilo de las tarjetas */
table tr.bg-white {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    padding: 0.75rem;
}

/* Convertir celdas en bloques y añadir etiquetas */
table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
    text-align: right; /* Alinear el dato a la derecha */
}

table td:last-child {
    border-bottom: none;
}

/* --- AJUSTES PARA EVITAR DESBORDAMIENTO EN TARJETAS --- */

/* Añadir la etiqueta (label) desde el atributo data-label */
table td::before {
    content: attr(data-label);
    font-weight: bold;
    text-align: left; /* Alinear la etiqueta a la izquierda */
    margin-right: 1rem;
    color: #374151;
    flex-shrink: 0; /* Evita que la etiqueta se encoja */
}

/* Forzar el ajuste de texto en el contenido de la celda (el valor) */
table td {
    word-break: break-word; /* Para palabras largas */
    overflow-wrap: break-word; /* Estándar actual */
}

/* Ajuste para el contenido dentro de la celda (divs, spans, etc.) */
table td > * {
    max-width: 100%; /* Asegura que los elementos hijos no se desborden */
    text-align: right;
}

/* Ajuste específico para los títulos de producto largos */
table td .font-bold {
    white-space: normal; /* Permite que el texto salte de línea */
    word-break: break-word; /* Rompe palabras si es necesario */
    text-align: left; /* Alinear el título a la izquierda para mejor lectura */
}

/* Casos especiales para celdas con rowspan en la tabla de inventario */
table td[rowspan] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

table td[rowspan]::before {
    display: none; /* No mostrar etiqueta para la celda principal del producto */
}

/* Fila de agrupación por fecha (mantener intacta) */
tr.bg-gray-200 {
    display: table-row; /* Restaurar comportamiento de fila */
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #e5e7eb;
}

tr.bg-gray-200 td {
    display: table-cell; /* Restaurar comportamiento de celda */
    padding: 0.5rem 1rem;
    font-weight: bold;
    color: #1f293d;
}

tr.bg-gray-200 td::before {
    display: none; /* Ocultar pseudo-elemento */
}

/* --- 3. LAYOUT DE TARJETAS (2 COLUMNAS) --- */

/* Contenedor de las tarjetas de resumen */
#summary-area {
    grid-template-columns: 1fr; /* Apilar tarjetas de resumen */
}

/* Forzar 2 columnas en el dashboard */
#dashboard-summary-area {
    grid-template-columns: 1fr; /* Cambiado a 1 columna para evitar problemas */
}

/* Contenedor de la tabla (ahora tarjetas) para inventario y pedidos */
#inventoryTableBody,
#ordersTableBody {
    display: grid;
    grid-template-columns: 1fr; /* Cambiado a 1 columna */
    gap: 0.75rem;
}

/* La tabla de contaduría es de 1 columna para mejor legibilidad */
#transactions-table-container tbody {
    display: block;
}

/* --- 4. AJUSTES ESPECÍFICOS --- */

/* Modal: hacer que ocupe más ancho en móvil */
.max-w-2xl {
    max-width: 95%;
    margin: 1rem;
}

/* Formulario de nuevo pedido: apilar columnas */
#customer-form .grid,
#product-selection .grid {
    grid-template-columns: 1fr;
}

/* Catálogo de productos en nuevo pedido */
#product-catalog {
    grid-template-columns: 1fr; /* Cambiado a 1 columna */
}

/* --- AJUSTES PARA PÁGINA 'NUEVO PEDIDO' --- */

/* Ocultar el contenedor del carrito en la vista principal móvil */
#cart-and-form-container {
    display: none;
}

/* Mostrar el botón flotante del carrito solo en móvil */
#mobile-cart-fab {
    display: flex;
}

/* Estilos para la modal del carrito en móvil */
#mobile-cart-modal.active {
    display: flex;
}

#mobile-cart-modal > div {
    background-color: white;
    width: 95%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Añadido para permitir el scroll interno */
}

/* Hacer que el contenido de la modal sea desplazable */
#mobile-cart-modal .overflow-y-auto {
    overflow-y: auto;
}