/* base.css — CRM Everest (Grupo Pixelia)
   Reset, variables de diseño y tipografía. Paleta oficial Everest. */

:root {
    /* Color — Paleta Everest */
    --color-primario:  #1498D3;   /* azul primario */
    --color-marino:    #1B223F;   /* encabezados, texto fuerte */
    --color-blanco:    #FFFFFF;
    --color-fondo:     #F4F6F9;    /* fondos */
    --color-borde:     #E2E8F0;    /* bordes */
    --color-secundario:#64748B;    /* texto secundario */

    /* Texto */
    --color-texto:     var(--color-marino);
    --color-panel:     var(--color-blanco);

    /* Estados */
    --color-exito:     #16a34a;
    --color-error:     #dc2626;
    --color-aviso:     #d97706;
    --color-info:      var(--color-primario);

    /* Tipografía corporativa elegante
       Títulos/marca: Spectral (serif refinada) · UI: Public Sans · Datos: IBM Plex Mono */
    --fuente-titulo: 'Spectral', Georgia, 'Times New Roman', serif;
    --fuente-base:   'Public Sans', system-ui, -apple-system, sans-serif;
    --fuente-mono:   'IBM Plex Mono', ui-monospace, monospace;

    /* Forma — radio máximo 6px, sin gradientes */
    --radio: 6px;

    /* Espaciado */
    --gap: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden debe ganar SIEMPRE. La regla del navegador ([hidden]
   {display:none}) la pisa cualquier clase con display propio: por eso la barra
   flotante del pipeline (.bulk-bar{display:flex}) se veía con 0 seleccionados
   aunque el JS le pusiera hidden. */
[hidden] { display: none !important; }

/* Los controles no heredan la fuente: el navegador les impone la suya (Arial
   13.33px en Windows). Sin esto, todo <button> que no lleve .btn —cerrar modal,
   hamburguesa, acciones de la tarjeta del kanban, menú de WhatsApp— salía con
   una tipografía distinta de la del resto del CRM.
   NO se resetea aquí background/border/padding: .btn y compañía dependen de
   ellos y se romperían. */
button, input, select, textarea, optgroup {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fuente-base);
    color: var(--color-texto);
    background: var(--color-fondo);
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; color: var(--color-marino); letter-spacing: -.01em; }
h1 { font-size: 28px; }
a { color: var(--color-primario); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, kbd, .mono { font-family: var(--fuente-mono); }
img { max-width: 100%; display: block; }