/* Comparativas (industrial y decorativa): mismo flujo y estilo que la app.
   Paso 1: primer producto. Paso 2: segundo producto. Después, lado a lado. */

:root {
    --cmp-border: #57636c;
    --cmp-shadow: #00070b;
}

/* Tarjetas con el lenguaje de la app: borde de 2 px y sombra dura. */
.selection-card,
.comparison-results,
.product-card,
.selector-column {
    border: 2px solid var(--cmp-border);
    box-shadow: 0 4px 4px var(--cmp-shadow);
}
.selection-card { border-radius: 14px; }
.comparison-results { border-radius: 14px; }
.product-card { border-radius: 12px; background: #fff; }
.product-card-header { border-bottom-color: var(--cmp-border); }

/* Indicador de pasos */
.cmp-steps { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; flex-wrap: wrap; }
.cmp-step {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 0.9rem; color: var(--cmp-border);
}
.cmp-step .n {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-grid; place-items: center;
    border: 2px solid var(--cmp-border); font-size: 0.85rem; background: #fff;
}
.cmp-step.activo { color: #004aad; }
.cmp-step.activo .n { background: #004aad; border-color: #004aad; color: #fff; }
.cmp-step.hecho .n { background: #28a745; border-color: #28a745; color: #fff; }
.cmp-steps .sep { flex: 0 0 28px; height: 2px; background: #cfd8e3; }

/* Un solo selector a la vez, ancho cómodo de lectura */
.product-selector { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; }
.selector-column[hidden] { display: none; }
.selector-column { border-radius: 12px; background: #fff; }

/* Producto ya elegido: barra con "Cambiar" */
.selected-product-preview { display: none; align-items: center; justify-content: space-between; gap: 12px; }
.selected-product-preview.show { display: flex; }
.selected-product-preview .cmp-texto { min-width: 0; }
.selected-product-preview h5, .selected-product-preview p { overflow-wrap: anywhere; }
.cmp-cambiar {
    flex: none; border: 2px solid var(--cmp-border); background: #fff; color: #14181b;
    border-radius: 10px; padding: 8px 14px; font: 600 0.85rem inherit; font-family: inherit; cursor: pointer;
}
.cmp-cambiar:hover { background: #f0f9ff; }
.cmp-cambiar:focus-visible, .cmp-btn:focus-visible { outline: 3px solid #004aad; outline-offset: 2px; }

/* Primer producto, ya elegido, encima del selector del segundo */
.cmp-resumen1 { margin-bottom: 16px; }
.cmp-resumen1 .selected-product-preview { margin-top: 0; }

/* Botones de resultados */
.button-group .cmp-btn { cursor: pointer; }

@media (max-width: 968px) {
    .comparison-results { padding: 24px 16px; }
    .selection-card { padding: 20px 16px; }
}
@media (prefers-reduced-motion: no-preference) {
    .product-card { animation: cmp-entra .3s ease-out both; }
    @keyframes cmp-entra { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
}

@media (max-width: 480px) {
    .cmp-steps { flex-direction: column; align-items: flex-start; gap: 8px; }
    .cmp-steps .sep { display: none; }
}