/* Krondi · imports.css — «Traer el historial» (SPEC §106.5, pieza G): el asistente de WhatsApp (2A), importar tareas
   de Trello o Asana (5A), la pestaña «Traer tu historial» de «Aplicaciones» y la entrada de «Nueva sala». Colores
   suaves y lo secundario en gris; con los tokens de base.css (vale en claro y en oscuro). */

/* --------------------------------------------------------------------------
   La ventana: en el móvil, un paso por pantalla (a toda altura)
   -------------------------------------------------------------------------- */
.imp { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.imp-content { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; transition: opacity var(--dur) var(--ease); }
.imp-content.is-busy { opacity: 0.55; pointer-events: none; }
.imp-lead { margin: 0; font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; }
.imp-hint { margin: 0; font-size: 0.8rem; color: var(--text-subtle); line-height: 1.45; }
.imp-text { margin: 0; font-size: 0.875rem; color: var(--text); line-height: 1.5; }
.imp-sub { margin: 0.2rem 0 -0.4rem; font-size: 0.9rem; font-weight: 650; }
.imp-alert { margin: 0; }
.imp-resume p { margin: 0 0 0.3rem; }
.imp-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.imp-state { display: flex; flex-direction: column; gap: 0.5rem; }

@media (max-width: 640px) {
  .imp-modal { height: calc(100dvh - 1.5rem); }
  .imp-modal .modal-body { flex: 1; }
}

/* Los pasos: «1 Subir — 2 ¿Quién es quién? — 3 Traer» */
.imp-steps { display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0; list-style: none; font-size: 0.78rem; color: var(--text-subtle); }
.imp-step { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.imp-step-n {
  display: inline-grid; place-items: center; flex: none; width: 1.3rem; height: 1.3rem; border: 1px solid var(--border-strong);
  border-radius: 99px; font-size: 0.7rem; font-weight: 650;
}
.imp-step.is-on { color: var(--text); font-weight: 600; }
.imp-step.is-on .imp-step-n { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast, #fff); }
.imp-step.is-done .imp-step-n { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.imp-step-line { flex: 1; min-width: 0.75rem; height: 1px; background: var(--border); }
@media (max-width: 640px) {
  .imp-step:not(.is-on) .imp-step-label { display: none; }
}

/* Cómo se exporta */
.imp-howto-box { display: flex; flex-direction: column; gap: 0.5rem; }
.imp-howto-tabs { align-self: flex-start; }
.imp-howto { margin: 0; padding-left: 1.2rem; font-size: 0.84rem; color: var(--text-muted); line-height: 1.6; }
.imp-howto b { color: var(--text); font-weight: 600; }
.imp-howto-note { margin: 0; font-size: 0.8rem; color: var(--text-muted); }

/* La zona para elegir o soltar el archivo */
.imp-drop {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 100%; padding: 1.1rem 1rem;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2);
  color: var(--text-muted); font: inherit; font-size: 0.86rem; text-align: center; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.imp-drop:hover, .imp-drop.is-file-dragover { border-color: var(--accent); background: var(--accent-soft); }
.imp-drop:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.imp-drop-icon { color: var(--accent-text); }
.imp-drop-text { font-weight: 600; color: var(--accent-text); }
.imp-drop-hint { font-size: 0.76rem; color: var(--text-subtle); }

/* El avance (subir, revisar, traer) */
.imp-card { padding: 0.75rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); font-size: 0.84rem; }
.imp-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; }
.imp-card-title { font-weight: 650; color: var(--text); }
.imp-card-detail { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.imp-card-note { margin: 0.45rem 0 0; font-size: 0.78rem; color: var(--text-subtle); line-height: 1.45; }
.imp-card.is-error { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.imp-card.is-error .imp-card-title, .imp-card.is-error .imp-card-note { color: var(--danger-text); }
.imp-card.is-done { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.imp-card.is-done .imp-card-title { color: var(--accent-text); }
.imp-bar { position: relative; height: 0.4rem; margin-top: 0.5rem; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.imp-bar > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: var(--accent); transition: width 0.4s var(--ease); }
.imp-card.is-error .imp-bar > i { background: color-mix(in srgb, var(--danger) 55%, var(--surface)); }
/* Sin cifras (revisando, en cola): una franja que va y viene */
.imp-bar.is-moving > i { width: 35% !important; animation: imp-bar-move 1.4s ease-in-out infinite; }
@keyframes imp-bar-move { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .imp-bar.is-moving > i { animation: none; left: 0; width: 100% !important; opacity: 0.4; } }

/* El archivo */
.imp-file {
  display: flex; align-items: center; gap: 0.7rem; min-width: 0; padding: 0.6rem 0.7rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.imp-file-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 0.86rem; }
.imp-file-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-file-text span { font-size: 0.76rem; color: var(--text-subtle); }
.imp-file-ok { flex: none; color: var(--accent-text); display: inline-flex; }
.imp-file-action { flex: none; color: var(--text-muted); }
.imp-out { margin: 0; padding-left: 1.1rem; font-size: 0.78rem; color: var(--text-subtle); line-height: 1.5; }

/* ¿Quién es quién? */
.imp-who-list { display: flex; flex-direction: column; }
.imp-who { padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.imp-who:last-child { border-bottom: 0; }
.imp-who-main { display: flex; align-items: center; gap: 0.75rem; }
.imp-who-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 0.86rem; }
.imp-who-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-who-text span { font-size: 0.76rem; color: var(--text-subtle); }
.imp-who .imp-pick { flex: 0 0 auto; width: min(13rem, 52%); }
.imp-who-extra { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.45rem; }
.imp-who-extra-label { flex: 1; min-width: 0; font-size: 0.76rem; color: var(--text-subtle); }
.imp-who-name.input { flex: 0 0 auto; width: min(13rem, 52%); height: 2.1rem; font-size: 0.84rem; }
.imp-note { padding: 0.6rem 0.75rem; border-radius: var(--radius); background: var(--surface-2); font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
.imp-note p { margin: 0; }
.imp-note p + p { margin-top: 0.35rem; }
.imp-note b { color: var(--text); font-weight: 600; }
.imp-note-soft { color: var(--text-subtle); }
.imp-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-muted); }
.imp-zone .imp-pick { width: auto; min-width: 9rem; max-width: 100%; min-height: 2rem; }
.imp-dates .segmented { display: flex; }
.imp-seg { align-self: flex-start; }
.imp-noacc {
  --imp-face: 1.5rem;
  display: inline-grid; place-items: center; flex: none; width: var(--imp-face); height: var(--imp-face); border-radius: 99px;
  background: var(--surface-3, var(--surface-2)); color: var(--text-muted); font-size: calc(var(--imp-face) * 0.4); font-weight: 650;
}

/* Traer: la casilla */
.imp-form { display: flex; flex-direction: column; gap: 0.85rem; }
.imp-form .field { margin: 0; }
.imp-check { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.86rem; color: var(--text); line-height: 1.45; cursor: pointer; }
.imp-check .checkbox { flex: none; margin-top: 0.1rem; }

/* El selector propio (§90): «Luis Gómez ▾» */
.imp-pick {
  display: flex; align-items: center; gap: 0.45rem; width: 100%; min-height: 2.25rem; padding: 0.3rem 0.55rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
  font: inherit; font-size: 0.86rem; text-align: left; cursor: pointer;
}
.imp-pick:hover { border-color: var(--border-strong); }
.imp-pick[aria-expanded="true"], .imp-pick:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.imp-pick-face { display: grid; flex: none; place-items: center; }
.imp-pick-face[hidden] { display: none; }
.imp-pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-pick.is-empty .imp-pick-name { color: var(--text-muted); }
.imp-pick-chev { flex: none; color: var(--text-subtle); }
.popover.imp-pick-pop { width: min(18rem, calc(100vw - 1rem)); }
.imp-pick-head { margin: 0.45rem 0.5rem 0.2rem; font-size: 0.72rem; font-weight: 650; color: var(--text-subtle); }
.imp-pick-opt-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.imp-pick-opt-sub { font-size: 0.74rem; font-weight: 400; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-opt.is-on .imp-pick-opt-sub { color: inherit; opacity: 0.8; }

/* Importar tareas: la vista previa */
.imp-sums { display: flex; flex-direction: column; }
.imp-sum { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px dashed var(--border); font-size: 0.84rem; }
.imp-sum > span { color: var(--text-muted); text-align: right; min-width: 0; }
.imp-sum b { font-weight: 650; flex: none; }
.imp-sum-label { flex: 1; text-align: left !important; }
.imp-sum-pick .imp-pick { width: min(13rem, 55%); }

/* --------------------------------------------------------------------------
   «Aplicaciones» › «Traer tu historial» y «Nueva sala» › «Desde un grupo de WhatsApp…»
   -------------------------------------------------------------------------- */
.imp-history { margin-top: 0.85rem; }
.app-card.is-static { cursor: default; }
.app-card.is-static:hover { border-color: var(--border); box-shadow: none; }
.app-card.is-static a { color: var(--link, var(--accent-text)); }
.imp-history-hint { margin-top: 0.9rem; }
.apps-pane > .imp-lead { margin-bottom: 0; }

.room-from-wa {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; margin-bottom: 1rem; padding: 0.6rem 0.7rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur) var(--ease);
}
.room-from-wa:hover { border-color: var(--border-strong); }
.room-from-wa:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.room-from-wa-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 0.86rem; }
.room-from-wa-text b { font-weight: 600; }
.room-from-wa-text span { font-size: 0.76rem; color: var(--text-subtle); }
.room-from-wa-go { flex: none; color: var(--text-subtle); }

@media (pointer: coarse) {
  .imp-pick { min-height: 2.75rem; }
  .imp-who-name.input { height: 2.75rem; }
}
@media (max-width: 420px) {
  .imp-who .imp-pick, .imp-who-name.input { width: 55%; }
}