/* ==========================================================================
   CHASQUI — importar.css  ·  vista /app/g/:slug/importar
   Dueño: módulo «importar» (§11). Cargar la gira desde un PDF o una foto.
   --------------------------------------------------------------------------
   1  Pasos 1–4
   2  Subir: la zona para soltar el archivo
   3  Leyendo: los hitos Subido → Leyendo → Lista
   4  Revisar: jornadas propuestas, marcas «leído del archivo», conflictos

   Reutiliza .tarjeta, .nota, .cifras, .campo, .pastilla, .acciones y
   .barra-acciones de app.css y base.css. Ningún color propio: solo tokens.
   ========================================================================== */

/* ── 1 · Pasos ──────────────────────────────────────────────────────────── */
.importar__pasos{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .5rem;
  margin:0;
  padding:0;
  list-style:none;
}
.importar__paso{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.3rem .75rem .3rem .35rem;
  border:1px solid var(--brd);
  border-radius:99px;
  background:var(--sup-1);
  color:var(--tx-3);
  font-size:.86rem;
  font-weight:600;
}
.importar__paso-numero{
  display:inline-grid;
  place-items:center;
  width:1.55rem;
  height:1.55rem;
  border-radius:50%;
  background:var(--sup-3);
  font-family:var(--f-mono);
  font-size:.74rem;
}
.importar__paso.is-hecho{color:var(--ok);border-color:var(--ok-borde)}
.importar__paso.is-hecho .importar__paso-numero{background:var(--ok-tinte)}
.importar__paso.is-actual{color:var(--tx);border-color:var(--sodio-borde);background:var(--sup-2);box-shadow:var(--sombra-1)}
.importar__paso.is-actual .importar__paso-numero{background:var(--sodio);color:var(--sobre-acento)}
.importar__paso.is-error{color:var(--alto);border-color:var(--alto-borde)}
.importar__paso.is-error .importar__paso-numero{background:var(--alto-tinte);color:var(--alto)}

/* ── 2 · Subir ──────────────────────────────────────────────────────────── */
.importar__subir{gap:1rem}
.importar__soltar{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:12rem;
  padding:1.75rem 1.25rem;
  border:2px dashed var(--brd-3);
  border-radius:var(--radio);
  background:repeating-linear-gradient(115deg,var(--fibra) 0 2px,transparent 2px 9px),var(--sup-1);
  color:var(--tx-2);
  text-align:center;
  cursor:pointer;
  transition:border-color var(--t-rapido) var(--ease),background-color var(--t-rapido) var(--ease),transform var(--t-rapido) var(--ease);
}
.importar__soltar:hover{border-color:var(--sodio-texto)}
.importar__soltar.is-encima{
  border-color:var(--sodio);
  background:var(--sodio-tinte);
  transform:scale(1.01);
}
.importar__soltar.is-apagada{cursor:not-allowed;opacity:.6}
/* El input está oculto: el foco del teclado se dibuja en su etiqueta. */
.importar__entrada:focus-visible + .importar__soltar{outline:2px solid var(--sodio);outline-offset:3px}
.importar__soltar-icono{
  display:inline-grid;
  place-items:center;
  width:3.4rem;
  height:3.4rem;
  border-radius:50%;
  background:var(--sup-2);
  color:var(--sodio-texto);
  box-shadow:var(--sombra-1);
}
.importar__soltar-titulo{
  font-family:var(--f-display);
  font-weight:700;
  font-stretch:106%;
  font-size:1.12rem;
  color:var(--tx);
}
.importar__soltar-texto{font-size:.88rem;color:var(--tx-3)}
.importar__otras{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.importar__aviso{margin:0}

.importar__ayuda{display:flex;flex-direction:column;gap:.6rem}
.importar__lista-ayuda{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin:0;
  padding-left:1.1rem;
  color:var(--tx-2);
  font-size:.93rem;
  line-height:1.55;
}

/* ── 3 · Leyendo ────────────────────────────────────────────────────────── */
.importar__progreso{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  margin:0;
  padding:0;
  list-style:none;
}
.importar__hito{display:flex;align-items:center;gap:.7rem;color:var(--tx-3);font-weight:600}
.importar__hito-marca{
  display:inline-grid;
  place-items:center;
  flex:none;
  width:1.4rem;
  height:1.4rem;
  border:2px solid var(--brd-2);
  border-radius:50%;
}
.importar__hito.is-hecho{color:var(--ok)}
.importar__hito.is-hecho .importar__hito-marca{border-color:var(--ok);background:var(--ok-tinte)}
.importar__hito.is-actual{color:var(--tx)}
/* El que está en curso gira: una marca de progreso sin porcentaje inventado. */
.importar__hito.is-actual .importar__hito-marca{
  border-color:var(--sodio-brillo);
  border-top-color:var(--sodio);
  animation:importarGirar .9s linear infinite;
}
@keyframes importarGirar{to{transform:rotate(360deg)}}

/* ── 4 · Revisar ────────────────────────────────────────────────────────── */
.importar__origen{margin:0}
.importar__lista-observaciones{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  margin:0;
  padding-left:1.1rem;
  color:var(--tx-2);
  font-size:.93rem;
  line-height:1.55;
  overflow-wrap:anywhere;
}
.importar__revision{display:flex;flex-direction:column;gap:1rem}
.importar__cifras .cifra__valor{font-size:1.35rem}
.importar__jornadas{display:flex;flex-direction:column;gap:.85rem}

/* Una jornada propuesta: una tarjeta que se edita en su lugar. */
.importar__jornada{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  min-width:0;
  padding:1rem 1.1rem 1.1rem;
  border:1px solid var(--brd);
  border-radius:var(--radio);
  background:var(--sup-2);
  box-shadow:var(--sombra-1);
  transition:opacity var(--t-rapido) var(--ease);
}
.importar__jornada.is-dudosa{box-shadow:inset 3px 0 0 var(--alerta),var(--sombra-1)}
.importar__jornada.is-conflicto{border-color:var(--sodio-borde)}
.importar__jornada.is-excluida{opacity:.55;background:var(--sup-1)}
.importar__jornada.is-excluida .importar__principales,
.importar__jornada.is-excluida .importar__detalle,
.importar__jornada.is-excluida .importar__conflicto{display:none}

.importar__jornada-cab{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem}
.importar__incluir{display:inline-flex;align-items:center;gap:.45rem;min-height:var(--tactil)}
.importar__incluir-texto{font-size:.86rem;font-weight:600;color:var(--tx-2);cursor:pointer}
.importar__jornada-textos{flex:1 1 12rem;min-width:0}
.importar__fecha{
  font-family:var(--f-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--sodio-texto);
}
.importar__titulo{
  font-family:var(--f-display);
  font-weight:700;
  font-stretch:106%;
  font-size:1.08rem;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.importar__pastillas{display:flex;flex-wrap:wrap;gap:.35rem}

.importar__principales,
.importar__grupo-campos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr));
  gap:.75rem;
}
.importar__campo--ancho{grid-column:1 / -1}
.importar__campo .campo__control{min-height:40px;padding:.5rem .7rem}
.importar__campo textarea.campo__control{min-height:3.5rem}
@media (pointer:coarse){.importar__campo .campo__control{min-height:var(--tactil)}}

/* La marca honesta: esto lo leyó una máquina, revísalo. */
.importar__marca{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--sodio-texto);
}
.importar__marca::before{
  content:"";
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background:var(--sodio);
}
.importar__marca.is-editado{color:var(--ok)}
.importar__marca.is-editado::before{background:var(--ok)}

.importar__detalle{border-top:1px dashed var(--brd-2);padding-top:.7rem}
.importar__resumen{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.4rem .8rem;
  min-height:var(--tactil);
  cursor:pointer;
  font-weight:600;
  color:var(--tx-2);
  list-style:none;
}
.importar__resumen::-webkit-details-marker{display:none}
.importar__resumen::before{
  content:"";
  flex:none;
  width:.5rem;
  height:.5rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  transition:transform var(--t-rapido) var(--ease);
}
.importar__detalle[open] > .importar__resumen::before{transform:rotate(45deg)}
.importar__resumen > span:first-child{flex:1 1 auto}
.importar__resumen-cuenta{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;color:var(--tx-3)}
.importar__grupos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
  gap:1rem 1.25rem;
  margin-top:.6rem;
}
.importar__grupo{margin:0;padding:0;border:0;min-width:0}
.importar__grupo-titulo{
  margin-bottom:.5rem;
  padding:0;
  font-family:var(--f-display);
  font-weight:700;
  font-size:.95rem;
  color:var(--tx);
}

/* El día ya está en la gira: reemplazar o saltar. */
.importar__conflicto{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin:0;
  padding:.75rem .9rem;
  border:1px solid var(--sodio-borde);
  border-radius:var(--radio-sm);
  background:var(--sodio-tinte);
  min-width:0;
}
.importar__conflicto-texto{font-weight:600;color:var(--sodio-texto)}
.importar__error-fila{margin:0}
.importar__error-general{flex-direction:column;align-items:flex-start}
.importar__error-general ul{margin:0;padding-left:1.1rem}

@media (prefers-reduced-motion:reduce){
  .importar__hito.is-actual .importar__hito-marca{animation:none;border-color:var(--sodio)}
  .importar__soltar.is-encima{transform:none}
}

@media print{
  .importar__pasos,.importar__subir,.importar__revision .barra-acciones{display:none}
}