/*Encuadre GENERAL*/
		body {   font-family: 'Segoe UI', Arial, sans-serif;   background-color: #f4f7f6;   margin: 0;  display: flex;   min-height: 100vh;}

        nav { width: 250px; background: #2c3e50; color: white; height: 100vh; padding: 20px; box-sizing: border-box; position: fixed; }
		
        main { margin-left: 250px; flex-grow: 1; padding: 40px; width: calc(100% - 250px); }
		
		h2 {  margin-bottom: 30px;  font-weight: 600;   color: #2c3e50;}
			

		/*Links*/
 		a { display: inline-block;   color: #e74c3c;   text-decoration: none;   font-weight: bold;  padding: 10px 20px; border: 1px solid transparent; transition: all 0.2s;}
 		a:hover { color: #c0392b;  border-bottom: 1px solid #c0392b;}
		
		    		
		/* Tablas */
		table { width: 100%; border-collapse: collapse; margin-top: 20px; }
		th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
		th { background-color: #27ae60; color: white;  justify-content: flex-start; /* Alineación a la izquierda */ }		  
		
		
		/*Listas*/		
		ul{list-style: none; padding: 0;}		
		li{cursor:pointer; padding: 10px;}
 
    
        /* Formularios */
        .form { display: flex; gap: 10px; margin-bottom: 20px; align-items: flex-end; border-bottom: 1px solid #eee; padding-bottom: 20px; }

        .conjunto{display: flex; flex-direction: column;}
		
		#lista-checkboxes{display:flex;} 
        
		input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
        
		.celda-acciones { display: flex;gap: 5px; align-items: center; margin-left: auto; }
		
		.filtro { height:30px}
		
        /* Botones */	 
		.botonera { display: flex; gap: 10px; margin-bottom: 20px; align-items: flex-end; border-bottom: 1px solid #eee; padding-bottom: 20px; }
		
		button { width: 100%; padding: 20px;  margin: 10px 0;  border: none;  border-radius: 8px;  cursor: pointer;  font-size: 1rem; font-weight: bold;  text-transform: uppercase; transition: all 0.3s ease; display: block;}
		/* button:hover { background-color: #0056b3;} */
				     
		/*Botones incrustados por js, editar y borrar */
		.btn-delete { background: #e74c3c; color: white; width: auto;  display: inline-block; }
		
		.btn-edit { background: #f1c40f; color: #333; margin-right: 5px; width: auto;   display: inline-block; 	 }
				
        .btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
        .btn-add { background: #27ae60; color: white; }
        
		.btn-submit { background: #f1c40f; color: #333; margin-right: 5px; }
       
        .btn-logout { background: #c0392b; color: white; width: 100%; margin-top: 20px; }
		.btn-primary{padding: 12px 25px; font-size: 1rem; margin-left: auto;  align-self: flex-end; /* Se asegura de estar abajo si el contenedor es alto */ height: fit-content;}
        
		
		/*Login*/
		.login-div { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 300px; }			
		
		
		/*Direccion*/
		.estadisticas_div { display: flex; gap: 20px;margin-bottom: 30px; }
		 
		.card { background: white; padding: 25px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
		    
		.stat-card  {   background: #fff;     padding: 20px;   border-radius: 8px;   box-shadow: 0 2px 10px rgba(0,0,0,0.1);  flex: 1; text-align: center; border-top: 4px solid #3498db; }
		.stat-card h3 { color: #7f8c8d; font-size: 0.9rem; margin-bottom: 10px; }
		.stat-card p { font-size: 1.4rem; font-weight: bold; color: #2c3e50; margin: 0; }
		.highlight { color: #e67e22 !important; }
			
		.container { background:white; padding:20px; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,0.1); text-align:center; width:100%; max-width:1200px; margin:20px auto;}

		
		/*Pedidos*/			
		.pedido-cabecera { cursor: pointer; transition: background-color 0.2s;}		
		.pedido-cabecera:hover{ background-color: #f5f5f5; /* Efecto visual al pasar el ratón */}
				
		 /*Detalle de pedidos*/
		 /* Oculta el contenedor por defecto y asegura que no ocupe espacio */
		.detalle-container { display: none;   overflow: hidden;	}	
		/* Opcional: Clase para mostrarlo cuando lo necesites vía JS */
		.detalle-container.activo {   display: block;	}	
		/* Asegura que la celda que contiene el div no cree espacio extra si el div está oculto */
		.celda-contenedor { padding: 0 !important; border: none !important;	}