/* Panel (/panel/) con los colores de VF Digital.
   Sobrescribe las variables del admin de Django; los selectores son los mismos
   que usa Django para que el botón de tema claro/oscuro siga funcionando. */

@font-face{font-family:'Inter';src:url("../fonts/Inter-Variable.30a274cd01b6.woff2") format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* Claro (y base de ambos temas) */
html[data-theme="light"],
:root {
  --primary: #1a2e5a;
  --secondary: #1a2e5a;
  --accent: #f47920;
  --primary-fg: #ffffff;

  --body-fg: #1a2e5a;
  --body-bg: #ffffff;
  --body-quiet-color: #5f6b7a;
  --body-medium-color: #4a5568;
  --body-loud-color: #0a0c10;

  --header-color: #a0aab4;
  --header-branding-color: #ffffff;
  --header-bg: #0a0c10;
  --header-link-color: #ffffff;

  --breadcrumbs-fg: #4a5568;
  --breadcrumbs-link-fg: #1a2e5a;
  --breadcrumbs-bg: #eef1f7;

  --link-fg: #1a2e5a;
  --link-hover-color: #ad4f0a;
  --link-selected-fg: #ad4f0a;

  --hairline-color: rgba(26,46,90,0.12);
  --border-color: rgba(26,46,90,0.28);

  --darkened-bg: #f4f6fa;
  --selected-bg: #eef1f7;
  --selected-row: #fff4ea;

  --button-bg: #1a2e5a;
  --button-hover-bg: #2a4580;
  --default-button-bg: #ad4f0a;
  --default-button-hover-bg: #8f4108;

  --object-tools-bg: #1a2e5a;
  --object-tools-hover-bg: #ad4f0a;

  --font-family-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Oscuro: según el sistema, salvo que se elija claro */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #1a2e5a;
    --body-fg: #e6e9ee;
    --body-bg: #0a0c10;
    --body-quiet-color: #a0aab4;
    --body-medium-color: #c4cad2;
    --body-loud-color: #ffffff;
    --breadcrumbs-fg: #a0aab4;
    --breadcrumbs-link-fg: #ffffff;
    --breadcrumbs-bg: #111827;
    --link-fg: #00aeef;
    --link-hover-color: #f47920;
    --link-selected-fg: #f47920;
    --hairline-color: rgba(255,255,255,0.10);
    --border-color: rgba(255,255,255,0.22);
    --darkened-bg: #0d1117;
    --selected-bg: #111827;
    --selected-row: #2a1c10;
  }
}

/* Oscuro elegido con el botón */
html[data-theme="dark"] {
  --primary: #1a2e5a;
  --body-fg: #e6e9ee;
  --body-bg: #0a0c10;
  --body-quiet-color: #a0aab4;
  --body-medium-color: #c4cad2;
  --body-loud-color: #ffffff;
  --breadcrumbs-fg: #a0aab4;
  --breadcrumbs-link-fg: #ffffff;
  --breadcrumbs-bg: #111827;
  --link-fg: #00aeef;
  --link-hover-color: #f47920;
  --link-selected-fg: #f47920;
  --hairline-color: rgba(255,255,255,0.10);
  --border-color: rgba(255,255,255,0.22);
  --darkened-bg: #0d1117;
  --selected-bg: #111827;
  --selected-row: #2a1c10;
}

/* Encabezado con el logo y una línea naranja de la marca */
#header { border-bottom: 3px solid var(--accent); }
.vf-panel-marca { display: inline-flex; align-items: center; gap: 12px; }
.vf-panel-marca img { height: 32px; width: auto; display: block; }
.vf-panel-marca span {
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.3);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}