/**
 * css/importar.css
 * =====================================================================
 * Sistema de Importación (Lote J) — estilos del wizard reutilizable
 * (importWizard.js) y de las previews de los importadores. Es un
 * componente compartido por varias vistas (Estudiantes, Corregir), por
 * eso vive en su propio archivo y no bajo css/views/. Usa los mismos
 * tokens que el resto de la app (--card, --line, --accent, colores de
 * franja) para que se sienta parte del producto en cualquier tema.
 * =====================================================================
 */

/* ---------------- overlay + modal centrado ---------------- */
.imp-overlay{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.imp-overlay.open{ opacity:1; pointer-events:auto; }
.imp-backdrop{ position:absolute; inset:0; background:rgba(6,8,14,.6); backdrop-filter:blur(2px); }
.imp-modal{
  position:relative; z-index:1;
  width:min(760px, 100%); max-height:90vh;
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
  transform:translateY(8px) scale(.99); transition:transform .2s ease;
  overflow:hidden;
}
.imp-overlay.open .imp-modal{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .imp-overlay, .imp-modal{ transition:none; }
}

.imp-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--line-soft); flex:none;
}
.imp-titulo{ font-family:var(--font-d); font-size:1.05rem; font-weight:600; }
.imp-x{
  width:34px; height:34px; border-radius:10px; color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.imp-x:hover{ background:var(--card-2); color:var(--text); }

.imp-body{ padding:20px; overflow-y:auto; overscroll-behavior:contain; }

/* ---------------- pantalla 1: dropzone ---------------- */
.imp-desc{ color:var(--muted); font-size:.9rem; line-height:1.55; margin-bottom:16px; }
.imp-dropzone{
  border:2px dashed var(--line); border-radius:var(--r-md);
  background:var(--card-2);
  padding:40px 24px; text-align:center; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.imp-dropzone:hover, .imp-dropzone:focus-visible{ border-color:var(--accent); background:var(--accent-bg); outline:none; }
.imp-dropzone.drag{ border-color:var(--accent); background:var(--accent-bg); transform:scale(1.01); }
.imp-drop-icon{ font-size:2rem; color:var(--accent); margin-bottom:8px; }
.imp-drop-titulo{ font-family:var(--font-d); font-weight:600; font-size:1rem; }
.imp-drop-sub{ color:var(--muted); font-size:.85rem; margin-top:4px; }
.imp-drop-link{ color:var(--accent); text-decoration:underline; }
.imp-drop-formatos{
  margin-top:14px; font-family:var(--font-m); font-size:.72rem;
  letter-spacing:.04em; color:var(--faint);
}
.imp-error{
  margin-top:14px; padding:10px 14px; border-radius:var(--r-sm);
  background:var(--rojo-bg); color:var(--rojo); font-size:.85rem;
}

/* ---------------- pantalla 2: progreso ---------------- */
.imp-progreso{ padding:36px 10px; text-align:center; }
.imp-spinner{
  width:34px; height:34px; margin:0 auto 18px;
  border:3px solid var(--line); border-top-color:var(--accent);
  border-radius:50%; animation:imp-spin .7s linear infinite;
}
@keyframes imp-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .imp-spinner{ animation-duration:2s; } }
.imp-prog-txt{ color:var(--muted); font-size:.9rem; margin-bottom:14px; }
.imp-prog-bar{ height:8px; border-radius:99px; background:var(--card-2); overflow:hidden; }
.imp-prog-fill{ height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:99px; transition:width .2s ease; }

/* ---------------- pantalla 3: preview ---------------- */
.imp-preview-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:10px; font-size:.85rem; color:var(--muted); flex-wrap:wrap;
}
.imp-bulk{ display:flex; gap:12px; }
.imp-link{ color:var(--accent); font-size:.8rem; text-decoration:underline; }
.imp-link:hover{ color:var(--accent-2); }

.imp-tabla-wrap{
  border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:auto; max-height:44vh;
}
.imp-tabla{ width:100%; border-collapse:collapse; font-size:.85rem; }
.imp-tabla thead th{
  position:sticky; top:0; z-index:1;
  background:var(--card-2); color:var(--muted);
  font-weight:600; font-size:.72rem; text-align:left;
  padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.imp-tabla td{ padding:7px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.imp-tabla tbody tr:last-child td{ border-bottom:none; }
.imp-fila.excluida{ opacity:.42; }
.imp-fila.estado-error{ background:var(--rojo-bg); }
.imp-fila.estado-no-encontrado{ background:var(--amarillo-bg); }

.imp-c-chk{ width:34px; text-align:center; }
.imp-c-num{ width:38px; color:var(--faint); font-family:var(--font-m); font-size:.78rem; }
.imp-c-est{ min-width:180px; }
.imp-c-item{ text-align:center; font-family:var(--font-m); font-size:.8rem; white-space:nowrap; }
.imp-c-calc{ text-align:center; font-family:var(--font-m); font-weight:500; white-space:nowrap; }
.imp-c-estado, .imp-c-estado *{ white-space:nowrap; }
.imp-aus{ color:var(--faint); }

.imp-nombre-input{
  width:100%; min-width:150px; background:transparent; border:1px solid transparent;
  border-radius:6px; padding:4px 6px; font-size:.85rem;
}
.imp-nombre-input:hover{ border-color:var(--line); }
.imp-nombre-input:focus{ border-color:var(--accent); background:var(--card-2); outline:none; }
.imp-msg{ font-size:.72rem; color:var(--faint); margin-top:2px; padding-left:6px; }

.imp-est-nom{ font-weight:500; }
.imp-aus-tag{ font-size:.68rem; color:var(--naranja); font-weight:600; }

/* selects de resolución (estudiante sin match) */
.imp-resolver{ display:flex; gap:6px; margin-top:5px; flex-wrap:wrap; }
.imp-resol-modo, .imp-resol-asociar{
  height:30px; border:1px solid var(--line); border-radius:8px;
  background:var(--card-2); padding:0 8px; font-size:.76rem; max-width:100%;
}
.imp-resol-asociar{ max-width:200px; }

/* puntaje máximo editable por columna */
.imp-item-label{ display:block; }
.imp-peso-input{
  width:52px; margin-top:3px; height:26px; text-align:center;
  border:1px solid var(--line); border-radius:6px; background:var(--card);
  font-family:var(--font-m); font-size:.76rem;
}
.imp-peso-input:focus{ border-color:var(--accent); outline:none; }
.imp-peso-fijo{ display:block; margin-top:3px; color:var(--faint); font-size:.72rem; font-weight:400; }

.imp-check-ok{ color:var(--verde); }
.imp-check-dif{ color:var(--naranja); cursor:help; }
.imp-nota-pie{ font-size:.72rem; color:var(--faint); margin-top:8px; line-height:1.5; }

/* controles globales (nombre, fecha, radios de destino/reescala) */
.imp-controles{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.imp-ctrl-row{ display:flex; gap:12px; flex-wrap:wrap; }
.imp-ctrl{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:4px; }
.imp-ctrl-fecha{ flex:none; width:150px; }
.imp-ctrl > span{ font-size:.7rem; color:var(--muted); font-weight:600; }
.imp-ctrl input{
  height:40px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--card-2); padding:0 12px; font-size:.9rem;
}
.imp-ctrl input:focus{ border-color:var(--accent); outline:none; }
.imp-ctrl-destino, .imp-ctrl-reescala{
  flex-direction:column; gap:6px; padding:12px 14px;
  background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-sm);
}
.imp-ctrl-titulo{ font-size:.82rem; color:var(--text); }
.imp-radios{ display:flex; flex-direction:column; gap:6px; }
.imp-radios label{ display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--muted); cursor:pointer; }
.imp-radios input{ accent-color:var(--accent); }

.imp-vacio{
  padding:30px; text-align:center; color:var(--muted); font-size:.9rem;
  background:var(--card-2); border-radius:var(--r-md);
}

/* ---------------- badges de estado por fila ---------------- */
.imp-badge{
  display:inline-block; padding:2px 8px; border-radius:99px;
  font-size:.7rem; font-weight:600; white-space:nowrap;
}
.imp-badge.ok{ background:var(--verde-bg); color:var(--verde); }
.imp-badge.warn{ background:var(--amarillo-bg); color:var(--amarillo); }
.imp-badge.dup{ background:var(--naranja-bg); color:var(--naranja); }
.imp-badge.err{ background:var(--rojo-bg); color:var(--rojo); }
.imp-badge.muted{ background:var(--card-2); color:var(--faint); }

/* ---------------- footer: resumen + acciones ---------------- */
.imp-footer{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft); flex-wrap:wrap;
}
.imp-resumen{ display:flex; gap:8px; flex-wrap:wrap; }
.imp-chip{
  display:inline-block; padding:4px 10px; border-radius:99px;
  font-size:.76rem; font-weight:600;
}
.imp-chip.ok{ background:var(--verde-bg); color:var(--verde); }
.imp-chip.warn{ background:var(--amarillo-bg); color:var(--amarillo); }
.imp-chip.dup{ background:var(--naranja-bg); color:var(--naranja); }
.imp-chip.err{ background:var(--rojo-bg); color:var(--rojo); }
.imp-chip.muted{ background:var(--card-2); color:var(--faint); }
.imp-acciones{ display:flex; gap:10px; margin-left:auto; }
.imp-acciones .btn-primario{ width:auto; padding:0 20px; }
.imp-acciones .btn-secundario{ width:auto; padding:0 16px; }

/* ---------------- botón "Importar" en modal de alta y toolbar ---------------- */
.imp-abrir-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:46px; margin-top:8px;
  background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--text); font-weight:600; font-size:.9rem;
  transition:border-color .15s ease, background .15s ease;
}
.imp-abrir-btn:hover{ border-color:var(--accent); background:var(--accent-bg); }
.imp-sep{
  display:flex; align-items:center; gap:10px; margin:14px 0 4px;
  color:var(--faint); font-size:.74rem;
}
.imp-sep::before, .imp-sep::after{ content:''; flex:1; height:1px; background:var(--line-soft); }

@media (max-width:600px){
  .imp-overlay{ padding:0; align-items:flex-end; }
  .imp-modal{ max-height:94vh; border-radius:var(--r-lg) var(--r-lg) 0 0; width:100%; }
  .imp-footer{ flex-direction:column; align-items:stretch; }
  .imp-acciones{ margin-left:0; }
  .imp-acciones .btn-primario, .imp-acciones .btn-secundario{ flex:1; }
}