/* CSS Frontend - Cambio de Pala */
.cambio-pala-formulario{max-width:1200px;margin:40px auto;padding:20px}
.cambio-pala-paso{display:none;animation:fadeIn .3s ease}
.cambio-pala-paso.activo{display:block}
.cambio-pala-paso h2{font-size:28px;margin-bottom:30px;text-align:center;color:#333}
.cambio-pala-filtros{margin-bottom:30px;text-align:center}
.cambio-pala-buscar{width:100%;max-width:500px;padding:12px 20px;font-size:16px;border:2px solid #ddd;border-radius:25px;outline:0;transition:border-color .3s}
.cambio-pala-buscar:focus{border-color:#2271b1}
.cambio-pala-grid{display:grid;gap:20px;margin-bottom:30px}
.cambio-pala-grid[data-columnas="2"]{grid-template-columns:repeat(2,1fr)}
.cambio-pala-grid[data-columnas="3"]{grid-template-columns:repeat(3,1fr)}
.cambio-pala-grid[data-columnas="4"]{grid-template-columns:repeat(4,1fr)}
@media (max-width:992px){.cambio-pala-grid[data-columnas="3"],.cambio-pala-grid[data-columnas="4"]{grid-template-columns:repeat(2,1fr)}}
@media (max-width:576px){.cambio-pala-grid{grid-template-columns:1fr}}
.pala-producto{border:2px solid #e0e0e0;border-radius:8px;padding:15px;text-align:center;cursor:pointer;transition:all .3s ease;background:#fff}
.pala-producto:hover{border-color:#2271b1;transform:translateY(-5px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.pala-producto.seleccionada{border-color:#2271b1;border-width:3px;background:#f0f6fc}
.pala-producto img{width:100%;height:200px;object-fit:contain;margin-bottom:15px}
.pala-producto h3{font-size:16px;margin:10px 0;color:#333}
.pala-producto .precio{font-size:20px;font-weight:700;color:#2271b1}
.cambio-pala-selectores{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}
.cambio-pala-select-group label{display:block;font-weight:600;margin-bottom:8px;color:#333}
.cambio-pala-select-group select{width:100%;padding:12px;font-size:16px;border:2px solid #ddd;border-radius:6px;outline:0;transition:border-color .3s}
.cambio-pala-select-group select:focus{border-color:#2271b1}
.cambio-pala-select-group select:disabled{background:#f5f5f5;cursor:not-allowed}
.cambio-pala-reembolso-preview{text-align:center;margin:30px 0}
.reembolso-box{display:inline-block;padding:20px 40px;background:linear-gradient(135deg,#5cb85c,#4cae4c);color:#fff;border-radius:12px;box-shadow:0 4px 8px rgba(0,0,0,.2)}
.reembolso-label{display:block;font-size:16px;margin-bottom:5px}
.reembolso-monto{display:block;font-size:32px;font-weight:700}
.cambio-pala-enlaces-ayuda{text-align:center;margin:20px 0;font-size:14px}
.cambio-pala-enlaces-ayuda a{color:#2271b1;text-decoration:none}
.cambio-pala-enlaces-ayuda a:hover{text-decoration:underline}
.cambio-pala-enlaces-ayuda .separador{margin:0 15px;color:#ccc}
.cambio-pala-resumen{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center;margin-bottom:30px}
@media (max-width:768px){.cambio-pala-resumen{grid-template-columns:1fr;gap:20px}}
.resumen-pala{border:2px solid #e0e0e0;border-radius:8px;padding:20px;background:#fff;min-height:200px}
.resumen-pala h3{font-size:18px;margin-bottom:15px;color:#333;border-bottom:2px solid #2271b1;padding-bottom:10px}
.pala-card{display:flex;align-items:center;gap:15px;min-height:120px}
.pala-card img{width:100px;height:100px;object-fit:contain}
.pala-info{flex:1}
.pala-nombre{font-weight:600;font-size:16px;margin-bottom:5px}
.pala-precio,.pala-reembolso{font-size:18px;font-weight:700;color:#2271b1}
.pala-estado{font-size:14px;color:#666}
.resumen-intercambio{text-align:center}
.icono-intercambio{font-size:48px;color:#2271b1}
.cambio-pala-nota-importante{background:#fff3cd;border-left:4px solid #ffc107;padding:15px 20px;margin-bottom:20px;border-radius:4px}
.cambio-pala-nota-importante p{margin:5px 0;font-size:14px}
.cambio-pala-nota-importante strong{font-size:16px}
.cambio-pala-terminos{text-align:center;margin:20px 0;padding:0 10px}
.cambio-pala-terminos label{display:inline-flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer;flex-wrap:wrap;justify-content:center;line-height:1.6}
.cambio-pala-terminos a{word-break:break-word}
@media (max-width:576px){
.cambio-pala-terminos{padding:0 15px}
.cambio-pala-terminos label{font-size:13px;text-align:left;display:flex;line-height:1.8}
.cambio-pala-terminos label input{margin-top:3px;flex-shrink:0}
}
.cambio-pala-terminos input[type=checkbox]{width:20px;height:20px;cursor:pointer}
.cambio-pala-acciones{display:flex;justify-content:center;gap:15px;margin-top:30px}
.cambio-pala-btn{padding:12px 30px;font-size:16px;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-block;text-align:center}
.cambio-pala-btn:disabled{opacity:.5;cursor:not-allowed}
.cambio-pala-btn-primary{background:#2271b1;color:#fff}
.cambio-pala-btn-primary:hover:not(:disabled){background:#135e96}
.cambio-pala-btn-siguiente{background:#2271b1;color:#fff}
.cambio-pala-btn-siguiente:hover:not(:disabled){background:#135e96}
.cambio-pala-btn-anterior{background:#6c757d;color:#fff}
.cambio-pala-btn-anterior:hover{background:#5a6268}
.cambio-pala-exito{text-align:center;padding:40px 20px}
.icono-exito{width:80px;height:80px;line-height:80px;font-size:50px;background:#5cb85c;color:#fff;border-radius:50%;margin:0 auto 20px;animation:scaleIn .5s ease}
.cambio-pala-exito h2{color:#5cb85c;margin-bottom:15px}
.cambio-pala-exito p{font-size:16px;color:#666;margin-bottom:30px}
.cambio-pala-loading{text-align:center;padding:40px;font-size:18px;color:#666}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{transform:scale(0)}to{transform:scale(1)}}

/* Fotos Upload */
.cambio-pala-fotos-upload h3 {
    margin-bottom: 10px;
    color: #333;
}

.fotos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.foto-upload-box {
    border: 2px dashed #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
}

.foto-upload-box:hover {
    border-color: #2271b1;
}

.foto-label {
    display: block;
    cursor: pointer;
    text-align: center;
    padding: 20px;
    min-height: 200px;
    position: relative;
}

.foto-preview {
    width: 100%;
    height: 150px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 4px;
}

.foto-preview:empty:before {
    content: "📷";
    font-size: 48px;
    opacity: 0.3;
}

.foto-texto {
    display: block;
    font-weight: 600;
    color: #666;
}

@media (max-width: 768px) {
    .fotos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}