/* ════════════════════════════════════════════════════════════════════════════
   TheWaveRadar — Import «Sube tu Excel» [informe UX 2026-08 §C]
   Overlay a pantalla completa en móvil. Sistema visual de tablero.css:
   variables --tw-*, dark-first, targets táctiles ≥44px, prefijo .tw-imp-.
   ════════════════════════════════════════════════════════════════════════════ */

.tw-imp-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.tw-imp-modal {
  background: var(--tw-bg-elev, #12151a);
  border: 1px solid var(--tw-border-str, rgba(255, 255, 255, 0.14));
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--tw-shadow-md, 0 4px 14px rgba(0, 0, 0, 0.35));
  animation: tw-imp-slide-up 0.18s ease-out;
}

@keyframes tw-imp-slide-up {
  from { transform: translateY(24px); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

@media (min-width: 720px) {
  .tw-imp-overlay { align-items: center; }
  .tw-imp-modal { border-radius: var(--tw-r-xl); border-bottom: 1px solid var(--tw-border-str, rgba(255, 255, 255, 0.14)); }
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.tw-imp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.tw-imp-title {
  font-size: var(--tw-fs-md);
  font-weight: 800;
  color: var(--tw-text-head, #f2f4f7);
  margin: 0;
}
.tw-imp-close {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--tw-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--tw-r-md);
  color: var(--tw-text-mute, #9aa3af);
  font-size: var(--tw-fs-base);
  cursor: pointer;
}

.tw-imp-body { display: block; }

/* ── Textos comunes ───────────────────────────────────────────────────────── */
.tw-imp-sub {
  font-size: var(--tw-fs-sm);
  color: var(--tw-text-mute, #9aa3af);
  line-height: 1.55;
  margin: 0 0 16px;
}
.tw-imp-note {
  font-size: var(--tw-fs-xs);
  color: var(--tw-text-mute, #9aa3af);
  line-height: 1.5;
  margin: 10px 0 0;
}
.tw-imp-summary {
  font-size: var(--tw-fs-sm);
  font-weight: 700;
  color: var(--tw-text-head, #f2f4f7);
  margin: 4px 0 12px;
}
.tw-imp-mifid {
  font-size: var(--tw-fs-3xs);
  color: var(--tw-text-soft, #6b7280);
  text-align: center;
  line-height: 1.5;
  margin: 18px 0 0;
}
.tw-imp-working {
  font-size: var(--tw-fs-sm);
  color: var(--tw-text, #e6e8ec);
  text-align: center;
  padding: 32px 0;
}

/* ── Botones (targets ≥44px) ──────────────────────────────────────────────── */
.tw-imp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin: 10px 0 0;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--tw-border-str, rgba(255, 255, 255, 0.14));
  border-radius: var(--tw-r-md);
  color: var(--tw-text, #e6e8ec);
  font-family: inherit;
  font-size: var(--tw-fs-sm);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.tw-imp-btn:disabled { opacity: 0.5; cursor: default; }
.tw-imp-btn-primary {
  background: var(--tw-accent, #22c55e);
  border-color: var(--tw-accent, #22c55e);
  color: #08120b;
}
.tw-imp-addrow { border-style: dashed; }

/* ── Paso inicial: selector de fichero + plantilla ────────────────────────── */
.tw-imp-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 16px;
  border: 1.5px dashed var(--tw-border-str, rgba(255, 255, 255, 0.14));
  border-radius: var(--tw-r-lg);
  cursor: pointer;
  text-align: center;
}
.tw-imp-file-icon { font-size: var(--tw-fs-2xl); }
.tw-imp-file-txt {
  font-size: var(--tw-fs-base);
  font-weight: 700;
  color: var(--tw-text-head, #f2f4f7);
}
.tw-imp-file input[type="file"] { display: none; }
.tw-imp-tpl {
  display: inline-block;
  margin-top: 14px;
  font-size: var(--tw-fs-xs);
  color: var(--tw-accent, #22c55e);
  text-decoration: none;
}

/* ── Aviso de privacidad ──────────────────────────────────────────────────── */
.tw-imp-privacy {
  background: var(--tw-bg-card, #151a21);
  border: 1px solid var(--tw-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--tw-r-md);
  padding: 16px;
}
.tw-imp-privacy-title {
  font-size: var(--tw-fs-base);
  font-weight: 700;
  color: var(--tw-text-head, #f2f4f7);
  margin: 0 0 8px;
}
.tw-imp-privacy-txt {
  font-size: var(--tw-fs-sm);
  color: var(--tw-text-mute, #9aa3af);
  line-height: 1.55;
  margin: 0 0 4px;
}

/* ── Banner efímero (IA caída, truncado…) ─────────────────────────────────── */
.tw-imp-banner {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--tw-r-md);
  padding: 10px 12px;
  font-size: var(--tw-fs-xs);
  color: var(--tw-text, #e6e8ec);
  line-height: 1.5;
  margin: 0 0 12px;
}

/* ── Preview editable: filas ──────────────────────────────────────────────── */
.tw-imp-rows { display: flex; flex-direction: column; gap: 10px; }
.tw-imp-row {
  background: var(--tw-bg-card, #151a21);
  border: 1px solid var(--tw-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--tw-r-md);
  padding: 12px;
}
.tw-imp-row-warn { border-color: rgba(245, 158, 11, 0.55); }
.tw-imp-row-bad  { border-color: rgba(239, 68, 68, 0.6); }

.tw-imp-inc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: var(--tw-fs-xs);
  font-weight: 600;
  color: var(--tw-text, #e6e8ec);
  cursor: pointer;
  margin-bottom: 8px;
}
.tw-imp-inc input { width: 18px; height: 18px; accent-color: var(--tw-accent, #22c55e); }

.tw-imp-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tw-imp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--tw-fs-3xs);
  font-weight: 600;
  color: var(--tw-text-mute, #9aa3af);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tw-imp-field-name { grid-column: 1 / -1; }
.tw-imp-field input {
  min-height: 44px;
  padding: 9px 11px;
  background: var(--tw-bg, #0d1014);
  border: 1px solid var(--tw-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--tw-r-md);
  color: var(--tw-text, #e6e8ec);
  font-family: inherit;
  font-size: var(--tw-fs-base);      /* ≥16px evita el zoom de iOS; 15 con text-size-adjust */
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}
.tw-imp-field input:focus {
  outline: none;
  border-color: var(--tw-accent, #22c55e);
}
.tw-imp-field-ticker input { text-transform: uppercase; }

.tw-imp-row-note {
  font-size: var(--tw-fs-2xs);
  color: var(--tw-text-mute, #9aa3af);
  line-height: 1.45;
  margin: 8px 0 0;
}
.tw-imp-row-note-warn { color: #f59e0b; }
.tw-imp-row-note-bad  { color: #ef4444; }

/* ── Filas crudas (caso 0 posiciones) ─────────────────────────────────────── */
.tw-imp-raw {
  background: var(--tw-bg-card, #151a21);
  border: 1px solid var(--tw-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--tw-r-md);
  padding: 12px;
  margin-bottom: 14px;
}
.tw-imp-raw-title {
  font-size: var(--tw-fs-xs);
  font-weight: 700;
  color: var(--tw-text-head, #f2f4f7);
  margin: 0 0 8px;
}
.tw-imp-raw-line {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--tw-fs-2xs);
  color: var(--tw-text-mute, #9aa3af);
  margin: 2px 0;
  overflow-x: auto;
  white-space: nowrap;
}

/* ── Toggles de destino ───────────────────────────────────────────────────── */
.tw-imp-toggles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 18px 0 4px;
  padding: 12px;
  background: var(--tw-bg-card, #151a21);
  border-radius: var(--tw-r-md);
}
.tw-imp-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: var(--tw-fs-sm);
  color: var(--tw-text, #e6e8ec);
  cursor: pointer;
}
.tw-imp-toggle input { width: 18px; height: 18px; accent-color: var(--tw-accent, #22c55e); }

.tw-imp-confirm { margin-top: 16px; }

/* ── Pantalla final / error ───────────────────────────────────────────────── */
.tw-imp-done { text-align: center; padding: 12px 0; }
.tw-imp-done-title {
  font-size: var(--tw-fs-base);
  font-weight: 800;
  color: var(--tw-text-head, #f2f4f7);
  margin: 0 0 16px;
}
.tw-imp-error {
  font-size: var(--tw-fs-sm);
  color: #ef4444;
  line-height: 1.5;
  margin: 8px 0 16px;
}