/*
 * atum.css — tema atum para el CRM (la interfaz pinta con variables --t-*).
 *
 * aplicar.sh lo enlaza al final del <head> de index.html, junto con atum-tema-base.css (que
 * aplica el tema oscuro original también a .light). Así ambos temas, claro y oscuro, se ven
 * igual: marino atum. Los selectores html.light / html.dark tienen más especificidad que los
 * .light / .dark originales, de modo que ganan también a los bloques display-p3.
 *
 * Paleta atum.mx: fondo #070B1A · panel #0E152E · hover #141C3A · activo #1C264C
 *                 acento #E8A33D (100 #F2C071, 700 #C8862A) · texto #F4F6FA · texto sobre acento #070B1A
 *                 ok #3FBF8E · error #F4685A · IBM Plex Sans / IBM Plex Mono (autoalojadas)
 */
/* IBM Plex (SIL OFL 1.1, ver /atum/fuentes/OFL.txt), servida desde la propia imagen: sin Google Fonts. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/atum/fuentes/ibm-plex-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/atum/fuentes/ibm-plex-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/atum/fuentes/ibm-plex-mono-500-latin.woff2") format("woff2");
}

html.light,
html.dark,
html .light,
html .dark {
  color-scheme: dark;

  /* Tipografía */
  --t-font-family: "IBM Plex Sans", Arial, system-ui, sans-serif;
  --t-code-font-family: "IBM Plex Mono", ui-monospace, monospace;

  /* Fondos */
  --t-background-primary: #0e152e;
  --t-background-secondary: #070b1a;
  --t-background-tertiary: #141c3a;
  --t-background-quaternary: #1c264c;
  --t-background-inverted-primary: #f4f6fa;
  --t-background-inverted-secondary: #b8bfd0;
  --t-background-primary-inverted: #f4f6fa;
  --t-background-primary-inverted-hover: #b8bfd0;
  --t-background-danger: #3a1714;
  --t-background-transparent-primary: #070b1acc;
  --t-background-transparent-secondary: #070b1a99;
  --t-background-transparent-strong: #f4f6fa24;
  --t-background-transparent-medium: #f4f6fa1a;
  --t-background-transparent-light: #f4f6fa0f;
  --t-background-transparent-lighter: #f4f6fa08;
  --t-background-transparent-danger: #f4685a2d;
  --t-background-transparent-blue: #e8a33d33;
  --t-background-transparent-orange: #e8a33d39;
  --t-background-transparent-success: #3fbf8e2d;
  --t-background-overlay-primary: #03050dcc;
  --t-background-overlay-secondary: #03050d80;
  --t-background-overlay-tertiary: #03050d5c;
  --t-background-radial-gradient: radial-gradient(50% 62.62% at 50% 0%, #f2c071 0%, #e8a33d 100%);
  --t-background-radial-gradient-hover: radial-gradient(76.32% 95.59% at 50% 0%, #e8a33d 0%, #c8862a 100%);

  /* Texto */
  --t-font-color-primary: #f4f6fa;
  --t-font-color-secondary: #c9cfdc;
  --t-font-color-tertiary: #8a93ab;
  --t-font-color-light: #5e6886;
  --t-font-color-extra-light: #434c69;
  --t-font-color-inverted: #070b1a;
  --t-font-color-on-accent: #070b1a;
  --t-font-color-danger: #f4685a;

  /* Bordes */
  --t-border-color-strong: #2a3560;
  --t-border-color-medium: #1c264c;
  --t-border-color-light: #141c3a;
  --t-border-color-secondary-inverted: #b8bfd0;
  --t-border-color-inverted: #f4f6fa;
  --t-border-color-danger: #6b2a24;
  --t-border-color-blue: #c8862a;
  --t-border-color-transparent-strong: #f4f6fa14;

  /* Sombras */
  --t-box-shadow-color: #000000a6;
  --t-box-shadow-light: 0px 2px 4px 0px #0000002e, 0px 0px 4px 0px #0000003d;
  --t-box-shadow-strong: 2px 4px 16px 0px #00000066, 0px 2px 4px 0px #0000003d;
  --t-box-shadow-super-heavy: 2px 4px 16px 0px #00000052, 0px 2px 4px 0px #0000002e;

  /* Escala de grises → escala marina */
  --t-gray-scale-gray1: #070b1a;
  --t-gray-scale-gray2: #0b1124;
  --t-gray-scale-gray3: #0e152e;
  --t-gray-scale-gray4: #141c3a;
  --t-gray-scale-gray5: #1c264c;
  --t-gray-scale-gray6: #2a3560;
  --t-gray-scale-gray7: #3a4672;
  --t-gray-scale-gray8: #5e6886;
  --t-gray-scale-gray9: #8a93ab;
  --t-gray-scale-gray10: #7e88a2;
  --t-gray-scale-gray11: #b8bfd0;
  --t-gray-scale-gray12: #f4f6fa;
  --t-color-gray: #434c69;
  --t-color-gray1: #070b1a;
  --t-color-gray2: #0b1124;
  --t-color-gray3: #0e152e;
  --t-color-gray4: #141c3a;
  --t-color-gray5: #1c264c;
  --t-color-gray6: #2a3560;
  --t-color-gray7: #3a4672;
  --t-color-gray8: #5e6886;
  --t-color-gray9: #8a93ab;
  --t-color-gray10: #7e88a2;
  --t-color-gray11: #b8bfd0;
  --t-color-gray12: #f4f6fa;

  /* Acento: el "azul" de la interfaz pasa a ser el ámbar atum */
  --t-accent-primary: #4d3510;
  --t-accent-secondary: #4d3510;
  --t-accent-tertiary: #2e200c;
  --t-accent-quaternary: #1d160b;
  --t-accent-accent3570: #9a6318;
  --t-accent-accent4060: #9a6318;
  --t-accent-accent1: #15110a;
  --t-accent-accent2: #1d160b;
  --t-accent-accent3: #2e200c;
  --t-accent-accent4: #3d2a0e;
  --t-accent-accent5: #4d3510;
  --t-accent-accent6: #634313;
  --t-accent-accent7: #7e5518;
  --t-accent-accent8: #9a6318;
  --t-accent-accent9: #e8a33d;
  --t-accent-accent10: #f2c071;
  --t-accent-accent11: #f2c071;
  --t-accent-accent12: #fbe7c4;
  --t-color-blue: #e8a33d;
  --t-color-blue1: #15110a;
  --t-color-blue2: #1d160b;
  --t-color-blue3: #2e200c;
  --t-color-blue4: #3d2a0e;
  --t-color-blue5: #4d3510;
  --t-color-blue6: #634313;
  --t-color-blue7: #7e5518;
  --t-color-blue8: #9a6318;
  --t-color-blue9: #e8a33d;
  --t-color-blue10: #f2c071;
  --t-color-blue11: #f2c071;
  --t-color-blue12: #fbe7c4;
  --t-color-transparent-blue1: #e8a33d0f;
  --t-color-transparent-blue2: #e8a33d17;
  --t-color-transparent-blue3: #e8a33d3c;
  --t-color-transparent-blue4: #e8a33d57;
  --t-color-transparent-blue5: #e8a33d6b;
  --t-color-transparent-blue6: #e8a33d7c;
  --t-color-transparent-blue7: #e8a33d90;
  --t-color-transparent-blue8: #e8a33dac;
  --t-color-transparent-blue9: #e8a33ddb;
  --t-color-transparent-blue10: #f2c071e3;
  --t-color-transparent-blue11: #f2c071;
  --t-color-transparent-blue12: #fbe7c4;
  --t-illustration-icon-color-blue: #e8a33d;
  --t-illustration-icon-fill-blue: #4d3510;
  --t-color-transparent-gray1: #f4f6fa08;
  --t-color-transparent-gray2: #f4f6fa0f;
  --t-color-transparent-gray3: #f4f6fa0c;
  --t-color-transparent-gray4: #f4f6fa12;
  --t-color-transparent-gray5: #f4f6fa1a;
  --t-color-transparent-gray6: #f4f6fa1d;
  --t-color-transparent-gray7: #f4f6fa24;
  --t-color-transparent-gray8: #f4f6fa38;
  --t-color-transparent-gray9: #f4f6fa6d;
  --t-color-transparent-gray10: #f4f6fa7a;
  --t-color-transparent-gray11: #f4f6fa90;
  --t-color-transparent-gray12: #f4f6fae8;

  /* Estados */
  --t-color-red: #f4685a;
  --t-color-green: #3fbf8e;
  --t-snack-bar-success-color: #3fbf8e;
  --t-snack-bar-success-background-color: #3fbf8e2d;
  --t-snack-bar-error-color: #f4685a;
  --t-snack-bar-error-background-color: #f4685a2d;
  --t-snack-bar-info-color: #e8a33d;
  --t-snack-bar-info-background-color: #e8a33d33;
  --t-snack-bar-default-color: #f4f6fa;
  --t-snack-bar-default-background-color: #f4f6fa0f;
  --t-tooltip-background: #1c264cf2;
  --t-tooltip-color: #f4f6fa;
}

html,
body {
  background-color: #070b1a;
  font-family: "IBM Plex Sans", Arial, system-ui, sans-serif;
}

::selection {
  background: #e8a33d55;
}