/* ============================================================================
   THOR — ADMIN (Usuarios · Equipos · Inteligencia de Mercado) · Apple Redesign
   100% CSS. Cargado el ÚLTIMO en panel.html (gana cascada). Reversible.
   Usuarios y Equipos usan estilos inline/Tailwind → se sobreescriben con
   !important prefijando por ID de sección. Inteligencia de Mercado ya tiene
   variables tipo Apple; aquí solo se armoniza el acento a naranja de marca.
   No toca HTML ni JS.
   ============================================================================ */

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

/* Títulos de sección homogéneos */
#userSection > h2, #equiposSection > h2 {
  font-family: var(--ad-font) !important;
  font-size: 1.9rem !important; font-weight: 700 !important;
  letter-spacing: -.025em !important; color: var(--ad-text) !important;
  margin: 4px 0 22px !important;
}

/* ============================================================================
   1) USUARIOS
   ============================================================================ */
#userSection #users-panel-container { max-width: 960px !important; font-family: var(--ad-font) !important; }

#userSection .user-card {
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-r-card) !important;
  background: var(--ad-card) !important;
  box-shadow: var(--ad-sh) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  transition: box-shadow .2s ease, transform .15s ease !important;
}
#userSection .user-card:hover { box-shadow: var(--ad-sh-h) !important; }

#userSection .user-row-header { padding: 14px 18px !important; gap: 14px !important; }
#userSection .user-row-header > div[style*="font-weight:700"],
#userSection .user-row-header [style*="font-weight:700"] { color: var(--ad-text) !important; }

/* Selector de rol → pastilla Apple */
#userSection .btn-rol-select {
  padding: 6px 12px !important;
  border: 1px solid var(--ad-border-2) !important;
  border-radius: var(--ad-r-pill) !important;
  background: var(--ad-card-2) !important;
  color: var(--ad-text) !important;
  font-family: var(--ad-font) !important; font-size: 12px !important; font-weight: 600 !important;
  max-width: none !important; cursor: pointer !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
#userSection .btn-rol-select:focus {
  outline: none !important; border-color: var(--ad-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ad-accent) 22%, transparent) !important;
}

/* Botones de acción de fila → circulares/pastilla con color semántico suave */
#userSection .btn-camara,
#userSection .btn-bloquear,
#userSection .btn-eliminar {
  width: 34px !important; height: 34px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important; border: 1px solid var(--ad-border-2) !important;
  font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important;
  transition: transform .1s ease, box-shadow .15s ease, background .15s ease !important;
}
#userSection .btn-camara:hover,
#userSection .btn-bloquear:hover,
#userSection .btn-eliminar:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0,0,0,.12) !important; }
#userSection .btn-eliminar {
  background: color-mix(in srgb, var(--ad-red) 10%, var(--ad-card)) !important;
  color: var(--ad-red) !important; border-color: color-mix(in srgb, var(--ad-red) 34%, transparent) !important;
}

/* Panel de permisos expandible */
#userSection [id^="permisos-panel-"] {
  border-top: 1px solid var(--ad-border) !important;
  background: var(--ad-card-2) !important;
  padding: 18px 20px !important;
}
#userSection .perm-search {
  padding: 7px 12px !important; border: 1px solid var(--ad-border-2) !important;
  border-radius: var(--ad-r-el) !important; background: var(--ad-card) !important;
  color: var(--ad-text) !important; font-family: var(--ad-font) !important; font-size: 12px !important;
}
#userSection .perm-search:focus {
  outline: none !important; border-color: var(--ad-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ad-accent) 22%, transparent) !important;
}
#userSection .btn-reset-permisos,
#userSection .btn-grupo-activar,
#userSection .btn-grupo-desactivar {
  border: 1px solid var(--ad-border-2) !important;
  border-radius: var(--ad-r-pill) !important;
  background: var(--ad-card) !important; color: var(--ad-text-2) !important;
  font-family: var(--ad-font) !important; font-weight: 600 !important; cursor: pointer !important;
  transition: background .15s ease, border-color .15s ease !important;
}
#userSection .btn-reset-permisos:hover,
#userSection .btn-grupo-activar:hover,
#userSection .btn-grupo-desactivar:hover {
  background: color-mix(in srgb, var(--ad-text-2) 8%, var(--ad-card)) !important;
  border-color: var(--ad-text-3) !important;
}
/* Filas de permiso (label con checkbox) */
#userSection [id^="permisos-content-"] label {
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-r-el) !important;
  background: var(--ad-card) !important;
  transition: border-color .15s ease, background .15s ease !important;
}
#userSection [id^="permisos-content-"] label:hover { border-color: var(--ad-accent) !important; }
#userSection [id^="permisos-content-"] input[type="checkbox"] { accent-color: var(--ad-accent) !important; }

/* ============================================================================
   2) EQUIPOS
   ============================================================================ */
#equiposSection { font-family: var(--ad-font) !important; }

/* Tarjetas de equipo (Tailwind bg-white border rounded-xl) */
#equiposSection #equiposGrid > div {
  background: var(--ad-card) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-r-card) !important;
  box-shadow: var(--ad-sh) !important;
  transition: box-shadow .2s ease, transform .15s ease !important;
}
#equiposSection #equiposGrid > div:hover { box-shadow: var(--ad-sh-h) !important; transform: translateY(-2px) !important; }
#equiposSection #equiposGrid h4 { color: var(--ad-text) !important; letter-spacing: -.01em !important; }

/* Bloque de delegación → tarjeta cálida coherente con el acento */
#equiposSection #delegacionSection {
  background: color-mix(in srgb, var(--ad-accent) 8%, var(--ad-card)) !important;
  border: 1px solid color-mix(in srgb, var(--ad-accent) 28%, transparent) !important;
  border-radius: var(--ad-r-card) !important;
}
#equiposSection #delegacionSection h3 { color: color-mix(in srgb, var(--ad-accent) 75%, #000) !important; }
[data-theme="dark"] #equiposSection #delegacionSection h3 { color: var(--ad-accent) !important; }

/* Inputs/selects del formulario de equipo y delegación */
#equiposSection select,
#equiposSection input[type="text"],
#equiposSection textarea {
  border-radius: var(--ad-r-el) !important;
  border: 1px solid var(--ad-border-2) !important;
  background: var(--ad-card) !important; color: var(--ad-text) !important;
  font-family: var(--ad-font) !important;
}
#equiposSection select:focus,
#equiposSection input[type="text"]:focus,
#equiposSection textarea:focus {
  outline: none !important; border-color: var(--ad-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ad-accent) 22%, transparent) !important;
}

/* ── BOTONES: estilo pastilla Apple para TODOS los botones de la sección ──
   Una regla global de style.css (.section button:not(...)) los pinta a todos
   con degradado plano. Aquí les damos el acabado pastilla y diferenciamos
   primarios (naranja marca) de secundarios/cancelar (neutros). */
#equiposSection button {
  padding: 9px 18px !important;
  border-radius: var(--ad-r-pill) !important;
  font-family: var(--ad-font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: transform .1s ease, filter .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
/* Primarios (crear equipo, activar delegación, guardar, añadir) → naranja marca */
#equiposSection #btnNuevoEquipo,
#equiposSection #btnCrearDelegacion,
#equiposSection #formEquipo button[type="submit"],
#equiposSection #btnConfirmarAddMember {
  background: linear-gradient(135deg, #f0974a 0%, var(--ad-accent) 100%) !important;
  background-image: linear-gradient(135deg, #f0974a 0%, var(--ad-accent) 100%) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 14px rgba(232,135,50,.28) !important;
}
#equiposSection #btnNuevoEquipo:hover,
#equiposSection #btnCrearDelegacion:hover,
#equiposSection #formEquipo button[type="submit"]:hover,
#equiposSection #btnConfirmarAddMember:hover {
  transform: translateY(-1px) !important; filter: saturate(1.08) !important;
  box-shadow: 0 8px 22px rgba(232,135,50,.38) !important;
}
/* Secundarios / Cancelar (llevan bg-gray-* en Tailwind) → neutros con borde */
#equiposSection button[class*="bg-gray-"],
#equiposSection #btnCancelarAddMember,
#equiposSection #equipoFormContainer button[onclick*="cerrar"] {
  background: var(--ad-card) !important;
  background-image: none !important;
  border: 1px solid var(--ad-border-2) !important;
  color: var(--ad-text) !important;
  box-shadow: none !important;
}
#equiposSection button[class*="bg-gray-"]:hover,
#equiposSection #btnCancelarAddMember:hover {
  background: color-mix(in srgb, var(--ad-text-2) 8%, var(--ad-card)) !important;
  border-color: var(--ad-text-3) !important;
  transform: translateY(-1px) !important;
}
/* Iconos de tarjeta (editar/eliminar equipo, añadir/quitar miembro) →
   botones-texto sutiles, sin la pastilla naranja global. */
#equiposSection #equiposGrid button {
  padding: 4px 8px !important;
  border-radius: 8px !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 12px !important;
}
#equiposSection #equiposGrid button[data-action="añadir-miembro"] {
  color: var(--ad-blue) !important; font-weight: 600 !important;
}
#equiposSection #equiposGrid button[data-action="añadir-miembro"]:hover {
  background: color-mix(in srgb, var(--ad-blue) 10%, transparent) !important;
}
#equiposSection #equiposGrid button[data-action="eliminar-equipo"],
#equiposSection #equiposGrid button[data-action="quitar-miembro"]:hover { color: var(--ad-red) !important; }
#equiposSection #equiposGrid button[data-action]:hover { transform: none !important; }

/* Contenedor de formulario y modal añadir miembro */
#equiposSection #equipoFormContainer,
#addMemberModal > div {
  background: var(--ad-card) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--ad-sh-h) !important;
}
#addMemberModal > div { box-shadow: 0 24px 70px rgba(0,0,0,.35) !important; }

/* ============================================================================
   3) INTELIGENCIA DE MERCADO — armonizar acento a naranja de marca
   (ya usa variables tipo Apple; solo re-tintamos acentos y pulimos detalles)
   ============================================================================ */
#inteligenciaMercadoSection { font-family: var(--ad-font) !important; }
#inteligenciaMercadoSection .im-header h2 {
  font-size: 1.9rem !important; font-weight: 700 !important;
  letter-spacing: -.025em !important; color: var(--ad-text) !important;
}

/* Tabs: pastilla activa naranja en vez del azul por defecto */
#inteligenciaMercadoSection .im-tabs {
  background: color-mix(in srgb, var(--ad-text-2) 12%, var(--ad-card)) !important;
  border-radius: var(--ad-r-pill) !important; padding: 4px !important;
  border: 1px solid var(--ad-border) !important; gap: 3px !important;
  display: inline-flex !important; flex-wrap: wrap !important;
}
#inteligenciaMercadoSection .im-tab-button {
  border: none !important; background: transparent !important;
  border-radius: var(--ad-r-pill) !important;
  color: var(--ad-text-2) !important; font-weight: 600 !important;
  padding: 8px 16px !important; transition: background .15s ease, color .15s ease, box-shadow .15s ease !important;
}
#inteligenciaMercadoSection .im-tab-button:hover { color: var(--ad-text) !important; }
#inteligenciaMercadoSection .im-tab-button.active {
  background: var(--ad-card) !important; color: var(--ad-accent) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.12) !important;
}

/* Tarjetas KPI: acento superior naranja de marca al de "ratio/total" */
#inteligenciaMercadoSection .im-stat-card {
  border-radius: var(--ad-r-card) !important;
  box-shadow: var(--ad-sh) !important;
  transition: transform .15s ease, box-shadow .2s ease !important;
}
#inteligenciaMercadoSection .im-stat-card:hover { transform: translateY(-2px) !important; box-shadow: var(--ad-sh-h) !important; }
#inteligenciaMercadoSection .im-stat-card.ratio .im-stat-value,
#inteligenciaMercadoSection .im-stat-card.total .im-stat-value { color: var(--ad-accent) !important; }

/* Botón primario IM → naranja marca */
#inteligenciaMercadoSection .im-btn-primary,
#inteligenciaMercadoSection .im-modal-button.primary,
#inteligenciaMercadoSection .im-upload-button {
  background: linear-gradient(135deg, #f0974a 0%, var(--ad-accent) 100%) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 14px rgba(232,135,50,.28) !important;
}
/* Zona de subida: borde acento al hover/drag */
#inteligenciaMercadoSection .im-upload-zone:hover,
#inteligenciaMercadoSection .im-drop-zone.dragover {
  border-color: var(--ad-accent) !important;
  background: color-mix(in srgb, var(--ad-accent) 6%, transparent) !important;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  #userSection .user-card:hover,
  #equiposSection #equiposGrid > div:hover,
  #inteligenciaMercadoSection .im-stat-card:hover { transform: none !important; }
}