/*
 * Capa cromatica accesible para autenticacion y shell administrativo.
 *
 * Se carga solamente en las superficies que declaran data-al-surface. La
 * apariencia clasica sigue siendo la predeterminada. Las variantes cromaticas
 * se activan exclusivamente con data-al-color-theme en documentElement; la
 * persistencia/seleccion del tema pertenece al sistema anfitrion.
 */

:root {
  --al-a11y-surface: #0d1a30;
  --al-a11y-text: #f5f9ff;
  --al-a11y-muted: #b8c9dc;
  --al-a11y-link: #72c7ff;
  --al-a11y-control-border: #58778e;
  --al-a11y-focus: #72cfff;
  --al-a11y-focus-shadow: rgba(114, 207, 255, .3);
  --al-a11y-cta-start: #0b66c2;
  --al-a11y-cta-end: #084f9b;
  --al-a11y-on-cta: #fff;
  --al-a11y-danger: #ffb4b4;
  --al-a11y-success: #9ee8c1;
  --al-a11y-panel: rgba(13, 26, 48, .9);
  --al-admin-shell-bg: #071327;
  --al-admin-shell-bg-2: #0b2140;
  --al-admin-shell-panel: rgba(13, 33, 63, .94);
  --al-admin-work: #edf5ff;
}

:root[data-al-color-theme="lex-mineral"] {
  --al-a11y-surface: #0c2026;
  --al-a11y-text: #f4fbfc;
  --al-a11y-muted: #bfd2d6;
  --al-a11y-link: #5dc9dc;
  --al-a11y-control-border: #527782;
  --al-a11y-focus: #6bd5e8;
  --al-a11y-focus-shadow: rgba(107, 213, 232, .32);
  --al-a11y-cta-start: #0b6175;
  --al-a11y-cta-end: #074b5d;
  --al-a11y-danger: #ffc0bd;
  --al-a11y-success: #a7efd0;
  --al-a11y-panel: rgba(12, 32, 38, .92);
  --al-admin-shell-bg: #071820;
  --al-admin-shell-bg-2: #12333c;
  --al-admin-shell-panel: rgba(16, 42, 50, .95);
  --al-admin-work: #eaf2f1;
}

:root[data-al-color-theme="azul-civico"] {
  --al-a11y-surface: #0a1f35;
  --al-a11y-text: #f5faff;
  --al-a11y-muted: #bed0e5;
  --al-a11y-link: #72c8ff;
  --al-a11y-control-border: #52789e;
  --al-a11y-focus: #70d2ff;
  --al-a11y-focus-shadow: rgba(112, 210, 255, .3);
  --al-a11y-cta-start: #0b65b1;
  --al-a11y-cta-end: #08477e;
  --al-a11y-danger: #ffb8b5;
  --al-a11y-success: #a6e8c8;
  --al-a11y-panel: rgba(10, 31, 53, .92);
  --al-admin-shell-bg: #071827;
  --al-admin-shell-bg-2: #123552;
  --al-admin-shell-panel: rgba(16, 43, 70, .95);
  --al-admin-work: #ebf3fb;
}

:root[data-al-color-theme="cobre-sobrio"] {
  --al-a11y-surface: #251c19;
  --al-a11y-text: #fffaf5;
  --al-a11y-muted: #dec8b9;
  --al-a11y-link: #e7ad82;
  --al-a11y-control-border: #866453;
  --al-a11y-focus: #f0b386;
  --al-a11y-focus-shadow: rgba(240, 179, 134, .3);
  --al-a11y-cta-start: #8a452d;
  --al-a11y-cta-end: #65311f;
  --al-a11y-danger: #ffc2bc;
  --al-a11y-success: #b8e6c5;
  --al-a11y-panel: rgba(37, 28, 25, .92);
  --al-admin-shell-bg: #1c1411;
  --al-admin-shell-bg-2: #3a2720;
  --al-admin-shell-panel: rgba(53, 35, 29, .95);
  --al-admin-work: #f3efec;
}

body[data-al-surface="auth"] {
  --text: var(--al-a11y-text);
  --text-soft: var(--al-a11y-muted);
  --text-light: var(--al-a11y-text);
  --text-muted: var(--al-a11y-muted);
  --accent-main: var(--al-a11y-link);
  --accent-glow: var(--al-a11y-focus-shadow);
  --focus-ring: 0 0 0 4px var(--al-a11y-focus-shadow);
  --btn: linear-gradient(135deg, var(--al-a11y-cta-start), var(--al-a11y-cta-end));
  color-scheme: dark;
  isolation: isolate;
  position: relative;
}

body[data-al-surface="auth"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

:root:not([data-al-color-theme="classic"])[data-al-color-theme]
  body[data-al-surface="auth"] {
  --bg-dark: var(--al-a11y-surface);
  --panel-bg: var(--al-a11y-panel);
}

body[data-al-surface="auth"] :where(input, select, textarea) {
  border-color: var(--al-a11y-control-border) !important;
}

body[data-al-surface="auth"] :where(input, textarea)::placeholder {
  color: var(--al-a11y-muted);
  opacity: .78;
}

body[data-al-surface="auth"] :where(a, .link, .link-button) {
  color: var(--al-a11y-link);
  text-underline-offset: .18em;
}

body[data-al-surface="auth"] :where(a, .link, .link-button):hover {
  color: var(--al-a11y-text);
}

body[data-al-surface="auth"] :where(.btn-primary, .btn.primary, button[type="submit"].btn) {
  border-color: var(--al-a11y-cta-start);
  background: linear-gradient(135deg, var(--al-a11y-cta-start), var(--al-a11y-cta-end));
  color: var(--al-a11y-on-cta);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .24);
}

body[data-al-surface="auth"]
  :where(.btn-secondary, .btn:not(.primary):not([type="submit"]), button.link) {
  border-color: var(--al-a11y-control-border);
  color: var(--al-a11y-text);
}

body[data-al-surface="auth"] :where(.error-box, .alert, .caps, .modal-message.error) {
  color: var(--al-a11y-danger);
}

body[data-al-surface="auth"] :where(.success-box, .modal-message.success, .req-item.valid) {
  color: var(--al-a11y-success);
}

body[data-al-surface="auth"] .account-card.selected .card-icon {
  background: var(--al-a11y-cta-start);
  color: var(--al-a11y-on-cta);
}

body[data-al-surface="auth"] .precard .badge {
  color: var(--al-a11y-success);
}

body[data-al-surface="auth"] .precard .badge.no {
  border-color: var(--al-a11y-danger);
  color: var(--al-a11y-danger);
}

body[data-al-surface="auth"] :where(.account-card):has(input:focus-visible) {
  border-color: var(--al-a11y-focus);
  outline: 3px solid var(--al-a11y-focus);
  outline-offset: 3px;
}

body[data-al-surface="admin-shell"] {
  --amx-shell-bg: var(--al-admin-shell-bg);
  --amx-shell-bg-2: var(--al-admin-shell-bg-2);
  --amx-shell-panel: var(--al-admin-shell-panel);
  --amx-shell-text: var(--al-a11y-text);
  --amx-shell-muted: var(--al-a11y-muted);
  --amx-shell-line: rgba(154, 190, 218, .42);
  --amx-shell-line-strong: var(--al-a11y-focus);
  --amx-shell-blue: var(--al-a11y-cta-start);
  --amx-shell-blue-soft: rgba(50, 151, 219, .22);
  --amx-shell-work: var(--al-admin-work);
}

body[data-al-surface="admin-shell"] .menu-group-title {
  color: var(--al-a11y-muted);
}

body[data-al-surface="admin-shell"] .btn.primary-shell {
  border-color: var(--al-a11y-cta-start);
  background: linear-gradient(135deg, var(--al-a11y-cta-start), var(--al-a11y-cta-end));
  color: var(--al-a11y-on-cta);
}

body[data-al-surface="admin-shell"] :where(input, select, textarea) {
  border-color: var(--al-a11y-control-border);
}

:where(body[data-al-surface="auth"], body[data-al-surface="admin-shell"])
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--al-a11y-focus) !important;
  outline-offset: 3px;
}

:where(body[data-al-surface="auth"], body[data-al-surface="admin-shell"])
  :where(input, select, textarea):focus-visible {
  border-color: var(--al-a11y-focus) !important;
  box-shadow: 0 0 0 4px var(--al-a11y-focus-shadow) !important;
  outline-width: 2px !important;
  outline-offset: 1px;
}

:root[data-al-color-theme="lex-mineral"] body[data-al-surface="auth"]::before {
  background:
    radial-gradient(circle at 14% 8%, rgba(68, 172, 191, .2), transparent 48%),
    radial-gradient(circle at 88% 92%, rgba(60, 116, 128, .22), transparent 52%),
    linear-gradient(325deg, rgba(6, 19, 24, .97), rgba(12, 35, 42, .94));
}

:root[data-al-color-theme="lex-mineral"] body[data-al-surface="admin-shell"] .sidebar {
  background: linear-gradient(180deg, #12333c, #091d24 72%, #071820);
}

:root[data-al-color-theme="lex-mineral"] body[data-al-surface="admin-shell"] header {
  background:
    radial-gradient(circle at 75% 0, rgba(83, 190, 207, .2), transparent 22rem),
    linear-gradient(110deg, #102a32, #164654);
}

:root[data-al-color-theme="lex-mineral"]
  body[data-al-surface="admin-shell"] :where(dialog#toolsModal) {
  background: #102a32;
}

:root[data-al-color-theme="azul-civico"] body[data-al-surface="auth"]::before {
  background:
    radial-gradient(circle at 16% 10%, rgba(54, 145, 214, .23), transparent 48%),
    radial-gradient(circle at 86% 90%, rgba(42, 101, 160, .2), transparent 52%),
    linear-gradient(325deg, rgba(5, 17, 31, .97), rgba(10, 36, 65, .94));
}

:root[data-al-color-theme="azul-civico"] body[data-al-surface="admin-shell"] .sidebar {
  background: linear-gradient(180deg, #123552, #091e34 72%, #071827);
}

:root[data-al-color-theme="azul-civico"] body[data-al-surface="admin-shell"] header {
  background:
    radial-gradient(circle at 75% 0, rgba(83, 167, 224, .2), transparent 22rem),
    linear-gradient(110deg, #102b46, #164d79);
}

:root[data-al-color-theme="azul-civico"]
  body[data-al-surface="admin-shell"] :where(dialog#toolsModal) {
  background: #102b46;
}

:root[data-al-color-theme="cobre-sobrio"] body[data-al-surface="auth"]::before {
  background:
    radial-gradient(circle at 14% 8%, rgba(163, 88, 55, .18), transparent 48%),
    radial-gradient(circle at 88% 92%, rgba(106, 67, 51, .2), transparent 52%),
    linear-gradient(325deg, rgba(25, 17, 14, .97), rgba(52, 33, 27, .94));
}

:root[data-al-color-theme="cobre-sobrio"] body[data-al-surface="admin-shell"] .sidebar {
  background: linear-gradient(180deg, #3a2720, #241914 72%, #1c1411);
}

:root[data-al-color-theme="cobre-sobrio"] body[data-al-surface="admin-shell"] header {
  background:
    radial-gradient(circle at 75% 0, rgba(181, 104, 67, .17), transparent 22rem),
    linear-gradient(110deg, #35231d, #5a3325);
}

:root[data-al-color-theme="cobre-sobrio"]
  body[data-al-surface="admin-shell"] :where(dialog#toolsModal) {
  background: #35231d;
}

@media (forced-colors: active) {
  :where(body[data-al-surface="auth"], body[data-al-surface="admin-shell"])
    :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid Highlight !important;
    forced-color-adjust: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(body[data-al-surface="auth"], body[data-al-surface="admin-shell"]) *,
  :where(body[data-al-surface="auth"], body[data-al-surface="admin-shell"]) *::before,
  :where(body[data-al-surface="auth"], body[data-al-surface="admin-shell"]) *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}