/* =========================================================================
   FidelyT — Design tokens (contrato visual único del panel web de negocios)
   =========================================================================
   Fuente de verdad: DESIGN_SYSTEM.md (raíz del repo).

   Este archivo se carga en TODAS las páginas del panel vía
   businesses/templates/partials/design_head.html, antes que cualquier CSS
   de página. Todo el resto del CSS debe consumir estas variables en vez de
   colores sueltos.

   Reglas duras que este archivo materializa:
     - Tema oscuro con fondo NEGRO (--bg) y superficies en Púrpura
       (--surface-1). Las tarjetas resaltan sobre el negro con --shadow.
     - Tipografía Rubik en todo el UI (títulos, cuerpo, labels, botones).
     - Naranja (--accent) SOLO para destellos/realces. Nunca un botón.
     - Botón primario = morado --primary. Uno solo por vista.
     - Cards planas: sin degradados ni brillos.
   ========================================================================= */

:root{
  /* Superficies — tema oscuro sobre NEGRO */
  --bg:#131017;            /* Negro cálido — fondo base de toda la app */
  --surface-1:#332E39;     /* Púrpura — tarjetas / paneles */
  --surface-2:#3E3846;     /* elevado / hover */
  --sidebar:#1C1920;       /* barra lateral: sólido, más oscuro que las cards */
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.18);

  /* Texto */
  --text:#F5F5F5;          /* principal (Off-White) */
  --text-muted:#C4B4D7;    /* secundario (Lila) */
  --text-dim:#8B85A0;      /* hints / deshabilitado */

  /* Morados (llevan la UI) */
  --primary:#474B98;       /* Uva — BOTÓN PRIMARIO */
  --primary-hover:#565BB0;
  --brand:#3D2F82;         /* Morado — nav activo, acentos de marca */
  --violet:#7A76B4;        /* apoyo / gráficas */
  --lilac:#C4B4D7;

  /* Destello (marca) */
  --accent:#F47400;        /* Naranja — SOLO destellos/realces, NUNCA botones */
  --accent-soft:#FFC57E;   /* Albaricoque — realces suaves, badges */

  /* Colores de sistema */
  --success:#45C486;
  --warning:#FFC57E;
  --danger:#F26D6D;
  --info:#7A76B4;

  --radius:16px; --radius-sm:11px;

  /* ---- Derivados (no son parte del contrato, pero evitan colores sueltos) --
     Se declaran aquí para que ninguna hoja de estilo tenga que inventar un
     rgba() nuevo cada vez que necesita un fondo translúcido o un estado. */
  --surface-3:#4A4353;              /* hover sobre --surface-2 */
  --overlay:rgba(10,8,12,.76);      /* backdrop de modales */
  --shadow-sm:0 2px 8px rgba(0,0,0,.22);
  /* Sobre negro las tarjetas necesitan sombra para despegarse del fondo:
     es lo que les da el relieve, no un degradado ni un brillo. */
  --shadow:0 6px 22px rgba(0,0,0,.30);

  --primary-soft:rgba(71,75,152,.18);
  --success-soft:rgba(69,196,134,.14);
  --danger-soft:rgba(242,109,109,.14);
  --warning-soft:rgba(255,197,126,.14);
  --info-soft:rgba(122,118,180,.16);
  --accent-soft-bg:rgba(244,116,0,.14);

  --font:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* =========================================================================
   Base global
   ========================================================================= */

html{
  background-color:var(--bg);
}

body{
  background-color:var(--bg);
  color:var(--text);
  font-family:var(--font);
}

/* Rubik en TODO el UI. Se excluyen los iconos (Font Awesome usa su propia
   familia vía ::before y se rompería si se le fuerza otra). */
body,
button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6,
p, a, span, div, label, li, td, th, legend, caption{
  font-family:var(--font);
}

.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
[class^="fa-"], [class*=" fa-"]{
  font-family:"Font Awesome 6 Free","Font Awesome 6 Brands";
}

/* =========================================================================
   Primitivas reutilizables
   -------------------------------------------------------------------------
   Componentes nuevos deben usar estas clases en vez de redefinir botones o
   tarjetas por página. Ver DESIGN_SYSTEM.md §Botones y §Cards.
   ========================================================================= */

/* ---- Cards planas: sin degradado ni brillo. Sobre el fondo negro llevan
       sombra suave, que es lo que las separa del fondo. ---- */
.fy-card{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
}

.fy-card--flush{ padding:0; }

/* ---- Botones ---- */
.fy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 22px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  font-family:var(--font);
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Primario: morado Uva, texto blanco. UNO por vista. */
.fy-btn--primary{
  background:var(--primary);
  color:#fff;
}
.fy-btn--primary:hover{ background:var(--primary-hover); color:#fff; }

/* Secundario: neutro elevado. */
.fy-btn--secondary{
  background:var(--surface-2);
  color:var(--text);
  border-color:var(--border);
}
.fy-btn--secondary:hover{ background:var(--surface-3); }

/* Terciario: contorno. */
.fy-btn--outline{
  background:transparent;
  color:var(--text);
  border-color:var(--border-strong);
}
.fy-btn--outline:hover{ background:var(--surface-2); }

/* Cuaternario: solo texto. */
.fy-btn--ghost{
  background:transparent;
  color:var(--text-muted);
  padding-left:8px;
  padding-right:8px;
}
.fy-btn--ghost:hover{ color:var(--text); }

/* Destructivo: se reserva para borrar/cancelar de verdad. */
.fy-btn--danger{
  background:transparent;
  color:var(--danger);
  border-color:var(--danger);
}
.fy-btn--danger:hover{ background:var(--danger-soft); }

.fy-btn--block{ width:100%; }

.fy-btn:disabled,
.fy-btn[aria-disabled="true"]{
  opacity:.5;
  cursor:not-allowed;
}

/* ---- Badges / píldoras de estado ---- */
.fy-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  border:1px solid transparent;
}
.fy-badge--success{ background:var(--success-soft); color:var(--success); border-color:var(--success); }
.fy-badge--warning{ background:var(--warning-soft); color:var(--warning); border-color:var(--warning); }
.fy-badge--danger{  background:var(--danger-soft);  color:var(--danger);  border-color:var(--danger); }
.fy-badge--info{    background:var(--info-soft);    color:var(--lilac);   border-color:var(--info); }
/* Único uso "de marca" del naranja: realce, nunca acción. */
.fy-badge--accent{  background:var(--accent-soft-bg); color:var(--accent-soft); border-color:var(--accent); }
.fy-badge--neutral{ background:var(--surface-2); color:var(--text-muted); border-color:var(--border); }

/* ---- Jerarquía tipográfica: por peso y tamaño, no por color ---- */
.fy-title{ font-size:26px; font-weight:700; color:var(--text); line-height:1.25; }
.fy-subtitle{ font-size:19px; font-weight:600; color:var(--text); line-height:1.3; }
.fy-label{ font-size:13px; font-weight:600; color:var(--text-muted); letter-spacing:.02em; }
.fy-hint{ font-size:13px; font-weight:400; color:var(--text-dim); }