/*
 * Paleta e identidad visual de Litem (a partir del logo/branding subido por
 * el usuario). Este archivo se enlaza al final del <head> de cada vista,
 * después del <style> propio de la página, para poder repintar botones,
 * encabezados y etiquetas existentes sin tener que reescribir cada vista
 * desde cero.
 */

:root {
  --litem-navy: #0b1f44;
  --litem-navy-dark: #071733;
  --litem-blue: #1668f0;
  --litem-blue-dark: #0d4fc0;
  --litem-blue-light: #e8f0fe;
  --litem-bg: #f4f6fa;
  --litem-text: #16233a;
  --litem-border: #d9e0ea;
  --litem-verde-bg: #eaf3de;
  --litem-verde-texto: #27500a;
  --litem-ambar-bg: #faeeda;
  --litem-ambar-texto: #633806;
  --litem-rojo-bg: #fcebeb;
  --litem-rojo-texto: #791f1f;
  --litem-teal-bg: #e1f5ee;
  --litem-teal-texto: #085041;
  --litem-morado-bg: #efe9fb;
  --litem-morado-texto: #4b2e83;
  /* Line: único color que faltaba en la paleta de íconos del menú (los
     demás módulos ya tenían el suyo) — a pedido explícito del 2026-08-25. */
  --litem-rosa-bg: #fbe7f3;
  --litem-rosa-texto: #8a1a5c;
  /* Gestor de Firma: color propio, no usado todavía por ningún otro
     módulo — a pedido explícito del 2026-09-02. */
  --litem-cyan-bg: #e0f4f7;
  --litem-cyan-texto: #0a5c6b;
}

body {
  background: var(--litem-bg) !important;
}

/* Barra superior con el logo (usada en las páginas principales de cada
   módulo, vía partials.header). En páginas secundarias que no la incluyen,
   estas reglas simplemente no aplican. */
.litem-topbar {
  background: var(--litem-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.litem-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 2px;
  white-space: nowrap;
}
.litem-brand img {
  height: 40px;
  display: block;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  box-sizing: border-box;
}
.litem-topbar nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.litem-topbar nav a { color: #c9d8f5; text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.litem-topbar nav a:hover, .litem-topbar nav a.activo { color: #fff; text-decoration: underline; }
.litem-topbar nav form { margin: 0; }
.litem-topbar nav form button { background: none; border: none; color: #c9d8f5; font-size: 13px; cursor: pointer; padding: 0; font-family: inherit; }
.litem-topbar nav form button:hover { color: #fff; text-decoration: underline; }
.nav-usuario { color: #8fa8d9; font-size: 12px; font-weight: bold; }

/* Iconos por módulo: reutilizan exactamente los mismos pares fondo/texto
   que ya se usan en las etiquetas de estado de cada vista, para que el
   color de cada acceso del menú sea coherente con el resto de la app. */
.nav-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  flex-shrink: 0;
  transition: transform .12s ease;
}
.nav-icono svg { width: 13px; height: 13px; }
.litem-topbar nav a:hover .nav-icono { transform: scale(1.1); }

.nav-solicitudes .nav-icono { background: var(--litem-blue-light); color: var(--litem-blue-dark); }
.nav-particulares .nav-icono { background: var(--litem-morado-bg); color: var(--litem-morado-texto); }
.nav-embargos .nav-icono { background: var(--litem-rojo-bg); color: var(--litem-rojo-texto); }
.nav-estampe .nav-icono { background: var(--litem-teal-bg); color: var(--litem-teal-texto); }
.nav-cobranza .nav-icono { background: var(--litem-ambar-bg); color: var(--litem-ambar-texto); }
.nav-aranceles .nav-icono { background: var(--litem-verde-bg); color: var(--litem-verde-texto); }
.nav-line .nav-icono { background: var(--litem-rosa-bg); color: var(--litem-rosa-texto); }
.nav-gestion-firma .nav-icono { background: var(--litem-cyan-bg); color: var(--litem-cyan-texto); }

/* Aplicación móvil del receptor: mismo tratamiento de contraste para el
   ícono del logo (fondo blanco redondeado sobre la barra navy). */
.litem-topbar-app img {
  height: 36px !important;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  box-sizing: border-box;
}
.litem-topbar-app span { font-size: 18px !important; letter-spacing: 3px !important; }

/* Botonera general: todo lo que ya usa estas clases en las vistas
   existentes pasa a usar el azul de marca en vez de los grises/negros
   sueltos que tenía cada vista. */
a.btn, .btn, button.btn,
.acciones a, .acciones button,
.dropdown-btn, a.descarga,
.adjunto-box .btn-mini {
  background: var(--litem-blue) !important;
  color: #fff !important;
  border-color: var(--litem-blue) !important;
}
a.btn:hover, .btn:hover, button.btn:hover,
.acciones a:hover, .acciones button:hover,
.dropdown-btn:hover, a.descarga:hover {
  background: var(--litem-blue-dark) !important;
}

/* Variantes secundarias/neutras (antes grises) pasan al navy, para
   distinguirse del azul de acción principal. */
.btn-secundario, .btn-chico {
  background: var(--litem-navy) !important;
  color: #fff !important;
}
.btn-secundario:hover, .btn-chico:hover { background: var(--litem-navy-dark) !important; }

/* Acciones destructivas se mantienen en rojo, independiente del resto. */
.btn-quitar, .btn-quitar-mini, .btn-eliminar, .dropdown-content button {
  background: var(--litem-rojo-texto) !important;
  color: #fff !important;
}

th { background: var(--litem-navy) !important; color: #fff !important; }

a { color: var(--litem-blue); }

.success { background: var(--litem-verde-bg) !important; color: var(--litem-verde-texto) !important; }
.error { background: var(--litem-rojo-bg) !important; color: var(--litem-rojo-texto) !important; }
