/* Pantalla Oportunidades — sistema de diseño Triventa (design_handoff_triventa/).
   TODO va scopeado bajo .opp-screen: los tokens se definen ahí (no en :root) y las
   clases llevan prefijo .opp- para no pisar el estilo del resto de la app. Poppins e
   Inter ya se cargan global en index.html; acá solo se aplican. Valores exactos del
   handoff (colors.css, semantic.css, spacing.css, typography.css) — alta fidelidad. */

.opp-screen {
  /* Marcadores del mapa (mismo color que el pin de cada tipo de punto) */
  --marker-prospect: #2563EB;
  --marker-saved: #7C3AED;
  --marker-client: #10B981;
  --marker-mission: #FF6B00;
  /* Acentos semánticos */
  --ai-purple: #7C3AED;          /* violeta — EXCLUSIVO de IA */
  --tint-purple: #F0EAFB;
  --triventa-green: #10B981;
  --vivid-orange: #FF6B00;
  /* Superficies, bordes, sombras, texto */
  --surface-card: #FFFFFF;
  --border-subtle: #E2E8F0;
  --shadow-md: 0 6px 18px rgba(154, 161, 171, 0.20);
  --text-heading: #0B1D3B;
  --text-primary: #1E293B;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --app-bg: #F8FAFC;
  --radius-md: 8px;
  --radius-lg: 12px;
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  background: var(--app-bg);
  font-family: var(--font-text);
  color: var(--text-primary);
  padding: 4px 2px 24px;
}

/* Cabecera de pantalla: título + breadcrumb (Triventa › Operación › Oportunidades) */
.opp-head { margin: 0 0 18px; }
.opp-sub {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-top: 8px;
  max-width: 62ch;
}

/* Grilla de tarjetas */
.opp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
}

/* Tarjeta de oportunidad. Clic → Ficha del punto; lift suave al pasar (motion
   contenido del handoff: 0.2s sombra/translate). Respeta prefers-reduced-motion. */
.opp-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.opp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(154, 161, 171, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .opp-card { transition: none; }
  .opp-card:hover { transform: none; }
}

/* (a) Franja "OPORTUNIDAD RECOMENDADA" — solo si la IA la recomienda. Violeta = IA. */
.opp-reco {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--tint-purple);
  color: var(--ai-purple);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 16px;
}
.opp-reco svg { flex-shrink: 0; }

.opp-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* (b) Cabecera: chip cuadrado del color del marcador + nombre + distancia */
.opp-header { display: flex; align-items: flex-start; gap: 10px; }
.opp-chip {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.opp-chip--prospect { background: var(--marker-prospect); }
.opp-chip--saved    { background: var(--marker-saved); }
.opp-chip--client   { background: var(--marker-client); }
.opp-chip--mission  { background: var(--marker-mission); }
/* Pin "Ver en el mapa": botón de ícono a la derecha de la cabecera, la gota
   coloreada por tipo (mismo color que su marcador en el mapa). Un clic lleva al
   mapa de Buscar centrado en el punto. */
.opp-map-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.opp-map-btn:hover { background: var(--app-bg); transform: translateY(-1px); }
.opp-map-btn:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .opp-map-btn { transition: none; }
  .opp-map-btn:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CARD DEL MAPA — nuestra adaptación de la OpportunityCard dentro del
   globo del marcador (reemplaza el chrome del InfoWindow de Google).
   Auto-contenida: define sus tokens, porque vive en el portal de Google
   (fuera de .opp-screen). ══════════════════════════════════════════ */

/* Despoja el InfoWindow de Google: la .mapcard pone su fondo/radio/sombra. Las clases
   gm-style-iw-* son estables hace años; se sobrescriben con !important porque Google
   las inyecta con estilos inline/altos. */
.gm-style .gm-style-iw-c {
  padding: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 34px rgba(11, 29, 59, 0.20) !important;
  background: #fff !important;
  overflow: visible !important;
  max-width: none !important;
  height: auto !important;
}
/* height:auto + overflow:visible: la card la dimensiona su CONTENIDO, no la medición
   (a veces corta) de Google — si no, el último botón ("Cómo llegar") queda recortado. */
.gm-style .gm-style-iw-d { overflow: visible !important; padding: 0 !important; margin: 0 !important; max-height: none !important; height: auto !important; }
.gm-style .gm-style-iw-t::after { background: #fff !important; }
/* Google mete una fila-header (.gm-style-iw-chr) con SU botón de cerrar, que reserva
   ~30px arriba: ésa es la banda blanca. Se oculta entera y la .mapcard trae su propia
   X (así la card empieza justo en el borde, sin desborde). */
.gm-style .gm-style-iw-chr { display: none !important; }

.mapcard {
  position: relative;
  --mc-prospect: #2563EB; --mc-saved: #7C3AED; --mc-client: #10B981; --mc-mission: #FF6B00;
  --mc-ai: #7C3AED; --mc-tint: #F0EAFB; --mc-green: #10B981; --mc-green-tint: #E7F7F0;
  --mc-orange: #FF6B00; --mc-orange-tint: #FFF1E6;
  --mc-surface: #fff; --mc-border: #E9EEF5; --mc-heading: #0B1D3B; --mc-primary: #1E293B;
  --mc-secondary: #475569; --mc-muted: #94A3B8; --mc-bg: #F8FAFC;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  width: 288px;
  color: var(--mc-primary);
  border-radius: 16px;
  overflow: hidden;
}
/* Nuestra X (reemplaza la de Google, que ocultamos con su header). Círculo tenue para
   que se vea sobre cualquier fondo (eyebrow de color o cuerpo blanco). */
.mapcard-close {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.72); color: var(--mc-secondary); cursor: pointer;
  transition: background 0.15s ease;
}
.mapcard-close:hover { background: rgba(255, 255, 255, 0.96); }
.mapcard-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 9px 16px;
}
.mapcard-eyebrow svg { flex-shrink: 0; }
.mapcard-eyebrow--ai       { background: var(--mc-tint);        color: var(--mc-ai); }
.mapcard-eyebrow--released { background: var(--mc-green-tint);  color: #0f7a52; }
.mapcard-eyebrow--mission  { background: var(--mc-orange-tint); color: #b45309; }
.mapcard-body { padding: 15px 16px; display: flex; flex-direction: column; gap: 12px; }
.mapcard-head { display: flex; align-items: flex-start; gap: 10px; }
.mapcard-chip {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mapcard--prospect .mapcard-chip { background: var(--mc-prospect); }
.mapcard--saved    .mapcard-chip { background: var(--mc-saved); }
.mapcard--client   .mapcard-chip { background: var(--mc-client); }
.mapcard--mission  .mapcard-chip { background: var(--mc-mission); }
.mapcard-name { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; font-size: 15.5px; color: var(--mc-heading); line-height: 1.25; }
.mapcard-sub  { font-size: 12.5px; color: var(--mc-muted); margin-top: 2px; line-height: 1.3; }
.mapcard-rows { display: flex; flex-direction: column; gap: 8px; }
.mapcard-row  { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--mc-secondary); line-height: 1.35; }
.mapcard-row svg { flex-shrink: 0; margin-top: 1px; }
.mapcard-row b { color: var(--mc-primary); font-weight: 700; }
.mapcard-foot {
  display: flex; align-items: center; gap: 6px; padding-top: 11px; border-top: 1px solid var(--mc-border);
  font-size: 12.5px; font-weight: 600;
}
.mapcard-foot--ok   { color: var(--mc-green); }
.mapcard-foot--warn { color: #b45309; }
.mapcard-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.mapcard-actions { display: flex; gap: 8px; margin-top: 2px; }
.mapcard-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 700;
  cursor: pointer; border: 1px solid transparent; font-family: 'Inter', system-ui, sans-serif;
  transition: filter 0.15s ease, background 0.15s ease;
}
.mapcard-btn svg { flex-shrink: 0; }
.mapcard-btn--primary { background: var(--mc-heading); color: #fff; }
.mapcard-btn--primary:hover { filter: brightness(1.15); }
.mapcard-btn--ghost { background: var(--mc-surface); color: var(--mc-secondary); border-color: var(--mc-border); }
.mapcard-btn--ghost:hover { background: var(--mc-bg); }
.mapcard-btn--mission { background: var(--mc-orange); color: var(--mc-heading); }
.mapcard-btn--mission:hover { filter: brightness(1.05); }
/* "Cómo llegar": botón de acción (al lado de "Ver ficha", donde estaba WhatsApp) que
   abre Google Maps afuera. Pin rojo Google para que se lea como enlace externo. */
.mapcard-btn--nav { background: var(--mc-surface); color: var(--mc-heading); border-color: var(--mc-border); text-decoration: none; }
.mapcard-btn--nav:hover { background: var(--mc-bg); }
/* El botón "Guardar" (save-pin) reusado, con el look de un botón fantasma de la card.
   La regla es más específica que .save-pin, así sobrevive al repintado del toggle. */
.mapcard-actions .save-pin {
  flex: 1; min-height: 38px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--mc-surface); color: var(--mc-secondary); border: 1px solid var(--mc-border);
}
.mapcard-actions .save-pin.is-on { background: var(--mc-tint); color: var(--mc-saved); border-color: transparent; }

.opp-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--text-heading);
  line-height: 1.25;
}
.opp-distance {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* (c) Tres filas: afinidad (target violeta), producto (package verde), acción (route naranjo) */
.opp-rows { display: flex; flex-direction: column; gap: 8px; }
.opp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.opp-row svg { flex-shrink: 0; }
.opp-row b { color: var(--text-primary); font-weight: 700; }

/* (d) Pie: punto verde + "Disponible para trabajar" */
.opp-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--triventa-green);
}
.opp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* Variantes para la card unificada de Buscar (clientes / liberados / recontacto). */
.opp-foot--warn { color: #b45309; }
.opp-reco--released { background: #E7F7F0; color: #0f7a52; }
/* Fila de acciones (Guardar/Quitar) en la card de Buscar — botón fantasma sutil. */
.opp-actions { display: flex; gap: 8px; margin-top: 2px; }
.opp-actions .save-pin {
  min-height: 34px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  background: var(--surface-card); color: var(--text-secondary); border: 1px solid var(--border-subtle);
}
.opp-actions .save-pin.is-on { background: var(--tint-purple); color: var(--ai-purple); border-color: transparent; }

/* ── Card de PEDIDO con estilo Triventa (uniformidad) ──────────────
   1 columna: es densa (varios badges + plata + próximo paso). El chrome
   (chip, Poppins, sombra) lo da .opp-card; acá van solo sus partes propias.
   Mantiene TODA la info; solo cambia el estilo. */
.ordercard-list { display: flex; flex-direction: column; gap: 12px; }
.ordercard .opp-header { align-items: center; }
.ordercard-id { flex: 1; min-width: 0; }
.ordercard-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ordercard-money { font-size: 13px; color: var(--text-secondary); }
.ordercard-next { font-size: 13px; line-height: 1.4; }
.ordercard .follow-star { flex-shrink: 0; }

/* Estado vacío / carga — ocupa TODO el ancho de la grilla, no una sola columna. */
.opp-empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  background: var(--surface-card);
}
.opp-empty strong { color: var(--text-secondary); }

/* Móvil primero: en pantallas chicas la grilla cae a una columna cómoda. */
@media (max-width: 640px) {
  .opp-grid { grid-template-columns: 1fr; gap: 14px; }
  .opp-title { font-size: 22px; }
}