/* importar.css — "El acomodador" (docs/diseno/importar-catalogo-v1.md). Vive dentro de una
   .hoja (util.abrirHoja): 5 pasos, la vista previa (paso 3) es la pieza central. Reusa .boton,
   .campo, .kicker, .lede, .enlace-profundizar, .estado-premio de base.css; solo lo nuevo va aca. */

/* En escritorio la hoja de importar es un panel mas ancho que el resto (720px, seccion 3 del
   diseno): la vista previa necesita el espacio, es tabla de trabajo, no un formulario angosto. */
.hoja--importar{ max-width:560px; }
@media (min-width:880px){ .hoja--importar{ max-width:720px; } }

/* ---------------- Progreso de pasos (Traé / Acomodá / Revisá / Importá / Listo) ---------------- */
.importar__progreso{ display:flex; align-items:center; }
.importar__paso-ind{
  width:26px; height:26px; border-radius:var(--r-pill); flex:none; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700; background:var(--paper-2); color:var(--ink-3);
  border:1px solid var(--line);
}
.importar__paso-ind--hecho{ background:var(--pos); color:#fff; border-color:var(--pos); }
.importar__paso-ind--activo{ background:var(--marca-accion); color:#fff; border-color:var(--marca-accion); }
.importar__progreso-linea{ flex:1; height:2px; background:var(--line-fuerte); margin:0 4px; }

/* ---------------- Paso 1: traer la lista ---------------- */
.importar__soltar{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-2);
  text-align:center; margin-top:var(--sp-4); padding:var(--sp-6) var(--sp-4); border-radius:var(--r-md);
  background:var(--superficie-neu); box-shadow:var(--sombra-neu-inset-suave); cursor:pointer;
  font-size:14.5px; color:var(--ink-2);
}
.importar__soltar--sobre{ box-shadow:var(--sombra-neu-inset-suave), 0 0 0 2px var(--marca-accion); }
.importar__soltar-icono{ font-size:24px; color:var(--ink-3); }
.importar__soltar:focus-visible{ outline:none; box-shadow:var(--sombra-neu-inset-suave), var(--sombra-foco-neu); }
.importar__o{ text-align:center; font-size:12.5px; color:var(--ink-3); margin:var(--sp-4) 0; }
/* "Bajá la plantilla" es un <button> (dispara la descarga con JS, no navega), pero se ve como
   .enlace-profundizar (un <a>): sin este reset, el navegador le mete su chrome nativo de boton
   (fondo, borde, ancho completo). Bug real cazado en captura de pantalla movil. */
.importar__paso button.enlace-profundizar{
  background:none; border:none; padding:0; width:auto; text-align:left; cursor:pointer; display:inline-block;
}

/* ---------------- Paso 2: acomodar columnas ---------------- */
.importar__mapeo-fila{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--line); }
.importar__mapeo-fila:last-child{ border-bottom:none; }
.importar__mapeo-origen{ flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.importar__mapeo-flecha{ color:var(--ink-3); flex:none; }
.importar__mapeo-select{
  min-height:40px; padding:0 var(--sp-2); border-radius:var(--r-sm); border:1px solid var(--line-fuerte);
  background:var(--paper); color:var(--ink); font-size:13.5px; flex:none; width:150px;
}
.importar__aviso-ambar{ color:var(--flaco-ink); font-weight:600; }
.importar__preview-crudo{ margin-top:var(--sp-2); }
.importar__linea-cruda{ font-size:13px; color:var(--ink-2); padding:var(--sp-1) 0; font-family:var(--font-num); }

@media (max-width:420px){
  .importar__mapeo-fila{ flex-wrap:wrap; }
  .importar__mapeo-select{ width:100%; }
}

/* ---------------- Paso 3: revisá y corregí (el corazon) ---------------- */
.importar__resumen{ font-size:15px; font-weight:600; margin-bottom:var(--sp-3); }
.importar__dup-global{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-4); font-size:13.5px; color:var(--ink-2); }

/* Tabla de trabajo: SIN neumorphism (regla dura, tema-y-neumorphism-v1.md 7.2: nada de
   neumorphism en tablas/listas densas de datos), solo filete por fila. */
.previa{ margin-top:var(--sp-3); }
.previa-fila{ display:flex; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.previa-fila:last-child{ border-bottom:none; }
.previa-fila__marca{ flex:none; width:16px; text-align:center; font-size:13px; line-height:1.6; }
.previa-fila--entra .previa-fila__marca{ color:var(--pos); }
.previa-fila--revisa .previa-fila__marca{ color:var(--flaco); }
.previa-fila--salta .previa-fila__marca{ color:var(--ink-3); }
.previa-fila__cuerpo{ flex:1; min-width:0; }
.previa-fila__l1{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; }
.previa-fila__nombre{ font-weight:600; font-size:14.5px; }
.previa-fila--salta .previa-fila__nombre{ color:var(--ink-3); }
.previa-fila__precio{ font-size:14px; color:var(--ink-2); flex:none; font-variant-numeric:tabular-nums; }
.previa-fila__l2{ display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; margin-top:2px; }
.previa-fila__esfera{ font-size:12.5px; color:var(--ink-3); }
.previa-fila__categoria{ font-size:12px; color:var(--ink-3); }
.previa__estado{ font-size:12.5px; color:var(--ink-2); margin-top:4px; }
.previa-fila--revisa .previa__estado{ color:var(--flaco-ink); }
.previa-fila--salta .previa__estado{ color:var(--ink-3); }
.previa__campo{
  min-height:36px; padding:0 var(--sp-2); border-radius:var(--r-xs); border:1px solid var(--line-fuerte);
  background:var(--paper); color:var(--ink); font-size:13px;
}
.previa__campo--precio{ width:96px; text-align:right; font-variant-numeric:tabular-nums; }
.previa__campo--esfera{ max-width:100%; }
.previa__acciones-dup{ display:flex; gap:var(--sp-2); margin-top:var(--sp-2); }
.previa__saltar{
  background:none; border:none; color:var(--ink-3); font-size:12px; text-decoration:underline;
  cursor:pointer; padding:var(--sp-1) 0; margin-top:4px;
}
.previa__divisor{
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  margin:var(--sp-4) 0 var(--sp-2); padding-top:var(--sp-3); border-top:1px solid var(--line-fuerte);
}

/* ---------------- Paso 4: importando ---------------- */
.importar__cargando{ padding:var(--sp-6) 0; }

/* ---------------- Paso 5: listo (el resumen honesto) ---------------- */
.importar__cifra-final{ font-size:17px; }
.importar__lista-saltados{ margin:var(--sp-3) auto; padding-left:1.2em; font-size:13.5px; color:var(--ink-2); text-align:left; max-width:44ch; }
.importar__lista-saltados li{ margin-bottom:4px; }
.importar__nota-foso{
  margin-top:var(--sp-4); padding:var(--sp-3); border-radius:var(--r-sm); background:var(--paper-2);
  font-size:13.5px; color:var(--ink-2); text-align:center;
}
.importar__acciones-final{ display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-5); }