/* ════════════════════════════════════════════════════════════════════════════
   FCS · Mi Estructura · Estilos
   Mismo CSS visual que el prototipo aprobado mi_estructura_prototipo.html
   Todas las clases tienen prefijo `me-` para no chocar con tu CSS existente.

   Variables CSS scopeadas al contenedor #mi-estructura-container.
   Las variables que apunten a tus colores del CRM existente pueden reasignarse.
   ════════════════════════════════════════════════════════════════════════════ */

#mi-estructura-container {
  --me-bg-deep:        #f6f8fa;
  --me-bg-elevated:    #ffffff;
  --me-bg-card:        #ffffff;
  --me-bg-card-hi:     #f1f5f9;
  --me-border:         #e8edf2;
  --me-border-hi:      #cbd5e1;
  --me-text-1:         #0f172a;
  --me-text-2:         #334155;
  --me-text-3:         #64748b;
  --me-text-dim:       #94a3b8;
  --me-cyan:           #0d9488;
  --me-cyan-glow:      rgba(13,148,136, 0.35);
  --me-cyan-soft:      rgba(13,148,136, 0.10);
  --me-orange:         #fb923c;
  --me-green:          #10b981;
  --me-rose:           #f43f5e;
  --me-yellow:         #eab308;
  --me-purple:         #a855f7;
  --me-blue:           #3b82f6;
  --me-gold:           #fbbf24;
  --me-r-sm:           8px;
  --me-r-md:           12px;
  --me-r-lg:           18px;
  --me-r-xl:           24px;
}



/* ════════ PAGE HEADER (común a todas las vistas) ════════ */
.me-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--me-border);
}
.me-page-h-title {
  font-family: 'Audiowide', sans-serif;
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--me-text-1);
}
.me-page-h-title .me-accent {
  background: linear-gradient(90deg, var(--me-cyan) 0%, #5eead4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.me-page-h-meta {
  color: var(--me-text-3);
  font-size: 13px;
  margin-left: auto;
}

/* Permisos banner (solo aparece para no-GM) */
.me-perm-banner {
  background: linear-gradient(135deg, rgba(13,148,136,0.1), rgba(168,85,247,0.05));
  border: 1px dashed rgba(13,148,136,0.4);
  border-radius: var(--me-r-md);
  padding: 11px 16px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--me-text-2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.me-perm-banner svg { color: var(--me-cyan); flex-shrink: 0; }
.me-perm-banner strong { color: var(--me-cyan); font-weight: 700; }

/* ════════ TOOLBAR ════════ */
.me-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}
@media (max-width: 640px) { .me-toolbar { grid-template-columns: 1fr; } }
.me-search-bar {
  display: flex;
  align-items: center;
  background: var(--me-bg-card);
  border: 1px solid var(--me-border);
  border-radius: var(--me-r-md);
  padding: 0 12px;
  max-width: 380px;
}
.me-search-bar svg { color: var(--me-text-3); flex-shrink: 0; }
.me-search-bar input {
  background: transparent;
  border: none;
  color: var(--me-text-1);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 8px;
  width: 100%;
  outline: none;
}
.me-search-bar input::placeholder { color: var(--me-text-dim); }
.me-view-toggle {
  display: inline-flex;
  background: var(--me-bg-card);
  border: 1px solid var(--me-border);
  border-radius: var(--me-r-md);
  padding: 4px;
  gap: 2px;
}
.me-view-toggle button {
  background: transparent;
  border: none;
  color: var(--me-text-3);
  padding: 8px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.me-view-toggle button.me-active {
  background: var(--me-cyan);
  color: #062a35;
}
.me-filter-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.me-filter-pill {
  background: var(--me-bg-card);
  border: 1px solid var(--me-border);
  color: var(--me-text-2);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.me-filter-pill:hover { border-color: var(--me-cyan); color: var(--me-cyan); }
.me-filter-pill.me-active {
  background: var(--me-cyan-soft);
  border-color: var(--me-cyan);
  color: var(--me-cyan);
}

/* ════════ PERSON CARDS (lista) ════════ */
.me-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.me-person-card {
  background: var(--me-bg-card);
  border: 1px solid var(--me-border);
  border-radius: var(--me-r-lg);
  padding: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.me-person-card:hover {
  border-color: var(--me-cyan);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px var(--me-cyan);
}
.me-role-stripe { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.me-person-card[data-role="gm"]   .me-role-stripe { background: linear-gradient(90deg, var(--me-gold), #f59e0b); }
.me-person-card[data-role="ge"]   .me-role-stripe { background: linear-gradient(90deg, var(--me-cyan), #0f766e); }
.me-person-card[data-role="cons"] .me-role-stripe { background: linear-gradient(90deg, var(--me-purple), #7e22ce); }

.me-person-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.me-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Audiowide', sans-serif;
  font-size: 17px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  font-weight: 700;
}
.me-avatar.me-gm   { background: linear-gradient(135deg, var(--me-gold), #f59e0b); color: #4a2c00; }
.me-avatar.me-ge   { background: linear-gradient(135deg, var(--me-cyan), #0f766e); color: #062a35; }
.me-avatar.me-cons { background: linear-gradient(135deg, var(--me-purple), #7e22ce); color: #fff; }

.me-person-info { min-width: 0; flex: 1; }
.me-person-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--me-text-1);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.me-role-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
}
.me-role-badge.me-gm   { background: rgba(251, 191, 36, 0.15); color: var(--me-gold); }
.me-role-badge.me-ge   { background: var(--me-cyan-soft); color: var(--me-cyan); }
.me-role-badge.me-cons { background: rgba(168, 85, 247, 0.15); color: var(--me-purple); }

.me-person-meta {
  font-size: 12px;
  color: var(--me-text-3);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.me-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.me-kpi {
  background: var(--me-bg-deep);
  border-radius: var(--me-r-sm);
  padding: 8px 10px;
  text-align: center;
}
.me-kpi-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--me-text-dim);
  margin-bottom: 2px;
}
.me-kpi-value {
  font-family: 'Audiowide', sans-serif;
  font-size: 18px;
  color: var(--me-text-1);
  line-height: 1;
}
.me-kpi-value.green  { color: var(--me-green); }
.me-kpi-value.cyan   { color: var(--me-cyan); }
.me-kpi-value.orange { color: var(--me-orange); }
.me-spark-section {
  background: var(--me-bg-deep);
  border-radius: var(--me-r-sm);
  padding: 10px 12px;
}
.me-spark-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.me-spark-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--me-text-dim);
}
.me-spark-total {
  font-family: 'Audiowide', sans-serif;
  font-size: 13px;
  color: var(--me-cyan);
  line-height: 1;
}
.me-spark-total .me-trend {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}
.me-spark-total .me-trend.up   { color: var(--me-green); }
.me-spark-total .me-trend.down { color: var(--me-rose); }
.me-spark {
  height: 32px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 0;
  position: relative;
}
.me-spark-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--me-cyan), #0f766e);
  border-radius: 2px 2px 0 0;
  min-height: 3px;
  opacity: 0.7;
  position: relative;
  cursor: help;
  transition: opacity 0.15s;
}
.me-spark-bar:hover { opacity: 1; }
.me-spark-bar:last-child { opacity: 1; }  /* última semana destacada */
.me-spark-bar[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--me-bg-elevated);
  border: 1px solid var(--me-border-hi);
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 5;
}
.me-spark-bar:hover[data-tip]::after { opacity: 1; }

/* ════════ ORG TREE (jerárquico con líneas padre-hijo) ════════ */
.me-pyramid-wrap {
  background: var(--me-bg-elevated);
  border: 1px solid var(--me-border);
  border-radius: var(--me-r-lg);
  padding: 32px 20px;
  overflow-x: auto;
}
.me-org-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: max-content;
  padding: 8px 0;
}
.me-org-subtree {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}
/* Contenedor de hijos */
.me-org-children {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 28px;
  position: relative;
}
/* Línea vertical que BAJA del padre hacia la línea horizontal */
.me-org-children::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 14px;
  background: var(--me-border-hi);
  transform: translateX(-50%);
}
/* Si es UN solo hijo: línea va directo del padre al hijo, sin barra horizontal */
.me-org-children.single::before {
  height: 28px;
}
/* Cada subtree (hijo) tiene su propia línea hacia arriba */
.me-org-subtree.has-parent {
  padding-top: 14px;
}
/* Línea HORIZONTAL: une la mitad superior del subtree con la línea de hermanos */
.me-org-subtree.has-parent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--me-border-hi);
}
/* Línea VERTICAL desde la línea horizontal hasta el nodo */
.me-org-subtree.has-parent::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 14px;
  background: var(--me-border-hi);
  transform: translateX(-50%);
}
/* Si es hijo único: no necesita línea horizontal arriba (la vertical del padre llega directo) */
.me-org-subtree.has-parent.only-child::before {
  display: none;
}
.me-org-subtree.has-parent.only-child::after {
  display: none;
}
/* Primer hijo de múltiples: línea horizontal solo del centro hacia la derecha */
.me-org-subtree.has-parent.first-of-many::before {
  left: 50%;
}
/* Último hijo de múltiples: línea horizontal solo de la izquierda al centro */
.me-org-subtree.has-parent.last-of-many::before {
  right: 50%;
}

/* ════════ NODO DE LA PIRÁMIDE ════════ */
.me-pyramid-node {
  background: var(--me-bg-card);
  border: 1.5px solid var(--me-border);
  border-radius: var(--me-r-md);
  padding: 10px;
  min-width: 168px;
  max-width: 200px;
  cursor: pointer;
  transition: all 0.18s;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.me-pyramid-node:hover {
  border-color: var(--me-cyan);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,148,136, 0.2);
}
.me-pyramid-node.is-gm {
  border-color: var(--me-gold);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), var(--me-bg-card));
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.3);
}
.me-pyramid-node.is-ge { border-color: var(--me-cyan); }
.me-pn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.me-pn-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Audiowide', sans-serif;
  font-size: 11px;
  flex-shrink: 0;
  font-weight: 700;
}
.me-pn-avatar.me-gm   { background: linear-gradient(135deg, var(--me-gold), #f59e0b); color: #4a2c00; }
.me-pn-avatar.me-ge   { background: linear-gradient(135deg, var(--me-cyan), #0f766e); color: #062a35; }
.me-pn-avatar.me-cons { background: linear-gradient(135deg, var(--me-purple), #7e22ce); color: #fff; }
.me-pn-info { min-width: 0; flex: 1; }
.me-pn-name {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.me-pn-role {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--me-text-3);
  margin-top: 1px;
}
.me-pn-role.me-gm { color: var(--me-gold); }
.me-pn-role.me-ge { color: var(--me-cyan); }
.me-pn-stats { display: flex; gap: 4px; }
.me-pn-stat {
  flex: 1;
  text-align: center;
  background: var(--me-bg-deep);
  border-radius: 5px;
  padding: 4px 2px;
}
.me-pn-stat-v {
  font-family: 'Audiowide', sans-serif;
  font-size: 12px;
  color: var(--me-text-1);
  display: block;
  line-height: 1;
}
.me-pn-stat-l {
  font-size: 7px;
  color: var(--me-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
  display: block;
}

/* ════════ DETALLE DEL VENDEDOR ════════ */
.me-back-btn {
  background: var(--me-bg-card);
  border: 1px solid var(--me-border);
  color: var(--me-text-2);
  padding: 8px 14px;
  border-radius: var(--me-r-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  transition: all 0.15s;
}
.me-back-btn:hover { border-color: var(--me-cyan); color: var(--me-cyan); }
.me-drill-header {
  background: var(--me-bg-elevated);
  border: 1px solid var(--me-border);
  border-radius: var(--me-r-lg);
  padding: 24px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.me-drill-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: radial-gradient(ellipse at top, var(--me-cyan-soft), transparent 70%);
  pointer-events: none;
}
.me-drill-
@media (max-width: 720px) {
  .me-drill-
  .me-drill-actions { grid-column: 1 / -1; flex-direction: row !important; }
}
.me-avatar-xl {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Audiowide', sans-serif;
  font-size: 28px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--me-bg-elevated);
}
.me-avatar-xl.me-cons { background: linear-gradient(135deg, var(--me-purple), #7e22ce); color: #fff; box-shadow: 0 0 0 4px var(--me-bg-elevated), 0 0 0 5px var(--me-purple); }
.me-avatar-xl.me-ge { background: linear-gradient(135deg, var(--me-cyan), #0f766e); color: #062a35; box-shadow: 0 0 0 4px var(--me-bg-elevated), 0 0 0 5px var(--me-cyan); }
.me-avatar-xl.me-gm { background: linear-gradient(135deg, var(--me-gold), #f59e0b); color: #4a2c00; box-shadow: 0 0 0 4px var(--me-bg-elevated), 0 0 0 5px var(--me-gold); }

.me-drill-name {
  font-family: 'Audiowide', sans-serif;
  font-size: 26px;
  color: var(--me-text-1);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.me-drill-role { margin-bottom: 10px; }
.me-drill-contact {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--me-text-2);
}
.me-drill-contact span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.me-drill-contact svg { color: var(--me-cyan); }
.me-drill-actions { display: flex; gap: 8px; flex-direction: column; }
.me-btn-pri {
  background: linear-gradient(135deg, var(--me-cyan), #0f766e);
  border: none;
  color: #062a35;
  padding: 10px 18px;
  border-radius: var(--me-r-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.me-btn-sec {
  background: var(--me-bg-card);
  border: 1px solid var(--me-border);
  color: var(--me-text-2);
  padding: 9px 18px;
  border-radius: var(--me-r-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.me-btn-sec:hover { border-color: var(--me-cyan); color: var(--me-cyan); }
.me-tabs {
  display: flex;
  gap: 2px;
  background: var(--me-bg-card);
  border: 1px solid var(--me-border);
  border-radius: var(--me-r-md);
  padding: 4px;
  margin-bottom: 18px;
  overflow-x: auto;
}
.me-tab-btn {
  background: transparent;
  border: none;
  color: var(--me-text-3);
  padding: 9px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.me-tab-btn.me-active {
  background: var(--me-cyan);
  color: #062a35;
}
.me-tab-panel { display: none; }
.me-tab-panel.me-active { display: block; animation: fade 0.25s ease; }

/* KPI grid grandes */
.me-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.me-kpi-big {
  background: var(--me-bg-card);
  border: 1px solid var(--me-border);
  border-radius: var(--me-r-md);
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.me-kpi-big::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, var(--me-cyan-soft), transparent 60%);
  pointer-events: none;
}
.me-kpi-big-l {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--me-text-dim);
  margin-bottom: 4px;
}
.me-kpi-big-v {
  font-family: 'Audiowide', sans-serif;
  font-size: 28px;
  color: var(--me-text-1);
  line-height: 1;
}
.me-kpi-big-d { font-size: 11px; margin-top: 4px; }
.me-kpi-big-d.up   { color: var(--me-green); }
.me-kpi-big-d.down { color: var(--me-rose); }

/* Charts */
.me-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 720px) { .me-charts-grid { grid-template-columns: 1fr; } }
.me-chart-card {
  background: var(--me-bg-card);
  border: 1px solid var(--me-border);
  border-radius: var(--me-r-md);
  padding: 18px;
}
.me-chart-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--me-text-2);
  margin-bottom: 14px;
}
.me-donut { display: flex; align-items: center; gap: 20px; }
.me-donut-svg { width: 140px; height: 140px; flex-shrink: 0; }
.me-donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.me-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--me-text-2);
}
.me-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.me-legend-num { margin-left: auto; font-family: 'Audiowide', sans-serif; color: var(--me-text-1); }
.me-line-chart { height: 140px; position: relative; }
.me-rank-list { display: flex; flex-direction: column; gap: 8px; }
.me-rank-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--me-bg-deep);
  border-radius: var(--me-r-sm);
  font-size: 13px;
}
.me-rank-pos {
  font-family: 'Audiowide', sans-serif;
  color: var(--me-cyan);
  font-size: 14px;
}
.me-rank-row:first-child .me-rank-pos { color: var(--me-gold); }
.me-rank-num { font-family: 'Audiowide', sans-serif; color: var(--me-text-1); }

/* Proposals list */
.me-prop-list { display: flex; flex-direction: column; gap: 10px; }
.me-prop-card {
  background: var(--me-bg-card);
  border: 1px solid var(--me-border);
  border-radius: var(--me-r-md);
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  cursor: pointer;
  transition: all 0.15s;
}
.me-prop-card:hover { border-color: var(--me-cyan); transform: translateX(2px); }
.me-prop-cli { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.me-prop-meta {
  font-size: 12px;
  color: var(--me-text-3);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.me-prop-state {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}
.me-prop-state.enviada { background: rgba(59,130,246,0.15); color: #93c5fd; }
.me-prop-state.vista { background: rgba(168,85,247,0.15); color: #d8b4fe; }
.me-prop-state.instalacion { background: rgba(245,158,11,0.15); color: var(--me-gold); }
.me-prop-state.activo { background: rgba(5,150,105,0.15); color: #6ee7b7; }
.me-prop-state.pto { background: rgba(20,184,166,0.15); color: #5eead4; }
.me-prop-state.permisologia { background: rgba(234,179,8,0.15); color: #fde047; }
.me-prop-state.ganada { background: rgba(16,185,129,0.15); color: #34d399; }
.me-prop-amount {
  font-family: 'Audiowide', sans-serif;
  font-size: 17px;
  text-align: right;
  color: var(--me-green);
}

/* ════════ MODAL DE PROPUESTA (cuando user clickea una propuesta) ════════ */
.me-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: flex-end;
}
.me-modal-overlay.me-open { display: flex; animation: fadeOverlay 0.25s ease; }
@keyframes fadeOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}
.me-modal-sheet {
  background: var(--me-bg-elevated);
  border: 1px solid var(--me-border);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  max-height: 92vh;
  overflow-y: auto;
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.me-modal-handle {
  width: 40px;
  height: 4px;
  background: var(--me-border-hi);
  border-radius: 2px;
  margin: 10px auto;
}
.me-modal-header {
  display: flex;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--me-border);
}
.me-modal-title {
  font-family: 'Audiowide', sans-serif;
  font-size: 16px;
  flex: 1;
}
.me-modal-close {
  background: var(--me-bg-card);
  border: 1px solid var(--me-border);
  color: var(--me-text-2);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.me-modal-
.me-modal-section { margin-bottom: 22px; }
.me-modal-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--me-text-3);
  margin-bottom: 10px;
}
.me-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
@media (max-width: 540px) { .me-field-grid { grid-template-columns: 1fr; } }
.me-field {
  background: var(--me-bg-card);
  border: 1px solid var(--me-border);
  border-radius: var(--me-r-sm);
  padding: 10px 12px;
}
.me-field-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--me-text-dim);
  margin-bottom: 2px;
}
.me-field-value { font-size: 14px; color: var(--me-text-1); }

/* Estado picks (igual al CRM real) */
.me-estado-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.me-estado-pick {
  position: relative;
  display: inline-block;
  border: none;
  border-radius: 8px;
  padding: 0;
  margin: 3px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  min-height: 36px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.22);
  transition: filter 0.15s, transform 0.15s;
  vertical-align: middle;
}
.me-estado-pick:hover { filter: brightness(1.15); transform: translateY(-1px); }
.me-estado-pick::before {
  content: attr(data-label);
  display: inline-block;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 36px;
  padding: 0 18px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.me-estado-pick.me-active {
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.55);
}


/* ═══════════════════════════════════════════════════════════════════════════
   FIXES DE CONTRASTE v2 — 14 mayo 2026
   Auditoría sistemática de todos los elementos del módulo identificó
   problemas de legibilidad. Este bloque corrige cada uno con !important
   para asegurar aplicación incluso cuando el dashboard contenedor inyecte
   reglas conflictivas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. FILTER PILLS — texto siempre legible ─── */
#mi-estructura-container .me-filter-pill {
  color: #e5e7eb !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}
#mi-estructura-container .me-filter-pill:hover {
  color: #5eead4 !important;
  border-color: #0d9488 !important;
}
#mi-estructura-container .me-filter-pill.me-active {
  background: rgba(13,148,136, 0.18) !important;
  border-color: #0d9488 !important;
  color: #5eead4 !important;
}

/* ─── 2. VIEW TOGGLE (Lista / Pirámide) ─── */
#mi-estructura-container .me-view-toggle {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}
#mi-estructura-container .me-view-toggle button {
  color: #334155 !important;
}
#mi-estructura-container .me-view-toggle button:hover {
  color: #5eead4 !important;
}
#mi-estructura-container .me-view-toggle button.me-active {
  background: #0d9488 !important;
  color: #062a35 !important;
  font-weight: 700 !important;
}

/* ─── 3. SEARCH BAR — fondo oscuro + texto claro ─── */
#mi-estructura-container .me-search-bar {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}
#mi-estructura-container .me-search-bar svg {
  color: #334155 !important;
}
#mi-estructura-container .me-search-bar input {
  color: #0f172a !important;
  background: transparent !important;
}
#mi-estructura-container .me-search-bar input::placeholder {
  color: #9ca3af !important;
}

/* ─── 4. TABS DETALLE (Dashboard / Propuestas / Perfil / Comisiones) ─── */
#mi-estructura-container .me-tabs {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}
#mi-estructura-container .me-tab-btn {
  color: #334155 !important;
}
#mi-estructura-container .me-tab-btn:hover {
  color: #5eead4 !important;
  background: rgba(13,148,136, 0.08) !important;
}
#mi-estructura-container .me-tab-btn.me-active {
  background: #0d9488 !important;
  color: #062a35 !important;
  font-weight: 700 !important;
}

/* ─── 5. BOTONES (Primario / Secundario / Volver) ─── */
#mi-estructura-container .me-btn-pri {
  background: #0d9488 !important;
  color: #062a35 !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 13px !important;
}
#mi-estructura-container .me-btn-pri:hover {
  background: #14b8a6 !important;
  color: #051f28 !important;
}
#mi-estructura-container .me-btn-sec {
  background: #ffffff !important;
  color: #e5e7eb !important;
  border: 1px solid #cbd5e1 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
#mi-estructura-container .me-btn-sec:hover {
  border-color: #0d9488 !important;
  color: #5eead4 !important;
  background: #f1f5f9 !important;
}
#mi-estructura-container .me-back-btn {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}
#mi-estructura-container .me-back-btn:hover {
  color: #5eead4 !important;
  border-color: #0d9488 !important;
  background: #f1f5f9 !important;
}

/* ─── 6. INPUT GENERAL (.me-input) — antes NO DEFINIDO ─── */
#mi-estructura-container .me-input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
#mi-estructura-container .me-input:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136, 0.15) !important;
}
#mi-estructura-container .me-input::placeholder {
  color: #9ca3af !important;
}

/* ─── 7. COMMISSION INPUTS (perfil del vendedor — solo GM) ─── */
#mi-estructura-container .me-comm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#mi-estructura-container .me-comm-row {
  display: grid;
  grid-template-columns: 1fr 100px auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px;
}
#mi-estructura-container .me-comm-name {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 14px;
}
#mi-estructura-container .me-comm-input {
  background: #f6f8fa !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  outline: none;
}
#mi-estructura-container .me-comm-input:focus {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.20) !important;
}
#mi-estructura-container .me-comm-pct {
  color: #fbbf24 !important;
  font-weight: 700 !important;
  font-size: 14px;
}
#mi-estructura-container .me-comm-status {
  font-size: 14px;
  min-width: 16px;
  text-align: center;
  font-weight: 700;
}

/* ─── 8. ESTADO PICKS (modal propuesta) — texto siempre blanco ─── */
#mi-estructura-container .me-estado-pick {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* ─── 9. PERM BANNER — mayor contraste con fondo sólido ─── */
#mi-estructura-container .me-perm-banner {
  background: #ffffff !important;
  border: 1px solid rgba(13,148,136, 0.45) !important;
  color: #e5e7eb !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#mi-estructura-container .me-perm-banner strong {
  color: #5eead4 !important;
}
#mi-estructura-container .me-perm-banner svg {
  color: #5eead4 !important;
}

/* ─── 10. MODAL HEADER + TITLE + CLOSE ─── */
#mi-estructura-container .me-modal-sheet,
.me-modal-sheet {
  background: #ffffff !important;
  color: #0f172a !important;
}
.me-modal-title {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}
.me-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #e8edf2 !important;
  background: #ffffff !important;
  color: #0f172a !important;
}
.me-modal-close {
  color: #334155 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid #cbd5e1 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
.me-modal-close:hover {
  color: #e11d48 !important;
  background: rgba(244, 63, 94, 0.15) !important;
  border-color: rgba(244, 63, 94, 0.45) !important;
}
.me-modal-section-title {
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.me-modal-overlay .me-field-label {
  color: #9ca3af !important;
}
.me-modal-overlay .me-field-value {
  color: #0f172a !important;
}

/* ─── 11. PAGE HEADER — mayor contraste ─── */
#mi-estructura-container .me-page-h-meta {
  color: #334155 !important;
}

/* ─── 12. PERSON CARDS (lista) — meta más legible ─── */
#mi-estructura-container .me-person-meta {
  color: #334155 !important;
}
#mi-estructura-container .me-spark-label {
  color: #334155 !important;
}
#mi-estructura-container .me-kpi-label {
  color: #9ca3af !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOTO DE PERFIL — soporte con fallback a iniciales
   Si el vendedor tiene una foto, se muestra. Sino, círculo con iniciales.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Avatar mediano (cards de lista + drill header) */
#mi-estructura-container .me-avatar,
#mi-estructura-container .me-pn-avatar,
#mi-estructura-container .me-avatar-xl {
  overflow: hidden;
  position: relative;
}
#mi-estructura-container .me-avatar img,
#mi-estructura-container .me-pn-avatar img,
#mi-estructura-container .me-avatar-xl img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* Cuando hay foto, ocultar las iniciales (manejado via clase) */
#mi-estructura-container .me-avatar.has-photo,
#mi-estructura-container .me-pn-avatar.has-photo,
#mi-estructura-container .me-avatar-xl.has-photo {
  background: #ffffff;
  color: transparent;
  font-size: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIXES PIRÁMIDE/JERARQUÍA v3 — auditoría específica del org-tree
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper del org-tree con fondo oscuro (queda claro sobre dashboard claro) */
#mi-estructura-container .me-pyramid-wrap {
  background: #f6f8fa !important;
  border: 1px solid #e8edf2 !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

/* Nombres de personas en la pirámide — color claro explícito */
#mi-estructura-container .me-pn-name {
  color: #0f172a !important;
}

/* Roles en la pirámide — colores fuertes y legibles */
#mi-estructura-container .me-pn-role {
  color: #334155 !important;  /* default fallback */
}
#mi-estructura-container .me-pn-role.me-gm {
  color: #fcd34d !important;  /* dorado claro */
}
#mi-estructura-container .me-pn-role.me-ge {
  color: #5eead4 !important;  /* cyan claro */
}
#mi-estructura-container .me-pn-role.me-cons {
  color: #c4b5fd !important;  /* lavanda — consultor */
}

/* Stats de la pirámide — labels y valores legibles */
#mi-estructura-container .me-pn-stat {
  background: #ffffff !important;
  border: 1px solid #e8edf2 !important;
}
#mi-estructura-container .me-pn-stat-v {
  color: #0f172a !important;
}
#mi-estructura-container .me-pn-stat-l {
  color: #334155 !important;  /* antes #94a3b8 — ahora legible */
}

/* Nodos de la pirámide — borders más visibles */
#mi-estructura-container .me-pyramid-node {
  background: #ffffff !important;
}
#mi-estructura-container .me-pyramid-node.is-gm {
  border-color: #fbbf24 !important;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.10), #ffffff) !important;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.4) !important;
}
#mi-estructura-container .me-pyramid-node.is-ge {
  border-color: #0d9488 !important;
  background: linear-gradient(135deg, rgba(13,148,136, 0.08), #ffffff) !important;
}

/* ─── KPI BIG (Dashboard detalle) — colores claros y contrastados ─── */
#mi-estructura-container .me-kpi-big {
  background: #ffffff !important;
  border: 1px solid #e8edf2 !important;
}
#mi-estructura-container .me-kpi-big-l {
  color: #334155 !important;
}
#mi-estructura-container .me-kpi-big-v {
  color: #0f172a !important;
}

/* ─── Chart cards (donut, line, ranking) ─── */
#mi-estructura-container .me-chart-card {
  background: #ffffff !important;
  border: 1px solid #e8edf2 !important;
  color: #0f172a !important;
}
#mi-estructura-container .me-chart-title {
  color: #0f172a !important;
  font-weight: 700 !important;
}
#mi-estructura-container .me-legend-item {
  color: #334155 !important;
}
#mi-estructura-container .me-legend-num {
  color: #0f172a !important;
  font-weight: 700 !important;
}
#mi-estructura-container .me-rank-row {
  color: #0f172a !important;
}
#mi-estructura-container .me-rank-pos {
  color: #334155 !important;
}
#mi-estructura-container .me-rank-num {
  color: #5eead4 !important;
}
#mi-estructura-container .me-rank-target {
  background: rgba(13,148,136, 0.08) !important;
}

/* ─── Drill header (perfil) — contraste asegurado ─── */
#mi-estructura-container .me-drill-header {
  background: #ffffff !important;
  border: 1px solid #e8edf2 !important;
  color: #0f172a !important;
}
#mi-estructura-container .me-drill-name {
  color: #0f172a !important;
}
#mi-estructura-container .me-drill-contact {
  color: #334155 !important;
}
#mi-estructura-container .me-drill-contact svg {
  color: #5eead4 !important;
}

/* ─── Field grid (perfil) ─── */
#mi-estructura-container .me-field {
  background: #ffffff !important;
  border: 1px solid #e8edf2 !important;
}
#mi-estructura-container .me-field-label {
  color: #334155 !important;
}
#mi-estructura-container .me-field-value {
  color: #0f172a !important;
}

/* ─── PROP CARDS — texto legible ─── */
#mi-estructura-container .me-prop-card {
  background: #ffffff !important;
  border: 1px solid #e8edf2 !important;
}
#mi-estructura-container .me-prop-cli {
  color: #0f172a !important;
}
#mi-estructura-container .me-prop-meta {
  color: #334155 !important;
}
#mi-estructura-container .me-prop-amount {
  color: #34d399 !important;
  font-weight: 700 !important;
}

/* ─── PERSON CARDS (lista) — backgrounds sólidos ─── */
#mi-estructura-container .me-person-card {
  background: #ffffff !important;
  border: 1px solid #e8edf2 !important;
}
#mi-estructura-container .me-person-name {
  color: #0f172a !important;
}
#mi-estructura-container .me-kpi-value {
  color: #0f172a !important;
}