/* Importador · CSS heredado, acotado a su vista */


#v-importar .imp-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
#v-importar .imp-marca{display:flex;align-items:center;gap:9px;color:var(--gold);
  font-family:'Cormorant Garamond',serif;font-size:1.3rem;white-space:nowrap}
#v-importar .imp-marca i{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);display:block;flex:none}
#v-importar .imp-sub{color:var(--faint);font-size:12px;margin-bottom:20px}


#v-importar .imp-pasos{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
#v-importar .imp-pasos b{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line-soft);padding:6px 11px;border-radius:2px;transition:.3s var(--ease)}
#v-importar .imp-pasos b em{font-style:normal;width:17px;height:17px;display:grid;place-items:center;
  border:1px solid currentColor;border-radius:50%;font-size:9.5px;flex:none}
#v-importar .imp-pasos b.on{color:var(--gold);border-color:var(--line)}
#v-importar .imp-pasos b.ok{color:var(--green);border-color:rgba(127,185,138,.24)}


#v-importar .imp-card{background:var(--bg-2);border:1px solid var(--line);padding:18px;
  margin-bottom:14px;border-radius:2px}
#v-importar .imp-card > h3{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:600;
  color:var(--gold);margin-bottom:3px}
#v-importar .imp-card > h3 + p{color:var(--muted);font-size:12.5px;margin-bottom:14px}


#v-importar #impZona{border:1px dashed var(--line);background:var(--bg-3);padding:30px 18px;text-align:center;
  cursor:pointer;transition:.25s var(--ease);border-radius:2px}
#v-importar #impZona:hover, #v-importar #impZona.encima{border-color:var(--gold);background:rgba(201,169,110,.06)}
#v-importar #impZona .icono{font-size:1.8rem;color:var(--gold);line-height:1}
#v-importar #impZona .t{font-weight:600;margin-top:9px}
#v-importar #impZona .s{color:var(--faint);font-size:11.5px;margin-top:3px}
#v-importar .imp-o{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;margin:16px 0}
#v-importar .imp-o:before, #v-importar .imp-o:after{content:"";height:1px;background:var(--line-soft);flex:1}
#v-importar textarea#impPegar{min-height:130px;resize:vertical;font-size:12.5px;
  font-family:ui-monospace,Menlo,Consolas,monospace;line-height:1.55;white-space:pre}


#v-importar .imp-rej{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
#v-importar .imp-rej .full{grid-column:1/-1}
#v-importar label.imp-lb{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin-bottom:5px}
#v-importar .imp-hint{color:var(--faint);font-size:11px;margin-top:5px}


#v-importar .imp-acc{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
#v-importar .btn-oro{padding:10px 18px;background:var(--gold);color:#14100A;font-weight:700;
  font-size:12.5px;white-space:nowrap;border-radius:2px;transition:.2s var(--ease)}
#v-importar .btn-oro:hover{background:var(--gold-hi)}
#v-importar .btn-oro:disabled{opacity:.45;cursor:not-allowed}
#v-importar .btn-linea{padding:10px 16px;border:1px solid var(--line);color:var(--muted);
  font-size:12.5px;border-radius:2px;transition:.2s var(--ease)}
#v-importar .btn-linea:hover{border-color:var(--gold);color:var(--ink)}
#v-importar .btn-txt{color:var(--faint);font-size:12px;text-decoration:underline;text-underline-offset:3px}
#v-importar .btn-txt:hover{color:var(--gold)}


#v-importar .imp-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
#v-importar .chip{border:1px solid var(--line-soft);padding:7px 11px;border-radius:2px;font-size:11.5px;
  color:var(--muted);background:var(--bg-3)}
#v-importar .chip b{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--gold);
  margin-right:5px;vertical-align:-1px}
#v-importar .chip.ok b{color:var(--green)} #v-importar .chip.mal b{color:var(--red)} #v-importar .chip.ojo b{color:var(--amber)}


#v-importar .aviso{border-left:2px solid var(--amber);background:rgba(217,164,65,.07);
  padding:10px 13px;font-size:12.5px;color:var(--ink);margin-bottom:12px;border-radius:0 2px 2px 0}
#v-importar .aviso.rojo{border-color:var(--red);background:rgba(224,90,78,.08)}
#v-importar .aviso.verde{border-color:var(--green);background:rgba(127,185,138,.07)}
#v-importar .aviso b{color:var(--gold)}


#v-importar .imp-mapa{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:11px}
#v-importar .mcol{border:1px solid var(--line-soft);background:var(--bg-3);padding:12px;border-radius:2px;
  min-width:0;transition:.25s var(--ease)}
#v-importar .mcol.baja{border-color:rgba(217,164,65,.32)}
#v-importar .mcol.fuera{opacity:.5}
#v-importar .mcol .cab{display:flex;align-items:center;gap:7px;margin-bottom:3px;min-width:0}
#v-importar .mcol .cab span{font-weight:700;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0;flex:1}
#v-importar .mcol .ej{color:var(--faint);font-size:11px;margin-bottom:9px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#v-importar .mcol select{font-size:12.5px;padding:7px 9px}
#v-importar .sello{font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:2px 6px;border-radius:2px;flex:none;white-space:nowrap}
#v-importar .sello.alta{color:var(--green);background:rgba(127,185,138,.12)}
#v-importar .sello.media{color:var(--amber);background:rgba(217,164,65,.12)}
#v-importar .sello.baja{color:var(--red);background:rgba(224,90,78,.12)}
#v-importar .sello.no{color:var(--faint);background:rgba(242,237,227,.06)}


#v-importar .imp-scroll{overflow-x:auto;border:1px solid var(--line-soft);border-radius:2px;
  -webkit-overflow-scrolling:touch;scrollbar-color:var(--line) var(--bg-3);scrollbar-width:thin}
#v-importar .imp-scroll::-webkit-scrollbar{height:9px}
#v-importar .imp-scroll::-webkit-scrollbar-track{background:var(--bg-3)}
#v-importar .imp-scroll::-webkit-scrollbar-thumb{background:rgba(201,169,110,.28);border-radius:9px}
#v-importar .imp-scroll::-webkit-scrollbar-thumb:hover{background:rgba(201,169,110,.45)}
#v-importar table.imp-tabla{border-collapse:collapse;font-size:12px;white-space:nowrap;min-width:100%}
#v-importar table.imp-tabla th, #v-importar table.imp-tabla td{padding:7px 11px;border-bottom:1px solid var(--line-soft);
  text-align:left;max-width:230px;overflow:hidden;text-overflow:ellipsis}
#v-importar table.imp-tabla th{background:var(--bg-3);position:sticky;top:0}
#v-importar table.imp-tabla th .d{display:block;font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);font-weight:700}
#v-importar table.imp-tabla th .o{display:block;font-size:11px;color:var(--faint);font-weight:400}
#v-importar table.imp-tabla th.no .d{color:var(--faint)}
#v-importar table.imp-tabla tr.mala td{background:rgba(224,90,78,.07);color:var(--muted)}
#v-importar table.imp-tabla tr.repe td{background:rgba(217,164,65,.06);color:var(--muted)}
#v-importar td .norm{color:var(--gold)} #v-importar td .orig{color:var(--faint);font-size:10.5px}
#v-importar .imp-leyenda{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--faint);margin-top:9px}
#v-importar .imp-leyenda i{width:9px;height:9px;display:inline-block;margin-right:5px;vertical-align:0}


#v-importar .barra{height:3px;background:rgba(242,237,227,.07);overflow:hidden;margin:16px 0 9px}
#v-importar .barra i{display:block;height:100%;background:var(--gold);width:0;transition:width .4s var(--ease)}
#v-importar #impProgreso{font-size:12.5px;color:var(--muted)}
#v-importar .imp-final{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:11px;margin:16px 0}
#v-importar .imp-final div{border:1px solid var(--line-soft);background:var(--bg-3);padding:14px;
  text-align:center;border-radius:2px}
#v-importar .imp-final b{display:block;font-family:'Cormorant Garamond',serif;font-size:2rem;
  line-height:1;color:var(--gold)}
#v-importar .imp-final.hecho b{color:var(--green)}
#v-importar .imp-final span{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);font-weight:700;display:block;margin-top:6px}
#v-importar .imp-final div.gris b{color:var(--faint)}
#v-importar .imp-final div.ambar b{color:var(--amber)}

@media (max-width:520px){
  #v-importar #impRaiz{padding:16px 12px 60px}
  #v-importar .imp-mapa{grid-template-columns:1fr}
  #v-importar .imp-pasos b{flex:1 1 auto;justify-content:center}
  #v-importar .btn-oro, #v-importar .btn-linea{flex:1 1 auto;text-align:center}
  #v-importar input, #v-importar select, #v-importar textarea{font-size:16px}   
  #v-importar textarea#impPegar{font-size:13px}
}



#v-importar #ficha .top{align-items:flex-start;gap:14px;padding:20px 20px 16px}
#v-importar #ficha .top h2{font-size:1.42rem;line-height:1.22;margin-bottom:9px}
#v-importar .sub-top{display:flex;flex-wrap:wrap;gap:6px}
#v-importar .sub-top .tag{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#v-importar .card b{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#v-importar #ficha .cuerpo{padding:20px;gap:22px}
#v-importar .accesos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:520px){#v-importar .accesos{grid-template-columns:1fr}}
#v-importar .ac{display:block;padding:10px 12px;border:1px solid var(--line);transition:border-color .2s var(--ease),background .2s var(--ease)}
#v-importar .ac:hover{border-color:var(--gold);background:rgba(201,169,110,.06)}
#v-importar .ac b{display:block;font-size:12.5px;font-weight:700;color:var(--gold);letter-spacing:.02em}
#v-importar .ac i{display:block;font-style:normal;font-size:11.5px;color:var(--faint);margin-top:2px;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#v-importar .ac.wa b{color:var(--green)}
#v-importar .ult{font-size:12px;color:var(--faint);padding:9px 11px;border-left:2px solid var(--line);line-height:1.5}
#v-importar .campos{gap:13px}
#v-importar .campos label{margin-bottom:6px}
#v-importar .linea{padding-top:18px}
#v-importar .linea h5{margin-bottom:13px}


#v-importar .kpi .n, #v-importar .col h4 span, #v-importar .cli-pie, #v-importar .pri, #v-importar .tag, #v-importar td, #v-importar th, #v-importar .der, #v-importar .num, #v-importar input, #v-importar select, #v-importar textarea, #v-importar .badge, #v-importar .etq, #v-importar .barra + *{
  font-variant-numeric: lining-nums tabular-nums;
}
#v-importar .kpi .n{
  font-family:"DM Sans",system-ui,sans-serif;
  font-weight:700;
  font-size:2rem;
  letter-spacing:-.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
#v-importar .col h4 span{
  font-family:"DM Sans",system-ui,sans-serif;
  font-weight:700;
  font-size:.86rem;
  letter-spacing:0;
}
#v-importar .cli-top b, #v-importar .caso h4{font-variant-numeric: lining-nums}


@keyframes cf-brillo{
  0%{box-shadow:0 0 0 0 rgba(201,169,110,.55)}
  70%{box-shadow:0 0 0 9px rgba(201,169,110,0)}
  100%{box-shadow:0 0 0 0 rgba(201,169,110,0)}
}
#v-importar .brilla{animation:cf-brillo .9s var(--ease)}
#v-importar .kpi{transition:border-color .3s var(--ease),transform .3s var(--ease)}
#v-importar .kpi:hover{border-color:var(--gold);transform:translateY(-2px)}
#v-importar .card{transition:border-color .25s var(--ease),transform .18s var(--ease),box-shadow .25s var(--ease)}
#v-importar .card:hover{transform:translateX(2px);box-shadow:-3px 0 12px -4px rgba(201,169,110,.35)}
#v-importar .col.drop{box-shadow:inset 0 0 0 1px var(--gold),0 0 22px -6px rgba(201,169,110,.4)}
#v-importar .btn-oro{transition:transform .2s var(--ease),box-shadow .25s var(--ease)}
#v-importar .btn-oro:hover{transform:translateY(-1px);box-shadow:0 6px 18px -6px rgba(201,169,110,.6)}
#v-importar .fila{transition:background .2s var(--ease)}
#v-importar nav button.on{position:relative}
#v-importar nav button.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:2px;
  background:var(--gold);box-shadow:0 0 8px rgba(201,169,110,.7)}
@media (prefers-reduced-motion: reduce){
  #v-importar .brilla{animation:none}
  #v-importar .kpi:hover, #v-importar .card:hover, #v-importar .btn-oro:hover{transform:none}
}

