/* Aura Track — tokens y componentes según el manual de marca.
   Paleta: Violeta Profundo #2B0B3F · Azul Eléctrico #003CFF · Rosa Neón #FF007F
           Naranja Aura #FF7B00 · Blanco Puro #FFFFFF · Fondo oscuro #0D0212
   Los colores con "-t" son tonos de la paleta ajustados para que el texto
   chico sea legible en cada modo (contraste AA). */

:root,
:root[data-theme="dark"] {
  --canvas: 13 2 18;        /* #0D0212 violeta ultra oscuro */
  --ink: 255 255 255;       /* Blanco Puro */
  --azul-t: 127 157 255;
  --rosa-t: 255 77 166;
  --naranja-t: 255 123 0;
  --card-a: rgba(43, 11, 63, 0.42);
  --card-b: rgba(13, 2, 18, 0.72);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-glow: 0 0 42px -14px rgba(0, 60, 255, 0.18);
  --tile-a: rgba(43, 11, 63, 0.30);
  --tile-b: rgba(13, 2, 18, 0.55);
  --input-bg: rgba(13, 2, 18, 0.85);
  --header-bg: rgba(13, 2, 18, 0.78);
  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-tick: rgba(255, 255, 255, 0.6);
  --pendiente: rgba(255, 255, 255, 0.14);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --canvas: 255 255 255;
  --ink: 43 11 63;          /* texto en Violeta Profundo */
  --azul-t: 0 60 255;
  --rosa-t: 200 0 100;
  --naranja-t: 179 84 0;
  --card-a: rgba(255, 255, 255, 0.94);
  --card-b: rgba(255, 255, 255, 0.88);
  --card-border: rgba(43, 11, 63, 0.09);
  --card-glow: 0 18px 44px -20px rgba(43, 11, 63, 0.16);
  --tile-a: rgba(43, 11, 63, 0.025);
  --tile-b: rgba(43, 11, 63, 0.04);
  --input-bg: #FFFFFF;
  --header-bg: rgba(255, 255, 255, 0.85);
  --chart-grid: rgba(43, 11, 63, 0.08);
  --chart-tick: rgba(43, 11, 63, 0.65);
  --pendiente: rgba(43, 11, 63, 0.12);
  color-scheme: light;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Quicksand', 'Comfortaa', system-ui, sans-serif;
  background-color: rgb(var(--canvas));
  color: rgb(var(--ink));
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.3s ease;
}

h1, h2, h3, h4, .font-brand { font-family: 'Comfortaa', 'Quicksand', sans-serif; }

/* Fondo: degradado de malla (manual §4). Núcleo violeta, ondas azules,
   halos rosa y naranja hacia los bordes. */
.aura-mesh-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 10%, rgba(43, 11, 63, 0.95) 0%, transparent 46%),
    radial-gradient(circle at 26% 22%, rgba(0, 60, 255, 0.22) 0%, transparent 40%),
    radial-gradient(circle at 88% 12%, rgba(255, 0, 127, 0.16) 0%, transparent 38%),
    radial-gradient(circle at 80% 85%, rgba(255, 123, 0, 0.13) 0%, transparent 44%),
    radial-gradient(circle at 50% 50%, rgba(43, 11, 63, 0.5) 0%, transparent 65%);
}
[data-theme="light"] .aura-mesh-bg {
  background:
    radial-gradient(circle at 12% 8%, rgba(43, 11, 63, 0.06) 0%, transparent 42%),
    radial-gradient(circle at 28% 18%, rgba(0, 60, 255, 0.07) 0%, transparent 40%),
    radial-gradient(circle at 88% 12%, rgba(255, 0, 127, 0.07) 0%, transparent 38%),
    radial-gradient(circle at 80% 85%, rgba(255, 123, 0, 0.07) 0%, transparent 44%);
}

/* Halos de energía flotando en gravedad cero (modo Trama / Screen, §4). */
.aura-orb {
  position: fixed;
  z-index: -1;
  border-radius: 9999px;
  filter: blur(95px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.4;
  animation: floatZeroG 16s ease-in-out infinite alternate;
}
[data-theme="light"] .aura-orb { mix-blend-mode: multiply; opacity: 0.1; }
@keyframes floatZeroG {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(22px, -18px, 0) scale(1.09); }
}

/* Superficies orgánicas: bordes suaves, sin sombras duras (§1 y §5). */
.glass-card {
  background: linear-gradient(155deg, var(--card-a) 0%, var(--card-b) 100%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--card-border);
  border-radius: 32px;
  box-shadow: var(--card-glow);
}
.bento-tile {
  background: linear-gradient(165deg, var(--tile-a) 0%, var(--tile-b) 100%);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-tile.is-hover:hover { border-color: rgba(255, 0, 127, 0.3); transform: translateY(-2px); }

.field {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid rgb(var(--ink) / 0.14);
  border-radius: 16px;
  padding: 0.55rem 0.85rem;
  font-size: 0.8125rem;
  color: rgb(var(--ink));
}
.field:focus { outline: none; border-color: #FF007F; box-shadow: 0 0 0 3px rgba(255, 0, 127, 0.18); }
.field::placeholder { color: rgb(var(--ink) / 0.4); }

/* Degradados oficiales (#2B0B3F → #003CFF → #FF007F → #FF7B00). */
.aura-gradient-flow { background: linear-gradient(90deg, #2B0B3F 0%, #003CFF 36%, #FF007F 72%, #FF7B00 100%); }
.aura-gradient-pill { background: linear-gradient(135deg, #003CFF 0%, #FF007F 62%, #FF7B00 100%); color: #FFFFFF; }
.aura-gradient-pill:hover { filter: brightness(1.08); }

/* Isotipo libre, sin marcos rígidos; en modo oscuro brilla (§5). */
.isotipo {
  filter: drop-shadow(0 0 16px rgba(255, 0, 127, 0.45)) drop-shadow(0 0 28px rgba(0, 60, 255, 0.35));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.isotipo:hover { transform: scale(1.05) rotate(-3deg); }
[data-theme="light"] .isotipo { filter: none; }

.pulse-soft { animation: pulseSoft 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulseSoft {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.04); }
}

/* Botones y controles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  transition: background-color 0.2s ease, filter 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, #003CFF 0%, #FF007F 62%, #FF7B00 100%);
  color: #FFFFFF;
  box-shadow: 0 0 24px -8px rgba(255, 0, 127, 0.6);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-ghost {
  background: rgb(var(--ink) / 0.05);
  border: 1px solid rgb(var(--ink) / 0.1);
  color: rgb(var(--ink) / 0.85);
  font-weight: 600;
}
.btn-ghost:hover:not(:disabled) { background: rgb(var(--ink) / 0.1); }
.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.6875rem; }
.btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; }

.eyebrow { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
.label { display: block; font-size: 0.75rem; font-weight: 600; color: rgb(var(--ink) / 0.75); margin-bottom: 0.3rem; }

.seg {
  display: inline-flex;
  padding: 0.3rem;
  border-radius: 9999px;
  background: rgb(var(--ink) / 0.05);
  border: 1px solid rgb(var(--ink) / 0.1);
}
.seg button { padding: 0.4rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; color: rgb(var(--ink) / 0.6); }
.seg button:hover { color: rgb(var(--ink)); }
.seg button[aria-pressed="true"] {
  background: linear-gradient(135deg, #003CFF 0%, #FF007F 62%, #FF7B00 100%);
  color: #FFFFFF;
  font-weight: 700;
}

/* Estados de un bloque: el color siempre va acompañado de texto. */
.st-completed { background: #003CFF; color: #FFFFFF; }
.st-half_completed { background: #FF7B00; color: #0D0212; }
.st-missed { background: #FF007F; color: #FFFFFF; }
.st-sin_respuesta { background: rgba(255, 0, 127, 0.22); color: rgb(var(--rosa-t)); }
.st-en_curso { background: rgba(0, 60, 255, 0.24); color: rgb(var(--azul-t)); }
.st-pendiente { background: var(--pendiente); color: rgb(var(--ink) / 0.55); }
.st-skipped { background: transparent; box-shadow: inset 0 0 0 1px rgb(var(--ink) / 0.25); color: rgb(var(--ink) / 0.45); }
.st-no_empezada { background: rgba(255, 0, 127, 0.12); color: rgb(var(--rosa-t)); }
.st-none { background: transparent; color: rgb(var(--ink) / 0.2); }

/* Chips de días y respuestas (aria-pressed = elegido) */
.chip {
  min-width: 2.1rem;
  padding: 0.35rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgb(var(--ink) / 0.05);
  border: 1px solid rgb(var(--ink) / 0.12);
  color: rgb(var(--ink) / 0.7);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.chip:hover:not(:disabled) { background: rgb(var(--ink) / 0.1); }
.chip[aria-pressed="true"] { background: linear-gradient(135deg, #003CFF 0%, #FF007F 62%, #FF7B00 100%); border-color: transparent; color: #FFFFFF; }
.chip.chip-completed[aria-pressed="true"] { background: #003CFF; }
.chip.chip-half_completed[aria-pressed="true"] { background: #FF7B00; color: #0D0212; }
.chip.chip-missed[aria-pressed="true"] { background: #FF007F; }

/* Íconos de tema: se muestra el que corresponde. */
[data-theme="dark"] .only-light,
[data-theme="light"] .only-dark { display: none; }

:focus-visible { outline: 2px solid #FF007F; outline-offset: 2px; }

input[type="range"] { accent-color: #FF007F; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chevron { transform: rotate(180deg); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 0, 127, 0.3); border-radius: 9999px; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

@media (prefers-reduced-motion: reduce) {
  .aura-orb, .pulse-soft { animation: none; }
  * { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}