/* =========================================
   PÁGINA DE CARRITO DE COMPRAS (RETAIL PRO)
   ========================================= */
.page-carrito-pro {
    max-width: 1450px; /* 1. MAGIA: Aumentamos el ancho total de la página (antes 1250) */
    margin: 40px auto;
    padding: 0 5%;
}

.carrito-header-titulo h1 {
    font-size: 1.6rem;
    color: var(--dark-gray);
    margin-bottom: 25px;
    font-weight: 700;
}

.contador-titulo {
    color: #666;
    font-size: 1.1rem;
    font-weight: 400;
}

.carrito-container-pro {
    display: grid;
    /* 2. MAGIA: Le damos mucha más proporción a la columna izquierda */
    grid-template-columns: 2.7fr 1fr; 
    gap: 40px; /* Un poco más de aire entre las dos columnas */
    align-items: start;
}

/* Columna Izquierda: Tarjetas de Productos */
.lista-tarjetas-carrito {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tarjeta-item-pro {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}

.tarjeta-item-header {
    background-color: #ffffff;
    padding: 15px 25px; /* Un poco más de padding lateral */
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkbox-vendedor {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #444;
    cursor: pointer;
}

.btn-trash-icon {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 1.1rem;
}

.tarjeta-item-body {
    padding: 30px 25px; /* 3. MAGIA: Más aire por dentro de la tarjeta */
    display: flex;
    gap: 30px; /* Separamos más la foto del texto */
    align-items: flex-start;
}

.item-check-individual { margin-top: 40px; }
.item-check-individual input, .checkbox-vendedor input {
    width: 18px;
    height: 18px;
    accent-color: var(--dark-gray);
    cursor: pointer;
}

.item-img-pro {
    width: 120px; /* Crecemos un poquito la foto para que no se pierda en la tarjeta larga */
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prohíbe que la foto se aplaste */
}
.item-img-pro img { width: 100%; height: 100%; object-fit: contain; }

.item-info-centro {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.item-nombre-pro { font-size: 1rem; margin-bottom: 5px; line-height: 1.3; }
.item-nombre-pro a { color: var(--dark-gray); text-decoration: none; transition: color 0.2s; }
.item-nombre-pro a:hover { color: var(--primary-blue); }

.item-marca-pro { font-size: 0.75rem; color: #777; font-weight: 600; margin-bottom: 15px; }

.item-badges-pro { display: flex; gap: 8px; flex-wrap: wrap; }
.item-badges-pro span {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.badge-llegada { color: #008f45; border: 1px solid #008f45; background: #e8f5e9; }
.badge-retiro { color: #008f45; border: 1px solid #008f45; background: #e8f5e9; }
.badge-ultimos { color: #d32f2f; border: 1px solid #d32f2f; background: #ffebee; }

.item-info-derecha {
    display: flex;
    gap: 30px;
    text-align: right;
    /* 1. MAGIA: Toma el espacio necesario sin importar el título de al lado */
    min-width: max-content; 
    /* 2. MAGIA: Prohíbe terminantemente que este bloque se encoja */
    flex-shrink: 0; 
    justify-content: flex-end;
}

.item-precios-pro { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
    min-width: 100px; /* Le da un ancho base seguro al precio */
}

.precio-actual-pro { 
    font-size: 1.15rem; /* Un pelín más grande para que se vea mejor */
    font-weight: 600; /* Lo hacemos negrita para que resalte */
    color: #333; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    /* 3. MAGIA: Obliga a que "S/ 25.00" y "-29%" se mantengan en la misma línea siempre */
    white-space: nowrap; 
}
.pill-descuento { background: #e50029; color: white; font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; font-weight: bold; }
.precio-antiguo-pro { font-size: 0.85rem; color: #999; text-decoration: line-through; margin-top: 3px; }

.item-controles-pro { display: flex; flex-direction: column; align-items: center; }
.selector-mini {
    display: flex;
    align-items: center;
    background: #f4f6f8;
    border-radius: 30px;
    overflow: hidden;
    height: 35px;
    margin-bottom: 5px;
}
.btn-mini-minus, .btn-mini-plus {
    background: #333f48;
    color: white;
    border: none;
    width: 35px;
    height: 100%;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.selector-mini input {
    width: 40px;
    background: transparent;
    border: none;
    text-align: center;
    font-weight: 600;
    color: var(--dark-gray);
    outline: none;
}
.max-unidad-pro { font-size: 0.7rem; color: #e50029; font-weight: 600; }


/* Columna Derecha: Resumen de Orden */
.carrito-resumen-col { position: sticky; top: 100px; }
.resumen-titulo-pro { font-size: 1.5rem; color: var(--dark-gray); margin-bottom: 20px; font-weight: 400; }

.tarjeta-resumen-pro {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 30px;
}

.resumen-linea-pro {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 15px;
}
.resumen-linea-pro.verde { color: #00a651; font-weight: 600; }
.resumen-divider { border: none; border-top: 1px solid #eee; margin: 20px 0; }
.resumen-linea-pro.total-pro { font-size: 1.1rem; font-weight: 700; color: var(--dark-gray); }

.btn-continuar-compra {
    width: 100%;
    background-color: #333f48;
    color: white;
    border: none;
    padding: 16px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s;
}
.btn-continuar-compra:hover { background-color: #1f272d; }

.carrito-vacio-pro { text-align: center; padding: 60px 20px; background: white; border-radius: 8px; }
.carrito-vacio-pro i { font-size: 4rem; color: #ddd; margin-bottom: 15px; }
.btn-seguir-comprando-pro { display: inline-block; background: var(--primary-blue); color: white; padding: 12px 25px; border-radius: 30px; text-decoration: none; margin-top: 15px; }


/* Móviles */
@media (max-width: 950px) {
    .carrito-container-pro { grid-template-columns: 1fr; }
    .tarjeta-item-body { flex-direction: column; align-items: center; text-align: center; position: relative; }
    .item-check-individual { position: absolute; top: 20px; left: 20px; margin: 0; }
    .item-info-derecha { flex-direction: column; align-items: center; margin: 0; gap: 15px; }
    .item-precios-pro { align-items: center; }
}