/* Tema daisyUI propio ("core"): paleta morado + naranja de Homie. Reusa los
   valores de --brand-* definidos en main.css (que carga toda plantilla, con
   o sin daisyUI) en vez de repetir los hexadecimales.
   Se aplica vía data-theme="core" en <html> (ver base.html) y debe
   cargarse DESPUÉS del CDN de daisyUI (ver _platform_assets.html): ambas
   reglas tienen la misma especificidad ([data-theme=...] vs :root), así que
   gana la que aparece más tarde en la cascada. */
[data-theme="core"] {
  color-scheme: light;

  /* Series de gráficos (ver trend-chart.js): azul y naranja de la paleta
     categórica de la guía de visualización, validados sobre los fondos de
     las tarjetas (#fcfaff y #16101f) para contraste y daltonismo. No se usan
     verde ni rojo: en la app significan "bien" y "mal" (topes de gasto). */
  --chart-income: #2a78d6;
  --chart-expenses: #eb6834;

  --color-base-100: var(--brand-bg);
  --color-base-200: var(--brand-bg-soft);
  --color-base-300: var(--brand-border);
  --color-base-content: var(--brand-text);

  --color-primary: var(--brand-primary);
  --color-primary-content: var(--brand-primary-content);

  --color-secondary: var(--brand-secondary);
  --color-secondary-content: var(--brand-secondary-content);

  --color-accent: var(--brand-accent);
  --color-accent-content: var(--brand-accent-content);

  --color-neutral: var(--brand-neutral);
  --color-neutral-content: var(--brand-neutral-content);

  --color-info: oklch(74% 0.16 232.661);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(76% 0.177 163.223);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklch(82% 0.189 84.429);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(71% 0.194 13.428);
  --color-error-content: oklch(27% 0.105 12.094);

  --radius-selector: 0.5rem;
  --radius-field: 0.75rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

/* Contrapartida oscura de "core", activada con el botón del navbar (ver
   toggle-theme.js). Misma estructura que arriba, reusando las variables
   --brand-* que main.css redefine para [data-theme="core-dark"]. */
[data-theme="core-dark"] {
  color-scheme: dark;

  --chart-income: #3987e5;
  --chart-expenses: #d95926;

  --color-base-100: var(--brand-bg);
  --color-base-200: var(--brand-bg-soft);
  --color-base-300: var(--brand-border);
  --color-base-content: var(--brand-text);

  --color-primary: var(--brand-primary);
  --color-primary-content: var(--brand-primary-content);

  --color-secondary: var(--brand-secondary);
  --color-secondary-content: var(--brand-secondary-content);

  --color-accent: var(--brand-accent);
  --color-accent-content: var(--brand-accent-content);

  --color-neutral: var(--brand-neutral);
  --color-neutral-content: var(--brand-neutral-content);

  --color-info: oklch(74% 0.16 232.661);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(76% 0.177 163.223);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklch(82% 0.189 84.429);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(71% 0.194 13.428);
  --color-error-content: oklch(27% 0.105 12.094);

  --radius-selector: 0.5rem;
  --radius-field: 0.75rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

/* divide-base-300 (separadores entre filas de una lista: ver
   _chores_panel.html, account_home.html...): base-300 es un color del tema
   de daisyUI que el compilador de Tailwind del CDN no conoce, así que la
   clase no generaba nada y el separador salía del color del texto (negro
   en el tema claro). Mismo selector que usa Tailwind para divide-y. */
.divide-base-300 > :not(:last-child) {
  border-color: var(--color-base-300);
}

/* Barra lateral de secciones (ver homie/_sidebar.html y sidebar-toggle.js).
   Contraída (solo en escritorio: en móvil es un panel que se abre entero),
   se queda en los iconos; el texto se oculta solo visualmente, para que el
   enlace siga teniendo nombre para los lectores de pantalla. */
.sidebar {
  transition: width 150ms ease;
}

/* En escritorio el navbar se queda fijo arriba (sticky, ver base.html) y la
   barra lateral ocupa justo el resto de la altura: así el botón de
   contraer, abajo del todo, se ve sin tener que bajar. Altura del navbar de
   daisyUI (min-height 4rem) más su borde inferior. */
:root {
  --navbar-height: calc(4rem + 1px);
}

@media (min-width: 1024px) {
  .drawer-side {
    top: var(--navbar-height);
    height: calc(100dvh - var(--navbar-height));
  }
}

@media (min-width: 1024px) {
  [data-sidebar="collapsed"] .sidebar {
    width: 4.5rem;
  }

  [data-sidebar="collapsed"] .sidebar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  [data-sidebar="collapsed"] .sidebar .menu a,
  [data-sidebar="collapsed"] #sidebar-toggle {
    justify-content: center;
  }

  [data-sidebar="collapsed"] .sidebar-toggle-icon {
    transform: rotate(180deg);
  }
}

/* Opciones de un campo de selección múltiple como "chips" (ver
   homie/_field.html, p. ej. los responsables de una tarea). Con :has() en
   CSS propio y no con variantes de Tailwind (has-checked:bg-primary...):
   el compilador del CDN no conoce los colores de daisyUI. */
.choice-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  border: 1px solid var(--color-base-300);
  border-radius: 999px;
  background-color: var(--color-base-100);
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.choice-chip:hover {
  background-color: var(--color-base-200);
}

/* El checkbox de verdad: fuera de la vista pero en el árbol de
   accesibilidad y alcanzable con el teclado. */
.choice-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.choice-chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background-color: var(--color-base-200);
  color: var(--color-base-content);
  font-weight: 600;
  font-size: 0.75rem;
}

.choice-chip-check {
  display: none;
  font-weight: 700;
}

.choice-chip:has(input:checked) {
  border-color: var(--color-primary);
  background-color: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100));
}

.choice-chip:has(input:checked) .choice-chip-avatar {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
}

.choice-chip:has(input:checked) .choice-chip-check {
  display: inline;
  color: var(--color-primary);
}

.choice-chip:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Gráfico de evolución de ingresos y gastos (ver trend-chart.js). */
.trend-key {
  display: inline-block;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  flex-shrink: 0;
}

.trend-key-income {
  background-color: var(--chart-income);
}

.trend-key-expenses {
  background-color: var(--chart-expenses);
}

.trend-chart:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-field);
}

.trend-grid {
  stroke: var(--color-base-300);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.trend-axis {
  fill: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  font-size: 11px;
}

.trend-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.trend-line-income {
  stroke: var(--chart-income);
}

.trend-line-expenses {
  stroke: var(--chart-expenses);
}

/* Anillo del color del fondo alrededor de cada punto: se distingue aunque
   cruce la otra línea. */
.trend-dot {
  stroke: var(--color-base-100);
  stroke-width: 2;
}

.trend-dot-income {
  fill: var(--chart-income);
}

.trend-dot-expenses {
  fill: var(--chart-expenses);
}

.trend-end-label {
  fill: var(--color-base-content);
  font-size: 12px;
  font-weight: 600;
}

.trend-crosshair {
  stroke: color-mix(in oklab, var(--color-base-content) 40%, transparent);
  stroke-width: 1;
}

/* Línea vertical y puntos del mes señalado: solo mientras hay uno. */
.trend-hover:not(.is-visible) {
  visibility: hidden;
}

.trend-tooltip {
  position: absolute;
  pointer-events: none;
  min-width: 10rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  background-color: var(--color-base-100);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--color-base-content) 15%, transparent);
  font-size: 0.8125rem;
  z-index: 1;
}

.trend-tooltip-title {
  margin-bottom: 0.25rem;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}

.trend-tooltip-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.trend-tooltip-row span:last-child {
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}