@font-face {
  font-family: "Ubuntu";
  src: url("./assets/font/Ubuntu-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("./assets/font/Ubuntu-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("./assets/font/Ubuntu-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* DS UDD primitive colors */
  --primary-0: #f1f6f8;
  --primary-50: #c3ebff;
  --primary-100: #88d7ff;
  --primary-200: #4cc4ff;
  --primary-300: #11b0ff;
  --primary-400: #008ed4;
  --primary-500: #006699;
  --primary-600: #004d73;
  --primary-700: #00334d;
  --primary-800: #001a26;
  --secondary-50: #ccfff2;
  --secondary-100: #99ffe6;
  --secondary-200: #66ffd9;
  --secondary-300: #33ffcc;
  --secondary-400: #00ffbf;
  --secondary-500: #00cc99;
  --secondary-600: #009973;
  --secondary-700: #00664d;
  --secondary-800: #003326;
  --accent-50: #ffe6d5;
  --accent-100: #ffccaa;
  --accent-200: #ffb380;
  --accent-300: #ff9955;
  --accent-400: #ff802b;
  --accent-500: #ff6600;
  --accent-600: #bf4d00;
  --accent-700: #803300;
  --accent-800: #401a00;
  --notification-50: #fff5df;
  --notification-100: #ffecbe;
  --notification-500: #ffc53d;
  --notification-700: #9e6f00;
  --success-50: #bfffe0;
  --success-100: #7effc1;
  --success-500: #007b40;
  --success-600: #005c30;
  --error-50: #fddfdf;
  --error-100: #fabebf;
  --error-500: #f03d3e;
  --error-600: #d21011;
  --error-700: #8c0b0c;
  --gray-0: #ffffff;
  --gray-50: #f7f7f8;
  --gray-100: #eef0f1;
  --gray-200: #e6e8ea;
  --gray-300: #dde0e2;
  --gray-400: #d5d9db;
  --gray-500: #ccd1d4;
  --gray-600: #949ea4;
  --gray-700: #5f6a71;
  --gray-800: #303538;

  /* DS UDD semantic roles */
  --ds-surface: var(--gray-50);
  --ds-surface-subtle: var(--gray-100);
  --ds-surface-brand: var(--primary-0);
  --ds-surface-inverse: var(--gray-800);
  --ds-text: var(--gray-800);
  --ds-text-muted: var(--gray-700);
  --ds-text-disabled: var(--gray-600);
  --ds-text-brand: var(--primary-500);
  --ds-border: var(--gray-300);
  --ds-border-subtle: var(--gray-200);
  --ds-border-strong: var(--gray-600);

  /* Major Third typography scale, 16px base */
  --ds-font-family: "Ubuntu", Arial, sans-serif;
  --ds-text-display: 3.052rem;
  --ds-text-h1: 2.441rem;
  --ds-text-h2: 1.953rem;
  --ds-text-h3: 1.563rem;
  --ds-text-h4: 1.25rem;
  --ds-text-body: 1rem;
  --ds-text-small: 0.8125rem;
  --ds-text-xsmall: 0.65rem;

  /* DS UDD 8px spacing system */
  --ds-space-0: 0;
  --ds-space-025: 1px;
  --ds-space-05: 2px;
  --ds-space-1: 4px;
  --ds-space-15: 6px;
  --ds-space-2: 8px;
  --ds-space-25: 12px;
  --ds-space-3: 16px;
  --ds-space-35: 20px;
  --ds-space-4: 24px;
  --ds-space-5: 32px;
  --ds-space-6: 40px;
  --ds-space-7: 48px;
  --ds-space-8: 56px;

  --ds-radius-none: 0;
  --ds-radius-sm: 2px;
  --ds-radius-md: 4px;
  --ds-radius-lg: 8px;
  --ds-radius-full: 9999px;
  --ds-shadow-sm: 0 1px 3px rgba(48, 53, 56, 0.1), 0 1px 2px -1px rgba(48, 53, 56, 0.1);
  --ds-shadow-md: 0 4px 8px -2px rgba(48, 53, 56, 0.12), 0 2px 4px -2px rgba(48, 53, 56, 0.08);
  --ds-shadow-lg: 0 16px 36px rgba(48, 53, 56, 0.18);
  --ds-focus-ring: 0 0 0 3px rgba(0, 102, 153, 0.22);

  /* Backwards-compatible aliases used by both Espacio IA surfaces. */
  --ink: var(--ds-text);
  --muted: var(--ds-text-muted);
  --line: var(--ds-border);
  --panel: var(--ds-surface);
  --panel-soft: var(--ds-surface-subtle);
  --canvas: var(--gray-100);
  --udd-blue: var(--primary-500);
  --udd-blue-deep: var(--primary-700);
  --udd-blue-soft: var(--primary-0);
  --udd-orange: var(--accent-500);
  --focus-ring: var(--ds-focus-ring);
  --radius-control: var(--ds-radius-md);
  --radius-small: var(--ds-radius-md);
  --radius-nav: var(--ds-radius-md);
  --radius-card: var(--ds-radius-lg);
  --shadow-card: var(--ds-shadow-sm);
  --shadow-card-hover: var(--ds-shadow-md);
  --shadow-raised: var(--ds-shadow-lg);
}

.ds-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  font-family: var(--ds-font-family);
  font-size: var(--ds-text-body);
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.ds-button:focus-visible,
.ds-icon-button:focus-visible,
.ds-card--selectable:focus-visible,
.ds-avatar-control:focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus-ring);
}

.ds-button:disabled,
.ds-button[aria-disabled="true"] {
  color: var(--ds-text-disabled);
  background: var(--gray-200);
  border-color: var(--gray-300);
  cursor: not-allowed;
  opacity: 1;
}

.ds-button--primary {
  color: var(--gray-0);
  background: var(--primary-500);
  border-color: var(--primary-500);
}

.ds-button--primary:hover:not(:disabled) {
  color: var(--gray-0);
  background: var(--primary-600);
  border-color: var(--primary-600);
}

.ds-button--primary:active:not(:disabled) {
  background: var(--primary-700);
  border-color: var(--primary-700);
}

.ds-button--secondary {
  color: var(--primary-700);
  background: var(--gray-0);
  border-color: var(--primary-500);
}

.ds-button--secondary:hover:not(:disabled),
.ds-button--secondary[aria-pressed="true"] {
  color: var(--primary-800);
  background: var(--primary-0);
  border-color: var(--primary-600);
}

.ds-button--tertiary {
  color: var(--gray-800);
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.ds-button--tertiary:hover:not(:disabled),
.ds-button--tertiary[aria-expanded="true"] {
  color: var(--primary-700);
  background: var(--primary-0);
  border-color: var(--primary-500);
}

.ds-button--danger {
  color: var(--gray-0);
  background: var(--error-600);
  border-color: var(--error-600);
}

.ds-button--danger:hover:not(:disabled) {
  background: var(--error-700);
  border-color: var(--error-700);
}

.ds-button--link {
  min-height: 32px;
  padding: 4px;
  color: var(--primary-500);
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ds-button--link:hover:not(:disabled) {
  color: var(--primary-700);
  background: transparent;
}

.ds-button--sm {
  min-height: 32px;
  padding: 2px 8px;
  font-size: var(--ds-text-small);
  line-height: 19.5px;
}

.ds-icon-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  color: var(--primary-500);
  background: var(--gray-50);
  border: 1px solid var(--gray-300);
  border-radius: var(--ds-radius-md);
  cursor: pointer;
}

.ds-icon-button:hover:not(:disabled) {
  color: var(--primary-700);
  background: var(--primary-0);
  border-color: var(--primary-500);
}

.ds-card {
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
}

.ds-card--selectable {
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.ds-card--selectable:hover {
  border-color: var(--ds-border-strong);
  box-shadow: var(--ds-shadow-md);
}

.ds-card--selectable[aria-selected="true"] {
  background: var(--ds-surface-brand);
  border-color: var(--primary-500);
  box-shadow: var(--ds-shadow-md);
}

.ds-badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: var(--ds-space-1);
  padding: 2px 8px;
  color: var(--gray-800);
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-small);
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
}

.ds-badge--brand {
  color: var(--primary-700);
  background: var(--primary-0);
  border-color: var(--primary-100);
}

.ds-badge--secondary {
  color: var(--secondary-800);
  background: var(--secondary-50);
  border-color: var(--secondary-200);
}

.ds-badge--accent {
  color: var(--accent-800);
  background: var(--accent-50);
  border-color: var(--accent-200);
}

.ds-badge--success {
  color: var(--success-600);
  background: var(--success-50);
  border-color: var(--success-100);
}

.ds-badge--warning {
  color: var(--notification-700);
  background: var(--notification-50);
  border-color: var(--notification-100);
}

.ds-badge--error {
  color: var(--error-700);
  background: var(--error-50);
  border-color: var(--error-100);
}

.ds-avatar {
  display: inline-grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--gray-0);
  background: var(--primary-500);
  border: 1px solid var(--primary-600);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-small);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.ds-avatar--lg {
  width: 48px;
  height: 48px;
  font-size: var(--ds-text-body);
}

.ds-avatar-control {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 4px 8px;
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
}

.ds-avatar-control__name {
  min-width: 0;
  overflow: hidden;
  font-size: var(--ds-text-body);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-avatar-control__chevron {
  width: 16px;
  height: 16px;
  margin-left: auto;
  transition: transform 140ms ease;
}

.ds-avatar-control[aria-expanded="true"] .ds-avatar-control__chevron {
  transform: rotate(180deg);
}

.ds-switch {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  padding: 2px;
  background: var(--gray-500);
  border: 1px solid var(--gray-600);
  border-radius: var(--ds-radius-full);
  transition: background-color 140ms ease, border-color 140ms ease;
}

.ds-switch::after {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--gray-0);
  border-radius: var(--ds-radius-full);
  box-shadow: 0 1px 2px rgba(48, 53, 56, 0.22);
  transition: transform 140ms ease;
}

[aria-checked="true"] > .ds-switch {
  background: var(--primary-500);
  border-color: var(--primary-500);
}

[aria-checked="true"] > .ds-switch::after {
  transform: translateX(16px);
}

.ds-modal {
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
}

.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-2);
  padding: var(--ds-space-25);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-small);
  line-height: 19.5px;
}

.ds-alert--info {
  color: var(--primary-700);
  background: var(--primary-0);
  border-color: var(--primary-100);
}

.ds-alert--success {
  color: var(--success-600);
  background: var(--success-50);
  border-color: var(--success-100);
}

.ds-alert--error {
  color: var(--error-700);
  background: var(--error-50);
  border-color: var(--error-100);
}

.ds-alert--warning {
  color: var(--notification-700);
  background: var(--notification-50);
  border-color: var(--notification-100);
}

.ds-input {
  min-height: 40px;
  padding: 8px 12px;
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  font-family: var(--ds-font-family);
  font-size: var(--ds-text-body);
  line-height: 24px;
}

.ds-input:focus,
.ds-input:focus-visible {
  border-color: var(--ds-border-strong);
  outline: 0;
  box-shadow: var(--ds-focus-ring);
}

.ds-info-card {
  display: grid;
  min-width: 0;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3);
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
}

.ds-info-card--brand {
  background: var(--primary-0);
  border-color: var(--primary-100);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ds-text);
  background: var(--ds-surface);
}

.ds-table th,
.ds-table td {
  height: 48px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--ds-border-subtle);
  font-size: var(--ds-text-small);
  line-height: 19.5px;
  text-align: left;
}

.ds-table th {
  color: var(--ds-text-muted);
  background: var(--ds-surface-subtle);
  font-weight: 500;
  text-transform: none;
}

.ds-table tbody tr:hover {
  background: var(--ds-surface-brand);
}

.ds-table tbody tr:last-child td {
  border-bottom: 0;
}

body[data-theme="dark"]:not(.login-active) {
  --ds-surface: #101a23;
  --ds-surface-subtle: #162533;
  --ds-surface-brand: #123247;
  --ds-surface-inverse: var(--gray-50);
  --ds-text: #edf5f8;
  --ds-text-muted: #a6b4bf;
  --ds-text-disabled: #738493;
  --ds-border: #243847;
  --ds-border-subtle: #1e3140;
  --ds-border-strong: rgba(139, 212, 248, 0.52);
  --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --ds-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.38), 0 2px 4px -2px rgba(0, 0, 0, 0.34);
  --ds-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.4);
  --ink: var(--ds-text);
  --muted: var(--ds-text-muted);
  --line: var(--ds-border);
  --panel: var(--ds-surface);
  --panel-soft: var(--ds-surface-subtle);
}

body[data-theme="dark"]:not(.login-active) .ds-button--secondary,
body[data-theme="dark"]:not(.login-active) .ds-button--tertiary,
body[data-theme="dark"]:not(.login-active) .ds-icon-button,
body[data-theme="dark"]:not(.login-active) .ds-avatar-control,
body[data-theme="dark"]:not(.login-active) .ds-card,
body[data-theme="dark"]:not(.login-active) .ds-modal,
body[data-theme="dark"]:not(.login-active) .ds-input,
body[data-theme="dark"]:not(.login-active) .ds-info-card {
  color: var(--ds-text);
  background: var(--ds-surface);
  border-color: var(--ds-border);
}

body[data-theme="dark"]:not(.login-active) .ds-button--secondary:hover:not(:disabled),
body[data-theme="dark"]:not(.login-active) .ds-button--tertiary:hover:not(:disabled),
body[data-theme="dark"]:not(.login-active) .ds-icon-button:hover:not(:disabled) {
  color: var(--primary-100);
  background: var(--ds-surface-brand);
  border-color: var(--ds-border-strong);
}

@media (max-width: 768px) {
  .ds-button,
  .ds-icon-button {
    min-height: 44px;
  }

  .ds-icon-button {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-button,
  .ds-icon-button,
  .ds-card--selectable,
  .ds-avatar-control__chevron,
  .ds-switch,
  .ds-switch::after {
    transition: none;
  }
}

/* Espacio IA adapters for the approved DS UDD components. */
.settings-trigger.ds-avatar-control {
  width: 100%;
  min-height: 48px;
  padding: 4px 8px;
}

.settings-trigger.ds-avatar-control:hover,
.settings-trigger.ds-avatar-control:focus-visible {
  color: var(--text-primary);
  background: var(--bg-surface-tertiary);
  border-color: var(--border-primary-focus);
}

.settings-avatar.ds-avatar {
  width: 32px;
  height: 32px;
  color: var(--gray-0);
  background: var(--primary-500);
  border-color: var(--primary-600);
}

.mobile-account-avatar.ds-avatar {
  width: 28px;
  height: 28px;
  font-size: var(--ds-text-xsmall);
}

.settings-menu-item[role="menuitemcheckbox"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
}

.sidebar-secondary-button.ds-button {
  font-size: var(--ds-text-small);
  line-height: 19.5px;
  white-space: nowrap;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: 0 0 var(--ds-space-3);
  border-bottom: 1px solid var(--ds-border-subtle);
}

.profile-identity > span:last-child,
.profile-identity strong,
.profile-identity small {
  display: block;
  min-width: 0;
}

.profile-identity strong {
  color: var(--ds-text);
  font-size: var(--ds-text-body);
  font-weight: 500;
  line-height: 24px;
}

.profile-identity small {
  overflow: hidden;
  margin-top: 2px;
  color: var(--ds-text-muted);
  font-size: var(--ds-text-small);
  line-height: 19.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-row {
  grid-template-columns: minmax(0, 1fr) 32px;
}

.folder-row .folder-main {
  display: grid;
  width: 100%;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
}

.folder-toggle-indicator {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--ds-text-muted);
}

.folder-toggle-icon {
  width: 16px;
  height: 16px;
  transition: transform 140ms ease;
}

.folder-main[aria-expanded="true"] .folder-toggle-icon {
  transform: rotate(90deg);
}

.dialog-close-button.ds-icon-button,
.attachment-alert-close.ds-icon-button,
.chat-search-clear.ds-icon-button,
.support-screenshot-preview .ds-icon-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
}

.dialog-close-button.ds-icon-button .inline-svg-icon,
.attachment-alert-close.ds-icon-button .inline-svg-icon,
.chat-search-clear.ds-icon-button .inline-svg-icon,
.support-screenshot-preview .ds-icon-button .inline-svg-icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 620px) {
  .settings-trigger.ds-avatar-control {
    min-height: 48px;
  }

  .dialog-close-button.ds-icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
}