/* app-gestion-directorio.css — Módulo Gestión → Directorio.
   Réplica de interfaz de arb-gestion-xk7/directorio.php (grid de tarjetas +
   pestañas de filtro) y directorio-edit.php (formulario en 2 columnas con
   secciones en caja) — el staff ya está acostumbrado a esa disposición en
   el panel admin de la web. Reusa el sidebar/topbar normales de app. */

/* ── Lista: pestañas de filtro por estado + modalidad ─────────── */
.gd-modal .hint {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

.gd-modal .req { color: #dc2626; font-weight: 700; }

/* ── Paginación ─────────────────────────────────────────────────── */
.gd-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
}

.gd-page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.gd-page-btn:hover { border-color: var(--primary); }

.gd-page-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #0d0d0d;
}

.gd-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.gd-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card, #fff);
  border: 1.5px solid var(--border-color, #e2e8f0);
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted, #64748B);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}

.gd-filter-tab:hover { border-color: var(--primary); }

.gd-filter-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #0d0d0d;
}

.gd-filter-tab sup {
  font-size: 10px;
  font-weight: 700;
  opacity: .75;
}

.gd-filter-sep {
  width: 1px;
  height: 18px;
  background: var(--border-color, #e2e8f0);
  margin: 0 2px;
}

/* Micro-etiqueta de grupo ("Estado" / "Modalidad") — dos ejes de filtro
   independientes (se combinan por AND) que antes se leían como un solo
   grupo de botones. El amarillo sólido de ".active" queda reservado
   EXCLUSIVAMENTE para lo que está realmente seleccionado, sea estado o
   modalidad — de ahí que las pills de modalidad en reposo usen un tinte
   apenas perceptible (casi sin fondo, solo texto de color) en vez del
   fondo saturado que tenían antes, que competía visualmente con el
   amarillo de selección y hacía parecer que 2-3 pills estaban activas
   a la vez. */
.gd-filter-group-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-right: 2px;
}

.gd-filter-tab--mod-arbitro     { background: rgba(26,86,219,.06);  border-color: transparent; color: #1a56db; }
.gd-filter-tab--mod-adjudicador { background: rgba(180,83,9,.06);   border-color: transparent; color: #b45309; }
.gd-filter-tab--mod-ambos       { background: rgba(22,101,52,.06);  border-color: transparent; color: #166534; }
.gd-filter-tab--mod-arbitro:hover     { background: rgba(26,86,219,.12); }
.gd-filter-tab--mod-adjudicador:hover { background: rgba(180,83,9,.12); }
.gd-filter-tab--mod-ambos:hover       { background: rgba(22,101,52,.12); }

/* BUGFIX 28-ago-2026: la Modalidad seleccionada pasaba a usar el MISMO
   amarillo sólido que Estado (".active" genérico) — volvía a mezclar
   visualmente los 2 ejes de filtro independientes, el mismo problema que
   el comentario de arriba dice haber resuelto (pero solo lo resolvió en
   reposo, no al seleccionar). Ahora cada modalidad, al activarse, se pone
   sólida con SU PROPIO color categórico — se lee "más fuerte que en
   reposo" sin confundirse con el amarillo de Estado. */
.gd-filter-tab--mod-arbitro.active     { background: #1a56db; border-color: #1a56db; color: #fff; }
.gd-filter-tab--mod-adjudicador.active { background: #b45309; border-color: #b45309; color: #fff; }
.gd-filter-tab--mod-ambos.active       { background: #166534; border-color: #166534; color: #fff; }

/* ── Toolbar: contador + buscador ──────────────────────────────── */
.gd-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.gd-count-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
}

.gd-search-wrap {
  position: relative;
  margin-left: auto;
}

.gd-search-wrap input {
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  width: 220px;
  background: var(--bg-card);
  color: var(--text-main);
}

.gd-search-wrap::before {
  content: '\f002';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-muted);
  pointer-events: none;
}

/* ── Grid de tarjetas ────────────────────────────────────────────── */
.gd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.gd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 20px 16px 16px;
  gap: 6px;
  text-align: center;
}

.gd-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--bg-card);
}
.gd-card-badge--activo               { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.25); }
.gd-card-badge--inactivo             { background: #9ca3af; }
.gd-card-badge--postulante_pendiente { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.25); }
.gd-card-badge--postulante_en_revision { background: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.25); }
.gd-card-badge--postulante_rechazado { background: #ef4444; }

.gd-card-foto {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
  flex-shrink: 0;
}

.gd-card-foto--placeholder,
.gd-foto-preview--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sub, #F8FAFC);
  color: var(--text-muted);
}
.gd-card-foto--placeholder i { font-size: 26px; }
.gd-foto-preview--placeholder i { font-size: 34px; }

.gd-card-nombre {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin: 4px 0 0;
  line-height: 1.35;
}

.gd-card-fms {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  min-height: 17px;
}

.gd-card-mod {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 10px;
  margin-top: 2px;
}
.gd-card-mod--arbitro     { background: #e8f0fe; color: #1a56db; }
.gd-card-mod--adjudicador { background: #fff7e6; color: #b45309; }
.gd-card-mod--ambos       { background: #e8f5e9; color: #166534; }

.gd-portal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 9px;
  margin-top: 3px;
}
.gd-portal-badge--ok { background: #dcfce7; color: #166534; }
.gd-portal-badge--no { background: #fef9c3; color: #92400e; }

.gd-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 8px;
  width: 100%;
}

.gd-card-actions .dat-btn-edit { font-size: 12px; padding: 5px 8px; }

/* ── Modal de alta/edición: formulario en 2 columnas con secciones en caja ── */
.gd-modal {
  max-width: 980px;
}

.gd-edit-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}

.gd-section-card {
  background: var(--surface-sub, #F8FAFC);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.gd-section-title {
  font-family: Outfit, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 14px;
}

.gd-form-row {
  display: flex;
  gap: 10px;
}

.gd-form-row .dat-field { flex: 1; min-width: 0; }

@media (max-width: 760px) {
  .gd-edit-grid { grid-template-columns: 1fr; }
  .gd-form-row { flex-direction: column; gap: 0; }
}

/* Foto de perfil — preview circular */
.gd-foto-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.gd-foto-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
}

/* Acceso al portal — caja de estado */
.gd-portal-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  margin-bottom: 10px;
}
.gd-portal-status--ok  { background: #dcfce7; color: #166534; }
.gd-portal-status--no  { background: #fff3cd; color: #856404; }

/* Combo de país buscable (país de residencia / nacionalidades) — reemplaza
   el <select> nativo de 194 opciones y el <select multiple> con Ctrl+clic. */
.gd-combo { position: relative; }

.gd-combo-drop {
  display: none;
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  z-index: 220;
  max-height: 220px;
  overflow-y: auto;
}

.gd-combo-opt {
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-primary, #0f172a);
}

.gd-combo-opt:hover { background: var(--surface-2, #f5f7fa); }

.gd-combo-empty {
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
}

.gd-combo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.gd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 99px;
  padding: 4px 6px 4px 12px;
  font-size: 12.5px;
}

.gd-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #94a3b8);
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
}

.gd-chip button:hover { color: #EF4444; }

/* Formación académica — cards Título+Años+Colegiatura */
.gd-fm-card {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 8px;
}

/* Especialidades — checkboxes en tarjeta */
.gd-svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.gd-svc-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  transition: border-color .15s;
}
.gd-svc-check:hover { border-color: var(--primary); }

/* Documentos existentes */
.gd-doc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--bg-card);
}

.gd-doc-row a {
  font-size: 13px;
  color: var(--text-main);
  text-decoration: none;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .gd-modal { max-width: 95%; }
}