/*
  Tema de Atémpora para Kaneo.
  Todo vive en public/atempora/. Para volver al diseño neutral, borra esta
  carpeta o las tres líneas marcadas "Atémpora" en apps/web/index.html.

  Kaneo declara sus variables en :root y .dark sin @layer, y Vite inyecta su
  CSS después de este archivo. Por eso los selectores llevan html delante:
  ganan por especificidad sin usar !important.
*/

@font-face {
  font-family: "Moranga";
  src: url("./fuentes/moranga-light.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Moranga";
  src: url("./fuentes/moranga-regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

/* Claro */
html:root {
  --atempora-cobalto: #2e5ff2;
  --atempora-tinta: #151a2c;
  --atempora-marino: #1c2751;
  --font-display: "Moranga", Georgia, serif;

  --radius: 0.5rem;

  --background: #ffffff;
  --foreground: var(--atempora-tinta);
  --card: #ffffff;
  --card-foreground: var(--atempora-tinta);
  --popover: #ffffff;
  --popover-foreground: var(--atempora-tinta);

  --primary: var(--atempora-cobalto);
  --primary-foreground: #ffffff;
  --secondary: rgb(21 26 44 / 4%);
  --secondary-foreground: var(--atempora-tinta);
  --accent: rgb(21 26 44 / 4%);
  --accent-foreground: var(--atempora-tinta);
  --muted: rgb(21 26 44 / 4%);
  --muted-foreground: #5b6275;

  --border: rgb(21 26 44 / 9%);
  --input: rgb(21 26 44 / 13%);
  --ring: var(--atempora-cobalto);

  --info: var(--atempora-cobalto);
  --info-foreground: #1f45c4;

  --chart-1: var(--atempora-cobalto);
  --chart-2: var(--atempora-marino);
  --chart-3: #7c9bff;
  --chart-4: #b26f06;
  --chart-5: #17804a;

  /* La barra lateral va en marino: es el marco de marca alrededor del contenido */
  --sidebar: var(--atempora-marino);
  --sidebar-foreground: rgb(236 239 250 / 74%);
  --sidebar-primary: #ffffff;
  --sidebar-primary-foreground: var(--atempora-marino);
  --sidebar-accent: rgb(255 255 255 / 9%);
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgb(255 255 255 / 10%);
  --sidebar-ring: #8fa8ff;

  --board-lane: #f6f7fa;
  --board-card: #ffffff;
  --board-card-border: rgb(21 26 44 / 9%);
  --board-card-border-hover: rgb(21 26 44 / 20%);
  --board-card-selected: #eef2ff;
  --board-card-selected-border: #c9d4ff;
  --board-card-focus: var(--atempora-cobalto);
  --board-card-ring: rgb(46 95 242 / 22%);
  --board-card-shadow: none;
  --board-id: #8a90a2;
  --board-title: var(--atempora-tinta);
  --board-title-done: #7a8094;

  --chip-foreground: #3a4054;
  --chip-muted: #6b7185;
  --chip-icon: #8a90a2;
  --priority-bar: #3a4054;

  --avatar: #e6ebfd;
  --avatar-selected: #d9e1fc;
  --avatar-foreground: var(--atempora-marino);
  --avatar-border: rgb(21 26 44 / 8%);
}

/* Oscuro */
html.dark {
  --background: #0e1220;
  --foreground: #e8eaf2;
  --card: #141929;
  --card-foreground: #e8eaf2;
  --popover: #161b2c;
  --popover-foreground: #e8eaf2;

  --primary: var(--atempora-cobalto);
  --primary-foreground: #ffffff;
  --secondary: rgb(232 234 242 / 5%);
  --secondary-foreground: #e8eaf2;
  --accent: rgb(232 234 242 / 5%);
  --accent-foreground: #e8eaf2;
  --muted: rgb(232 234 242 / 5%);
  --muted-foreground: #8c92a6;

  --border: rgb(232 234 242 / 8%);
  --input: rgb(232 234 242 / 11%);
  --ring: #6f8fff;

  --info: #6f8fff;
  --info-foreground: #93acff;

  --sidebar: #0b0e19;
  --sidebar-foreground: #9aa0b4;
  --sidebar-primary: var(--atempora-cobalto);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgb(232 234 242 / 6%);
  --sidebar-accent-foreground: #e8eaf2;
  --sidebar-border: rgb(232 234 242 / 6%);
  --sidebar-ring: #6f8fff;

  --board-lane: rgb(0 0 0 / 18%);
  --board-card: #151a2b;
  --board-card-border: rgb(232 234 242 / 7%);
  --board-card-border-hover: rgb(232 234 242 / 18%);
  --board-card-selected: #1b2340;
  --board-card-selected-border: rgb(111 143 255 / 45%);
  --board-card-focus: #6f8fff;
  --board-card-ring: rgb(111 143 255 / 25%);
  --board-card-shadow: none;
  --board-title: #e8eaf2;

  --avatar: #232a45;
  --avatar-selected: #2b3354;
  --avatar-foreground: #c9d2f5;
}

/* Dentro de la barra marina, los textos e íconos que usan los colores generales
   pasan a tonos claros. Los menús que se abren desde ahí viven fuera y no cambian. */
html:not(.dark) [data-slot="sidebar"] {
  --background: #2a3666;
  --foreground: #f2f4fa;
  --muted-foreground: rgb(236 239 250 / 60%);
  --accent: rgb(255 255 255 / 9%);
  --accent-foreground: #ffffff;
  --secondary: rgb(255 255 255 / 9%);
  --secondary-foreground: #ffffff;
  --muted: rgb(255 255 255 / 7%);
  --border: rgb(255 255 255 / 12%);
  --input: rgb(255 255 255 / 16%);
  --ring: #8fa8ff;
  --avatar: rgb(255 255 255 / 14%);
  --avatar-foreground: #ffffff;
  --avatar-border: rgb(255 255 255 / 16%);
  color-scheme: dark;
}

/* Los menús y ventanas que se abren desde la barra viven fuera de ella, sobre
   fondo claro: recuperan los colores de barra de Kaneo para que el resaltado
   se lea. La barra en celular es un sheet-popup y conserva el marino. */
html:not(.dark)
  :is(
    [data-slot="menu-popup"],
    [data-slot="popover-popup"],
    [data-slot="dialog-popup"],
    [data-slot="alert-dialog-popup"],
    [data-slot="select-popup"],
    [data-slot="combobox-popup"],
    [data-slot="autocomplete-popup"],
    [data-slot="command-dialog-popup"]
  ) {
  --sidebar-foreground: oklch(26.9% 0 0 / 64%);
  --sidebar-accent: rgb(0 0 0 / 4%);
  --sidebar-accent-foreground: oklch(26.9% 0 0);
}

/* Selector de modo claro/oscuro de la barra: el indicador va en blanco y el ícono
   que queda encima en marino, para que se distinga cuál está activo.
   Sin marcar = oscuro (luna, penúltimo ícono); marcado = claro (sol, último). */
[data-slot="sidebar"] [data-slot="switch-thumb"] {
  background-color: #ffffff;
}

[data-slot="sidebar"] [data-slot="switch"] ~ span {
  opacity: 0.6;
}

[data-slot="sidebar"] [data-slot="switch"][data-unchecked] ~ span:nth-last-of-type(2),
[data-slot="sidebar"] [data-slot="switch"][data-checked] ~ span:last-of-type {
  color: var(--atempora-marino);
  opacity: 1;
}

/* Moranga solo en títulos de display: el saludo de Home y el inicio de sesión */
h1.text-3xl,
h1.text-\[22px\] {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

h1.text-3xl {
  font-size: 2.375rem;
  line-height: 1.1;
}

h1.text-\[22px\] {
  font-size: 1.75rem;
  line-height: 1.15;
}

/* Logotipo arriba de la barra lateral, sobre el selector de workspace */
[data-slot="sidebar-header"]::before {
  content: "";
  display: block;
  height: 0.95rem;
  margin: 0.7rem 0.5rem 0.35rem;
  /* La barra es oscura en ambos modos: siempre el logotipo blanco */
  background: url("./logo-blanco.png") left center / contain no-repeat;
}

[data-slot="sidebar"][data-state="collapsed"] [data-slot="sidebar-header"]::before {
  display: none;
}

/* Logo de Atémpora en lugar del de Kaneo */
img[src="/logo-dark.svg"] {
  content: url("./logo-tinta.png");
}

img[src="/logo-light.svg"] {
  content: url("./logo-blanco.png");
}

/* Inicio de sesión y configuración inicial: el cuadro con la K pasa a ser el logotipo */
img[src="/favicon.svg"].size-10,
img[src="/favicon.svg"].size-8 {
  content: url("./logo-tinta.png");
  /* content: no cambia la proporción del cuadro original; se fija a mano */
  aspect-ratio: 6 / 1;
  width: auto;
  height: 1.375rem;
  align-self: flex-start;
  object-fit: contain;
  object-position: left center;
  border: 0;
  border-radius: 0;
}

html.dark img[src="/favicon.svg"].size-10,
html.dark img[src="/favicon.svg"].size-8 {
  content: url("./logo-blanco.png");
}