/* =====================================================================
   VCHECK - Design tokens (tema corporativo)
   =====================================================================
   Paleta extraída del isotipo: navy oscuro + naranja como acento.
   Objetivo: que Precompra, Siniestros, Suscripción y Superadmin compartan
   una misma identidad visual en vez de definir sus propios colores.
   Uso: <link rel="stylesheet" href="css/theme.css"> (ajustar ../ según
   la profundidad de la página) ANTES de cualquier <style> propio de la
   página, para poder sobreescribir puntualmente si hace falta.
   ===================================================================== */

:root {
  /* Marca */
  --vc-navy-900: #14283D;   /* texto fuerte, top-bar, botones secundarios */
  --vc-navy-700: #1D3A57;
  --vc-navy-100: #E8EDF2;
  --vc-orange-600: #E0670F; /* hover del acento */
  --vc-orange-500: #F47920; /* acento / CTA primario */
  --vc-orange-100: #FDEEE0;

  /* Superficies */
  --vc-bg: #F5F6F8;
  --vc-surface: #FFFFFF;
  --vc-border: #E2E5EA;

  /* Texto */
  --vc-text: #1A2330;
  --vc-text-muted: #6B7280;

  /* Estados (badges) */
  --vc-success-bg: #dcfce7; --vc-success-text: #166534;
  --vc-warning-bg: #fef3c7; --vc-warning-text: #92400e;
  --vc-danger-bg:  #fee2e2; --vc-danger-text:  #991b1b;
  --vc-info-bg:    #e0e7ff; --vc-info-text:    #4338ca;

  /* Geometría */
  --vc-radius: 10px;
  --vc-shadow: 0 1px 3px rgba(20,40,61,0.08);
  --vc-shadow-hover: 0 10px 24px rgba(20,40,61,0.12);
}

/* ── Top bar compartida (marca + usuario + logout) ── */
.vc-topbar {
  background: var(--vc-navy-900);
  color: #fff;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.vc-topbar img { height: 28px; }
.vc-topbar .vc-brand { font-weight: 800; font-size: 15px; color: #fff; }
.vc-topbar .vc-spacer { flex: 1; }
.vc-topbar .vc-user { font-size: 13px; color: #9ca3af; }
.vc-topbar .vc-badge-role {
  background: var(--vc-orange-500); color: #111; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 99px; text-transform: uppercase;
}

/* ── Botones ── */
.vc-btn {
  padding: 8px 14px; border: 1px solid var(--vc-border); background: var(--vc-surface);
  color: var(--vc-text); border-radius: 6px; cursor: pointer; font-size: 13px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
}
.vc-btn:hover { background: #f8fafc; }
.vc-btn-primary { background: var(--vc-orange-500); color: #fff; border-color: var(--vc-orange-500); }
.vc-btn-primary:hover { background: var(--vc-orange-600); }
.vc-btn-outline { background: transparent; border: 1px solid #374151; color: #d1d5db; }
.vc-btn-outline:hover { background: #1f2937; }
.vc-btn-danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.vc-btn-sm { padding: 4px 10px; font-size: 12px; }
.vc-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Tarjetas de acción / navegación ── */
.vc-card {
  background: var(--vc-surface); border-radius: var(--vc-radius); padding: 22px;
  border: 1px solid var(--vc-border); border-top: 4px solid var(--vc-navy-900);
  text-decoration: none; color: inherit; position: relative;
  box-shadow: var(--vc-shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.vc-card:hover { transform: translateY(-3px); box-shadow: var(--vc-shadow-hover); }
.vc-card.vc-accent { border-top-color: var(--vc-orange-500); }
.vc-card .vc-icon-box {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 14px; background: var(--vc-navy-100);
}
.vc-card.vc-accent .vc-icon-box { background: var(--vc-orange-100); }
.vc-card h3 {
  font-size: 14px; font-weight: 800; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0 0 8px; color: var(--vc-text);
}
.vc-card p { font-size: 13px; color: var(--vc-text-muted); margin: 0; line-height: 1.5; padding-right: 10px; }
.vc-card .vc-arrow { position: absolute; right: 20px; bottom: 18px; color: #9ca3af; font-size: 16px; }

/* ── Badges de estado ── */
.vc-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.vc-badge-success { background: var(--vc-success-bg); color: var(--vc-success-text); }
.vc-badge-warning { background: var(--vc-warning-bg); color: var(--vc-warning-text); }
.vc-badge-danger  { background: var(--vc-danger-bg);  color: var(--vc-danger-text); }
.vc-badge-info    { background: var(--vc-info-bg);    color: var(--vc-info-text); }

body.vc-themed { background: var(--vc-bg); }