/* ════════════════════════════════════════════════════════════════════
   fract-social.css · TOKENS COMPARTIDOS del clúster social FractAIll
   ────────────────────────────────────────────────────────────────────
   La misma casa en todas: cuenta (home), mensajes, notificaciones, perfil.
   Modo claro + oscuro · el tema viaja por COOKIE fract_theme (.fractaill.com)
   para que sea coherente entre fractaill.com e id.fractaill.com.

   Las 4 páginas usan SOLO estas variables. Nombres = los del home estilo X
   (referencia) para no tener que renombrar nada en su CSS interno.
   ════════════════════════════════════════════════════════════════════ */

/* ─── MODO OSCURO (paleta actual del home · referencia) ─────────────── */
:root,
:root[data-theme="dark"] {
  --accent: #FF7A29;
  --accent-2: #FF9550;
  --accent-deep: #C9551A;
  --accent-soft: rgba(255,122,41,0.12);
  --accent-border: rgba(255,122,41,0.35);

  --bg: #0A0A0D;
  --bg-elev: #101015;
  --surface: #121217;
  --surface-2: #17171e;

  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);

  --text: #F2F2F5;
  --text-soft: #B9B9C6;
  --text-dim: #8A8A98;
  --text-faint: #6A6A78;
  --text-quiet: #7c7c8c;

  --success: #2ECC85;
  --danger: #FF5C4D;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 4px 12px -2px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.55), 0 12px 32px -8px rgba(0,0,0,0.45);

  color-scheme: dark;
}

/* ─── MODO CLARO ────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --accent: #FF7A29;
  --accent-2: #FF6A14;        /* hover claro más profundo para contraste */
  --accent-deep: #C9551A;
  --accent-soft: rgba(255,122,41,0.10);
  --accent-border: rgba(255,122,41,0.32);

  --bg: #FAFAF8;
  --bg-elev: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F4F4F1;

  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.15);

  --text: #17171C;
  --text-soft: #4A4A55;
  --text-dim: #6B6E76;
  --text-faint: #8A8A95;
  --text-quiet: #8A8A95;

  --success: #00A958;
  --danger: #DC2626;

  --shadow-sm: 0 1px 3px rgba(10,10,13,0.06), 0 4px 12px -2px rgba(10,10,13,0.05);
  --shadow-md: 0 4px 14px -2px rgba(10,10,13,0.08), 0 12px 32px -8px rgba(10,10,13,0.07);

  color-scheme: light;
}

/* En claro, el botón naranja usa --accent-2 como hover (más profundo).
   En oscuro --accent-2 es más claro. Quien quiera el hover correcto usa
   var(--accent-hover): */
:root,
:root[data-theme="dark"] { --accent-hover: #FF9550; }
:root[data-theme="light"] { --accent-hover: #E8650F; }

/* ════ Toggle de tema (sol/luna) · compartido ════════════════════════ */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;
  border-radius:999px;
  background:transparent;border:1px solid var(--border);
  color:var(--text-soft);cursor:pointer;
  transition:background .22s,color .22s,border-color .22s,transform .22s;
}
.theme-toggle:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)}
.theme-toggle:active{transform:scale(0.92)}
.theme-toggle svg{width:20px;height:20px;display:block}
/* Mostrar el ícono correcto según el tema activo */
.theme-toggle .ic-sun{display:none}
.theme-toggle .ic-moon{display:block}
:root[data-theme="light"] .theme-toggle .ic-sun{display:block}
:root[data-theme="light"] .theme-toggle .ic-moon{display:none}

/* Variante dentro de la sidebar del home (ítem de nav) */
.snav .theme-toggle{
  width:auto;height:auto;border:none;border-radius:999px;
  gap:16px;padding:11px 16px;font-size:16px;color:var(--text-soft);
  justify-content:flex-start;
}
.snav .theme-toggle:hover{background:rgba(127,127,127,0.10);color:var(--text)}
.snav .theme-toggle svg{width:22px;height:22px}


/* ── Logo SIEMPRE visible en ambos temas (Juan 2026-06-09) ──────────────
   Baldosa naranja con el isotipo blanco dentro · idéntico en claro y oscuro. */
.logo-box{background:linear-gradient(135deg,var(--accent),var(--accent-deep)) !important;border-radius:10px !important;padding:6px !important}
.logo-box img{filter:none !important}