/* ============================================================================
   THOR — MODALES DEL KANBAN · Apple Redesign
   100% CSS. Cargado el ÚLTIMO en panel.html (gana cascada). Reversible.
   Cubre: Modal "Invitación" (.modal-overlay-invitacion) y Modal "Preguntas
   en la plataforma" (.modal-pregunta-estado-overlay).
   Reutiliza tokens --ka-* (kanban-apple-redesign.css). No toca HTML ni JS.
   ============================================================================ */

:root {
  --mk-bg: #f5f5f7;
  --mk-card: #ffffff;
  --mk-text: #1d1d1f;
  --mk-text-2: #6e6e73;
  --mk-text-3: #a1a1a6;
  --mk-border: rgba(0,0,0,.08);
  --mk-border-2: rgba(0,0,0,.14);
  --mk-accent: #e88732;
  --mk-blue: #0a84ff;
  --mk-green: #34c759;
  --mk-red: #ff3b30;
  --mk-violet: #8b5cf6;
  --mk-r-modal: 20px;
  --mk-r-el: 12px;
  --mk-r-pill: 980px;
  --mk-sh-modal: 0 0 0 .5px rgba(0,0,0,.04), 0 12px 48px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08);
  --mk-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}
[data-theme="dark"] {
  --mk-bg: #161618; --mk-card: #1c1c1e; --mk-text: #f5f5f7; --mk-text-2: #aeaeb2; --mk-text-3: #8e8e93;
  --mk-border: rgba(255,255,255,.10); --mk-border-2: rgba(255,255,255,.18);
  --mk-sh-modal: 0 0 0 .5px rgba(255,255,255,.06), 0 16px 56px rgba(0,0,0,.6);
}

/* ════════════════════════════════════════════════════════════════════════
   MODAL 1 — INVITACIÓN
   ════════════════════════════════════════════════════════════════════════ */
.modal-overlay-invitacion {
  background: rgba(0,0,0,.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  font-family: var(--mk-font) !important;
}
.modal-container-invitacion {
  background: var(--mk-card) !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: var(--mk-r-modal) !important;
  box-shadow: var(--mk-sh-modal) !important;
  max-width: 720px !important;
}
.modal-header-invitacion {
  padding: 22px 26px !important;
  border-bottom: 1px solid var(--mk-border) !important;
}
.modal-title-invitacion {
  font-family: var(--mk-font) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: var(--mk-text) !important;
}
.modal-close-btn {
  color: var(--mk-text-2) !important;
  border-radius: 50% !important;
  width: 32px !important; height: 32px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: color-mix(in srgb, var(--mk-text-2) 10%, transparent) !important;
}
.modal-close-btn:hover { background: color-mix(in srgb, var(--mk-text-2) 18%, transparent) !important; color: var(--mk-text) !important; }

.modal-body-invitacion { padding: 22px 26px !important; }

/* Caja de exportación (tenía gradiente gris + inline) → tarjeta limpia */
.modal-body-invitacion > div[style*="linear-gradient"] {
  background: var(--mk-bg) !important;
  background-image: none !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: var(--mk-r-el) !important;
}
/* Separador "O PROCESAR NUEVA INVITACIÓN" */
.modal-body-invitacion div[style*="dashed"] { border-top-color: var(--mk-border-2) !important; }
.modal-body-invitacion div[style*="translateX(-50%)"] {
  background: var(--mk-card) !important; color: var(--mk-text-3) !important;
  font-family: var(--mk-font) !important; font-weight: 700 !important; letter-spacing: .04em !important;
}

/* Info box azul */
.modal-info-box {
  background: rgba(10,132,255,.08) !important;
  border: 1px solid rgba(10,132,255,.18) !important;
  border-radius: var(--mk-r-el) !important;
}
.modal-info-box p { color: var(--mk-blue) !important; }

/* Zona de subida (drag&drop) */
.upload-area {
  border: 1.5px dashed var(--mk-border-2) !important;
  border-radius: var(--mk-r-el) !important;
  background: var(--mk-bg) !important;
  transition: border-color .2s, background .2s !important;
}
.upload-area:hover { border-color: var(--mk-accent) !important; background: color-mix(in srgb, var(--mk-accent) 6%, var(--mk-bg)) !important; }
.upload-area.drag-over { border-color: var(--mk-accent) !important; background: color-mix(in srgb, var(--mk-accent) 12%, var(--mk-bg)) !important; }

/* Botón seleccionar archivo + export → pills Apple (neutraliza naranja global) */
.btn-select-file,
.btn-export-pdf,
.btn-export-excel {
  background-image: none !important;
  border: 1px solid var(--mk-border-2) !important;
  border-radius: var(--mk-r-pill) !important;
  background: var(--mk-card) !important;
  color: var(--mk-text) !important;
  font-family: var(--mk-font) !important; font-weight: 600 !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s !important;
}
.btn-select-file:hover,
.btn-export-pdf:hover,
.btn-export-excel:hover { background: color-mix(in srgb, var(--mk-text-2) 8%, var(--mk-card)) !important; }
#btnVerInvitaciones { background: var(--mk-blue) !important; background-image: none !important; color: #fff !important; border-color: var(--mk-blue) !important; }
#btnVerInvitaciones:hover { filter: brightness(.94) !important; }

/* Preview de archivo */
.file-preview {
  background: var(--mk-bg) !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: var(--mk-r-el) !important;
}
.file-name { color: var(--mk-text) !important; font-weight: 600 !important; }
.file-size { color: var(--mk-text-3) !important; }
.btn-remove-file { color: var(--mk-red) !important; border-radius: 50% !important; }
.btn-remove-file:hover { background: rgba(255,59,48,.12) !important; }

/* Inputs / textarea / select */
.modal-container-invitacion .form-input,
.modal-container-invitacion .form-textarea,
.modal-container-invitacion #faseDestinoInvitacion,
.modal-container-invitacion .modern-input {
  border: 1px solid var(--mk-border-2) !important;
  border-radius: 10px !important;
  background: var(--mk-card) !important;
  color: var(--mk-text) !important;
  font-family: var(--mk-font) !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.modal-container-invitacion .form-input:focus,
.modal-container-invitacion .form-textarea:focus,
.modal-container-invitacion #faseDestinoInvitacion:focus {
  border-color: var(--mk-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 18%, transparent) !important;
}
.modal-container-invitacion .datos-adicionales h3 { color: var(--mk-text) !important; font-family: var(--mk-font) !important; }

/* Footer */
.modal-footer-invitacion {
  padding: 18px 26px !important;
  border-top: 1px solid var(--mk-border) !important;
  background: var(--mk-bg) !important;
}
.btn-cancel {
  background: var(--mk-card) !important; background-image: none !important;
  border: 1px solid var(--mk-border-2) !important;
  border-radius: 10px !important;
  color: var(--mk-text) !important;
  font-family: var(--mk-font) !important; font-weight: 600 !important;
}
.btn-cancel:hover { background: color-mix(in srgb, var(--mk-text-2) 8%, var(--mk-card)) !important; }
.btn-process {
  background: var(--mk-accent) !important; background-image: none !important;
  border: none !important; border-radius: 10px !important;
  color: #fff !important; font-family: var(--mk-font) !important; font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(232,135,50,.28) !important;
}
.btn-process:hover:not(:disabled) { filter: brightness(.94) !important; }
.btn-process:disabled { background: color-mix(in srgb, var(--mk-text-2) 14%, transparent) !important; color: var(--mk-text-3) !important; box-shadow: none !important; cursor: not-allowed !important; }

/* ════════════════════════════════════════════════════════════════════════
   MODAL 2 — PREGUNTAS EN LA PLATAFORMA
   ════════════════════════════════════════════════════════════════════════ */
.modal-pregunta-estado-overlay {
  background: rgba(0,0,0,.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  font-family: var(--mk-font) !important;
}
.modal-pregunta-estado {
  background: var(--mk-card) !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: var(--mk-r-modal) !important;
  box-shadow: var(--mk-sh-modal) !important;
  max-width: 720px !important;
}
.modal-pregunta-header {
  padding: 22px 26px !important;
  border-bottom: 1px solid var(--mk-border) !important;
}
.modal-subtitle {
  font-family: var(--mk-font) !important;
  font-size: 1.15rem !important; font-weight: 700 !important;
  letter-spacing: -.02em !important; color: var(--mk-text) !important;
}
.modal-help-text { color: var(--mk-text-2) !important; font-size: .88rem !important; line-height: 1.5 !important; }

.modal-pregunta-body { padding: 18px 26px !important; }

.modal-pregunta-section {
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--mk-border) !important;
}
.modal-pregunta-section:last-child { border-bottom: none !important; }
.modal-section-title {
  font-family: var(--mk-font) !important;
  font-size: .82rem !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .04em !important;
  color: var(--mk-text-3) !important;
  margin-bottom: 10px !important;
}
.modal-section-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }

.modal-textarea {
  width: 100% !important; box-sizing: border-box !important;
  border: 1px solid var(--mk-border-2) !important;
  border-radius: var(--mk-r-el) !important;
  background: var(--mk-card) !important;
  color: var(--mk-text) !important;
  font-family: var(--mk-font) !important; font-size: .92rem !important;
  padding: 12px 14px !important; outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.modal-textarea:focus {
  border-color: var(--mk-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 18%, transparent) !important;
}

/* Listas de preguntas */
.modal-pregunta-list { margin-top: 8px !important; }
.modal-pregunta-list .modal-help-text { color: var(--mk-text-3) !important; }

/* Botones del modal 2 */
.modal-pregunta-estado .modal-btn-primary,
.modal-pregunta-estado .btnEnviarPreguntaEstado {
  background: var(--mk-accent) !important; background-image: none !important;
  color: #fff !important; border: none !important;
  border-radius: var(--mk-r-pill) !important;
  font-family: var(--mk-font) !important; font-weight: 600 !important;
  padding: 9px 18px !important;
  box-shadow: 0 4px 14px rgba(232,135,50,.28) !important;
  transition: filter .15s !important;
}
.modal-pregunta-estado .modal-btn-primary:hover,
.modal-pregunta-estado .btnEnviarPreguntaEstado:hover { filter: brightness(.94) !important; }
.modal-pregunta-estado .modal-btn-secondary {
  background: color-mix(in srgb, var(--mk-text-2) 10%, transparent) !important;
  background-image: none !important;
  color: var(--mk-text-2) !important; border: none !important;
  border-radius: var(--mk-r-pill) !important;
  font-family: var(--mk-font) !important; font-weight: 600 !important;
  padding: 7px 14px !important;
}
.modal-pregunta-estado .modal-btn-secondary:hover { background: color-mix(in srgb, var(--mk-text-2) 18%, transparent) !important; color: var(--mk-text) !important; }

.modal-pregunta-footer {
  padding: 16px 26px !important;
  border-top: 1px solid var(--mk-border) !important;
  background: var(--mk-bg) !important;
}

/* Scrollbars de ambos modales (macOS) */
.modal-container-invitacion::-webkit-scrollbar,
.modal-pregunta-body::-webkit-scrollbar { width: 8px; }
.modal-container-invitacion::-webkit-scrollbar-thumb,
.modal-pregunta-body::-webkit-scrollbar-thumb { background: var(--mk-border-2); border-radius: 5px; }

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .upload-area, .btn-process, .modal-pregunta-estado .modal-btn-primary { transition: none !important; }
}