/* ════════════════════════════════════════════════════════════
   CENTRAL DE ÁNGELES — COMPONENTS · Botones y toggles compactos
   ⚠ Consume css/tokens.css. Parte del set de componentes por dominio.
   Ver css/components/_index.css para el mapa completo.
   ════════════════════════════════════════════════════════════ */

/* ── BOTONES ───────────────────────────────────────────────────────────
   UN SOLO SISTEMA: todo botón es  .btn + tamaño + variante.

   TAMAÑOS:   .btn-xs   (fila/acción compacta)
              .btn-sm   (herramienta, export)
              .btn-md   (acción de página estándar)
              .btn-lg   (CTA grande)

   VARIANTES: .btn-primary   fill azul (acción principal)
              .btn-gps       fill verde
              .btn-outline   contorno sobre surface-2
              .btn-soft      tonal sobre surface-3 (acciones de fila/tabla,
                             export). Modificador .is-chat → hover azul-info.
              .btn-tint      relleno electric-light que se llena al hover
                             (botón "Selec." de fila).
              .btn-ghost     transparente
              .btn-danger    rojo tenue

   HELPERS:   .btn-tap  amplía el área de toque (~44px) sin cambiar el visual;
              úsalo en botones diminutos aislados (ej. "Selec." en su celda).

   Ejemplos:
     <button type="button" class="btn btn-md btn-primary">Guardar</button>
     <button type="button" class="btn btn-xs btn-soft">✏ Editar</button>
     <button type="button" class="btn btn-xs btn-soft is-chat">💬 Chat</button>
     <button type="button" class="btn btn-xs btn-tint btn-tap">Selec.</button>
     <button type="button" class="btn btn-sm btn-soft">📤 Exportar</button>

   NO son .btn (componentes propios, documentados en sus archivos):
     .map-btn/.filter-btn (segmented/filtros, aquí abajo), .pag-btn
     (tables.css), .map-ctrl-btn (map.css), tabs (.tab, cards.css),
     enlace-botón (.feed-link, .auth-link). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn-xs { font-size: var(--text-xs); padding: 3px 8px;   border-radius: var(--radius-sm); gap: 4px; }
.btn-sm { font-size: var(--text-sm); padding: 6px 14px;  border-radius: var(--radius-md); }
.btn-md { font-size: var(--text-md); padding: 10px 20px; border-radius: var(--radius-md); }
.btn-lg { font-size: var(--text-lg); padding: 14px 28px; border-radius: var(--radius-lg); }

.btn-primary { background: var(--electric); color: var(--text-on-accent); box-shadow: var(--shadow-el); }
.btn-primary:hover { background: var(--electric-hover); transform: translateY(-1px); }

.btn-gps { background: var(--gps); color: var(--bg); box-shadow: var(--shadow-gps); }
.btn-gps:hover { background: var(--gps-hover); transform: translateY(-1px); }

.btn-outline {
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-sm);
}
.btn-outline:hover {
  border-color: var(--electric);
  color: var(--electric-text);
  background: var(--electric-light);
}

/* Tonal — acciones de fila/tabla y herramientas (reemplaza .btn-action/.btn-export) */
.btn-soft {
  background: var(--surface-3);
  color: var(--text-3);
  border: 1px solid var(--border-1);
}
.btn-soft:hover {
  background: var(--electric-light);
  color: var(--electric-text);
  border-color: var(--electric);
}
.btn-soft.is-chat:hover {
  background: var(--info-light);
  color: var(--info-text);
  border-color: var(--info-border);
}

/* Tint — "Selec." de fila: tinte azul que se llena al hover (reemplaza .btn-selec) */
.btn-tint {
  background: var(--electric-light);
  color: var(--electric-text);
  border: 1px solid var(--electric-border);
  font-weight: 700;
}
.btn-tint:hover { background: var(--electric); color: var(--text-on-accent); border-color: var(--electric); }

.btn-ghost { background: transparent; color: var(--text-3); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text-1); }

.btn-danger {
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}
.btn-danger:hover { opacity: 0.85; }

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Área de toque ampliada (~44px) sin cambiar el visual. Úsalo en botones
   diminutos aislados; NO en filas de botones pegados (se solaparían). */
.btn-tap { position: relative; }
.btn-tap::after { content: ''; position: absolute; inset: -9px -6px; }


/* Toggle compacto (chip) — base compartida por el segmented control del mapa
   (.map-btn) y la barra de filtros (.filter-btn); eran idénticos. Ver la
   taxonomía de botones al inicio de este archivo. */
.map-btn,
.filter-btn {
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-body);
}
.map-btn:hover,
.filter-btn:hover { color: var(--text-1); border-color: var(--electric); }
.map-btn.active,
.filter-btn.active {
  background: var(--electric-light);
  color: var(--electric-text);
  border-color: var(--electric);
}

/* Contenedor de acciones de fila (Panel de Control, CRUDs).
   Markup: <div class="row-actions">
             <button type="button" class="btn btn-xs btn-soft">✏ Editar</button> … */
.row-actions { display: flex; gap: 4px; align-items: center; }