/* Temas: modo (oscuro/claro) + acento de color */

:root,
html[data-mode='dark'] {
  color-scheme: dark;
  --amg-ink-950: 7 9 18;
  --amg-ink-900: 11 15 26;
  --amg-ink-800: 17 23 39;
  --amg-ink-700: 26 34 56;
  --amg-ink-600: 40 49 85;
  --amg-text: 241 245 249;
  --amg-muted: 148 163 184;
  --amg-border: 255 255 255;
  --amg-border-a: 0.1;
  --amg-overlay: 255 255 255;
  --amg-scroll-track: #0b0f1a;
  --amg-autofill: #0b0f1a;
  --amg-dropdown-bg: #111727;
  --amg-swatch-ring: #60a5fa;
  --amg-logo-color: #ffffff;
}

html[data-mode='light'] {
  color-scheme: light;
  --amg-ink-950: 248 250 252;
  --amg-ink-900: 255 255 255;
  --amg-ink-800: 241 245 249;
  --amg-ink-700: 226 232 240;
  --amg-ink-600: 203 213 225;
  --amg-text: 15 23 42;
  --amg-muted: 51 65 85;
  --amg-border: 15 23 42;
  --amg-border-a: 0.14;
  --amg-overlay: 15 23 42;
  --amg-scroll-track: #e2e8f0;
  --amg-autofill: #ffffff;
  --amg-dropdown-bg: #ffffff;
  --amg-swatch-ring: #2563eb;
  --amg-logo-color: #0f172a;
}

/* Acentos — oscuro */
html[data-mode='dark'][data-accent='violet'],
html[data-mode='dark']:not([data-accent]) {
  --amg-brand-300: 164 140 255;
  --amg-brand-400: 126 92 255;
  --amg-brand-500: 94 54 255;
  --amg-brand-600: 74 37 224;
  --amg-glow: 126 92 255;
  --amg-accent-400: 52 211 153;
  --amg-accent-500: 16 185 129;
}
html[data-mode='dark'][data-accent='cyan'] {
  --amg-brand-300: 103 232 249;
  --amg-brand-400: 34 211 238;
  --amg-brand-500: 6 182 212;
  --amg-brand-600: 8 145 178;
  --amg-glow: 34 211 238;
  --amg-accent-400: 56 189 248;
  --amg-accent-500: 14 165 233;
}
html[data-mode='dark'][data-accent='teal'] {
  --amg-brand-300: 94 234 212;
  --amg-brand-400: 45 212 191;
  --amg-brand-500: 20 184 166;
  --amg-brand-600: 13 148 136;
  --amg-glow: 45 212 191;
  --amg-accent-400: 52 211 153;
  --amg-accent-500: 16 185 129;
}
html[data-mode='dark'][data-accent='emerald'] {
  --amg-brand-300: 110 231 183;
  --amg-brand-400: 52 211 153;
  --amg-brand-500: 16 185 129;
  --amg-brand-600: 5 150 105;
  --amg-glow: 52 211 153;
  --amg-accent-400: 74 222 128;
  --amg-accent-500: 34 197 94;
}
html[data-mode='dark'][data-accent='blue'] {
  --amg-brand-300: 147 197 253;
  --amg-brand-400: 96 165 250;
  --amg-brand-500: 59 130 246;
  --amg-brand-600: 37 99 235;
  --amg-glow: 96 165 250;
  --amg-accent-400: 56 189 248;
  --amg-accent-500: 14 165 233;
}
html[data-mode='dark'][data-accent='rose'] {
  --amg-brand-300: 253 164 175;
  --amg-brand-400: 251 113 133;
  --amg-brand-500: 244 63 94;
  --amg-brand-600: 225 29 72;
  --amg-glow: 251 113 133;
  --amg-accent-400: 251 146 60;
  --amg-accent-500: 249 115 22;
}
html[data-mode='dark'][data-accent='amber'] {
  --amg-brand-300: 252 211 77;
  --amg-brand-400: 251 191 36;
  --amg-brand-500: 245 158 11;
  --amg-brand-600: 217 119 6;
  --amg-glow: 251 191 36;
  --amg-accent-400: 251 146 60;
  --amg-accent-500: 249 115 22;
}
html[data-mode='dark'][data-accent='slate'] {
  --amg-brand-300: 203 213 225;
  --amg-brand-400: 148 163 184;
  --amg-brand-500: 100 116 139;
  --amg-brand-600: 71 85 105;
  --amg-glow: 148 163 184;
  --amg-accent-400: 125 211 252;
  --amg-accent-500: 56 189 248;
}
html[data-mode='dark'][data-accent='indigo'] {
  --amg-brand-300: 165 180 252;
  --amg-brand-400: 129 140 248;
  --amg-brand-500: 99 102 241;
  --amg-brand-600: 79 70 229;
  --amg-glow: 129 140 248;
  --amg-accent-400: 192 132 252;
  --amg-accent-500: 168 85 247;
}

/* Acentos — claro */
html[data-mode='light'][data-accent='violet'],
html[data-mode='light']:not([data-accent]) {
  --amg-brand-300: 124 58 237;
  --amg-brand-400: 109 40 217;
  --amg-brand-500: 91 33 182;
  --amg-brand-600: 76 29 149;
  --amg-glow: 124 58 237;
  --amg-accent-400: 16 185 129;
  --amg-accent-500: 5 150 105;
}
html[data-mode='light'][data-accent='sky'] {
  --amg-brand-300: 14 165 233;
  --amg-brand-400: 2 132 199;
  --amg-brand-500: 3 105 161;
  --amg-brand-600: 7 89 133;
  --amg-glow: 14 165 233;
  --amg-accent-400: 6 182 212;
  --amg-accent-500: 8 145 178;
}
html[data-mode='light'][data-accent='mint'] {
  --amg-brand-300: 16 185 129;
  --amg-brand-400: 5 150 105;
  --amg-brand-500: 4 120 87;
  --amg-brand-600: 6 95 70;
  --amg-glow: 16 185 129;
  --amg-accent-400: 20 184 166;
  --amg-accent-500: 13 148 136;
}
html[data-mode='light'][data-accent='sand'] {
  --amg-brand-300: 217 119 6;
  --amg-brand-400: 180 83 9;
  --amg-brand-500: 146 64 14;
  --amg-brand-600: 120 53 15;
  --amg-glow: 217 119 6;
  --amg-accent-400: 245 158 11;
  --amg-accent-500: 217 119 6;
}
html[data-mode='light'][data-accent='rose'] {
  --amg-brand-300: 244 63 94;
  --amg-brand-400: 225 29 72;
  --amg-brand-500: 190 18 60;
  --amg-brand-600: 159 18 57;
  --amg-glow: 244 63 94;
  --amg-accent-400: 251 113 133;
  --amg-accent-500: 244 63 94;
}
html[data-mode='light'][data-accent='lavender'] {
  --amg-brand-300: 139 92 246;
  --amg-brand-400: 124 58 237;
  --amg-brand-500: 109 40 217;
  --amg-brand-600: 91 33 182;
  --amg-glow: 139 92 246;
  --amg-accent-400: 167 139 250;
  --amg-accent-500: 139 92 246;
}
html[data-mode='light'][data-accent='peach'] {
  --amg-brand-300: 249 115 22;
  --amg-brand-400: 234 88 12;
  --amg-brand-500: 194 65 12;
  --amg-brand-600: 154 52 18;
  --amg-glow: 249 115 22;
  --amg-accent-400: 251 146 60;
  --amg-accent-500: 249 115 22;
}
html[data-mode='light'][data-accent='slate'] {
  --amg-brand-300: 71 85 105;
  --amg-brand-400: 51 65 85;
  --amg-brand-500: 30 41 59;
  --amg-brand-600: 15 23 42;
  --amg-glow: 71 85 105;
  --amg-accent-400: 100 116 139;
  --amg-accent-500: 71 85 105;
}
html[data-mode='light'][data-accent='green'] {
  --amg-brand-300: 34 197 94;
  --amg-brand-400: 22 163 74;
  --amg-brand-500: 21 128 61;
  --amg-brand-600: 22 101 52;
  --amg-glow: 34 197 94;
  --amg-accent-400: 74 222 128;
  --amg-accent-500: 34 197 94;
}

body {
  background-color: rgb(var(--amg-ink-950));
  color: rgb(var(--amg-text));
  background-image:
    radial-gradient(circle at 20% -10%, rgb(var(--amg-glow) / 0.12), transparent 50%),
    radial-gradient(circle at 80% 110%, rgb(var(--amg-accent-400) / 0.08), transparent 55%);
}

::-webkit-scrollbar-track { background: var(--amg-scroll-track); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgb(var(--amg-brand-600)),
    rgb(var(--amg-brand-400))
  );
  border-color: var(--amg-scroll-track);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgb(var(--amg-brand-500)),
    rgb(var(--amg-brand-300))
  );
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--amg-autofill) inset !important;
  -webkit-text-fill-color: rgb(var(--amg-text)) !important;
  caret-color: rgb(var(--amg-text));
}

:focus-visible {
  outline-color: rgb(var(--amg-brand-300));
}

header[data-header] img[alt='Ambigram'],
footer img[alt='Ambigram'] {
  /* legacy img logos: no filter (caused pixelation) */
  filter: none;
}

/* Logo vectorial (SVG inline + color por tema) — tamaño original del topbar */
.amg-logo {
  display: block;
  flex-shrink: 0;
  color: var(--amg-logo-color, #ffffff);
  overflow: visible;
}
.amg-logo--sm {
  width: 11.5rem;
  height: 3.75rem;
}
@media (min-width: 640px) {
  .amg-logo--sm {
    width: 13.5rem;
    height: 4.5rem;
  }
}
.amg-logo--lg {
  width: min(100%, 36rem);
  height: 8rem;
  margin-left: auto;
  margin-right: auto;
}

html[data-mode='light'] .amg-logo,
html.amg-mode-light .amg-logo {
  color: #0f172a;
}

html[data-mode='dark'] .amg-logo,
html.amg-mode-dark .amg-logo {
  color: #ffffff;
}

/* Remapes de utilidad en modo claro */
html[data-mode='light'] .text-white:not(.amg-keep-white) {
  color: rgb(15 23 42) !important;
}
html[data-mode='light'] .bg-brand-500,
html[data-mode='light'] .bg-brand-400,
html[data-mode='light'] .bg-brand-600,
html[data-mode='light'] [class*='bg-brand-'] .text-white,
html[data-mode='light'] .bg-brand-500.text-white,
html[data-mode='light'] a.bg-brand-500,
html[data-mode='light'] button.bg-brand-500,
html[data-mode='light'] button.bg-brand-400 {
  color: #fff !important;
}
html[data-mode='light'] .text-slate-100 { color: #0f172a !important; }
html[data-mode='light'] .text-slate-200 { color: #0f172a !important; }
html[data-mode='light'] .text-slate-300 { color: #0f172a !important; }
html[data-mode='light'] .text-slate-400 { color: #1e293b !important; }
html[data-mode='light'] .text-slate-500 { color: #334155 !important; }
html[data-mode='light'] .border-white\/5,
html[data-mode='light'] .border-white\/10,
html[data-mode='light'] .border-white\/15 {
  border-color: #e2e8f0 !important;
}
html[data-mode='light'] .bg-white\/5,
html[data-mode='light'] .bg-white\/10,
html[data-mode='light'] .bg-white\/15,
html[data-mode='light'] .hover\:bg-white\/5:hover,
html[data-mode='light'] .hover\:bg-white\/10:hover {
  background-color: rgb(15 23 42 / 0.07) !important;
}
html[data-mode='light'] .bg-white\/\[0\.03\] {
  background-color: rgb(15 23 42 / 0.04) !important;
}
html[data-mode='light'] .ring-white\/15,
html[data-mode='light'] .ring-white\/20 {
  --tw-ring-color: rgb(15 23 42 / 0.18) !important;
}
html[data-mode='light'] .bg-ink-900 {
  background-color: #fff !important;
}
html[data-mode='light'] .bg-ink-950\/70 {
  background-color: rgb(255 255 255 / 0.9) !important;
}
html[data-mode='light'] .placeholder-slate-500::placeholder {
  color: #64748b !important;
}

/* Picker UI — swatches compactos */
.amg-theme-prefs {
  padding: 0.35rem 0.55rem 0.45rem;
}
.amg-theme-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--amg-muted));
  margin: 0.3rem 0 0.35rem;
}
.amg-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
}
.amg-theme-swatch {
  width: 100%;
  height: 1.25rem;
  aspect-ratio: auto;
  border-radius: 0.3rem;
  border: 1px solid rgb(0 0 0 / 0.28);
  cursor: pointer;
  padding: 0;
  background:
    linear-gradient(135deg, var(--swatch-a), var(--swatch-b) 55%, var(--swatch-c));
  box-shadow: none;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.amg-theme-swatch:hover {
  transform: scale(1.06);
}
.amg-theme-swatch.is-active {
  border-color: var(--amg-swatch-ring);
  box-shadow: 0 0 0 1px var(--amg-swatch-ring);
}

.amg-portal-dropdown {
  width: 280px;
  background: var(--amg-dropdown-bg);
  border-color: rgb(var(--amg-border) / var(--amg-border-a));
  color: rgb(var(--amg-text));
}
.amg-portal-profile,
.amg-portal-item {
  color: rgb(var(--amg-text)) !important;
}
.amg-portal-profile:hover,
.amg-portal-item:hover {
  background: rgb(var(--amg-overlay) / 0.06);
}
.amg-portal-profile-name {
  color: rgb(var(--amg-text)) !important;
}
.amg-portal-profile-email {
  color: rgb(var(--amg-muted)) !important;
}
.amg-portal-profile-hint {
  color: rgb(var(--amg-brand-500)) !important;
}
.amg-portal-sep {
  background: rgb(var(--amg-border) / var(--amg-border-a));
}
.amg-portal-profile-letter {
  background: rgb(var(--amg-brand-500));
}
.amg-theme-label {
  color: rgb(var(--amg-muted)) !important;
}

html[data-mode='light'] .amg-portal-dropdown {
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.25);
  border-color: rgb(15 23 42 / 0.14);
}
html[data-mode='light'] .amg-portal-item svg,
html[data-mode='light'] .amg-portal-profile svg {
  color: #334155;
  stroke: #334155;
}