/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
    --color-green-300: oklch(87.1% 0.15 154.449);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-teal-500: oklch(70.4% 0.14 182.503);
    --color-teal-600: oklch(60% 0.118 184.704);
    --color-teal-700: oklch(51.1% 0.096 186.391);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-600: oklch(51.1% 0.262 276.966);
    --color-purple-200: oklch(90.2% 0.063 306.703);
    --color-purple-300: oklch(82.7% 0.119 306.383);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-700: oklch(49.6% 0.265 301.924);
    --color-purple-900: oklch(38.1% 0.176 304.987);
    --color-pink-300: oklch(82.3% 0.12 346.018);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --leading-tight: 1.25;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --blur-sm: 8px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .z-20 {
    z-index: 20;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-flex {
    display: inline-flex;
  }
  .h-1\/3 {
    height: calc(1/3 * 100%);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-\[50vh\] {
    height: 50vh;
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }
  .min-h-\[200px\] {
    min-height: 200px;
  }
  .min-h-\[300px\] {
    min-height: 300px;
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-\[300px\] {
    width: 300px;
  }
  .w-\[450px\] {
    width: 450px;
  }
  .w-auto {
    width: auto;
  }
  .w-full {
    width: 100%;
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .flex-grow {
    flex-grow: 1;
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .appearance-none {
    appearance: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }
  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-blue-900\/50 {
    border-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-blue-900) 50%, transparent);
    }
  }
  .border-gray-500 {
    border-color: var(--color-gray-500);
  }
  .border-gray-600 {
    border-color: var(--color-gray-600);
  }
  .border-gray-700 {
    border-color: var(--color-gray-700);
  }
  .border-gray-800 {
    border-color: var(--color-gray-800);
  }
  .border-green-500\/30 {
    border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-green-500) 30%, transparent);
    }
  }
  .border-purple-500 {
    border-color: var(--color-purple-500);
  }
  .border-purple-600\/50 {
    border-color: color-mix(in srgb, oklch(55.8% 0.288 302.321) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-purple-600) 50%, transparent);
    }
  }
  .border-purple-700 {
    border-color: var(--color-purple-700);
  }
  .border-purple-900\/50 {
    border-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-purple-900) 50%, transparent);
    }
  }
  .border-red-800\/50 {
    border-color: color-mix(in srgb, oklch(44.4% 0.177 26.899) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-800) 50%, transparent);
    }
  }
  .border-red-900\/50 {
    border-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);
    }
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }
  .bg-gray-600 {
    background-color: var(--color-gray-600);
  }
  .bg-gray-700 {
    background-color: var(--color-gray-700);
  }
  .bg-gray-800 {
    background-color: var(--color-gray-800);
  }
  .bg-gray-800\/50 {
    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
    }
  }
  .bg-gray-800\/80 {
    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-800) 80%, transparent);
    }
  }
  .bg-gray-900 {
    background-color: var(--color-gray-900);
  }
  .bg-gray-900\/50 {
    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-900) 50%, transparent);
    }
  }
  .bg-gray-900\/80 {
    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
    }
  }
  .bg-green-600 {
    background-color: var(--color-green-600);
  }
  .bg-purple-600 {
    background-color: var(--color-purple-600);
  }
  .bg-purple-900\/50 {
    background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-purple-900) 50%, transparent);
    }
  }
  .bg-red-900\/30 {
    background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
    }
  }
  .bg-teal-600 {
    background-color: var(--color-teal-600);
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-blue-600 {
    --tw-gradient-from: var(--color-blue-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-indigo-600 {
    --tw-gradient-to: var(--color-indigo-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .object-cover {
    object-fit: cover;
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .text-blue-300 {
    color: var(--color-blue-300);
  }
  .text-blue-400 {
    color: var(--color-blue-400);
  }
  .text-gray-200 {
    color: var(--color-gray-200);
  }
  .text-gray-300 {
    color: var(--color-gray-300);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-green-300 {
    color: var(--color-green-300);
  }
  .text-green-400 {
    color: var(--color-green-400);
  }
  .text-pink-300 {
    color: var(--color-pink-300);
  }
  .text-purple-200 {
    color: var(--color-purple-200);
  }
  .text-purple-300 {
    color: var(--color-purple-300);
  }
  .text-purple-400 {
    color: var(--color-purple-400);
  }
  .text-red-300 {
    color: var(--color-red-300);
  }
  .text-red-400 {
    color: var(--color-red-400);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-yellow-300 {
    color: var(--color-yellow-300);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .accent-teal-500 {
    accent-color: var(--color-teal-500);
  }
  .opacity-80 {
    opacity: 80%;
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .group-hover\:border-purple-400 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        border-color: var(--color-purple-400);
      }
    }
  }
  .group-hover\:text-purple-300 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-purple-300);
      }
    }
  }
  .hover\:bg-blue-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .hover\:bg-gray-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .hover\:bg-green-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-700);
      }
    }
  }
  .hover\:bg-purple-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-purple-700);
      }
    }
  }
  .hover\:bg-teal-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-teal-700);
      }
    }
  }
  .hover\:from-blue-500 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--color-blue-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-indigo-500 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: var(--color-indigo-500);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:text-blue-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-300);
      }
    }
  }
  .hover\:text-red-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-300);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .hover\:shadow-indigo-500\/25 {
    &:hover {
      @media (hover: hover) {
        --tw-shadow-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 25%, transparent) var(--tw-shadow-alpha), transparent);
        }
      }
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .sm\:inline-flex {
    @media (width >= 40rem) {
      display: inline-flex;
    }
  }
  .sm\:w-auto {
    @media (width >= 40rem) {
      width: auto;
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:text-base {
    @media (width >= 40rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .md\:w-auto {
    @media (width >= 48rem) {
      width: auto;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .lg\:h-\[60vh\] {
    @media (width >= 64rem) {
      height: 60vh;
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}


/* ===== AulaQuest simulation custom CSS ===== */
html { height: 100%; }

        body { font-family: 'Inter', sans-serif; min-height: 100%; display: flex; flex-direction: column; background-color: #111827; color: #D1D5DB;}

        main { flex-grow: 1; display: flex; flex-direction: column; }



        /* Sliders */

        .slider-thumb::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #2563eb; cursor: pointer; border-radius: 50%; border: 2px solid #fff; transition: transform 0.1s ease-in-out; }

        .slider-thumb:active::-webkit-slider-thumb { transform: scale(1.2); }

        .slider-thumb:disabled::-webkit-slider-thumb { background-color: #4b5563; cursor: not-allowed; }

        .slider-thumb::-moz-range-thumb { width: 20px; height: 20px; background: #2563eb; cursor: pointer; border-radius: 50%; border: 2px solid #fff; }

        .slider-thumb:disabled::-moz-range-thumb { background-color: #4b5563; cursor: not-allowed; }



        /* Tabla de datos */

        .table-container { max-height: 155px; overflow-y: auto; }

        .table-container::-webkit-scrollbar { width: 8px; }

        .table-container::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }

        .table-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 10px; }

        .table-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }

        @media (max-width: 768px) { #dataTableContainer { top: 4.5rem; left: 0.75rem; right: auto; width: 220px; font-size: 0.8rem; } }



        /* --- INICIO: Estilos Preset v3.3 (CSS Mejorado) --- */

        .preset-section { 

            display: none; 

            position: relative; 

            background-image: linear-gradient(to bottom right, #232d3f, #1f2937); /* Degradado sutil */

            border: 1px solid rgba(255, 255, 255, 0.1); /* Borde más suave */

            padding: 1.25rem 1.5rem; 

            margin-bottom: 1rem; 

            border-radius: 0.75rem; 

            color: #E5E7EB;

            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.05); /* Sombra */

        }

        #preset-header { border-bottom: none; }

        

        .toggle-preset-section { 

            position: absolute; 

            top: 0.75rem; 

            right: 0.75rem; 

            background: rgba(31, 41, 55, 0.5); /* Más oscuro */

            border: 1px solid rgba(255, 255, 255, 0.1);

            backdrop-filter: blur(2px); /* Efecto cristal */

            color: #D1D5DB; 

            border-radius: 50%; 

            width: 28px; 

            height: 28px; 

            display: flex; 

            align-items: center; 

            justify-content: center; 

            cursor: pointer; 

            transition: background-color 0.2s, transform 0.2s; 

            z-index: 10; 

        } 

        .toggle-preset-section:hover { 

            background: rgba(55, 65, 81, 0.7); 

            transform: scale(1.1);

        } 

        .toggle-preset-section i { transition: transform 0.3s ease; }

        

        .preset-section-content { overflow: hidden; transition: max-height 0.4s ease-out, opacity 0.3s ease-out, margin-top 0.4s ease-out; max-height: 1000px; opacity: 1; margin-top: 0.5rem; } 

        #preset-header .preset-section-content { margin-top: 0; }

        .preset-section.collapsed .preset-section-content { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; } 

        .preset-section.collapsed .toggle-preset-section i { transform: rotate(180deg); }



        /* Estilos Header */

        #preset-header-content { display: flex; align-items: center; gap: 1.5rem; }

        #preset-logo img { 

            height: 80px; 

            width: 80px; 

            object-fit: contain; 

            border-radius: 0.375rem; 

            background-color: rgba(255,255,255,0.05); /* Fondo logo */

            border: 1px solid rgba(255,255,255,0.1);

            flex-shrink: 0; 

        }

        #preset-info { flex-grow: 1; display: flex; flex-direction: column; gap: 0.3rem; }

        #preset-simulation-title { font-size: 0.75rem; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; }

        #preset-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.1rem; color: #fff; line-height: 1.3; }

        .preset-meta-info-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; font-size: 0.875rem; color: #D1D5DB; margin-top: 0.2rem; margin-bottom: 0.6rem; }

        .preset-meta-info-line span { display: inline-flex; align-items: center; gap: 0.3rem; }

        .preset-meta-info-line i { color: #9CA3AF; font-size: 0.9em; width: 1em; text-align: center; }

        

        #preset-initial-instruction { 

            font-size: 0.95rem; 

            line-height: 1.6; 

            border-left: 3px solid #60a5fa; /* Azul más vivo */

            padding-left: 0.75rem; 

            margin-top: 0.2rem;

            background-color: rgba(0, 0, 0, 0.1); /* Fondo sutil */

            padding-top: 0.5rem;

            padding-bottom: 0.5rem;

            border-radius: 0 0.25rem 0.25rem 0;

        }

        

        @media (max-width: 768px) { 

            #preset-header-content { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }

            #preset-info { align-items: center; }

            #preset-initial-instruction { border-left: none; padding-left: 0; text-align: left; }

            .preset-meta-info-line { justify-content: center; } 

            #preset-logo img { height: 60px; width: 60px; }

        }



        /* --- Estilos Actividad Vinculada v3.3 --- */

        .preset-activity-section {

            background-color: #2b3a4f; /* Tono azulado más oscuro */

            border-radius: 0.5rem;

            padding: 0.75rem 1rem;

            margin-top: 1rem; 

            border: 1px solid rgba(255, 255, 255, 0.15);

            box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);

        }

        .preset-activity-header {

            display: flex;

            align-items: center;

            gap: 0.5rem;

            font-size: 0.8rem;

            font-weight: 600;

            color: #9CA3AF;

            text-transform: uppercase;

            letter-spacing: 0.05em;

            margin-bottom: 0.5rem;

        }

        .preset-activity-header i { color: #60A5FA; }

        #preset-activity-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }

        #activity-title { font-size: 1.1rem; font-weight: 600; color: #fff; text-decoration: none; }

        #activity-title:hover { text-decoration: underline; color: #bfdbfe; }

        #activity-key-wrapper { display: inline-flex; align-items: center; gap: 0.5rem; background-color: #111827; padding: 0.25rem 0.75rem; border-radius: 0.375rem; border: 1px solid rgba(255, 255, 255, 0.1); }

        #activity-key-wrapper span { font-size: 0.875rem; color: #9CA3AF; }

        #activity-key {

            font-family: monospace;

            font-size: 1rem;

            font-weight: 700;

            color: #FBBF24; 

            text-shadow: 0 0 8px rgba(251, 191, 36, 0.5); /* Glow */

        }

        #copy-activity-key-btn { background: none; border: none; color: #9CA3AF; cursor: pointer; transition: color 0.2s; }

        #copy-activity-key-btn:hover { color: #fff; }

        @media (max-width: 768px) {

            #preset-activity-content { flex-direction: column; align-items: center; gap: 0.75rem; }

        }



        /* --- Estilos Tareas y Enlaces v3.3 --- */

        #preset-tasks h3, #preset-links h4 { 

            font-size: 1.1rem; 

            font-weight: 600; 

            margin-top: 0; 

            margin-bottom: 1rem; 

            color: #E5E7EB; 

            padding-bottom: 0.5rem; 

            border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Borde más suave */

            display: flex; 

            align-items: center; 

            gap: 0.5rem; 

        }

        #preset-tasks h3 i, #preset-links h4 i { color: #9CA3AF; font-size: 0.9em; }

        #preset-tasks ul { list-style: decimal; margin-left: 1.5rem; color: #D1D5DB; } 

        #preset-tasks li { margin-bottom: 0.5rem; line-height: 1.6; }

        .preset-link-item { margin-bottom: 0.6rem; line-height: 1.5; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; } 

        .preset-link-item a.link-url { color: #60A5FA; text-decoration: underline; word-break: break-all; font-weight: 500; } 

        .preset-link-item a.link-url:hover { color: #93C5FD; } 

        .preset-link-description { color: #9CA3AF; font-size: 0.85em; }

        /* --- FIN Estilos Preset v3.3 --- */



        .element-hidden { display: none !important; }
        
        /* NUEVO: Ocultador dinámico para los resultados de las fases */
        body.hide-summaries .phase-summary { display: none !important; }
        body.hide-delete-btn .delete-phase-btn { display: none !important; }

        /* NUEVO: Interruptores Fantasma para Tiempo y Tablas */
        body.hide-timer #timer { display: none !important; }
        
        /* NUEVO: Ocultar todo el bloque de fases (Caja Negra) */
        body.hide-phases-cards #adv-phases-container,
        body.hide-phases-cards #add-phase-btn { 
            display: none !important; 
        }
        
        /* Oculta las columnas 2 y 3 (Posición y Velocidad del Coche A) */
        body.hide-table-a #dataTableContainer th:nth-child(2), 
        body.hide-table-a #dataTableContainer th:nth-child(3), 
        body.hide-table-a #dataTableContainer td:nth-child(2), 
        body.hide-table-a #dataTableContainer td:nth-child(3) { display: none !important; }
        
        /* Oculta las columnas 4 y 5 (Posición y Velocidad del Coche B) */
        body.hide-table-b #dataTableContainer th:nth-child(4), 
        body.hide-table-b #dataTableContainer th:nth-child(5), 
        body.hide-table-b #dataTableContainer td:nth-child(4), 
        body.hide-table-b #dataTableContainer td:nth-child(5) { display: none !important; }
        /* Oculta la columna 1 (Tiempo) de la tabla */
        body.hide-table-t #dataTableContainer th:nth-child(1), 
        body.hide-table-t #dataTableContainer td:nth-child(1) { display: none !important; }

/* ===== Compatibilidad utilidades legacy de Tailwind v3 ===== */
.bg-black.bg-opacity-50 { background-color: rgb(0 0 0 / 0.50); }
.bg-black.bg-opacity-60 { background-color: rgb(0 0 0 / 0.60); }


/* ============================================================
   AULAQUEST · EXPERIENCE HEADER
   Personalización responsive de la simulación
============================================================ */

.aq-experience-header {
    width: calc(100% - 2rem);
    max-width: none;
    margin: 1rem 1rem 0;
    position: relative;

    background:
        linear-gradient(
            135deg,
            rgba(30, 41, 59, 0.98),
            rgba(17, 24, 39, 0.98)
        );

    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    overflow: visible;
z-index: 50;
}


/* ------------------------------------------------------------
   CABECERA PRINCIPAL
------------------------------------------------------------ */

.aq-experience-brand {
    min-height: 76px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 11px 16px;
}


/* ------------------------------------------------------------
   LOGO
------------------------------------------------------------ */

.aq-experience-logo-wrap {
    display: none;

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    align-items: center;
    justify-content: center;

    padding: 5px;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;

    overflow: hidden;
}


.aq-experience-logo-wrap.is-visible {
    display: flex;
}


.aq-experience-logo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ------------------------------------------------------------
   COPY
------------------------------------------------------------ */

.aq-experience-copy {
    min-width: 0;
    flex: 1 1 auto;
}


.aq-experience-title-row {
    display: flex;
    align-items: center;

    gap: 16px;

    min-width: 0;
}


.aq-experience-titles {
    min-width: 0;
    flex: 1 1 auto;
}


/*
 * Máximo dos líneas.
 *
 * Un profesor puede escribir un título largo,
 * pero nunca puede empujar indefinidamente el canvas.
 */
.aq-experience-title {
    margin: 0;

    color: #f8fafc;

    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 800;

    line-height: 1.2;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}


/*
 * El subtítulo no crece en vertical.
 */
.aq-experience-subtitle {
    margin: 4px 0 0;

    color: #94a3b8;

    font-size: 0.75rem;
    font-weight: 600;

    line-height: 1.25;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ------------------------------------------------------------
   BOTÓN INSTRUCCIONES
------------------------------------------------------------ */

.aq-instructions-btn {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 38px;

    padding: 8px 12px;

    border: 1px solid rgba(96, 165, 250, 0.24);
    border-radius: 10px;

    background: rgba(37, 99, 235, 0.10);

    color: #bfdbfe;

    font-size: 0.78rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}


.aq-instructions-btn:hover {
    background: rgba(37, 99, 235, 0.18);
    border-color: rgba(96, 165, 250, 0.40);
    color: #ffffff;
}


.aq-instructions-btn[hidden] {
    display: none !important;
}


/* ------------------------------------------------------------
   PANEL DE INSTRUCCIONES

   IMPORTANTE:
   No forma parte de la altura permanente de la cabecera.
------------------------------------------------------------ */

.aq-instructions-panel {
    position: absolute;

    top: calc(100% + 8px);
    right: 0;

    width: min(560px, calc(100vw - 32px));

    z-index: 100;

    background: rgba(15, 23, 42, 0.985);

    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;

    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.42);

    overflow: hidden;
}


.aq-instructions-panel[hidden] {
    display: none !important;
}


.aq-instructions-panel-inner {
    max-height: min(56vh, 460px);

    overflow-y: auto;

    padding: 16px;
}


.aq-instructions-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;
}


#aq-instructions-title {
    margin: 0;

    color: #ffffff;

    font-size: 0.92rem;
    font-weight: 800;

    line-height: 1.3;
}


.aq-instructions-close {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    color: #94a3b8;

    cursor: pointer;
}


.aq-instructions-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}


#aq-instructions-content {
    color: #cbd5e1;

    font-size: 0.86rem;
    line-height: 1.65;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


.aq-instructions-link {
    display: inline-flex;

    margin-top: 14px;

    padding: 8px 12px;

    border-radius: 9px;

    background: #2563eb;

    color: #ffffff;

    font-size: 0.8rem;
    font-weight: 700;

    text-decoration: none;
}


.aq-instructions-link[hidden] {
    display: none !important;
}

/* ============================================================
   RASTRO TEMPORAL
============================================================ */

.aq-trail-controls {
    flex:
        0
        0
        auto;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        7px
        9px;

    background:
        rgba(15, 23, 42, 0.52);

    border:
        1px solid
        rgba(148, 163, 184, 0.12);

    border-radius: 10px;
}


.aq-trail-toggle {
    display: flex;
    align-items: center;

    gap: 9px;

    cursor: pointer;
}


.aq-trail-toggle-copy {
    display: flex;
    flex-direction: column;

    gap: 1px;
}


.aq-trail-toggle-copy strong {
    color: #cbd5e1;

    font-size: 0.7rem;
    font-weight: 800;
}


.aq-trail-toggle-copy > span {
    max-width: 190px;

    color: #64748b;

    font-size: 0.58rem;
    line-height: 1.25;
}


/*
 * Checkbox real accesible,
 * pero visualmente usamos nuestro switch.
 */
.aq-trail-checkbox {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}


.aq-trail-switch {
    position: relative;

    flex: 0 0 auto;

    width: 34px;
    height: 19px;

    background:
        #334155;

    border-radius: 999px;

    transition:
        background-color .15s ease;
}


.aq-trail-switch::after {
    content: '';

    position: absolute;

    top: 3px;
    left: 3px;

    width: 13px;
    height: 13px;

    background:
        #e2e8f0;

    border-radius: 50%;

    transition:
        transform .15s ease;
}


.aq-trail-checkbox:checked
+
.aq-trail-switch {
    background:
        #14b8a6;
}


.aq-trail-checkbox:checked
+
.aq-trail-switch::after {
    transform:
        translateX(15px);
}


.aq-trail-checkbox:focus-visible
+
.aq-trail-switch {
    outline:
        2px solid
        #5eead4;

    outline-offset: 2px;
}


.aq-trail-interval {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #64748b;

    font-size: 0.64rem;
    font-weight: 700;
}


.aq-trail-select {
    min-width: 68px;

    padding:
        5px
        7px;

    color: #cbd5e1;

    background:
        #0f172a;

    border:
        1px solid
        rgba(148, 163, 184, 0.16);

    border-radius: 7px;

    font-size: 0.67rem;
    font-weight: 700;

    cursor: pointer;
}


.aq-trail-select:disabled {
    opacity: 0.38;
    cursor: default;
}


/* ============================================================
   RASTRO · TABLET
============================================================ */

@media (max-width: 1100px) {

    .aq-global-scene {
        flex-wrap: wrap;
    }


    .aq-global-scene-copy {
        flex:
            0
            0
            auto;
    }


    .aq-global-distance {
        flex:
            1
            1
            380px;
    }


    .aq-trail-controls {
        margin-left: auto;
    }

}


/* ============================================================
   RASTRO · MOBILE
============================================================ */

@media (max-width: 700px) {

    .aq-trail-controls {
        width: 100%;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 8px;

        padding:
            8px
            9px;
    }


    .aq-trail-toggle-copy > span {
        display: none;
    }


    .aq-trail-toggle-copy strong {
        font-size: 0.68rem;
    }


    .aq-trail-interval {
        justify-content: flex-end;
    }


    .aq-trail-select {
        min-width: 64px;

        padding:
            5px
            6px;
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    .aq-experience-brand {
        min-height: 70px;

        padding: 10px 13px;
        gap: 11px;
    }


    .aq-experience-logo-wrap {
        width: 44px;
        height: 44px;

        flex-basis: 44px;

        border-radius: 10px;
    }


    .aq-experience-title {
        font-size: 1rem;
    }


    .aq-instructions-btn {
        padding-inline: 10px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 640px) {

    .aq-experience-header {
        width: calc(100% - 1rem);

        margin:
            0.5rem
            0.5rem
            0;

        border-radius: 13px;
    }


    .aq-experience-brand {
        min-height: 62px;

        gap: 9px;

        padding: 8px 10px;
    }


    .aq-experience-logo-wrap {
        width: 38px;
        height: 38px;

        flex: 0 0 38px;

        padding: 4px;

        border-radius: 9px;
    }


    .aq-experience-title-row {
        gap: 7px;
    }


    .aq-experience-title {
        font-size: 0.9rem;

        -webkit-line-clamp: 2;
    }


    .aq-experience-subtitle {
        margin-top: 2px;

        font-size: 0.65rem;
    }


    /*
     * En móvil no escribimos "Instrucciones":
     * dejamos solamente el icono.
     */
    .aq-instructions-btn {
        width: 36px;
        height: 36px;
        min-height: 36px;

        padding: 0;

        border-radius: 9px;
    }


    .aq-instructions-btn span {
        display: none;
    }


    /*
     * En móvil el panel usa prácticamente
     * todo el ancho disponible.
     */
    .aq-instructions-panel {
        position: fixed;

        top: auto;

        right: 8px;
        bottom: 8px;
        left: 8px;

        width: auto;

        max-height: min(70vh, 520px);

        border-radius: 16px;

        z-index: 9999;
    }


    .aq-instructions-panel-inner {
        max-height: min(70vh, 520px);

        padding: 15px;
    }

}

/* ============================================================
   AULAQUEST BUILDER · WYSIWYG / OJOS
============================================================ */

/*
 * Elemento visible pero bloqueado en Builder.
 */
.aq-ghost-mode {
    opacity: 0.46 !important;

    outline:
        2px dashed
        rgba(239, 68, 68, 0.9) !important;

    outline-offset: 2px;

    position: relative !important;

    filter: saturate(0.75);

    transition:
        opacity .16s ease,
        outline-color .16s ease,
        filter .16s ease;
}


/*
 * El ojo siempre debe seguir siendo clicable.
 */
.aq-eye-btn {
    position: absolute;

    top: -9px;
    right: -9px;

    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        2px solid
        #0f172a;

    border-radius: 999px;

    background: #2563eb;
    color: #ffffff;

    box-shadow:
        0 3px 10px
        rgba(0, 0, 0, 0.35);

    font-size: 11px;

    cursor: pointer;

    pointer-events: auto !important;

    z-index: 1000;

    transition:
        transform .15s ease,
        background .15s ease;
}


.aq-eye-btn:hover {
    transform: scale(1.08);
    background: #3b82f6;
}


/*
 * Ojo rojo = elemento oculto para el alumno.
 */
.aq-eye-btn.is-hidden {
    background: #ef4444;
}


.aq-eye-btn.is-hidden:hover {
    background: #f87171;
}


/*
 * Cuando un bloque está fantasma,
 * impedimos manipular su contenido...
 */
.aq-ghost-mode > *:not(.aq-eye-btn) {
    pointer-events: none !important;
}


/*
 * ...pero el ojo sigue funcionando.
 */
.aq-ghost-mode > .aq-eye-btn {
    pointer-events: auto !important;
}


/* ============================================================
   MODO BUILDER

   La simulación antigua usa estas clases para ocultar de verdad.
   En Builder debemos poder recuperar los elementos.
============================================================ */

body.aq-builder-mode .element-hidden[data-aq-builder-reveal="1"] {
    display: initial !important;
}


/*
 * Cronómetro virtual:
 * hide_timer trabaja mediante clase en body.
 * En Builder debe continuar visible para poder recuperarlo.
 */
body.aq-builder-mode.hide-timer #timer {
    display: block !important;
}


/* ============================================================
   PESTAÑAS OCULTAS
============================================================ */

.aq-mode-tab-hidden {
    display: none !important;
}


/*
 * En Builder nunca desaparecen completamente.
 */
body.aq-builder-mode .aq-mode-tab-hidden {
    display: flex !important;
}


/* ============================================================
   BUILDER · ETIQUETA DISCRETA
============================================================ */

body.aq-builder-mode #tabs-menu-wrapper::before {
    content: "Visibilidad para alumnos";

    position: absolute;

    top: -18px;
    left: 50%;

    transform: translateX(-50%);

    color: #64748b;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;

    white-space: nowrap;
}


/* ============================================================
   MOBILE BUILDER
============================================================ */

@media (max-width: 640px) {

    .aq-eye-btn {
        top: -7px;
        right: -5px;

        width: 25px;
        height: 25px;

        font-size: 10px;
    }

}


/* ============================================================
   AULAQUEST · CONTROL SYSTEM V1
   Base visual reutilizable para todas las simulaciones
============================================================ */


/* ============================================================
   PANEL DE MODO
============================================================ */

.aq-mode-panel {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 14px;
}


/* ============================================================
   CABECERA DEL MODO
============================================================ */

.aq-mode-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        2px
        2px
        10px;

    border-bottom:
        1px solid
        rgba(148, 163, 184, 0.12);
}


.aq-mode-heading-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        rgba(37, 99, 235, 0.13);

    border:
        1px solid
        rgba(96, 165, 250, 0.18);

    color: #60a5fa;

    font-size: 15px;
}


.aq-mode-heading-copy {
    min-width: 0;
}


.aq-mode-heading-copy h3 {
    margin: 0;

    color: #f8fafc;

    font-size: 0.94rem;
    font-weight: 800;

    line-height: 1.25;
}


.aq-mode-heading-copy p {
    margin:
        3px
        0
        0;

    color: #94a3b8;

    font-size: 0.72rem;
    font-weight: 500;

    line-height: 1.4;
}


/* ============================================================
   SECCIÓN
============================================================ */

.aq-control-section {
    padding: 14px;

    background:
        rgba(15, 23, 42, 0.42);

    border:
        1px solid
        rgba(148, 163, 184, 0.11);

    border-radius: 14px;
}


.aq-control-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 12px;
}


.aq-control-kicker {
    display: block;

    margin-bottom: 3px;

    color: #60a5fa;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.aq-control-section-heading h4 {
    margin: 0;

    color: #e2e8f0;

    font-size: 0.84rem;
    font-weight: 800;

    line-height: 1.25;
}


.aq-control-section-badge {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding:
        4px
        9px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.04);

    border:
        1px solid
        rgba(148, 163, 184, 0.12);

    color: #64748b;

    font-size: 0.67rem;
    font-weight: 800;

    white-space: nowrap;
}


/* ============================================================
   GRIDS
============================================================ */

.aq-control-grid {
    display: grid;

    width: 100%;

    gap: 10px;
}


.aq-control-grid-3 {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}

.aq-control-grid-4 {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}


.aq-scene-grid {
    display: grid;

    grid-template-columns:
        minmax(180px, 0.55fr)
        minmax(280px, 1.45fr);

    gap: 10px;
}


/* ============================================================
   CONTROL CARD
============================================================ */

.aq-control-card {
    min-width: 0;

    padding: 12px;

    position: relative;

    background:
        linear-gradient(
            180deg,
            rgba(30, 41, 59, 0.72),
            rgba(30, 41, 59, 0.45)
        );

    border:
        1px solid
        rgba(148, 163, 184, 0.11);

    border-radius: 12px;

    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        transform 0.16s ease;
}


.aq-control-card:hover {
    border-color:
        rgba(96, 165, 250, 0.20);

    background:
        linear-gradient(
            180deg,
            rgba(30, 41, 59, 0.82),
            rgba(30, 41, 59, 0.52)
        );
}


.aq-control-card-compact {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ============================================================
   LABEL + VALUE
============================================================ */

.aq-control-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;
}


.aq-control-label-row label {
    margin: 0;

    color: #cbd5e1;

    font-size: 0.75rem;
    font-weight: 700;

    line-height: 1.25;
}


.aq-control-label-row label span {
    margin-left: 3px;

    color: #64748b;

    font-weight: 700;
}


.aq-control-value {
    flex: 0 0 auto;

    min-width: 68px;

    padding:
        4px
        7px;

    border-radius: 7px;

    background:
        rgba(15, 23, 42, 0.72);

    border:
        1px solid
        rgba(148, 163, 184, 0.12);

    color: #f8fafc;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 0.67rem;
    font-weight: 800;

    text-align: center;

    white-space: nowrap;
}


/* ============================================================
   HELP
============================================================ */

.aq-control-help {
    margin-top: 8px;

    color: #64748b;

    font-size: 0.64rem;
    font-weight: 500;

    line-height: 1.35;
}


/* ============================================================
   RANGE
============================================================ */

.aq-range {
    width: 100%;

    display: block;

    height: 18px;

    margin: 0;

    cursor: pointer;
}


/* ============================================================
   SELECT
============================================================ */

.aq-select {
    width: 100%;

    min-height: 37px;

    padding:
        7px
        10px;

    outline: none;

    border:
        1px solid
        rgba(148, 163, 184, 0.18);

    border-radius: 9px;

    background: #111827;

    color: #e2e8f0;

    font-size: 0.74rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}


.aq-select:focus {
    border-color:
        rgba(96, 165, 250, 0.55);

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, 0.10);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    .aq-control-grid-3 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    /*
     * Aceleración ocupa la segunda fila completa.
     */
    .aq-control-grid-3
    .aq-control-card:last-child {
        grid-column: 1 / -1;
    }


    .aq-scene-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
    
    .aq-control-grid-4 {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 640px) {

    .aq-mode-panel {
        gap: 10px;
    }


    .aq-mode-heading {
        gap: 9px;

        padding-bottom: 8px;
    }


    .aq-mode-heading-icon {
        width: 34px;
        height: 34px;

        flex-basis: 34px;

        border-radius: 9px;
    }


    .aq-mode-heading-copy h3 {
        font-size: 0.84rem;
    }


    .aq-mode-heading-copy p {
        display: none;
    }


    .aq-control-section {
        padding: 10px;

        border-radius: 12px;
    }


    .aq-control-section-heading {
        margin-bottom: 9px;
    }


    .aq-control-section-badge {
        display: none;
    }


    .aq-control-grid-3,
    .aq-scene-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .aq-control-grid-3
    .aq-control-card:last-child {
        grid-column: auto;
    }


    .aq-control-card {
        padding: 10px;

        border-radius: 10px;
    }


    .aq-control-label-row {
        margin-bottom: 7px;
    }


    .aq-control-help {
        display: none;
    }


    .aq-control-value {
        min-width: 64px;

        padding:
            3px
            6px;

        font-size: 0.64rem;
    }


    .aq-select {
        min-height: 40px;
    }
    
    .aq-control-grid-4 {
    grid-template-columns:
        minmax(0, 1fr);
}
}


/* ============================================================
   AULAQUEST · SIMULATION TOOLBAR V1
   Acciones globales de la simulación
============================================================ */

.aq-simulation-toolbar {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 9px 10px;

    margin-bottom: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(30, 41, 59, 0.62),
            rgba(15, 23, 42, 0.48)
        );

    border:
        1px solid
        rgba(148, 163, 184, 0.11);

    border-radius: 13px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025);
}


/* ============================================================
   GRUPOS
============================================================ */

.aq-toolbar-primary,
.aq-toolbar-tools {
    display: flex;
    align-items: center;

    gap: 7px;
}


.aq-toolbar-tools {
    margin-left: auto;
}


/* ============================================================
   BOTÓN BASE
============================================================ */

.aq-toolbar-btn {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        7px
        12px;

    border:
        1px solid
        rgba(148, 163, 184, 0.14);

    border-radius: 9px;

    background:
        rgba(30, 41, 59, 0.56);

    color: #cbd5e1;

    font-size: 0.74rem;
    font-weight: 750;

    line-height: 1;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.12s ease;
}


.aq-toolbar-btn:hover {
    background:
        rgba(51, 65, 85, 0.72);

    border-color:
        rgba(148, 163, 184, 0.24);

    color: #ffffff;
}


.aq-toolbar-btn:active {
    transform: translateY(1px);
}


/* ============================================================
   PLAY PRINCIPAL
============================================================ */

.aq-toolbar-btn-primary {
    min-width: 102px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    border-color:
        rgba(96, 165, 250, 0.38);

    color: #ffffff;

    box-shadow:
        0 5px 16px
        rgba(37, 99, 235, 0.16);
}


.aq-toolbar-btn-primary:hover {
    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #2563eb
        );

    border-color:
        rgba(147, 197, 253, 0.48);

    color: #ffffff;
}


/* ============================================================
   TABLA / GRÁFICAS
============================================================ */

.aq-toolbar-btn-tool {
    background:
        rgba(15, 23, 42, 0.48);

    color: #94a3b8;
}


.aq-toolbar-btn-tool:hover {
    color: #e2e8f0;
}


/* ============================================================
   ICONOS
============================================================ */

.aq-toolbar-btn-icon {
    width: 17px;
    height: 17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 17px;

    font-size: 0.72rem;

    opacity: 0.92;
}


/* ============================================================
   DISABLED

   Cuando simulation.js bloquea Iniciar, seguimos teniendo
   un estado visual coherente.
============================================================ */

.aq-toolbar-btn:disabled {
    opacity: 0.46;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    .aq-simulation-toolbar {
        padding: 8px;

        gap: 8px;
    }


    .aq-toolbar-btn {
        min-height: 38px;

        padding:
            7px
            10px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 640px) {

    .aq-simulation-toolbar {
        position: relative;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 7px;

        padding: 7px;

        margin-bottom: 10px;

        border-radius: 11px;
    }


    .aq-toolbar-primary {
        min-width: 0;

        gap: 6px;
    }


    .aq-toolbar-tools {
        margin-left: 0;

        gap: 5px;
    }


    .aq-toolbar-btn {
        min-height: 40px;

        padding:
            7px
            9px;

        border-radius: 8px;
    }


    /*
     * Iniciar sigue teniendo texto porque es
     * la acción principal.
     */
    .aq-toolbar-btn-primary {
        min-width: 92px;
    }


    /*
     * En móvil Tabla y Gráficas pueden vivir
     * prácticamente como iconos.
     */
    .aq-toolbar-tools
    .aq-toolbar-btn {
        width: 40px;

        padding: 0;
    }


    .aq-toolbar-tools
    .aq-toolbar-btn-label {
        display: none;
    }


    /*
     * Reiniciar conserva texto mientras tengamos
     * espacio razonable.
     */
    .aq-toolbar-primary
    .aq-toolbar-btn:not(
        .aq-toolbar-btn-primary
    ) {
        min-width: 88px;
    }

}


/* ============================================================
   MOBILE MUY ESTRECHO
============================================================ */

@media (max-width: 390px) {

    /*
     * En móviles muy estrechos Reiniciar también
     * se convierte en botón iconográfico.
     */
    .aq-toolbar-primary
    .aq-toolbar-btn:not(
        .aq-toolbar-btn-primary
    ) {
        width: 40px;
        min-width: 40px;

        padding: 0;
    }


    .aq-toolbar-primary
    .aq-toolbar-btn:not(
        .aq-toolbar-btn-primary
    )
    .aq-toolbar-btn-label {
        display: none;
    }

}

/* ============================================================
   AULAQUEST · COMMAND BAR V1
   Selector de modo + acciones en una única superficie
============================================================ */

.aq-command-bar {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 9px 10px;

    margin-bottom: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(30, 41, 59, 0.68),
            rgba(15, 23, 42, 0.54)
        );

    border:
        1px solid
        rgba(148, 163, 184, 0.12);

    border-radius: 14px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025);
}


/* ============================================================
   SELECTOR DE MODOS
============================================================ */

.aq-mode-switcher {
    flex: 0 1 auto;

    min-width: 0;

    margin: 0 !important;
}


.aq-mode-switcher-track {
    display: inline-flex;
    align-items: center;

    gap: 3px;

    padding: 4px;

    background:
        rgba(15, 23, 42, 0.72);

    border:
        1px solid
        rgba(148, 163, 184, 0.14);

    border-radius: 11px;
}


/*
 * simulation.js cambia dinámicamente las clases
 * de los botones al cambiar de pestaña.
 *
 * Por eso damos aquí una geometría común mediante ID.
 */
#tab-classic,
#tab-pursuit,
#tab-advanced {
    min-height: 38px;

    padding:
        7px
        14px !important;

    border-radius:
        8px !important;

    white-space: nowrap;

    font-size:
        0.76rem !important;
}


/* Iconos algo más discretos */

#tab-classic i,
#tab-pursuit i,
#tab-advanced i {
    font-size: 0.76rem;
}


/* ============================================================
   TOOLBAR INTEGRADA
============================================================ */

.aq-command-bar
.aq-simulation-toolbar-inline {
    width: auto;

    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 6px;

    padding: 0;

    margin: 0;

    background: transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;
}


/*
 * Ya no necesitamos grupos separados.
 * Todo vive en la misma línea.
 */

.aq-simulation-toolbar-inline
.aq-toolbar-btn {
    min-height: 38px;
}


/* ============================================================
   SEPARADOR ACCIONES / RESULTADOS
============================================================ */

.aq-toolbar-separator {
    width: 1px;
    height: 24px;

    margin:
        0
        2px;

    background:
        rgba(148, 163, 184, 0.15);

    flex: 0 0 1px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1000px) {

    .aq-command-bar {
        flex-wrap: wrap;

        gap: 8px;
    }


    .aq-mode-switcher {
        flex:
            1
            1
            auto;
    }


    .aq-command-bar
    .aq-simulation-toolbar-inline {
        margin-left: auto;
    }


    #tab-classic,
    #tab-pursuit,
    #tab-advanced {
        padding:
            7px
            11px !important;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .aq-command-bar {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr);

        gap: 7px;

        padding: 7px;

        margin-bottom: 10px;

        border-radius: 12px;
    }


    /* --------------------------------------------------------
       MODOS
    -------------------------------------------------------- */

    .aq-mode-switcher {
        width: 100%;
    }


    .aq-mode-switcher-track {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 3px;
    }


    #aq-eye-mode-classic,
    #aq-eye-mode-pursuit,
    #aq-eye-mode-advanced {
        width: 100%;
    }


    #tab-classic,
    #tab-pursuit,
    #tab-advanced {
        width: 100%;

        min-width: 0;

        padding:
            7px
            5px !important;

        font-size:
            0.70rem !important;
    }


    /* --------------------------------------------------------
       ACCIONES
    -------------------------------------------------------- */

    .aq-command-bar
    .aq-simulation-toolbar-inline {
        width: 100%;

        display: grid;

        grid-template-columns:
            minmax(92px, 1.25fr)
            minmax(82px, 1fr)
            40px
            40px;

        gap: 5px;

        margin: 0;
    }


    .aq-toolbar-separator {
        display: none;
    }


    .aq-simulation-toolbar-inline
    #aq-eye-toggle-table,
    .aq-simulation-toolbar-inline
    #aq-eye-toggle-graphs {
        width: 40px;
    }


    .aq-simulation-toolbar-inline
    #toggleTableBtn,
    .aq-simulation-toolbar-inline
    #toggleGraphsBtn {
        width: 40px;

        padding: 0;
    }


    .aq-simulation-toolbar-inline
    #toggleTableBtn
    .aq-toolbar-btn-label,

    .aq-simulation-toolbar-inline
    #toggleGraphsBtn
    .aq-toolbar-btn-label {
        display: none;
    }

}


/* ============================================================
   MOBILE MUY PEQUEÑO
============================================================ */

@media (max-width: 390px) {

    #tab-classic span,
    #tab-pursuit span,
    #tab-advanced span {
        font-size: 0.64rem;
    }


    .aq-command-bar
    .aq-simulation-toolbar-inline {
        grid-template-columns:
            minmax(88px, 1fr)
            40px
            40px
            40px;
    }


    /*
     * Reiniciar también se convierte en icono
     * para no comprimir Iniciar.
     */
    #resetBtn {
        width: 40px;

        padding: 0;
    }


    #resetBtn
    .aq-toolbar-btn-label {
        display: none;
    }

}


/* ============================================================
   AULAQUEST · PURSUIT MODE V1
============================================================ */

.aq-mode-heading-icon-pursuit {
    background:
        rgba(168, 85, 247, 0.10);

    border-color:
        rgba(192, 132, 252, 0.18);

    color: #c084fc;
}


/* ============================================================
   DOS VEHÍCULOS
============================================================ */

.aq-pursuit-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.aq-pursuit-vehicle {
    min-width: 0;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 9px;

    padding: 13px;

    border-radius: 14px;

    background:
        rgba(15, 23, 42, 0.44);

    border:
        1px solid
        rgba(148, 163, 184, 0.11);
}


/*
 * Cabecera ocupa todo el ancho.
 */
.aq-pursuit-heading {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-width: 0;

    padding-bottom: 10px;

    border-bottom:
        1px solid
        rgba(148, 163, 184, 0.10);
}


.aq-pursuit-identity {
    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 0;
}


.aq-pursuit-heading h4 {
    margin: 2px 0 0;

    color: #e2e8f0;

    font-size: 0.84rem;
    font-weight: 800;

    line-height: 1.2;
}


/* ============================================================
   IDENTIDAD A / B
============================================================ */

.aq-pursuit-dot {
    width: 10px;
    height: 10px;

    flex: 0 0 10px;

    border-radius: 999px;

    box-shadow:
        0 0 0 4px
        rgba(255, 255, 255, 0.025);
}


.aq-pursuit-dot-a {
    background: #ef4444;
}


.aq-pursuit-dot-b {
    background: #3b82f6;
}


.aq-kicker-red {
    color: #f87171;
}


.aq-kicker-blue {
    color: #60a5fa;
}


.aq-pursuit-car-icon {
    font-size: 16px;

    opacity: 0.75;
}


.aq-pursuit-car-a {
    color: #ef4444;
}


.aq-pursuit-car-b {
    color: #3b82f6;
}


/* ============================================================
   VEHÍCULO SELECTOR

   Ocupa toda una línea, luego x0/v0/a comparten línea.
============================================================ */

.aq-pursuit-vehicle
.aq-control-card-compact {
    grid-column: 1 / -1;
}


/* A: acento rojo muy sutil */

.aq-pursuit-vehicle-a {
    border-top-color:
        rgba(239, 68, 68, 0.32);
}


/* B: acento azul */

.aq-pursuit-vehicle-b {
    border-top-color:
        rgba(59, 130, 246, 0.34);
}


/* ============================================================
   ESCENA GLOBAL
============================================================ */

.aq-global-scene {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 14px;

    padding:
        11px
        13px;

    background:
        rgba(15, 23, 42, 0.38);

    border:
        1px solid
        rgba(148, 163, 184, 0.10);

    border-radius: 12px;
}


.aq-global-scene-copy {
    min-width: 160px;

    display: flex;
    align-items: center;

    gap: 11px;
}


.aq-global-scene-copy > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.aq-global-scene-copy strong {
    color: #cbd5e1;

    font-size: 0.74rem;
    font-weight: 800;
}


.aq-global-scene-copy span:not(
    .aq-control-kicker
) {
    color: #64748b;

    font-size: 0.63rem;
    line-height: 1.3;
}


.aq-global-distance {
    flex:
        1
        1
        520px;

    max-width: 680px;

    display: grid;

    grid-template-columns:
        minmax(160px, 1fr)
        auto;

    align-items: center;

    gap: 12px;
}


.aq-global-distance
.aq-control-value {
    min-width: 76px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1000px) {

    .aq-pursuit-vehicle {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .aq-pursuit-vehicle
    .aq-control-card-compact {
        grid-column: auto;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .aq-pursuit-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 9px;
    }


    .aq-pursuit-vehicle {
        padding: 10px;

        gap: 7px;

        border-radius: 12px;
    }


    .aq-global-scene {
        flex-direction: column;
        align-items: stretch;

        gap: 9px;

        padding: 10px;

        margin-top: 10px;
    }


    .aq-global-scene-copy {
        min-width: 0;
    }


    /*
     * La explicación pequeña desaparece en móvil.
     */
    .aq-global-scene-copy
    div > span {
        display: none;
    }


    .aq-global-distance {
        flex: none;

        max-width: none;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 9px;
    }

}


/* ============================================================
   FIX · VISIBILIDAD DE MODOS
   La clase hidden debe ganar siempre sobre aq-mode-panel.
============================================================ */

.aq-mode-panel.hidden {
    display: none !important;
}


/* ============================================================
   AULAQUEST · ADVANCED / PHASES MODE V1
============================================================ */

.aq-mode-heading-icon-advanced {
    background:
        rgba(168, 85, 247, 0.11);

    border-color:
        rgba(192, 132, 252, 0.20);

    color: #c084fc;
}


.aq-kicker-purple {
    color: #c084fc;
}


/* ============================================================
   SECCIÓN DE FASES
============================================================ */

.aq-phases-section {
    padding: 14px;

    background:
        rgba(15, 23, 42, 0.42);

    border:
        1px solid
        rgba(148, 163, 184, 0.11);

    border-radius: 14px;
}


.aq-phases-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 12px;
}


.aq-phases-section-heading h4 {
    margin: 0;

    color: #e2e8f0;

    font-size: 0.86rem;
    font-weight: 800;
}


.aq-phases-section-heading p {
    margin: 4px 0 0;

    color: #64748b;

    font-size: 0.66rem;
    line-height: 1.4;
}


.aq-phases-count {
    flex: 0 0 auto;

    min-width: 62px;

    padding:
        5px
        9px;

    border-radius: 999px;

    background:
        rgba(168, 85, 247, 0.08);

    border:
        1px solid
        rgba(192, 132, 252, 0.16);

    color: #c4b5fd;

    font-size: 0.65rem;
    font-weight: 800;

    text-align: center;
}


/* ============================================================
   LISTA DE FASES
============================================================ */

.aq-phases-list {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


/*
 * Tarjetas generadas por JS.
 *
 * No cambiamos su HTML todavía,
 * solo les damos una base coherente.
 */
.aq-phases-list > div {
    border-radius: 12px !important;

    border:
        1px solid
        rgba(168, 85, 247, 0.20) !important;

    background:
        linear-gradient(
            180deg,
            rgba(30, 41, 59, 0.72),
            rgba(30, 41, 59, 0.48)
        ) !important;

    box-shadow: none !important;
}


/* ============================================================
   BOTÓN AÑADIR
============================================================ */

.aq-phases-actions {
    display: flex;
    justify-content: center;

    margin-top: 12px;
}


.aq-add-phase-btn {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        8px
        14px;

    border:
        1px solid
        rgba(192, 132, 252, 0.26);

    border-radius: 9px;

    background:
        rgba(126, 34, 206, 0.16);

    color: #ddd6fe;

    font-size: 0.74rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}


.aq-add-phase-btn:hover {
    background:
        rgba(126, 34, 206, 0.26);

    border-color:
        rgba(192, 132, 252, 0.40);

    color: #ffffff;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    .aq-advanced-panel
    .aq-control-grid-3 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    /*
     * Vehículo ocupa toda la fila inferior.
     */
    .aq-advanced-panel
    #control-vehicle-advanced {
        grid-column: 1 / -1;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 640px) {

    .aq-advanced-panel
    .aq-control-grid-3 {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .aq-advanced-panel
    #control-vehicle-advanced {
        grid-column: auto;
    }


    .aq-phases-section {
        padding: 10px;

        border-radius: 12px;
    }


    .aq-phases-section-heading {
        margin-bottom: 9px;
    }


    .aq-phases-section-heading p {
        display: none;
    }


    .aq-phases-count {
        min-width: 54px;

        padding:
            4px
            7px;

        font-size: 0.60rem;
    }

}


/* ============================================================
   AULAQUEST · PHASE CARD V1
============================================================ */

.aq-phase-card {
    width: 100%;

    padding: 13px;

    background:
        linear-gradient(
            180deg,
            rgba(30, 41, 59, .72),
            rgba(15, 23, 42, .54)
        );

    border:
        1px solid
        rgba(168, 85, 247, .20);

    border-radius: 13px;
}


/* ============================================================
   HEADER
============================================================ */

.aq-phase-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding-bottom: 10px;

    margin-bottom: 11px;

    border-bottom:
        1px solid
        rgba(148, 163, 184, .10);
}


.aq-phase-card-identity {
    display: flex;
    align-items: center;

    gap: 10px;
}


.aq-phase-card-identity h5 {
    margin: 2px 0 0;

    color: #e2e8f0;

    font-size: .80rem;
    font-weight: 800;
}


.aq-phase-number {
    width: 31px;
    height: 31px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 31px;

    border-radius: 9px;

    background:
        rgba(126, 34, 206, .18);

    border:
        1px solid
        rgba(192, 132, 252, .22);

    color: #ddd6fe;

    font-size: .74rem;
    font-weight: 900;
}


/* ============================================================
   DELETE
============================================================ */

.aq-phase-delete {
    width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(248, 113, 113, .15);

    border-radius: 8px;

    background:
        rgba(127, 29, 29, .08);

    color: #f87171;

    font-size: .70rem;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease;
}


.aq-phase-delete:hover {
    background:
        rgba(127, 29, 29, .20);

    border-color:
        rgba(248, 113, 113, .30);
}


/* ============================================================
   CONFIG GRID
============================================================ */

.aq-phase-config {
    display: grid;

    grid-template-columns:
        minmax(150px, .75fr)
        minmax(210px, 1.4fr)
        minmax(150px, .75fr);

    gap: 9px;
}


.aq-phase-field {
    min-width: 0;

    padding: 10px;

    background:
        rgba(15, 23, 42, .46);

    border:
        1px solid
        rgba(148, 163, 184, .10);

    border-radius: 10px;
}


.aq-phase-field label {
    display: block;

    margin-bottom: 7px;

    color: #94a3b8;

    font-size: .65rem;
    font-weight: 750;

    line-height: 1.25;
}


.aq-phase-field label span {
    color: #64748b;
}


/* ============================================================
   INPUTS
============================================================ */

.aq-phase-input-group {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 7px;
}


.aq-phase-input,
.aq-phase-select {
    width: 100%;

    min-height: 36px;

    padding:
        6px
        9px;

    outline: none;

    background: #111827;

    border:
        1px solid
        rgba(148, 163, 184, .16);

    border-radius: 8px;

    color: #f1f5f9;

    font-size: .72rem;
    font-weight: 700;
}


.aq-phase-input:focus,
.aq-phase-select:focus {
    border-color:
        rgba(192, 132, 252, .48);

    box-shadow:
        0 0 0 3px
        rgba(168, 85, 247, .08);
}


.aq-phase-unit {
    color: #94a3b8;

    font-size: .66rem;
    font-weight: 800;

    white-space: nowrap;
}


/* ============================================================
   WARNING
============================================================ */

.aq-phase-warning {
    display: flex;
    align-items: flex-start;

    gap: 7px;

    margin-top: 9px;

    padding: 8px 10px;

    border:
        1px solid
        rgba(248, 113, 113, .20);

    border-radius: 9px;

    background:
        rgba(127, 29, 29, .11);

    color: #fca5a5;

    font-size: .67rem;
    font-weight: 650;

    line-height: 1.4;
}


.aq-phase-warning.hidden {
    display: none !important;
}


/* ============================================================
   SUMMARY
============================================================ */

.aq-phase-summary {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 9px;

    padding: 9px 10px;

    background:
        rgba(16, 185, 129, .045);

    border:
        1px solid
        rgba(52, 211, 153, .10);

    border-radius: 9px;

    color: #94a3b8;

    font-size: .66rem;

    line-height: 1.45;
}


.aq-phase-summary strong {
    color: #d1fae5;
}


.aq-phase-summary-icon {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background:
        rgba(16, 185, 129, .08);

    color: #6ee7b7;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    .aq-phase-config {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .aq-phase-condition {
        grid-column: 1 / -1;

        grid-row: 1;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 640px) {

    .aq-phase-card {
        padding: 10px;

        border-radius: 11px;
    }


    .aq-phase-config {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 7px;
    }


    .aq-phase-condition {
        grid-column: auto;
        grid-row: auto;
    }


    .aq-phase-field {
        padding: 9px;
    }


    .aq-phase-summary {
        align-items: flex-start;
    }

}



/* ============================================================
   AULAQUEST · SIMULATION FOOTER V1
   Footer normal. Nunca sticky ni fixed.
============================================================ */

.aq-sim-footer {
    position: static;

    width: 100%;

    margin-top: 18px;

    padding:
        0
        16px
        18px;

    background: transparent;
}


.aq-sim-footer-inner {
    width: 100%;

    max-width: 1640px;

    margin: 0 auto;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(30, 41, 59, 0.88),
            rgba(15, 23, 42, 0.92)
        );

    border:
        1px solid
        rgba(148, 163, 184, 0.12);

    border-radius: 16px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025);
}


/* ============================================================
   BLOQUE PRINCIPAL
============================================================ */

.aq-sim-footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        16px
        18px;
}


.aq-sim-footer-brand {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 13px;

    flex:
        1
        1
        auto;
}


.aq-sim-footer-logo-wrap {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 5px;

    background:
        rgba(255, 255, 255, 0.96);

    border-radius: 11px;
}


.aq-sim-footer-logo {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.aq-sim-footer-copy {
    min-width: 0;
}


.aq-sim-footer-kicker {
    display: block;

    margin-bottom: 2px;

    color: #60a5fa;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.aq-sim-footer-copy h2 {
    margin: 0;

    color: #f8fafc;

    font-size:
        clamp(
            .92rem,
            1.45vw,
            1.08rem
        );

    font-weight: 850;

    line-height: 1.22;
}


.aq-sim-footer-copy p {
    margin:
        4px
        0
        0;

    max-width: 660px;

    color: #94a3b8;

    font-size: .70rem;
    font-weight: 500;

    line-height: 1.45;
}


/* ============================================================
   CTA
============================================================ */

.aq-sim-footer-cta {
    min-height: 40px;

    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        9px
        14px;

    border:
        1px solid
        rgba(96, 165, 250, 0.34);

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    color: #ffffff;

    font-size: .74rem;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    box-shadow:
        0 7px 18px
        rgba(37, 99, 235, .14);

    transition:
        background .15s ease,
        transform .12s ease,
        border-color .15s ease;
}


.aq-sim-footer-cta:hover {
    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #2563eb
        );

    border-color:
        rgba(147, 197, 253, .46);
}


.aq-sim-footer-cta:active {
    transform: translateY(1px);
}


/* ============================================================
   META
============================================================ */

.aq-sim-footer-meta {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding:
        10px
        18px;

    border-top:
        1px solid
        rgba(148, 163, 184, 0.09);

    background:
        rgba(15, 23, 42, 0.28);
}


.aq-sim-footer-secondary-link,
.aq-sim-footer-login {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #94a3b8;

    font-size: .68rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        color .15s ease;
}


.aq-sim-footer-secondary-link:hover,
.aq-sim-footer-login:hover {
    color: #e2e8f0;
}


/* ============================================================
   PERFIL
============================================================ */

.aq-sim-footer-profile {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding:
        4px
        8px
        4px
        4px;

    border:
        1px solid
        rgba(148, 163, 184, 0.11);

    border-radius: 999px;

    background:
        rgba(30, 41, 59, 0.54);

    text-decoration: none;

    transition:
        background .15s ease,
        border-color .15s ease;
}


.aq-sim-footer-profile:hover {
    background:
        rgba(51, 65, 85, .62);

    border-color:
        rgba(148, 163, 184, .22);
}


.aq-sim-footer-avatar {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    border-radius: 999px;

    object-fit: cover;

    border:
        1px solid
        rgba(192, 132, 252, .34);
}


.aq-sim-footer-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #111827;

    color: #c084fc;

    font-size: .68rem;
}


.aq-sim-footer-profile-copy {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}


.aq-sim-footer-profile-copy strong {
    max-width: 160px;

    overflow: hidden;

    color: #e2e8f0;

    font-size: .68rem;
    font-weight: 800;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.aq-sim-footer-profile-copy small {
    margin-top: 2px;

    color: #64748b;

    font-size: .57rem;
    font-weight: 650;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    .aq-sim-footer-main {
        gap: 14px;

        padding:
            14px;
    }


    .aq-sim-footer-logo-wrap {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }


    .aq-sim-footer-copy p {
        max-width: 480px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 640px) {

    .aq-sim-footer {
        margin-top: 12px;

        padding:
            0
            8px
            10px;
    }


    .aq-sim-footer-inner {
        border-radius: 13px;
    }


    .aq-sim-footer-main {
        flex-direction: column;
        align-items: stretch;

        gap: 11px;

        padding:
            12px;
    }


    .aq-sim-footer-brand {
        gap: 9px;
    }


    .aq-sim-footer-logo-wrap {
        width: 37px;
        height: 37px;

        flex-basis: 37px;

        padding: 4px;

        border-radius: 9px;
    }


    .aq-sim-footer-copy h2 {
        font-size: .84rem;
    }


    /*
     * En móvil eliminamos la explicación larga.
     */
    .aq-sim-footer-copy p {
        display: none;
    }


    .aq-sim-footer-cta {
        width: 100%;

        min-height: 40px;

        padding:
            9px
            11px;

        font-size: .70rem;
    }


    .aq-sim-footer-meta {
        min-height: 44px;

        padding:
            8px
            12px;

        gap: 8px;
    }


    /*
     * Reducimos la guía a icono + texto breve.
     */
    .aq-sim-footer-secondary-link span {
        font-size: .62rem;
    }


    .aq-sim-footer-login span {
        font-size: .62rem;
    }


    .aq-sim-footer-profile-copy strong {
        max-width: 110px;
    }

}


/* ============================================================
   MOBILE MUY ESTRECHO
============================================================ */

@media (max-width: 390px) {

    .aq-sim-footer-secondary-link span {
        display: none;
    }


    .aq-sim-footer-secondary-link {
        width: 32px;
        height: 32px;

        justify-content: center;

        border:
            1px solid
            rgba(148, 163, 184, .11);

        border-radius: 8px;
    }


    .aq-sim-footer-login {
        font-size: .60rem;
    }

}

/* ============================================================
   AULAQUEST · DATA TABLE V1
============================================================ */

#dataTableContainer.aq-data-panel {
    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 20;

    width: min(340px, calc(100% - 24px));

    max-height: min(300px, calc(100% - 24px));

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(148, 163, 184, .18);

    border-radius: 13px;

    background:
        rgba(15, 23, 42, .88);

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, .18);

    color: #e2e8f0;
}


/*
 * IMPORTANTE:
 * hidden sigue mandando.
 */
#dataTableContainer.aq-data-panel.hidden {
    display: none !important;
}


/* ============================================================
   HEADER
============================================================ */

.aq-data-panel-header {
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        7px
        9px;

    flex: 0 0 auto;

    border-bottom:
        1px solid
        rgba(148, 163, 184, .11);

    background:
        rgba(30, 41, 59, .50);
}


.aq-data-panel-title {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 8px;
}


.aq-data-panel-icon {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background:
        rgba(59, 130, 246, .10);

    color: #60a5fa;

    font-size: .66rem;
}


.aq-data-panel-title > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.aq-data-panel-title strong {
    color: #f1f5f9;

    font-size: .72rem;
    font-weight: 850;

    line-height: 1.1;
}


.aq-data-panel-title > div > span {
    margin-top: 2px;

    color: #64748b;

    font-size: .56rem;

    line-height: 1.1;
}


/* ============================================================
   CSV
============================================================ */

.aq-data-download {
    min-height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    padding:
        5px
        8px;

    border:
        1px solid
        rgba(52, 211, 153, .18);

    border-radius: 7px;

    background:
        rgba(16, 185, 129, .08);

    color: #6ee7b7;

    font-size: .58rem;
    font-weight: 800;

    text-decoration: none;

    transition:
        background .15s ease,
        border-color .15s ease;
}


.aq-data-download:hover {
    background:
        rgba(16, 185, 129, .14);

    border-color:
        rgba(52, 211, 153, .30);
}


/* ============================================================
   SCROLL
============================================================ */

.aq-data-table-scroll {
    flex: 1 1 auto;

    min-height: 0;

    max-height: 238px;

    overflow:
        auto;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(100, 116, 139, .55)
        transparent;
}


/* ============================================================
   TABLE
============================================================ */

.aq-data-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;

    font-variant-numeric:
        tabular-nums;
}


.aq-data-table thead {
    position: sticky;

    top: 0;

    z-index: 2;

    background:
        rgba(15, 23, 42, .97);
}


.aq-data-table th {
    height: 30px;

    padding:
        4px
        6px;

    border-bottom:
        1px solid
        rgba(148, 163, 184, .14);

    color: #94a3b8;

    font-size: .60rem;
    font-weight: 800;

    text-align: center;

    white-space: nowrap;
}


.aq-data-table th small {
    margin-left: 2px;

    color: #475569;

    font-size: .50rem;
    font-weight: 700;
}


.aq-data-table td {
    height: 27px;

    padding:
        3px
        6px;

    border-bottom:
        1px solid
        rgba(148, 163, 184, .055);

    color: #cbd5e1;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: .61rem;

    text-align: center;

    white-space: nowrap;
}


.aq-data-table tbody tr {
    transition:
        background .10s ease;
}


.aq-data-table tbody tr:hover {
    background:
        rgba(148, 163, 184, .05);
}


/*
 * Estado actual = última fila.
 */
.aq-data-table tbody tr:last-child {
    background:
        rgba(59, 130, 246, .07);
}


.aq-data-table tbody tr:last-child td {
    color: #f8fafc;

    font-weight: 750;
}


/* ============================================================
   PERSECUCIÓN
============================================================ */

#dataTableContainer[data-table-mode="pursuit"] {
    width: min(470px, calc(100% - 24px));
}


.aq-data-group-a {
    color: #f87171 !important;

    background:
        rgba(239, 68, 68, .045);
}


.aq-data-group-b {
    color: #60a5fa !important;

    background:
        rgba(59, 130, 246, .045);
}


.aq-data-sub-a {
    color: #fca5a5 !important;
}


.aq-data-sub-b {
    color: #93c5fd !important;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    #dataTableContainer.aq-data-panel {
        width:
            min(
                400px,
                calc(100% - 20px)
            );

        top: 10px;
        right: 10px;

        max-height: 270px;
    }


    #dataTableContainer[data-table-mode="pursuit"] {
        width:
            min(
                500px,
                calc(100% - 20px)
            );
    }


    .aq-data-table-scroll {
        max-height: 210px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 640px) {

    #dataTableContainer.aq-data-panel,
    #dataTableContainer[data-table-mode="pursuit"] {
        top: 8px;
        right: 8px;
        left: 8px;

        width: auto;

        max-height: 220px;

        border-radius: 11px;
    }


    .aq-data-panel-header {
        min-height: 37px;

        padding:
            6px
            8px;
    }


    .aq-data-panel-title > div > span {
        display: none;
    }


    .aq-data-table-scroll {
        max-height: 170px;

        overflow-x: auto;
    }


    .aq-data-table th {
        height: 27px;

        padding:
            3px
            5px;

        font-size: .56rem;
    }


    .aq-data-table td {
        height: 25px;

        padding:
            2px
            5px;

        font-size: .56rem;
    }


    /*
     * Persecución necesita un mínimo para que
     * A/B no se aplasten.
     */
    #dataTableContainer[data-table-mode="pursuit"]
    .aq-data-table {
        min-width: 390px;
    }

}