/* ==========================================================================
   paraguapps — tokens de marca (kit de marca v1 · 2026)
   Única fuente de colores, tipografías y radios de la UI.
   Cargar DESPUÉS de bootstrap.min.css. Ninguna otra hoja define colores.
   ========================================================================== */

/* Tipografías (Google Fonts). Poner este <link> en <head> antes de esta hoja:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
*/

:root {
  /* --- Paleta del kit (no cambiar) --- */
  --pa-azul-noche: #0B1F4B;   /* Primario: textos, header, botones principales, logo */
  --pa-rojo:       #E5322D;   /* Acento "Rojo Ñandutí": punto del isotipo, "apps", detalles. Uso mínimo */
  --pa-rojo-claro: #FF6258;   /* Acento sobre fondo azul (ej. "apps" en logo negativo) */
  --pa-verde:      #1FA37A;   /* Secundario "Verde Tereré": confirmaciones, estados OK */
  --pa-gris:       #5B6784;   /* "Gris Tinta": texto secundario, etiquetas */
  --pa-niebla:     #F4F6FB;   /* Fondo general */
  --pa-blanco:     #FFFFFF;   /* Superficies (tarjetas, modales, tablas) */
  --pa-borde:      #D9DFEC;   /* Bordes y divisores */

  /* --- Derivados para estados (no están en el kit; elegidos para contraste AA) --- */
  --pa-verde-texto:   #157A5B;  /* verde para TEXTO sobre blanco (el #1FA37A no llega a 4.5:1) */
  --pa-verde-suave:   #E3F5EE;
  --pa-error:         #B42318;  /* errores y "vencido": distinto del rojo de marca a propósito */
  --pa-error-suave:   #FDECEA;
  --pa-alerta:        #9A5B00;  /* "vence pronto", "en gracia", "parcial" */
  --pa-alerta-suave:  #FFF3D6;
  --pa-azul-suave:    #E7ECF7;  /* fondos de chips/hover sobre niebla */

  /* --- Tipografía --- */
  --pa-font-display: 'Bricolage Grotesque', system-ui, sans-serif;  /* títulos y logo: 700/800 */
  --pa-font-body:    'Plus Jakarta Sans', system-ui, sans-serif;    /* texto e interfaces: 400-700 */
  --pa-font-mono:    'JetBrains Mono', ui-monospace, monospace;     /* etiquetas, claves de licencia, montos tabulares */

  /* --- Forma --- */
  --pa-radio-sm: 8px;
  --pa-radio:    12px;   /* tarjetas, inputs, botones */
  --pa-radio-lg: 20px;   /* paneles grandes */
  --pa-radio-iso: 23%;   /* esquina del isotipo (rx 28 sobre 120) */
  --pa-sombra: 0 10px 30px rgba(11, 31, 75, 0.12);

  /* --- Mapeo a Bootstrap 5.3 --- */
  --bs-body-bg: var(--pa-niebla);
  --bs-body-color: var(--pa-azul-noche);
  --bs-body-font-family: var(--pa-font-body);
  --bs-secondary-color: var(--pa-gris);
  --bs-border-color: var(--pa-borde);
  --bs-border-radius: var(--pa-radio);
  --bs-link-color: var(--pa-azul-noche);
  --bs-link-hover-color: var(--pa-rojo);
  --bs-primary: var(--pa-azul-noche);
  --bs-primary-rgb: 11, 31, 75;
  --bs-success: var(--pa-verde-texto);
  --bs-success-rgb: 21, 122, 91;
  --bs-danger: var(--pa-error);
  --bs-danger-rgb: 180, 35, 24;
  --bs-warning-rgb: 154, 91, 0;
  --bs-focus-ring-color: rgba(11, 31, 75, 0.25);
}

/* Títulos con la tipografía de marca */
h1, h2, h3, .pa-display {
  font-family: var(--pa-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pa-azul-noche);
}
h4, h5, h6 { font-family: var(--pa-font-display); font-weight: 700; }

/* Etiquetas tipo "APPS A MEDIDA" */
.pa-etiqueta {
  font-family: var(--pa-font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pa-gris);
}

/* Claves de licencia y montos alineados */
.pa-mono, .license-key { font-family: var(--pa-font-mono); font-weight: 500; }
.pa-num { font-variant-numeric: tabular-nums; }

/* Botón principal */
.btn-primary {
  --bs-btn-bg: var(--pa-azul-noche);
  --bs-btn-border-color: var(--pa-azul-noche);
  --bs-btn-hover-bg: #13306B;
  --bs-btn-hover-border-color: #13306B;
  --bs-btn-active-bg: #081638;
  font-weight: 600;
}

/* Superficies */
.card, .modal-content, .table-wrap {
  background: var(--pa-blanco);
  border: 1px solid var(--pa-borde);
  border-radius: var(--pa-radio);
}

/* Header de la app: azul noche con logo negativo */
.pa-header { background: var(--pa-azul-noche); color: var(--pa-blanco); }
.pa-header .nav-link { color: rgba(255,255,255,.82); font-weight: 500; border-radius: var(--pa-radio-sm); }
.pa-header .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.pa-header .nav-link.active { color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 -2px 0 var(--pa-rojo-claro); }

/* Logo como componente HTML (isotipo SVG + wordmark en texto) */
.pa-logo { display: inline-flex; align-items: center; gap: .55em; text-decoration: none; }
.pa-logo svg { width: 1.9em; height: 1.9em; flex: none; }
.pa-logo__texto {
  font-family: var(--pa-font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--pa-azul-noche);
}
.pa-logo__texto span { color: var(--pa-rojo); }
.pa-logo--negativo .pa-logo__texto { color: #fff; }
.pa-logo--negativo .pa-logo__texto span { color: var(--pa-rojo-claro); }

/* Badges de estado (licencias y cobros) */
.pa-badge { display: inline-block; padding: .25em .6em; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.pa-badge--ok      { background: var(--pa-verde-suave);  color: var(--pa-verde-texto); }   /* vigente, pagado */
.pa-badge--alerta  { background: var(--pa-alerta-suave); color: var(--pa-alerta); }        /* en gracia, parcial, vence pronto */
.pa-badge--error   { background: var(--pa-error-suave);  color: var(--pa-error); }         /* vencida, vencido */
.pa-badge--neutro  { background: var(--pa-azul-suave);   color: var(--pa-gris); }          /* pendiente, cancelada, anulado */
.pa-badge--suspendida { background: var(--pa-azul-noche); color: #fff; }