/* ════════════════════════════════════════════════════════════════
   LG ABOGADOS — Sistema de diseño compartido
   Una sola fuente de verdad para las 5 páginas del sistema.
   Identidad: editorial jurídica — tinta navy, oro grabado, papel crema.
   Tipografía: 'Source Serif 4' (títulos) + 'Lato' (texto).
   Cada página carga este archivo ANTES de su <style> propio, de modo que
   puede sobreescribir cualquier token con sus valores específicos de tema.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Tinta — la familia navy del despacho */
  --navy:        #0f1f3d;
  --navy-light:  #162952;
  --navy-dark:   #080f1e;
  --navy-card:   #122c4a;

  /* Oro — el acento de la firma. Texto sobre oro SIEMPRE navy. */
  --gold:        #b8952a;
  --gold-light:  #d4ae4a;
  --gold-pale:   #e8cd7f;

  /* Verde azulado (teal) — acento conversacional de Michael */
  --teal:        #2dd4bf;
  --teal-dark:   #14b8a6;

  /* Papel */
  --cream:       #f5f0e8;
  --cream-dark:  #ede7d9;

  /* Texto sobre papel */
  --texto:       #1a1a2e;
  --texto-suave: rgba(255,255,255,0.55);
  --gris:        #6b7280;

  /* Texto sobre tinta (páginas oscuras) */
  --tinta-texto:       rgba(255,255,255,0.92);
  --tinta-texto-suave: rgba(255,255,255,0.65);

  /* Acento azul acero — herramientas de IA (Harvey, Michael, enlaces) */
  --acero:       #7eb8ff;
  --acero-borde: rgba(94,158,255,0.35);
  --acero-bg:    rgba(94,158,255,0.12);

  /* Semáforo procesal */
  --rojo:     #c0392b;
  --rojo-suave: #e05252;
  --naranja:  #e07030;
  --amarillo: #e6a817;
  --verde:    #1a6b45;
  --verde-suave: #58d68d;
  --error:    #c0392b;

  /* Tipografía */
  --serif: 'Source Serif 4', Georgia, serif;
  --sans:  'Lato', 'Segoe UI', sans-serif;

  /* Profundidad */
  --sombra-panel: 0 18px 50px rgba(0,0,0,0.45);
  --sombra-card:  0 2px 4px rgba(0,0,0,0.1);
  --radio: 8px;
  --radio-panel: 14px;
}

/* ── Base compartida ─────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

::selection {
  background: var(--gold-light);
  color: var(--navy-dark);
}

/* Fondo de tinta para las páginas oscuras (Michael, Auditoría) */
.lga-fondo-tinta {
  background: linear-gradient(160deg, var(--navy-dark) 0%, var(--navy) 60%, var(--navy-light) 100%);
}

/* ── Botón primario: oro grabado, texto navy ─────────────────── */
.lga-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border: none;
  border-radius: var(--radio);
  color: var(--navy-dark);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.lga-btn:hover { filter: brightness(1.08); }
.lga-btn:active { transform: translateY(1px); }
.lga-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

/* Botón secundario sobre tinta */
.lga-btn-tinta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--acero-bg);
  border: 1px solid var(--acero-borde);
  border-radius: 7px;
  color: var(--acero);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.lga-btn-tinta:hover { background: rgba(94,158,255,0.2); }

/* ── Campo de texto sobre tinta ──────────────────────────────── */
.lga-input-tinta {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radio);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
}
.lga-input-tinta:focus { border-color: var(--gold-light); outline: none; }
.lga-input-tinta::placeholder { color: rgba(255,255,255,0.35); }

/* ── Panel de login compartido ───────────────────────────────── */
.lga-login-box {
  max-width: 380px;
  margin: 12vh auto;
  background: var(--navy-card);
  border: 1px solid rgba(212,174,74,0.35);
  border-radius: var(--radio-panel);
  padding: 36px 32px;
  box-shadow: var(--sombra-panel);
}
.lga-login-box h1 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--gold-pale);
  margin-bottom: 6px;
}
.lga-login-box p {
  font-size: 13px;
  color: var(--tinta-texto-suave);
  margin-bottom: 22px;
}
.lga-login-error {
  color: var(--rojo-suave);
  font-size: 12px;
  margin-bottom: 10px;
  min-height: 16px;
}

/* ── Spinner compartido ──────────────────────────────────────── */
.lga-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: lga-girar 0.8s linear infinite;
  vertical-align: -2px;
}
@keyframes lga-girar { to { transform: rotate(360deg); } }

/* ── Toast compartido ────────────────────────────────────────── */
.lga-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--navy-light);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 14px 20px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--tinta-texto);
  z-index: 99;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

/* ── Scrollbar discreto en páginas oscuras ───────────────────── */
.lga-fondo-tinta ::-webkit-scrollbar { width: 10px; }
.lga-fondo-tinta ::-webkit-scrollbar-track { background: transparent; }
.lga-fondo-tinta ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 5px;
}
.lga-fondo-tinta ::-webkit-scrollbar-thumb:hover { background: rgba(212,174,74,0.4); }