/* Tokens de Bienestar Activo. Se cargan antes que blazorblueprint.css.
   Marca: rojo #D7141E, negro #111111, blanco. Fondo claro #F4F4F2. El rojo es acento, no decoración. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  --background: #F4F4F2;
  --foreground: #111111;
  --card: #FFFFFF;
  --card-foreground: #111111;
  --popover: #FFFFFF;
  --popover-foreground: #111111;
  --primary: #111111;
  --primary-foreground: #FFFFFF;
  --secondary: #EAEAE7;
  --secondary-foreground: #111111;
  --muted: #EDEDEB;
  --muted-foreground: #5F5F66;
  --accent: #EAEAE7;
  --accent-foreground: #111111;
  --destructive: #C8102E;
  --destructive-foreground: #FFFFFF;
  --border: #E4E4E0;
  --input: #DCDCD8;
  --ring: #111111;

  /* Marca y estados propios */
  --brand: #D7141E;
  --brand-foreground: #FFFFFF;
  --brand-text: #C8102E;
  --ocupacion-verde: #1E7A3E;
  --ocupacion-verde-bg: #E6F2EA;
  --ocupacion-amarillo: #8A5A00;
  --ocupacion-amarillo-bg: #FBF0D5;
  --ocupacion-rojo: #C8102E;
  --ocupacion-rojo-bg: #FBE4E6;
  --track: #EDEDEB;
  --skeleton: #E6E6E3;
  --skeleton-shine: #F4F4F2;

  /* Alertas (las usa Blueprint) */
  --alert-success: #1E7A3E;
  --alert-success-foreground: #14532D;
  --alert-success-bg: #E6F2EA;
  --alert-info: #2F5FA8;
  --alert-info-foreground: #1E3A6E;
  --alert-info-bg: #E8EEF8;
  --alert-warning: #8A5A00;
  --alert-warning-foreground: #5C3D00;
  --alert-warning-bg: #FBF0D5;
  --alert-danger: #C8102E;
  --alert-danger-foreground: #7F0A1D;
  --alert-danger-bg: #FBE4E6;

  /* Sidebar (admin en PC) */
  --sidebar: #FFFFFF;
  --sidebar-foreground: #111111;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F4F4F2;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #E4E4E0;
  --sidebar-ring: #111111;

  --radius: 0.75rem;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.dark {
  color-scheme: dark;

  --background: #0F0F10;
  --foreground: #F4F4F2;
  --card: #1A1A1C;
  --card-foreground: #F4F4F2;
  --popover: #1A1A1C;
  --popover-foreground: #F4F4F2;
  --primary: #F4F4F2;
  --primary-foreground: #111111;
  --secondary: #242427;
  --secondary-foreground: #F4F4F2;
  --muted: #242427;
  --muted-foreground: #A3A3AA;
  --accent: #2A2A2E;
  --accent-foreground: #F4F4F2;
  --destructive: #FF6B6B;
  --destructive-foreground: #111111;
  --border: #2A2A2E;
  --input: #3A3A3F;
  --ring: #A3A3AA;

  --brand: #E8323C;
  --brand-foreground: #FFFFFF;
  --brand-text: #FF6B6B;
  --ocupacion-verde: #6FD68F;
  --ocupacion-verde-bg: #16261B;
  --ocupacion-amarillo: #F2C066;
  --ocupacion-amarillo-bg: #2B2212;
  --ocupacion-rojo: #FF6B6B;
  --ocupacion-rojo-bg: #2E1618;
  --track: #2C2C30;
  --skeleton: #242427;
  --skeleton-shine: #2E2E33;

  --alert-success: #6FD68F;
  --alert-success-foreground: #BFE9CB;
  --alert-success-bg: #16261B;
  --alert-info: #8FB4F2;
  --alert-info-foreground: #C9DAF8;
  --alert-info-bg: #15203A;
  --alert-warning: #F2C066;
  --alert-warning-foreground: #F8DFA8;
  --alert-warning-bg: #2B2212;
  --alert-danger: #FF6B6B;
  --alert-danger-foreground: #FFB4B4;
  --alert-danger-bg: #2E1618;

  --sidebar: #1A1A1C;
  --sidebar-foreground: #F4F4F2;
  --sidebar-primary: #F4F4F2;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #242427;
  --sidebar-accent-foreground: #F4F4F2;
  --sidebar-border: #2A2A2E;
  --sidebar-ring: #A3A3AA;
}

* {
  border-color: var(--border);
}

html {
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
}

/* Pantallas anchas: todo está en rem, así que agrandar la letra raíz agranda texto, controles y espacios
   en proporción. Hasta 1535 px queda igual (16 px). */
@media (min-width: 1536px) { html { font-size: 17px; } }
@media (min-width: 1920px) { html { font-size: 18px; } }
@media (min-width: 2400px) { html { font-size: 20px; } }

body {
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}