/* Estilos para la Ventana de Inicio (Splash Screen) */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Fondo ligeramente translúcido para que el efecto blur funcione */
    background-color: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Para compatibilidad con Safari */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease-out;
}

.splash-content {
    text-align: center;
    padding: 20px;
}

.splash-content img {
    max-width: 80vw; /* Ancho máximo del 80% de la pantalla */
    max-height: 60vh; /* Altura máxima del 60% de la pantalla */
    margin-bottom: 20px;
    border-radius: 15px;
    /* Usamos drop-shadow para que la sombra siga el contorno de la imagen PNG */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
}

.splash-content .btn {
    width: auto;
    padding: 12px 30px;
    background-color: #a0c4ff; /* Azul pastel */
    display: inline-block; /* Para que text-align: center lo pueda centrar */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para el botón */
    animation: gentle-dance 3s ease-in-out infinite; /* Animación de baile */
}

.splash-content .btn:hover {
    background-color: #8aaae6; /* Azul pastel más oscuro */
}

#splash-screen.hidden {
    opacity: 0;
    pointer-events: none; /* Evita que se pueda hacer clic en ella cuando está oculta */
}

/* Animación para el botón de la pantalla de inicio */
@keyframes gentle-dance {
    0%, 100% {
        transform: scale(1);
    }
    5% {
        transform: scale(1.05);
    }
    10% {
        transform: scale(1);
    }
}

/* Estilos para la Pantalla de Login */
#login-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-content {
    text-align: center;
    padding: 20px;
}

.login-content img {
    max-width: 80vw;
    max-height: 60vh;
    margin-bottom: 20px;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
}

#loginForm input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.login-content .btn {
    width: 100%;
    display: block;
}

/* Estilos generales */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    /* Añadimos padding en la parte inferior para que el contenido no quede oculto por la barra de navegación */
    padding-bottom: 80px;
}

header {
    background-color: #fff;
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 1.5em;
}

main {
    padding: 20px;
}


/* Barra de navegación inferior */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.08);
}

.bottom-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    text-decoration: none;
    color: #888;
    font-size: 12px;
}

.bottom-nav a span:first-child {
    font-size: 24px; /* Tamaño del emoji/icono */
    margin-bottom: 4px;
}

.bottom-nav a.active {
    color: #007bff; /* Un color azul para el ítem activo */
}

/* Lógica para mostrar/ocultar páginas */
.page {
    display: none;
}

.page.active {
    display: block;
}

h2 {
    color: #555;
}

/* Contenedor para alinear título y botón */
.page-header {
    display: flex;
    gap: 10px; /* Espacio entre los botones */
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Permite que los botones se ajusten en pantallas pequeñas */
}
/* Estilos para la página de Productos */
.upload-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.btn-upload {
    display: inline-block;
    background-color: #1D6F42; /* Color verde de Excel */
    color: white;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
    /* Flexbox para alinear el ícono y el texto */
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Espacio entre el ícono y el texto */
}

.btn-upload:hover {
    background-color: #185c37; /* Un verde un poco más oscuro para el hover */
}

#productList {
    margin-top: 20px;
    /* Añadimos un alto máximo y scroll para la lista */
    max-height: 40vh; /* 40% de la altura de la pantalla */
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
}

.product-card {
    background-color: #fff;
    padding: 20px 15px; /* Aumentamos el padding vertical para más altura */
    border-bottom: 1px solid #f0f0f0;
    /* Usamos flexbox para alinear los elementos */
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    gap: 15px; /* Aumentamos el espacio entre la línea de info y la de botones */
}

.product-card:last-child {
    border-bottom: none;
}

.product-info-line {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.product-actions {
    display: flex;
    gap: 15px; /* Aumentamos el espacio entre botones */
    /* Añadimos un gap para separar los botones */
    gap: 8px;
    justify-content: center; /* Centramos los botones */
}

.product-code {
    flex: 1;
    font-size: 0.9em;
    color: #666;
}
.product-name {
    flex: 2; /* Damos más espacio al nombre */
    font-weight: bold;
}

.product-price {
    flex: 1;
    text-align: right;
    font-weight: bold;
    color: #28a745; /* Un color verde para el precio */
}

.product-stock {
    background-color: #e9ecef;
    color: #495057;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.9em;
    font-weight: bold;
    min-width: 40px;
    text-align: center;
}

.product-stock.low {
    background-color: #fff3cd; /* Amarillo pastel */
    color: #856404;
}

.product-stock.out-of-stock {
    background-color: #f8d7da; /* Rojo pastel */
    color: #721c24;
}



/* Estilos para Formularios */
.form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
    font-size: 1em;
}

.btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn:hover {
    background-color: #0056b3;
}

.btn-danger {
    background-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
}

.btn-success {
    background-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
}

.btn-secondary {
    background-color: #6c757d; /* Gris oscuro */
}

.btn-secondary:hover {
    background-color: #5a6268;
}


/* Contenedor para centrar el botón de toggle del formulario */
.form-toggle-container {
    text-align: center;
    margin-bottom: 20px;
}

.form-toggle-container .btn {
    width: auto; /* Ancho automático para que no ocupe el 100% */
    display: inline-block;
}

/* Estilos para la página de Ventas */
.sales-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.sales-form-column, .sales-list-column {
    flex: 1;
}

.sales-list-column h2 {
    margin-top: 0;
}

.add-product-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */
}

.product-select {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

.product-quantity {
    width: 60px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
}

.btn-add-product {
    padding: 8px 15px;
    font-size: 1.5em;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#saleCartContainer {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
}

#saleCart {
    max-height: 150px; /* Altura máxima para la lista de productos en el carrito */
    overflow-y: auto;  /* Añade scroll si la lista es muy larga */
    margin-bottom: 15px;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.cart-item-details {
    flex-grow: 1;
}

.cart-item-details span {
    display: block;
    font-size: 0.9em;
    color: #666;
}

#saleTotal {
    margin-top: 20px;
    text-align: right;
    font-size: 1.2em;
    font-weight: bold;
}

/* Estilos para la lista de ventas */
.sale-card {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.sale-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.sale-card-header h4 {
    margin: 0;
}

.sale-card-body p {
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
}

.sale-card-body p span:last-child {
    font-weight: bold;
}

.sale-card-footer {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    text-align: right;
}

.btn-abono {
    background-color: #17a2b8;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
}

/* Estilos para la lista de clientes */
#clientList {
    margin-top: 20px;
}

.client-card {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.client-card h4 {
    margin: 0 0 8px 0;
}

.client-card p {
    margin: 0;
    color: #666;
    font-size: 0.9em;
}

.client-actions {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre los botones */
}

.btn-add-stock {
    background-color: #28a745; /* Verde, como los botones de éxito */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* Ajustes para que sea un botón de ícono cuadrado */
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.btn-edit {
    background-color: #ffc107;
    color: #333;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* Ajustes para que sea un botón de ícono cuadrado */
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.btn-delete {
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* Ajustes para que sea un botón de ícono cuadrado */
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Estilos para la Ventana Modal */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    position: relative;
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

/* Estilos para el modal de previsualización de exportación */
.export-preview-container {
    max-height: 40vh; /* Limita la altura */
    overflow-y: auto; /* Añade scroll si es necesario */
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 10px;
    margin: 20px 0;
    background-color: #f9f9f9;
}

.export-preview-container ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.export-preview-container li {
    padding: 8px 5px;
    border-bottom: 1px solid #ddd;
    font-size: 0.9em;
}

.export-preview-container li:last-child {
    border-bottom: none;
}

.modal-actions {
    margin-top: 20px;
    text-align: right;
}

/* Estilos para el modal de error */
.error-content {
    margin-top: 15px;
}

.error-content pre {
    background-color: #eee;
    padding: 15px;
    border-radius: 5px;
    white-space: pre-wrap; /* Permite que el texto se ajuste */
    word-wrap: break-word; /* Rompe palabras largas */
    max-height: 40vh;      /* Limita la altura y añade scroll */
    overflow-y: auto;
}

/* Estilos para el Dashboard */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.stat-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra más pronunciada y fina */
    text-align: center;
}

.stat-card h4 {
    margin: 0 0 10px 0;
    color: #555;
}

.stat-card p {
    margin: 0;
    font-size: 2em;
    font-weight: bold;
}

.stat-card-ventas {
    background-color: #fff3cd; /* Amarillo pastel */
    color: #856404;
}

.stat-card-gastos {
    background-color: #f8d7da; /* Rojo/rosa pastel */
    color: #721c24;
}

.stat-card-utilidades {
    background-color: #d4edda; /* Verde pastel */
    color: #155724;
}

.stat-card-utilidades p {
    color: #155724 !important; /* Asegurar que el color del saldo se aplique bien */
}

/* Estilos para la tarjeta del producto más vendido */
.top-product-card {
    background: linear-gradient(45deg, #ffd700, #f0c000); /* Gradiente dorado */
    color: #493b00;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

.top-product-info h4 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
    color: #493b00;
}

.top-product-info p {
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
}

.top-product-icon {
    font-size: 4em; /* Icono grande */
    animation: spin 4s linear infinite;
    transform-style: preserve-3d; /* Necesario para una rotación 3D más suave */
}

@keyframes spin {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

/* Estilos para la página de Gastos */
#expenseListContainer {
    margin-top: 30px;
}

.expense-card {
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 15px;
}

.expense-icon {
    font-size: 2em;
    background-color: #f0f0f0;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.expense-details p {
    margin: 0;
    color: #666;
}

/* Estilos para el formulario colapsable */
.collapsible {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out, margin 0.5s ease-out;
}

.collapsible.open {
    max-height: 2000px; /* Altura suficientemente grande para que nunca se corte */
    padding: 20px;
    margin-bottom: 20px;
}

/* Estilos para las pestañas de la sección de ventas */
.sales-tabs {
    display: none; /* Oculto por defecto en pantallas grandes */
    margin-bottom: 20px;
}

.tab-link {
    flex: 1;
    padding: 12px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    font-weight: bold;
    color: #555;
}

.tab-link:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.tab-link:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.tab-link.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Ajustes para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .sales-tabs {
        display: flex; /* Muestra las pestañas */
    }
    .sales-list-column {
        display: none; /* Oculta el historial por defecto */
    }
}

/* --- Estilos para el Modal de Tareas --- */

.tasks-header {
    display: flex;
    justify-content: center; /* Centramos el título */
    align-items: center;
    margin-bottom: 5px;
}

.task-view-toggle-container {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 15px;
}

.btn-secondary-task {
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #ced4da;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
}

.btn-secondary-task:hover {
    background-color: #d6dce1;
}

/* Contenedor del botón "Crear Tarea" */
.task-creation-toggle-container {
    text-align: center;
    margin: 20px 0;
}

/* Formulario colapsable para nueva tarea */
.collapsible-task-form {
    max-height: 0;
    overflow: hidden;
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 0 20px;
    margin-bottom: 0;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out, margin-bottom 0.4s ease-out;
}

.collapsible-task-form.open {
    max-height: 500px; /* Altura suficiente para el contenido */
    padding: 20px;
    margin-bottom: 20px;
}

/* Formulario para añadir tarea */
.add-task-form {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
}

#newTaskText {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

.btn-add-task {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    font-size: 1.8em;
    line-height: 1;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding-bottom: 4px; /* Ajuste vertical del signo + */
}

.btn-delete-task {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    font-size: 1.5em;
    margin-left: auto; /* Empuja el botón a la derecha */
    padding: 0 5px;
    opacity: 0.5;
    transition: opacity 0.2s;
}

/* Estilos para la lista de tareas arrastrables */
.task-list-sortable {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.task-list-sortable li {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    user-select: none; /* Evita que el texto se seleccione al arrastrar */
    transition: opacity 0.3s, background-color 0.3s;
}

.task-due-date {
    font-size: 0.8em;
    color: #666;
    background-color: #f0f0f0;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto; /* Empuja la fecha a la derecha, antes del botón de borrar */
    margin-right: 10px;
}

.task-due-date.overdue {
    background-color: #f8d7da;
    color: #721c24;
    font-weight: bold;
}
.task-list-sortable .drag-handle {
    cursor: grab; /* El cursor de arrastre solo aparece sobre el ícono */
}

.task-list-sortable li:hover .btn-delete-task {
    opacity: 1; /* Muestra el botón de borrar al pasar el ratón */
}

.task-list-sortable li .task-checkbox {
    /* Ocultamos el checkbox por defecto */
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #adb5bd;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s, border-color 0.2s;
    flex-shrink: 0; /* Evita que el checkbox se encoja */
}

.task-list-sortable li .task-checkbox:checked {
    background-color: #28a745;
    border-color: #28a745;
    /* Añadimos el "chulo" con un pseudo-elemento */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.6-1.5-1.5-.707.707 2.207 2.207 4.293-4.293z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
}

.task-list-sortable li.completed-task {
    opacity: 0.6;
    background-color: #f8f9fa;
}

/* Clase que SortableJS añade al elemento "fantasma" que sigue al cursor */
.task-ghost-class {
    opacity: 0.4;
    background: #c8ebfb;
}

/* Estilo para el input de edición en línea de tareas */
.inline-edit-task {
    flex-grow: 1;
    border: 1px solid #007bff; /* Borde azul para indicar edición */
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 1em;
    font-family: inherit;
    margin: -4px 0; /* Ajuste para que no salte el layout */
}