/* Sección General */
.last-orders-section {
    margin-top: 0px;
}

.last-orders-section h2 {
    font-size: 1.8em;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
}

/* Contenedor de la cuadrícula de pedidos */
.orders-grid {
    display: grid;
    /* Adapta el número de columnas a 4 si siempre quieres 4, o usa auto-fit para ser responsive */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px; /* Espacio entre las tarjetas */
    justify-content: center; /* Centra las tarjetas si no llenan toda la fila */
}

/* Estilos para cada tarjeta de pedido individual */
.order-cardpedido {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer; /* ¡Hace que el cursor sea una mano! */
    display: flex;
    flex-direction: column; /* Coloca los elementos en columna */
    align-items: center; /* Centra los elementos horizontalmente */
}

/* Efecto al pasar el ratón (interactividad) */
.order-cardpedido:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px); /* Ligeramente hacia arriba */
}

/* Estilos para la imagen del cliente */
.order-card-imagepedido {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px;
    border: 2px solid #eee;
    /* Adicionando Flexbox para centrar el contenido */
    display: flex; 
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

.order-card-imagepedido img {
    /* Aquí ya no es necesario establecer el ancho y alto a 80%, 
    ya que object-fit: cover se encargará de rellenar el espacio.
    Sin embargo, si la imagen es pequeña, puedes usar 100% para 
    asegurar que ocupe todo el espacio del contenedor padre. */
    width: 100%; 
    height: 100%;
    object-fit: cover; 
}
/* Estilos para los detalles del pedido */
.order-card-details {
    width: 100%; /* Ocupa todo el ancho disponible */
}

.order-card-client {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    white-space: nowrap; /* Evita que el nombre se rompa en varias líneas */
    overflow: hidden; /* Oculta el texto si es demasiado largo */
    text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es demasiado largo */
    max-width: 100%; /* Asegura que el ellipsis funcione */
}

.order-card-number {
    font-size: 0.9em;
    color: #666;
}

/* Mensaje si no hay pedidos */
.no-orders-message {
    grid-column: 1 / -1; /* Ocupa todas las columnas */
    text-align: center;
    padding: 30px;
    color: #888;
    font-style: italic;
}