/* ── Manrope — tipografía con personalidad (evita look "AI genérico") ──── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {

  /* -----------------------------------------------------------------------
   * Paleta de marca — Sosemant
   * Derivada del logo: rojo principal, crema, verde hoja
   * ----------------------------------------------------------------------- */

  /* Rojo institucional (logo) */
  --color-primary:          #B72424;
  --color-primary-hover:    #9A1818;
  --color-primary-dark:     #7A1010;
  --color-primary-light:    #FCE8E8;
  --color-primary-50:       #FFF5F5;

  /* Crema/Wheat (del cuerpo del extintor en el logo) */
  --color-cream:            #F5EBE0;
  --color-cream-dark:       #E5D5C0;

  /* Verde hoja (acento ecológico) */
  --color-leaf:             #6BA85C;
  --color-leaf-hover:       #588A4A;
  --color-leaf-light:       #E8F3E2;

  /* Secundarios complementarios (para gráficos / estados informativos) */
  --color-secondary:        #4A4A4A;
  --color-accent:           #6BA85C;   /* alias del verde hoja */
  --color-accent-hover:     #588A4A;

  /* Estados — semánticos y consistentes */
  --color-success:          #16a34a;
  --color-success-bg:       #dcfce7;
  --color-warning:          #d97706;
  --color-warning-bg:       #fef3c7;
  --color-danger:           #B72424;
  --color-danger-bg:        #FCE8E8;
  --color-info:             #1e6091;
  --color-info-bg:          #e0eef9;

  /* Texto */
  --color-text:             #1a1a1a;
  --color-text-secondary:   #4a4a4a;
  --color-text-muted:       #8a8a8a;
  --color-text-inverse:     #ffffff;

  /* Fondos — SIEMPRE blanco/claro (nunca negro) */
  --color-bg:               #fafafa;     /* gris muy claro, casi blanco */
  --color-bg-soft:          #f5f3f0;     /* warm off-white (sutil tono cream) */
  --color-bg-card:          #ffffff;
  --color-bg-hover:         #f8f6f3;
  --color-bg-overlay:       rgba(26, 26, 26, 0.55);

  /* Bordes */
  --color-border:           #e8e2db;     /* warm border, sutil tono cream */
  --color-border-strong:    #d4cdc4;
  --color-border-focus:     #B72424;

  /* -----------------------------------------------------------------------
   * Tipografía — Manrope (más carácter que Inter)
   * ----------------------------------------------------------------------- */

  --font-sans:  'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */

  --font-normal:  400;
  --font-medium:  500;
  --font-semi:    600;
  --font-bold:    700;
  --font-extra:   800;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.75;

  /* -----------------------------------------------------------------------
   * Espaciado — escala 4px
   * ----------------------------------------------------------------------- */

  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-2-5:  0.625rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;

  /* -----------------------------------------------------------------------
   * Bordes / Radios — un punto más definidos para look propio
   * ----------------------------------------------------------------------- */

  --radius-sm:   6px;
  --radius:      10px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  22px;
  --radius-full: 9999px;

  /* -----------------------------------------------------------------------
   * Sombras — más cálidas (tinte rojo sutil en lugar de gris frío)
   * ----------------------------------------------------------------------- */

  --shadow-xs:  0 1px 2px rgba(183, 36, 36, 0.04);
  --shadow-sm:  0 1px 3px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow:     0 4px 8px rgba(26, 26, 26, 0.06), 0 2px 4px rgba(26, 26, 26, 0.04);
  --shadow-md:  0 8px 18px rgba(26, 26, 26, 0.08), 0 4px 8px rgba(26, 26, 26, 0.04);
  --shadow-lg:  0 16px 36px rgba(26, 26, 26, 0.10), 0 8px 16px rgba(26, 26, 26, 0.05);
  --shadow-xl:  0 28px 56px rgba(26, 26, 26, 0.14);
  --shadow-brand: 0 8px 24px rgba(183, 36, 36, 0.25);   /* sombra "marca" para CTAs */

  /* -----------------------------------------------------------------------
   * Layout
   * ----------------------------------------------------------------------- */

  --sidebar-width:        240px;
  --sidebar-collapsed:    64px;
  --header-height:        64px;
  --content-max-width:    1280px;

  /* -----------------------------------------------------------------------
   * Transiciones
   * ----------------------------------------------------------------------- */

  --transition-fast:    all 0.15s ease;
  --transition:         all 0.2s ease;
  --transition-slow:    all 0.3s ease;

  /* -----------------------------------------------------------------------
   * Z-index
   * ----------------------------------------------------------------------- */

  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;
}

/* ─────────────────────────────────────────────────────────────────────────
 * "Icon tile" — el componente base de iconos Sosemant
 *   Fondo de color SÓLIDO (sin transparencia) + glyph BLANCO encima.
 *   Reemplaza el patrón anterior de bg-light + glyph-color.
 * ───────────────────────────────────────────────────────────────────────── */
.sose-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: #ffffff;
  flex-shrink: 0;
  background: var(--color-primary);   /* default = marca */
  box-shadow: 0 4px 10px rgba(183, 36, 36, 0.18);
}
.sose-icon-tile svg { stroke-width: 2; }

.sose-icon-tile--sm  { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.sose-icon-tile--lg  { width: 56px; height: 56px; border-radius: var(--radius-lg); }
.sose-icon-tile--xl  { width: 72px; height: 72px; border-radius: var(--radius-xl); }

/* Variantes de color — todas con bg sólido + glyph blanco */
.sose-icon-tile--primary   { background: var(--color-primary);  box-shadow: 0 4px 10px rgba(183, 36, 36, 0.20); }
.sose-icon-tile--dark      { background: var(--color-primary-dark); box-shadow: 0 4px 10px rgba(122, 16, 16, 0.20); }
.sose-icon-tile--leaf      { background: var(--color-leaf);     box-shadow: 0 4px 10px rgba(107, 168, 92, 0.20); }
.sose-icon-tile--success   { background: var(--color-success);  box-shadow: 0 4px 10px rgba(22, 163, 74, 0.20); }
.sose-icon-tile--warning   { background: var(--color-warning);  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.20); }
.sose-icon-tile--danger    { background: var(--color-danger);   box-shadow: 0 4px 10px rgba(183, 36, 36, 0.20); }
.sose-icon-tile--info      { background: var(--color-info);     box-shadow: 0 4px 10px rgba(30, 96, 145, 0.20); }
.sose-icon-tile--neutral   { background: var(--color-secondary); box-shadow: 0 4px 10px rgba(74, 74, 74, 0.18); }
.sose-icon-tile--cream     { background: var(--color-cream-dark); color: var(--color-primary); }