/* Reset básico */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #f4f7f6;
  color: #333;
}

/* --- Menú Lateral --- */


/* --- Área de Contenido --- */
.content {
  flex-grow: 1;
  padding: 10px;
}

/* --- Formularios y Tablas (para el CRUD) --- */
.form-container {
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Para tablets y pantallas más pequeñas */
@media (max-width: 768px) {
  .form-grid {
    /* Cambia a 1 columna */
    grid-template-columns: 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 0.9em;
  font-weight: 600;
  margin-bottom: 5px;
}

.form-group input, .form-group select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
}

/* --- Botones --- */
.btn {
  padding: 10px 18px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95em;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
}

.btn-primary {
  background-color: #3498db; /* Azul */
  color: white;
}
.btn-primary:hover {
  background-color: #2980b9;
}

.btn-danger {
  background-color: #e74c3c; /* Rojo */
  color: white;
}
.btn-danger:hover {
  background-color: #c0392b;
}

/* --- Tabla de Datos --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden; /* Para que el radius funcione en las esquinas */
}

.data-table th, .data-table td {
  border-bottom: 1px solid #ddd;
  padding: 12px 15px;
  text-align: left;
}

.data-table th {
  background-color: #f4f6f8;
}

.data-table tr:hover {
  background-color: #f9f9f9;
}

.data-table .actions {
    display: flex;
    gap: 10px;
}

/* --- Estilos para Mensajes Flash --- */
.flash-success {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.flash-error {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
/* --- Estilos Formulario Pedido --- */
.pedido-form-grid {
    display: grid;
    /* 4 columnas, cada una ocupa 1 fracción de espacio */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Intenta ajustarse automáticamente */ 
    gap: 20px;
}

@media (max-width: 576px) {
    .pedido-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Estilos para campos de solo lectura */
input[readonly] {
    background-color: #eee; /* Gris claro */
    color: #555;
    cursor: not-allowed;
    border: 1px solid #ccc;
}

/* Para que la tabla de pedidos no se salga en pantallas pequeñas */
.data-table .actions {
    /* Evita que los botones se partan en dos líneas */
    white-space: nowrap;
}

/* Media query para pantallas más pequeñas (móviles) */
@media (max-width: 992px) {
    .pedido-form-grid {
        /* Pone 2 columnas en lugar de 4 */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .pedido-form-grid {
        /* Pone 1 columna en móviles */
        grid-template-columns: 1fr;
    }
}

/* Añadimos botón secundario */
.btn-secondary {
  background-color: #6c757d; /* Gris */
  color: white;
}
.btn-secondary:hover {
  background-color: #5a6268;
}

/* --- Estilos Hoja Resumen --- */
.resumen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.resumen-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.resumen-card h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em;
    font-weight: 600;
    color: #555;
}

.resumen-card .monto {
    font-size: 1.8em;
    font-weight: 700;
    display: block;
}

/* Colores específicos */
.resumen-card .total-vendido { color: #3498db; }
.resumen-card .total-pagado { color: #2ecc71; }
.resumen-card .total-pendiente { color: #e74c3c; }

.resumen-grid.caja {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.resumen-grid.caja .ingresos { color: #27ae60; }
.resumen-grid.caja .retiros { color: #c0392b; }
.resumen-grid.caja .total-caja {
    background-color: #34495e;
    color: white;
}
.resumen-grid.caja .total-caja h4 { color: #ecf0f1; }

/* --- Estilos para el Gráfico --- */
.grafico-container {
    width: 100%;
    max-width: 900px; /* Ancho máximo del gráfico */
    margin: 30px auto; /* Centrarlo y darle espacio */
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- Estilos para Cabecera/Pie de Tabla Fijos (Sticky) --- */

/* * Esto le dice a los 'th' (títulos) dentro de .sticky-header
 * que se peguen a la parte superior (top: 0) del contenedor
 * (que es el .table-responsive que acabamos de modificar).
*/
.sticky-header th {
    position: sticky;
    top: 0;
    z-index: 10; /* Para que se ponga por encima del cuerpo al hacer scroll */
    
    /* Importante: Define un color de fondo sólido, 
       si no, el texto del cuerpo pasará por "detrás" y se verá feo */
    background-color: #f4f6f8; /* El color de fondo que ya tenían los <th> */
    border-bottom: 2px solid #ddd; /* Un borde para separarlo */
}

/* * Esto hace lo mismo para los 'td' (celdas) del pie de página,
 * pero los pega a la parte inferior (bottom: 0).
*/
.sticky-footer td {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background-color: #f2f2f2; /* El color que ya tenía la fila de totales */
    border-top: 2px solid #ddd; /* Un borde superior para separarlo */
}