/**
 * ============================================================================
 * WABIZ DESIGN SYSTEM v2.0 ("WhatsApp Comfort — Light & Dark Edition")
 * ============================================================================
 * Sistema tipográfico y cromático oficial para Wabiz (Dashboard Maestro + CRM).
 * Diseñado con la ergonomía visual y familiaridad de WhatsApp Web / Business
 * tanto en Modo Claro (Light) como en Modo Oscuro (Dark) para brindar máximo
 * confort visual a los clientes y operadores durante jornadas prolongadas.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root,
[data-theme="light"] {
  /* Tipografía Oficial Wabiz */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Superficies y Fondos Modo Claro (Confort Visual WhatsApp Light) */
  --bg-root: #F0F2F5;          /* Gris perla neutro de WhatsApp Web */
  --bg-main: #EFEAE2;          /* Arena cálido icónico del lienzo de chat WhatsApp */
  --bg-white: #FFFFFF;         /* Tarjetas, paneles principales y burbujas recibidas */
  --bg-surface: #FFFFFF;       /* Superficie de lista de chats y paneles laterales */
  --bg-elevated: #FFFFFF;      /* Modales, menús desplegables y popovers */
  --bg-sidebar: #111B21;       /* Barra de navegación principal en pizarra WhatsApp */
  --bg-hover: #F5F6F6;         /* Hover suave en filas de contactos */
  --bg-active: #E9EDEF;        /* Conversación activa en la lista lateral */
  --bg-nav-hover: #F0F2F5;     /* Hover en pestañas y navegación */
  --bg-nav-active: #D9FDD3;    /* Item activo con tinte verde menta suave */
  --bg-input: #FFFFFF;         /* Barra de escritura de mensajes */
  --bg-card: #FFFFFF;          /* Tarjetas de KPIs y embudo Kanban */
  --header-bg: #F0F2F5;        /* Cabecera superior estilo WhatsApp Web */

  /* Jerarquía de Texto Modo Claro */
  --text-primary: #111B21;     /* Carbón-pizarra oficial de WhatsApp (sin deslumbramiento) */
  --text-secondary: #54656F;   /* Gris pizarra para subtítulos y previsualizaciones */
  --text-muted: #667781;       /* Gris suave para horas, metadatos y placeholders */
  --text-inverse: #FFFFFF;     /* Texto sobre botones primarios y sidebar oscuro */

  /* Colores Extraídos del Logotipo Maestro WaBiz */
  --wabiz-emerald: #00A44E;    /* Verde oficial del isotipo, ojos del robot y texto 'Biz' */
  --wabiz-mint: #64E798;       /* Verde menta claro de la tarjeta de fondo (capa 3D) */
  --wabiz-glow: #00B25E;       /* Verde esmeralda de la tarjeta media */
  --wabiz-dark: #0D1C23;       /* Carbón pizarra profundo del contorno y texto 'Wa' */
  --wabiz-white: #FFFFFF;      /* Blanco puro de la tarjeta frontal y puntos suspensivos */

  /* Acentos de Marca Wabiz (Gama WhatsApp Emerald & Deep Teal) */
  --accent: #00A44E;           /* Wabiz Emerald Principal */
  --accent-primary: #00A44E;   /* Botones primarios, badges activos, envíos */
  --accent-teal: #008069;      /* Deep WhatsApp Business Teal para cabeceras y énfasis */
  --accent-hover: #008069;     /* Estado Hover sobre botones esmeralda */
  --accent-bright: #25D366;    /* Verde vibrante para indicadores en vivo y CTAs destacados */
  --accent-secondary: #0D9488; /* Jade Teal para badges de Inteligencia Artificial (🤖 IA) */
  --accent-spark: #D97706;     /* Ámbar Fintech para Pagos QR conciliados y notas internas */
  --accent-blue: #0284C7;      /* Azul informativo y enlaces */
  --brand-gradient: linear-gradient(135deg, #008069 0%, #00A884 55%, #25D366 100%);
  --spark-gradient: linear-gradient(135deg, #D97706 0%, #F59E0B 50%, #FBBF24 100%);

  /* Bordes y Scrollbars Modo Claro */
  --border: #E9EDEF;
  --border-color: #E9EDEF;
  --scrollbar-color: #CED0D1;

  /* Estados Semánticos */
  --status-success: #00A884;
  --status-warning: #D97706;
  --status-error: #EA0038;
  --status-info: #53BDEB;

  /* Burbujas de Chat CRM Wabiz (Modo Claro — Ergonomía WhatsApp) */
  --wa-bubble-received: #FFFFFF;
  --wa-bubble-sent: #D9FDD3;           /* Verde menta pastel oficial de WhatsApp Light */
  --wa-bubble-received-text: #111B21;
  --wa-bubble-sent-text: #111B21;
  --wa-time-received: #667781;
  --wa-time-sent: #667781;
  --wa-double-check: #53BDEB;          /* Doble check azul cielo oficial de WhatsApp */
}

.dark,
[data-theme="dark"] {
  /* Superficies y Fondos Modo Oscuro (Confort Nocturno WhatsApp Dark) */
  --bg-root: #111B21;          /* Pizarra nocturna oficial de WhatsApp Desktop */
  --bg-main: #0B141A;          /* Lienzo oscuro profundo del área de mensajes */
  --bg-white: #202C33;         /* Superficie de paneles, cabeceras y tarjetas */
  --bg-surface: #111B21;       /* Lista lateral de conversaciones */
  --bg-elevated: #2A3942;      /* Modales, menús desplegables y barra de búsqueda */
  --bg-sidebar: #0B141A;       /* Barra lateral maestra */
  --bg-hover: #202C33;         /* Hover suave en lista de chats */
  --bg-active: #2A3942;        /* Chat seleccionado en modo oscuro */
  --bg-nav-hover: #202C33;     /* Hover en navegación */
  --bg-nav-active: rgba(0, 168, 132, 0.20);
  --bg-input: #2A3942;         /* Caja de escritura en modo oscuro */
  --bg-card: #202C33;          /* Tarjetas de métricas y contenedores */
  --header-bg: #202C33;        /* Cabecera superior del chat y paneles */

  /* Jerarquía de Texto Modo Oscuro */
  --text-primary: #E9EDEF;     /* Blanco suave antirreflejo de WhatsApp Dark */
  --text-secondary: #8696A0;   /* Gris azulado descansado para textos secundarios */
  --text-muted: #667781;       /* Metadatos, timestamps y estados inactivos */
  --text-inverse: #111B21;

  /* Colores Extraídos del Logotipo Maestro WaBiz */
  --wabiz-emerald: #00A44E;
  --wabiz-mint: #64E798;
  --wabiz-glow: #00B25E;
  --wabiz-dark: #0D1C23;
  --wabiz-white: #FFFFFF;

  /* Acentos Luminosos Modo Oscuro */
  --accent: #00A44E;           /* Wabiz Emerald */
  --accent-primary: #00A44E;
  --accent-teal: #00A884;
  --accent-hover: #06CF9C;     /* Esmeralda luminoso al pasar el cursor */
  --accent-bright: #25D366;
  --accent-secondary: #2DD4BF; /* Jade luminoso para badges de IA */
  --accent-spark: #FBBF24;     /* Oro/Ámbar para Pagos QR verificados */
  --accent-blue: #53BDEB;

  /* Bordes y Divisores Modo Oscuro */
  --border: #222E35;
  --border-color: #222E35;
  --scrollbar-color: #374045;

  /* Estados Semánticos Modo Oscuro */
  --status-success: #00A884;
  --status-warning: #F59E0B;
  --status-error: #F15C6D;
  --status-info: #53BDEB;

  /* Burbujas de Chat CRM Wabiz (Modo Oscuro — Ergonomía WhatsApp Dark) */
  --wa-bubble-received: #202C33;       /* Pizarra oscura para mensajes entrantes */
  --wa-bubble-sent: #005C4B;           /* Verde bosque profundo oficial de WhatsApp Dark */
  --wa-bubble-received-text: #E9EDEF;
  --wa-bubble-sent-text: #E9EDEF;
  --wa-time-received: #8696A0;
  --wa-time-sent: rgba(233, 237, 239, 0.68);
  --wa-double-check: #53BDEB;          /* Doble check azul cielo oficial de WhatsApp */
}

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

h1, h2, h3, h4, .brand-heading {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.mono-metric, code, pre {
  font-family: var(--font-mono);
}