/* --- Base / Reset ---------------------------------------------------- */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    :root {
      color-scheme: light dark;
      --brand: #f5b31f;
      --brand-2: #f0c441;
      --ink: #111827;
      --ink-muted: #6b7280;
      --ink-strong: #000000;
      --panel: #ffffff;
      --radius: 16px;
      --shadow: 0 10px 24px rgba(0,0,0,.06);
      --control-min-height: 44px;
      --control-padding-block: 10px;
      --control-padding-inline: 14px;
      --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
      --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
      --label-w: 84px; /* ancho guía para etiquetas en móvil (antes 96px) */
      --auth-card-width: 360px;
      --turnstile-height: 80px;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
    }

    a { color: inherit; text-decoration: none; }

    body {
      margin: 0; color: var(--ink);
      background: #ffffff;
      min-height: 100dvh;
      padding: max(env(safe-area-inset-top), 20px) max(env(safe-area-inset-right), 20px) max(env(safe-area-inset-bottom), 20px) max(env(safe-area-inset-left), 20px);
      line-height: 1.5;
    }

    body.login-page {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --ink: #e5e7eb;
        --ink-muted: #9ca3af;
        --ink-strong: #ffffff;
        --panel: #0d0d0d;
        --shadow: 0 12px 28px rgba(0,0,0,.45);
      }
      body { background: #000000; }
      .status-card {
        border-color: rgba(148,163,184,.28);
        background: color-mix(in srgb, var(--panel) 82%, rgba(148,163,184,.18));
      }
      .status-card--alert {
        border-color: rgba(253,230,138,.4);
        background: color-mix(in srgb, #78350f 42%, var(--panel) 58%);
      }
      .status-card--error {
        border-color: rgba(248,113,113,.45);
        background: color-mix(in srgb, #7f1d1d 44%, var(--panel) 56%);
      }
    }

    /* ---- Contenido ------------------------------------------------------ */
    .page-spacer { height: 64px; }
    .subdomain-status {
      display: grid;
      gap: var(--space-3);
      margin: 0;
    }
    .subdomain-status[hidden] { display: none; }
    .status-card {
      border-radius: 16px;
      border: 1px solid rgba(15,23,42,.12);
      background: color-mix(in srgb, var(--panel) 90%, rgba(255,255,255,.85));
      padding: var(--space-4);
      display: grid;
      gap: var(--space-2);
      font-size: .95rem;
      line-height: 1.6;
      color: var(--ink);
    }
    .status-card__title {
      font-weight: 600;
      line-height: 1.4;
    }
    .status-card__body {
      margin: 0;
      line-height: 1.6;
    }
    .status-card__body + .status-card__body {
      margin-top: var(--space-2);
    }
    .status-card--alert {
      border-color: rgba(180,83,9,.35);
      background: color-mix(in srgb, #fef3c7 70%, var(--panel) 30%);
    }
    .status-card--error {
      border-color: rgba(185,28,28,.4);
      background: color-mix(in srgb, #fee2e2 72%, var(--panel) 28%);
    }
    .status-toast {
      position: fixed;
      left: 50%;
      bottom: calc(env(safe-area-inset-bottom) + 16px);
      transform: translate3d(-50%, 24px, 0);
      width: min(360px, calc(100% - 32px));
      margin: 0;
      padding: var(--space-4) var(--space-5);
      border-radius: 14px;
      background: var(--panel);
      background: color-mix(in srgb, var(--panel) 94%, rgba(255,255,255,.78));
      border: 1px solid rgba(15,23,42,.06);
      box-shadow: 0 12px 28px rgba(15,23,42,.12);
      color: var(--ink);
      font-size: .95rem;
      line-height: 1.4;
      pointer-events: none;
      opacity: 0;
      backdrop-filter: blur(12px);
      transition: opacity .25s ease, transform .25s ease;
      z-index: 999;
    }
    .status-toast.is-visible {
      opacity: 1;
      transform: translate3d(-50%, 0, 0);
    }
    @media (prefers-reduced-motion: reduce) {
      .status-toast,
      .status-toast.is-visible {
        transition: none;
        transform: translate3d(-50%, 0, 0);
      }
    }
    /* Collapsible */
    #toggleExistentes .icon { transition: transform .2s ease; }
    #toggleExistentes[aria-expanded="false"] .icon { transform: rotate(-90deg); }
    #toggleDestinatarios .icon { transition: transform .2s ease; }
    #toggleDestinatarios[aria-expanded="false"] .icon { transform: rotate(-90deg); }
    main { width: min(960px, 100%); margin: 0 auto; display: grid; gap: var(--space-6); }
    body.login-page main { width: min(var(--auth-card-width), 100%); }
    body.login-page .auth-card {
      width: 100%;
      max-width: var(--auth-card-width);
      margin-inline: auto;
    }
    body.login-page .auth-card__footer {
      display: flex;
      justify-content: center;
      margin-top: var(--space-4);
    }
    body.login-page .auth-card__footer .btns {
      width: 100%;
      justify-content: center;
      gap: var(--space-3);
    }
    body.login-page .auth-card__footer button,
    body.login-page .auth-card__footer .btn {
      min-width: min(200px, 100%);
    }
    body.login-page .cf-turnstile {
      display: grid;
      place-items: center;
      min-height: var(--turnstile-height);
      width: 100%;
      padding: var(--space-3) 0;
    }
    body.login-page .cf-turnstile iframe,
    body.login-page .cf-turnstile > div {
      max-width: 100%;
    }

    /* Barra de título con botón a la derecha */
    .titlebar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .titlebar h1 { display: inline-flex; align-items: center; gap: var(--space-4); }
    .titlebar .logo { width: 44px; height: 44px; display: block; border-radius: 12px; }
    .titlebar .title-text { align-self: center; }
    .titlebar-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: var(--space-3);
    }
    .titlebar-actions > .secondary:not(.icon-only),
    .titlebar-actions > .btn:not(.icon-only) {
      min-width: 148px;
      justify-content: center;
      flex: 0 0 148px;
    }
    .user-menu {
      position: relative;
      display: inline-flex;
      align-items: center;
    }
    .titlebar-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      min-height: 40px;
      min-width: 40px;
      padding: var(--space-2) var(--space-3);
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--ink-muted) 20%, transparent);
      background: color-mix(in srgb, var(--panel) 94%, rgba(255,255,255,.7));
      color: var(--ink-strong);
      cursor: pointer;
      transition: background-color .16s ease, border-color .16s ease, color .16s ease;
    }
    .refresh-button {
      color: var(--ink);
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    }
    .titlebar-button:hover {
      background: color-mix(in srgb, var(--panel) 100%, rgba(255,255,255,.82));
      border-color: color-mix(in srgb, var(--ink-muted) 28%, transparent);
    }
    .user-menu__trigger:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--brand) 65%, transparent);
      outline-offset: 2px;
    }
    .user-menu__trigger[aria-expanded="true"] {
      border-color: color-mix(in srgb, var(--brand) 45%, transparent);
    }
    .user-menu__avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      color: inherit;
      flex-shrink: 0;
    }
    .user-menu__avatar-icon {
      width: 20px;
      height: 20px;
      display: block;
    }
    .user-menu__caret {
      width: 14px;
      height: 14px;
      display: block;
      transition: transform .16s ease;
    }
    .user-menu.is-open .user-menu__caret {
      transform: rotate(180deg);
    }
    .user-menu__list {
      position: absolute;
      top: calc(100% + var(--space-2));
      right: 0;
      margin: 0;
      padding: var(--space-3);
      list-style: none;
      min-width: 220px;
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--ink-muted) 18%, transparent);
      background: color-mix(in srgb, var(--panel) 98%, rgba(255,255,255,.85));
      box-shadow: 0 12px 28px rgba(15,23,42,.1);
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      transform-origin: top right;
      transform: translateY(-6px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
      z-index: 20;
    }
    .user-menu.is-open .user-menu__list {
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
      pointer-events: auto;
      transition-delay: 0s, 0s, 0s;
    }
    .user-menu__list > li {
      margin: 0;
    }
    .user-menu__item {
      width: 100%;
      padding: calc(var(--space-3) - 1px) var(--space-4);
      background: color-mix(in srgb, var(--panel) 96%, rgba(255,255,255,.8));
      border: 1px solid color-mix(in srgb, var(--ink-muted) 18%, transparent);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: var(--space-3);
      text-align: left;
      font: inherit;
      color: var(--ink-strong);
      cursor: pointer;
      transition: background-color .16s ease, border-color .16s ease, color .16s ease;
    }
    .user-menu__item:hover,
    .user-menu__item:focus-visible {
      background: color-mix(in srgb, var(--brand) 18%, var(--panel) 82%);
      border-color: color-mix(in srgb, var(--brand) 45%, transparent);
      color: var(--ink-strong);
    }
    .user-menu__item:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--brand) 52%, transparent);
      outline-offset: -2px;
    }
    .user-menu__item--danger {
      color: #b91c1c;
      border-color: color-mix(in srgb, #fca5a5 45%, transparent);
      background: color-mix(in srgb, #fee2e2 35%, var(--panel) 65%);
    }
    .user-menu__item--danger:hover,
    .user-menu__item--danger:focus-visible {
      background: color-mix(in srgb, #b91c1c 22%, var(--panel) 78%);
      border-color: color-mix(in srgb, #b91c1c 55%, transparent);
      color: #7f1d1d;
    }
    @media (prefers-color-scheme: dark) {
      .titlebar-button {
        border-color: color-mix(in srgb, rgba(148,163,184,.55) 45%, transparent);
        background: color-mix(in srgb, var(--panel) 90%, rgba(15,23,42,.65));
        color: var(--ink);
      }
      .titlebar-button:hover {
        background: color-mix(in srgb, var(--panel) 94%, rgba(15,23,42,.65));
        border-color: color-mix(in srgb, rgba(148,163,184,.65) 45%, transparent);
      }
      .refresh-button:hover {
        background: color-mix(in srgb, var(--panel) 94%, rgba(15,23,42,.65));
        border-color: color-mix(in srgb, rgba(148,163,184,.65) 45%, transparent);
      }
      .user-menu__list {
        border-color: color-mix(in srgb, rgba(148,163,184,.45) 45%, transparent);
        background: color-mix(in srgb, var(--panel) 92%, rgba(15,23,42,.75));
        box-shadow: 0 12px 28px rgba(0,0,0,.45);
      }
      .status-toast {
        background: color-mix(in srgb, var(--panel) 90%, rgba(15,23,42,.65));
        border-color: color-mix(in srgb, rgba(148,163,184,.32) 55%, transparent);
        box-shadow: 0 12px 28px rgba(0,0,0,.45);
      }
      .user-menu__item {
        color: var(--ink);
        background: color-mix(in srgb, var(--panel) 86%, rgba(15,23,42,.75));
        border-color: color-mix(in srgb, rgba(148,163,184,.55) 35%, transparent);
      }
      .user-menu__item:hover,
      .user-menu__item:focus-visible {
        background: color-mix(in srgb, var(--brand) 26%, rgba(15,23,42,.74));
        border-color: color-mix(in srgb, var(--brand) 55%, transparent);
        color: var(--ink);
      }
      .user-menu__item:focus-visible {
        outline-color: color-mix(in srgb, var(--brand) 70%, transparent);
      }
      .user-menu__item--danger {
        color: #fca5a5;
        background: color-mix(in srgb, rgba(248,113,113,.4) 45%, rgba(15,23,42,.7));
        border-color: color-mix(in srgb, rgba(248,113,113,.65) 45%, transparent);
      }
      .user-menu__item--danger:hover,
      .user-menu__item--danger:focus-visible {
        background: color-mix(in srgb, #fca5a5 38%, rgba(15,23,42,.65));
        border-color: color-mix(in srgb, rgba(248,113,113,.85) 48%, transparent);
        color: #fee2e2;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .titlebar-button,
      .user-menu__trigger,
      .user-menu__caret,
      .user-menu__list,
      .user-menu__item {
        transition: none;
      }
      .user-menu__list {
        transform: none;
      }
    }
    @media (max-width: 720px) {
      .titlebar {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        flex-wrap: nowrap;
        min-width: 0;
      }
      .titlebar h1 {
        flex: 1 1 auto;
        justify-content: flex-start;
        min-width: 0;
      }
      .titlebar .title-text {
        min-width: 0;
      }
      .titlebar-actions {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: var(--space-2);
      }
      .titlebar-actions > * {
        flex: 0 0 auto;
      }
      .titlebar-button {
        min-height: 36px;
        min-width: 36px;
        padding: var(--space-1) var(--space-2);
        gap: var(--space-1);
      }
      .user-menu {
        width: auto;
        justify-content: flex-end;
      }
      .user-label,
      .subdomain-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .user-menu__list {
        left: auto;
        right: 0;
        width: min(320px, calc(100vw - 28px));
        max-width: calc(100vw - 28px);
        max-height: min(420px, calc(100dvh - 120px));
        overflow-y: auto;
        border-radius: 18px;
        transform-origin: top right;
      }
    }

    h1 { color: var(--ink-strong); font-size: clamp(1.2rem, 1.2rem + .6vw, 2.1rem); margin: 0; letter-spacing: -0.01em; line-height: 1.1; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
    @media (prefers-color-scheme: dark) { h1 { text-shadow: none; } }

    .title-text { display: inline-grid; gap: 2px; font-size: clamp(.72rem, .72rem + .18vw, 1rem); font-weight: 600; justify-items: start; }
    .user-label { color: var(--ink-strong); font-weight: 600; font-size: .95em; }
    .subdomain-label { color: var(--ink-muted); font-size: .85em; letter-spacing: .01em; }

    h2 { font-size: clamp(1rem, .95rem + .4vw, 1.2rem); margin: 0; color: var(--ink-strong); }

    /* Panels */
section { background: var(--panel); border-radius: calc(var(--radius) + 2px); padding: var(--space-6); box-shadow: var(--shadow); border: 1px solid rgba(0,0,0,.08); backdrop-filter: blur(6px); }
@media (prefers-color-scheme: dark) { section { border-color: rgba(255,255,255,.12); } }
section header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.alias-search { flex: 1 1 220px; min-width: 200px; max-width: 360px; }

    .alias-search:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand), transparent 75%); }
    .alias-delete-btn { margin-left: auto; font-size: .82rem; }
    .alias-delete-btn {
      border: 1px solid rgba(248,113,113,.35);
      border-color: color-mix(in srgb, rgba(248,113,113,.35) 65%, transparent);
      color: #b91c1c;
      background: color-mix(in srgb, rgba(248,113,113,.08) 55%, transparent);
      transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .alias-delete-btn:hover:not(:disabled) {
      background: rgba(248,113,113,.12);
      border-color: rgba(248,113,113,.45);
      border-color: color-mix(in srgb, rgba(248,113,113,.45) 55%, transparent);
      color: #7f1d1d;
    }
    .alias-delete-btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in srgb, rgba(248,113,113,.65) 55%, transparent);
    }
    .alias-delete-btn:disabled { opacity: .55; cursor: not-allowed; }

    @media (prefers-color-scheme: dark) {
      .alias-delete-btn {
        border-color: rgba(248,113,113,.45);
        background: color-mix(in srgb, rgba(248,113,113,.25) 55%, transparent);
        color: #fca5a5;
      }
      .alias-delete-btn:hover:not(:disabled) {
        background: rgba(248,113,113,.35);
        background: color-mix(in srgb, rgba(248,113,113,.35) 55%, transparent);
        border-color: rgba(248,113,113,.65);
        border-color: color-mix(in srgb, rgba(248,113,113,.65) 55%, transparent);
        color: #fca5a5;
      }
      .alias-delete-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, rgba(248,113,113,.65) 55%, transparent); }
    }

    .stack { display: grid; gap: var(--space-4); }

    .alias-form {
      display: grid;
      gap: var(--space-5);
      align-content: start;
    }
    .alias-form__split {
      display: grid;
      gap: var(--space-5);
      align-items: stretch;
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "inputs"
        "footer"
        "divider"
        "preview";
    }
    .alias-form__column {
      display: grid;
      gap: var(--space-4);
    }
    .alias-form__column--inputs {
      grid-area: inputs;
      gap: var(--space-4);
      align-content: start;
    }
    .alias-form__column--preview {
      grid-area: preview;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: var(--space-3);
      text-align: center;
      margin: var(--space-3) auto var(--space-4);
      padding: var(--space-6) var(--space-4);
      width: 100%;
      max-width: 460px;
    }
    .alias-form__row {
      display: grid;
      gap: var(--space-3);
    }
    .alias-form__row--local {
      align-items: end;
    }
    .alias-form__field {
      display: grid;
      gap: var(--space-3);
    }
    .alias-form__action {
      display: grid;
      gap: var(--space-3);
      align-content: end;
      justify-items: stretch;
      align-self: end;
    }
    .alias-form__divider {
      grid-area: divider;
      height: 1px;
      background: rgba(15,23,42,.12);
      border-radius: 999px;
      margin: var(--space-5) 0;
      width: 100%;
    }
    .alias-form__footer {
      grid-area: footer;
      display: grid;
      gap: var(--space-3);
      align-self: start;
    }
    .alias-form__footer button {
      width: 100%;
      min-width: 0;
    }
    .alias-form__helper {
      text-align: center;
      font-size: .85rem;
    }
    #aliasPreview {
      font-size: clamp(.95rem, .9rem + .45vw, 1.35rem);
      font-weight: 600;
      color: var(--ink-strong);
      line-height: 1.35;
      display: inline-block;
      word-break: break-word;
    }
    .alias-field-label {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      position: relative;
      width: fit-content;
    }
    .alias-form__action button {
      width: 100%;
      min-width: 0;
    }
    .alias-helper {
      margin: 0;
      color: var(--ink-muted);
      font-size: .9rem;
      line-height: 1.4;
    }
    .alias-helper--preview {
      font-size: .82rem;
      letter-spacing: .04em;
      text-transform: none;
    }
    .alias-helper code {
      background: rgba(107,114,128,.12);
      padding: 2px 6px;
      border-radius: 8px;
      color: var(--ink-strong);
      font-size: .85rem;
    }
    button.alias-info-trigger {
      appearance: none;
      background: color-mix(in srgb, var(--panel) 82%, rgba(17,24,39,.08));
      border: none;
      border-radius: 999px;
      box-shadow: none;
      color: var(--ink-muted);
      cursor: pointer;
      display: inline-grid;
      font-size: 0;
      gap: 0;
      height: 28px;
      margin: 0;
      min-height: auto;
      padding: 0;
      place-items: center;
      transform: none;
      transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
      width: 28px;
    }
    button.alias-info-trigger:hover,
    button.alias-info-trigger:focus-visible {
      color: var(--ink-strong);
      background: color-mix(in srgb, var(--panel) 88%, rgba(245,179,31,.25));
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
      transform: translateY(-1px);
    }
    button.alias-info-trigger:focus-visible {
      outline: none;
    }
    .alias-info-trigger__icon {
      width: 14px;
      height: 14px;
    }
    .alias-info-panel {
      position: absolute;
      top: calc(100% + var(--space-3));
      right: 0;
      min-width: clamp(200px, 32vw, 280px);
      padding: var(--space-3) var(--space-4);
      border-radius: 12px;
      background: color-mix(in srgb, var(--panel) 92%, rgba(255,255,255,.72));
      border: 1px solid rgba(17,24,39,.12);
      box-shadow: var(--shadow);
      color: var(--ink);
      font-size: .9rem;
      line-height: 1.45;
      opacity: 0;
      transform: translate3d(0, -6px, 0) scale(.97);
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      z-index: 20;
    }
    .alias-info-panel.info-panel--visible {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      pointer-events: auto;
    }
    @media (max-width: 720px) {
      .alias-info-panel,
      .dest-info-panel {
        left: 0;
        right: auto;
        inset-inline: 0 auto;
        width: min(280px, calc(100vw - 28px));
        transform: translate3d(0, -6px, 0) scale(.97);
        transform-origin: top left;
      }
      .alias-info-panel.info-panel--visible,
      .dest-info-panel.info-panel--visible {
        transform: translate3d(0, 0, 0) scale(1);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      button.alias-info-trigger {
        transition: color .2s ease, background .2s ease, box-shadow .2s ease;
      }
      button.alias-info-trigger:hover,
      button.alias-info-trigger:focus-visible {
        transform: none;
      }
      .alias-info-panel,
      .alias-info-panel.info-panel--visible,
      .dest-info-panel,
      .dest-info-panel.info-panel--visible {
        transition: none;
        transform: none;
      }
    }
    .alias-helper--preview {
      margin: 0;
      font-size: .85rem;
      color: var(--ink-muted);
      text-align: center;
      letter-spacing: normal;
    }
    .alias-preview {
      margin: var(--space-2) auto 0;
      width: 100%;
      max-width: 420px;
      display: grid;
      gap: var(--space-2);
      justify-items: center;
      text-align: center;
    }
    .alias-preview__button {
      width: 100%;
      padding: var(--space-5) var(--space-4);
      border-radius: 16px;
      border: 1px dashed rgba(15,23,42,.12);
      background: color-mix(in srgb, var(--panel) 96%, rgba(15,23,42,.04));
      color: var(--ink-strong);
      display: grid;
      gap: var(--space-3);
      place-items: center;
      text-align: center;
      cursor: copy;
      min-height: auto;
      font-weight: 600;
      line-height: 1.3;
      box-shadow: none;
      transform: none;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    }
    .alias-preview__button:hover {
      border-color: rgba(15,23,42,.18);
      background: color-mix(in srgb, var(--panel) 98%, rgba(15,23,42,.06));
      box-shadow: 0 0 0 1px rgba(15,23,42,.08);
    }
    .alias-preview__button:focus-visible {
      outline: none;
      border-color: color-mix(in srgb, var(--brand), transparent 50%);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand), transparent 78%);
      background: color-mix(in srgb, var(--panel) 96%, rgba(245,179,31,.12));
    }
    .alias-preview__button:disabled {
      cursor: wait;
      opacity: .75;
    }
    .alias-preview__button.is-copied {
      border-color: color-mix(in srgb, var(--brand), transparent 55%);
      border-style: dashed;
      background: color-mix(in srgb, var(--panel) 92%, rgba(245,179,31,.3));
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand), transparent 55%);
    }
    .alias-preview__value {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
      font-size: 1rem;
      font-weight: 600;
      color: var(--ink-strong);
      word-break: break-all;
    }
    .alias-preview__hint {
      margin: 0;
      font-size: .85rem;
      color: var(--ink-muted);
    }
    .alias-preview__button.is-copied + .alias-preview__hint {
      color: color-mix(in srgb, var(--brand), var(--ink-muted) 55%);
      font-weight: 600;
    }
    @media (prefers-reduced-motion: reduce) {
      .alias-preview__button {
        transition: none;
      }
    }
    .alias-form__field .compact-input,
    .alias-form__field select {
      width: 100%;
    }
    /* Forms */
    label { font-weight: 600; font-size: .92rem; color: var(--ink-strong); }
    input, select, button, .btn { width: auto; min-height: var(--control-min-height); font-size: 16px; padding: var(--control-padding-block) var(--control-padding-inline); border-radius: 12px; border: 1px solid #e2e8f0; background: #ffffff; color: var(--ink); transition: border .2s ease, box-shadow .2s ease, transform .15s ease; }
    input::placeholder { color: #6b7280; opacity: 1; }
    select option { color: var(--ink); }
    input:focus-visible, select:focus-visible, button:focus-visible, .btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand), transparent 75%); }

    .form-error,
    .field-error {
      margin: var(--space-3) 0 0;
      color: #b91c1c;
      font-size: .9rem;
      min-height: 1.2em;
    }
    .form-error[hidden],
    .field-error[hidden] {
      display: none;
    }

    @media (prefers-color-scheme: dark) {
      input, select { background: #0f0f0f; border-color: rgba(255,255,255,.24); color: var(--ink); }
      input::placeholder { color: #b7c3d9; }
      .alias-helper code { background: rgba(255,255,255,.12); color: var(--ink); }
      button.alias-info-trigger {
        background: color-mix(in srgb, var(--panel) 68%, rgba(255,255,255,.24));
        color: var(--ink-muted);
      }
      button.alias-info-trigger:hover,
      button.alias-info-trigger:focus-visible {
        background: color-mix(in srgb, var(--panel) 74%, rgba(245,179,31,.35));
        color: var(--ink);
      }
      .alias-preview__button {
        border-color: rgba(255,255,255,.18);
        background: color-mix(in srgb, var(--panel) 86%, rgba(255,255,255,.12));
        color: var(--ink);
      }
      .alias-preview__button:hover {
        border-color: color-mix(in srgb, var(--brand), transparent 50%);
        background: color-mix(in srgb, var(--panel) 88%, rgba(245,179,31,.22));
      }
      .alias-preview__button:focus-visible {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand), transparent 70%);
      }
      .alias-preview__button.is-copied {
        border-color: color-mix(in srgb, var(--brand), transparent 32%);
        background: color-mix(in srgb, var(--panel) 84%, rgba(245,179,31,.35));
      }
      .alias-preview__hint {
        color: color-mix(in srgb, var(--ink), transparent 40%);
      }
      .alias-preview__button.is-copied + .alias-preview__hint {
        color: var(--ink);
      }
      .alias-form__divider {
        background: rgba(255,255,255,.16);
      }
      .alias-info-panel {
        background: color-mix(in srgb, var(--panel) 86%, rgba(0,0,0,.55));
        border-color: rgba(255,255,255,.14);
        color: var(--ink);
      }
    }

    button, .btn { background: linear-gradient(135deg, var(--brand-2), var(--brand)); border: none; color: #3c2d00; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.22); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
    button:hover, .btn:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(0,0,0,.3); }
    @media (prefers-reduced-motion: reduce) {
      button:hover,
      .btn:hover { transform: none; }
    }
    button.secondary, .btn.secondary { background: transparent; color: var(--ink); border: 1px solid rgba(0,0,0,.18); box-shadow: none; }
    button.secondary:hover, .btn.secondary:hover { background: #f3f4f6; }
    @media (prefers-color-scheme: dark) {
      button.secondary, .btn.secondary { color: var(--ink); border-color: rgba(255,255,255,.24); }
      button.secondary:hover, .btn.secondary:hover { background: rgba(255,255,255,.08); }
      button.secondary.danger, .btn.secondary.danger { color: #fca5a5; border-color: rgba(248,113,113,.45); }
      button.secondary.danger:hover, .btn.secondary.danger:hover { background: rgba(248,113,113,.22); }
    }
    button.sm, .btn.sm { min-height: 32px; padding: 6px 10px; font-size: 12px; border-radius: 10px; }
    button.icon-only, .btn.icon-only {
      --icon-only-size: 34px;
      padding: 6px;
      min-width: var(--icon-only-size);
      min-height: var(--icon-only-size);
      border-radius: 10px;
      gap: 0;
      justify-content: center;
      align-items: center;
    }
    button.sm.icon-only, .btn.sm.icon-only {
      --icon-only-size: 30px;
      border-radius: 8px;
      padding: 4px;
    }
    .action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      min-width: 0;
    }
    .btn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
    }
    .btn-icon .icon {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
    }
    .refresh-button:hover {
      background: color-mix(in srgb, var(--panel) 100%, rgba(255,255,255,.82));
      border-color: color-mix(in srgb, var(--ink-muted) 28%, transparent);
    }
    .refresh-button:focus-visible {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand), transparent 75%);
    }
    .refresh-button:disabled {
      cursor: not-allowed;
      opacity: .6;
    }
    .refresh-icon {
      display: block;
      width: 20px;
      height: 20px;
    }
    @keyframes refresh-spin {
      from { transform: rotate(0); }
      to { transform: rotate(360deg); }
    }
    .refresh-button.loading .refresh-icon {
      animation: refresh-spin .9s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .refresh-button.loading .refresh-icon {
        animation: none;
      }
    }
    .action-btn .btn-icon:empty + .btn-text--responsive {
      display: inline;
    }
    .btn-text--responsive { white-space: nowrap; }
    .rule-card-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: var(--space-4);
      flex-wrap: wrap;
      flex: 1 1 auto;
      min-width: 0;
    }
    .dest-section {
      position: relative;
    }
    .dest-section__container {
      display: grid;
      gap: var(--space-3);
      padding-block: 0;
      padding-inline: 0;
    }
    .dest-section__header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-4);
      flex-wrap: wrap;
    }
    .dest-section__intro {
      flex: 1 1 auto;
      min-width: 0;
    }
    .dest-section__content {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-4);
      align-items: start;
    }
    .dest-section__column {
      display: grid;
      gap: var(--space-4);
    }
    .dest-section__column--form,
    .dest-section__column--list {
      width: 100%;
      min-width: 0;
    }
    .dest-section__column--list {
      display: grid;
      align-items: stretch;
    }
    .dest-section__form { 
      display: grid; 
      gap: var(--space-3); 
    }
    #destList {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
      display: grid;
      gap: var(--space-4);
    }
    .dest-section__form-fields {
      display: grid;
      gap: var(--space-3);
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }
    .dest-section__cta {
      min-width: 180px;
    }
    button.icon-only .spinner {
      margin: 0;
      flex: 0 0 auto;
    }
    .compact-input, .compact-btn { min-height: 38px; padding: 8px 12px; font-size: 15px; border-radius: 10px; }
    .compact-btn { padding-inline: 14px; font-size: 15px; }
    .table-actions .compact-input { flex: 1 1 160px; min-width: 140px; }
    .btns { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    button.secondary.danger, .btn.secondary.danger { color: #b91c1c; border-color: rgba(220,38,38,.35); }
    button.secondary.danger:hover, .btn.secondary.danger:hover { background: rgba(254,226,226,.85); }
    .icon {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      color: inherit;
    }
    .btn-text { display: inline; }

    .section-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
    .section-actions.full-width { width: 100%; }
    .section-actions.full-width > * { flex: 1 1 100%; }
    .section-actions__search { display: flex; align-items: center; gap: var(--space-3); flex: 0 1 320px; }
    .section-actions__search input { flex: 1 1 260px; min-width: 200px; width: 100%; }

    button.btn-block, .btn.btn-block { width: 100%; }
    .table-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
    .table-actions__field { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 220px; min-width: 0; }
    .table-actions__field input { width: 100%; }
    .table-actions__field--sub { flex: 0 1 200px; }
    .table-actions__submit { min-height: var(--control-min-height); padding: var(--control-padding-block) var(--control-padding-inline); display: inline-flex; align-items: center; justify-content: center; }
    td.actions-cell { text-align: center; }
    td.actions-cell .cell-value {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    td.actions-cell button { margin-inline: 0; }

    .admin-status {
      margin: var(--space-5) 0;
      padding: var(--space-3) var(--space-4);
      border-radius: 12px;
      border: 1px solid rgba(15,23,42,.12);
      background: var(--panel);
      background: color-mix(in srgb, var(--panel) 88%, transparent);
      color: var(--ink-strong);
      font-weight: 500;
    }
    .admin-status[data-status="success"] {
      border-color: rgba(34,197,94,.3);
      background: rgba(34,197,94,.12);
      color: #0f5132;
    }
    .admin-status[data-status="error"] {
      border-color: rgba(248,113,113,.4);
      background: rgba(248,113,113,.12);
      color: #7f1d1d;
    }
    .admin-status[data-status="info"] {
      border-color: rgba(59,130,246,.25);
      background: rgba(59,130,246,.12);
      color: #1d4ed8;
    }

    /* Dialogos de alerta */
    dialog:not([open]),
    .change-password-dialog:not([open]) {
      display: none;
    }

    dialog[open] {
      display: block;
    }

    dialog.auth-dialog { border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); padding: 0; border-radius: calc(var(--radius) + 2px); background: var(--panel); color: var(--ink); box-shadow: var(--shadow); width: min(var(--auth-card-width), calc(100% - var(--space-6))); }
    dialog.auth-dialog::backdrop { background: rgba(15,23,42,.45); }
    dialog.change-password-dialog::backdrop {
      background: rgba(255,255,255,.55);
      backdrop-filter: blur(6px);
    }
    dialog.dest-verify-dialog::backdrop {
      background: rgba(255,255,255,.55);
      backdrop-filter: blur(6px);
    }
    dialog.install-app-dialog::backdrop {
      background: rgba(255,255,255,.55);
      backdrop-filter: blur(6px);
    }
    @media (prefers-color-scheme: dark) {
      dialog.change-password-dialog::backdrop {
        background: rgba(15,23,42,.55);
      }
      dialog.dest-verify-dialog::backdrop {
        background: rgba(15,23,42,.55);
      }
      dialog.install-app-dialog::backdrop {
        background: rgba(15,23,42,.55);
      }
    }
    dialog.dest-verify-dialog {
      width: min(560px, calc(100% - var(--space-6)));
    }
    dialog.install-app-dialog {
      width: min(420px, calc(100% - var(--space-6)));
    }
    .auth-dialog__content { padding: var(--space-6); display: grid; gap: var(--space-4); }
    .auth-dialog__content h2 { margin: 0; font-size: 1.2rem; color: var(--ink-strong); }
    .auth-dialog__content p { margin: 0; color: var(--ink); }
    .install-app-dialog__content {
      gap: var(--space-5);
    }
    .install-app-dialog__header {
      display: grid;
      gap: var(--space-2);
    }
    .install-app-dialog__lead {
      margin: 0;
      color: var(--ink-muted);
      font-size: .95rem;
    }
    .install-app-dialog__steps {
      display: grid;
      gap: var(--space-3);
      font-size: .97rem;
      line-height: 1.6;
    }
    .install-app-dialog__steps p {
      margin: 0;
      display: flex;
      gap: var(--space-2);
      align-items: flex-start;
    }
    .install-app-dialog__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.5rem;
      height: 1.5rem;
      margin-top: 0.125rem;
      color: var(--ink-strong);
      flex-shrink: 0;
    }
    .install-app-dialog__icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .install-app-dialog__icon--share,
    .install-app-dialog__icon--homescreen,
    .install-app-dialog__icon--confirm {
      background: transparent;
    }
    .install-app-dialog__description {
      flex: 1;
      min-width: 0;
    }
    .install-app-dialog__steps strong {
      font-size: 1rem;
      font-weight: 600;
      color: var(--ink-strong);
    }
    .install-app-dialog__steps em {
      font-style: normal;
      font-weight: 600;
      color: var(--ink-strong);
    }
    .install-app-dialog__actions {
      justify-content: flex-end;
    }
    @media (max-width: 520px) {
      dialog.install-app-dialog {
        width: min(100%, calc(100% - var(--space-4)));
      }
      .install-app-dialog__content {
        padding: var(--space-5);
        gap: var(--space-4);
      }
      .install-app-dialog__steps {
        font-size: .95rem;
        gap: var(--space-2);
      }
    }
    .dest-verify-dialog__content {
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
    }
    .dest-verify-dialog__intro {
      display: grid;
      gap: var(--space-2);
    }
    .dest-verify-dialog__intro p {
      color: var(--ink-muted);
      line-height: 1.6;
    }
    .dest-verify-dialog__image {
      margin-inline: auto;
      max-width: min(280px, 90%);
      width: 100%;
      height: auto;
      border-radius: 16px;
    }
    .dest-verify-dialog__actions {
      align-self: flex-end;
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }

    dialog.admin-dialog { border: none; padding: var(--space-5); border-radius: 18px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); width: min(460px, calc(100% - var(--space-6))); }
    dialog.admin-dialog::backdrop { background: rgba(15,23,42,.45); }
    .dialog-form { display: grid; gap: var(--space-4); margin: 0; }
    .dialog-form h2 { margin: 0; font-size: 1.1rem; color: var(--ink-strong); }
    .dialog-desc { margin: 0; color: var(--ink); font-size: .95rem; }
    .dialog-label { font-weight: 600; color: var(--ink-strong); }
    .dialog-form input { width: 100%; }
    .dialog-form__fieldset { display: grid; gap: var(--space-4); }
    .dialog-form__field { display: grid; gap: var(--space-2); }
    .dialog-form__field label { font-weight: 600; color: var(--ink-strong); }
    .dialog-hint { margin: 0; font-size: .9rem; color: var(--ink-muted); }
    .dialog-label-optional { font-weight: 500; color: var(--ink-muted); font-size: .9rem; }
    .dialog-error { margin: 0; color: #b91c1c; font-size: .9rem; min-height: 1.2rem; }
    .dialog-error[hidden] { display: none !important; }
    .dialog-error--general { min-height: 0; background: rgba(220, 38, 38, .08); border-radius: 12px; padding: var(--space-3); }
    .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
    .dialog-form.is-busy { opacity: .75; }
    dialog.change-password-dialog {
      padding: 0;
      border-radius: calc(var(--radius) + 2px);
      background: var(--panel);
      color: var(--ink);
      overflow: hidden;
      width: min(420px, calc(100% - var(--space-6)));
    }
    dialog.change-password-dialog .change-password-form {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      margin: 0;
      background: var(--panel);
    }
    .change-password-form.is-busy { opacity: .75; }
    .change-password-header {
      padding: var(--space-5) var(--space-6);
      display: grid;
      gap: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 18%, transparent);
    }
    .change-password-header h2 {
      margin: 0;
      font-size: 1.2rem;
      color: var(--ink-strong);
      line-height: 1.3;
    }
    .change-password-body {
      padding: var(--space-6);
      display: grid;
      gap: var(--space-5);
      min-height: 0;
      overflow-y: auto;
    }
    .change-password-fields {
      display: grid;
      gap: var(--space-4);
    }
    .change-password-fields .dialog-form__field { gap: var(--space-2); }
    .change-password-fields input {
      min-height: var(--control-min-height);
    }
    .change-password-footer {
      display: flex;
      gap: var(--space-3);
      justify-content: flex-end;
      flex-wrap: wrap;
      padding: var(--space-5) var(--space-6);
      border-top: 1px solid color-mix(in srgb, var(--ink-muted) 18%, transparent);
      background: color-mix(in srgb, var(--panel) 96%, white 4%);
    }
    .change-password-footer button {
      flex: 1 1 140px;
      min-width: 0;
    }

    @media (max-width: 720px) {
      dialog.change-password-dialog {
        position: fixed;
        top: 50%;
        left: calc(env(safe-area-inset-left) + var(--space-4));
        right: calc(env(safe-area-inset-right) + var(--space-4));
        transform: translateY(-50%);
        margin: 0;
        width: auto;
        max-width: min(420px, calc(100% - var(--space-8)));
        border-radius: calc(var(--radius) + 2px);
        box-shadow: var(--shadow);
      }

      dialog.change-password-dialog .change-password-form {
        grid-template-rows: auto minmax(0, 1fr) auto;
        max-height: calc(100dvh - (env(safe-area-inset-top) + env(safe-area-inset-bottom) + var(--space-8)));
        overflow-y: auto;
      }

      .change-password-header {
        padding: calc(env(safe-area-inset-top) + var(--space-4))
          calc(env(safe-area-inset-right) + var(--space-5))
          calc(env(safe-area-inset-bottom) + var(--space-4))
          calc(env(safe-area-inset-left) + var(--space-5));
      }

      .change-password-body {
        padding: calc(env(safe-area-inset-top) + var(--space-4))
          calc(env(safe-area-inset-right) + var(--space-5))
          calc(env(safe-area-inset-bottom) + var(--space-4))
          calc(env(safe-area-inset-left) + var(--space-5));
      }

      .change-password-footer {
        padding: calc(env(safe-area-inset-top) + var(--space-5))
          calc(env(safe-area-inset-right) + var(--space-5))
          calc(env(safe-area-inset-bottom) + var(--space-5))
          calc(env(safe-area-inset-left) + var(--space-5));
        justify-content: center;
      }

      .change-password-footer button { flex-basis: 200px; }
    }

    /* Rule cards */
    .rule-card-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
    .rule-card { border: 1px solid rgba(0,0,0,.08); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; transition: border-color .2s ease; }
    .rule-card--active { border-color: color-mix(in srgb, #16a34a 26%, transparent); }
    .rule-card--inactive { border-color: color-mix(in srgb, #b45309 28%, transparent); }
    .rule-card summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-5); list-style: none; cursor: pointer; font-weight: 600; color: var(--ink-strong); }
    .rule-card summary::-webkit-details-marker { display: none; }
    .rule-card summary:focus-visible { outline: 2px solid color-mix(in oklab, var(--brand), transparent 60%); outline-offset: 2px; border-radius: 12px; }
    .rule-card summary::after { content: ''; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-left: auto; transition: transform .2s ease; opacity: .5; }
    .rule-card[open] summary::after { transform: rotate(45deg); }
    .rule-summary { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; flex: 1 1 auto; }
    .rule-title { font-size: 1rem; }
    .rule-content {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      padding: 0 var(--space-5) var(--space-5);
    }
    .rule-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .rule-field--actions { margin-top: auto; }
    .rule-field--actions .rule-value {
      display: flex;
      width: 100%;
      gap: var(--space-3);
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
    }
    .rule-field--actions .action-btn { min-width: 0; }
    .rule-field--actions .alias-delete-btn,
    .rule-field--actions .alias-toggle-btn { margin-left: 0; }
    .rule-label { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; }
    .rule-value { color: var(--ink); display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
    .rule-status-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: .78rem;
      font-weight: 700;
      white-space: nowrap;
    }
    .rule-status-label--active { background: rgba(72,199,142,.2); color: #1f7a54; }
    .rule-status-label--inactive { background: rgba(245,179,31,.22); color: #513c00; }
    @media (prefers-color-scheme: dark) {
      .rule-status-label--active { background: rgba(72,199,142,.25); color: #9fe4c2; }
      .rule-status-label--inactive { background: rgba(245,179,31,.25); color: #ffe29a; }
    }
    .rule-empty { color: var(--ink-muted); font-size: .95rem; padding: var(--space-5); border: 1px dashed rgba(0,0,0,.16); border-radius: 16px; text-align: center; background: var(--panel); background: color-mix(in srgb, var(--panel) 90%, transparent); }

    /* Spinner mínimo */
    .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; }
    .spinner[hidden] { display: none; }
    button .spinner { margin-right: 6px; }
    .spinner-idle {
      animation-play-state: paused;
      opacity: 0;
      width: 0;
      height: 0;
      margin: 0;
      border-width: 0;
    }
    button .spinner.spinner-idle { margin-right: 0; }
    button.loading .spinner { animation-play-state: running; opacity: 1; }
    button.icon-only.loading .refresh-icon { opacity: 0; }
    button.loading .btn-text { opacity: .65; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .btn-label { display: inline-block; min-width: 8ch; text-align: center; }

    /* Tables */
    .table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-1); container-type: inline-size; }
    .table-container::-webkit-scrollbar { height: 6px; }
    .table-container::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 999px; }

    table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: inset 0 1px 0 rgba(0,0,0,.06); table-layout: fixed; }
    thead { background: rgba(245,179,31,.18); color: var(--ink); text-transform: uppercase; font-size: .75rem; letter-spacing: .06em; }
    th, td { padding: 12px 16px; border-bottom: 1px solid rgba(50,74,109,.08); text-align: left; vertical-align: top; }
    th { white-space: nowrap; }
    td, th { overflow-wrap: anywhere; }

    .admin-users-table th:nth-child(2),
    .admin-users-table td:nth-child(2) { width: 18%; }
    .admin-users-table th:nth-child(3),
    .admin-users-table td:nth-child(3) {
      width: min(260px, 32%);
      min-width: 220px;
      text-align: right;
    }
    .admin-users-table td:nth-child(3) .btns {
      justify-content: flex-end;
      flex-wrap: nowrap;
      align-items: center;
      gap: var(--space-3);
    }

    tbody tr:nth-child(2n) { background: #f9fafb; }
    tbody tr:hover { background: #eef2f7; }

    @media (min-width: 768px) {
      .alias-form__split {
        grid-template-columns: minmax(0, 3fr) 1px minmax(0, 2.2fr);
        column-gap: var(--space-6);
        align-items: start;
        grid-template-areas:
          "inputs divider preview"
          "footer divider preview";
      }
      .alias-form__column--inputs {
        padding-inline: var(--space-4);
      }
      .alias-form__divider {
        margin: 0;
        width: 1px;
        min-height: 100%;
      }
      .alias-form__column--preview {
        padding: var(--space-10) var(--space-4);
        justify-content: center;
        align-items: center;
        margin: 0 auto;
      }
      .alias-form__column--preview .alias-preview {
        justify-items: center;
        text-align: center;
      }
      .alias-form__row--local {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--space-3);
      }
      .alias-form__action--gen {
        justify-items: end;
      }
      .alias-form__action--gen button {
        width: auto;
      }
    }

    @media (prefers-color-scheme: dark) {
      table { background: #0f0f0f; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
      thead { background: rgba(245,179,31,.22); color: var(--ink-strong); }
      tbody tr:nth-child(2n) { background: rgba(255,255,255,.04); }
      tbody tr:hover { background: rgba(255,255,255,.06); }
      .rule-card { border-color: rgba(255,255,255,.12); }
      .rule-card--active { border-color: color-mix(in srgb, #4ade80 36%, transparent); }
      .rule-card--inactive { border-color: color-mix(in srgb, #f59e0b 36%, transparent); }
      .rule-empty { border-color: rgba(255,255,255,.16); background: var(--panel); background: color-mix(in srgb, var(--panel) 75%, transparent); }
    }


    .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
    .badge.success { background: rgba(72,199,142,.2); color: #1f7a54; }
    .badge.pending { background: rgba(245,179,31,.22); color: #513c00; }
    @media (prefers-color-scheme: dark) {
      .badge.success { background: rgba(72,199,142,.25); color: #9fe4c2; }
      .badge.pending { background: rgba(245,179,31,.25); color: #ffe29a; }
    }

    @media (max-width: 720px) {
      .titlebar {
        gap: var(--space-3);
      }
      .titlebar h1 {
        width: auto;
      }
      .titlebar .btns {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      }
      .titlebar .btns button {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
      }
      section header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
      }
      .dest-section__container {
        padding-block: 0;
        padding-inline: 0;
        gap: var(--space-3);
      }
      .dest-section header {
        margin-bottom: var(--space-2);
      }
      .dest-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
      }
      .dest-section__content {
        grid-template-columns: 1fr;
        gap: var(--space-4);
      }
      .dest-section__column {
        gap: var(--space-3);
      }
      .dest-section__form-fields {
        grid-template-columns: 1fr;
        gap: var(--space-3);
      }
      .dest-section__form {
        gap: var(--space-2);
      }
      .dest-section__cta {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
      }
      .table-actions { 
        width: 100%;
        display: grid;
        gap: var(--space-3);
        grid-template-columns: 1fr;
      }
      .table-actions > * {
        width: 100%;
      }
      .table-actions__field {
        width: 100%;
      }
      .alias-actions {
        width: 100%;
        min-width: 0;
        display: grid;
        gap: var(--space-3);
        grid-template-columns: 1fr;
      }
      .alias-actions > * {
        width: 100%;
        min-width: 0;
      }
      .section-actions { 
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
      }
      .section-actions .btns {
        width: 100%;
        display: grid;
        gap: var(--space-3);
        grid-template-columns: 1fr;
      }
      .section-actions .btns > * {
        width: 100%;
      }
      .section-actions__search {
        width: 100%;
        flex: 1 1 100%;
      }
      .section-actions__search input {
        min-width: 0;
      }
      .btns {
        width: 100%;
        justify-content: flex-start;
      }
      select.compact-input {
        width: 100%;
      }
      
      }

    /* Utilidades de truncado/clamp */
    .truncate-1 { display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .truncate-2 { display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; }

    /* --- Móvil ----------------------------------------------------------- */
    @media (max-width: 720px) {
      body { padding: max(env(safe-area-inset-top), 14px) 14px max(env(safe-area-inset-bottom), 14px); }
      main { gap: 16px; }
      section { padding: 14px; border-radius: 14px; }
      h1 { font-size: 1.1rem; }
      .title-text { font-size: 1rem; }
      h2 { font-size: 1rem; }

      :root { --control-min-height: 38px; --control-padding-block: 8px; --control-padding-inline: 12px; }
      input, select, button, .btn { font-size: 15px; border-radius: 10px; }
      .btns { gap: 6px; }
      .titlebar .btns { gap: var(--space-3); }
      button.sm { min-height: 32px; padding: 6px 10px; font-size: 12px; }
      .icon { width: 14px; height: 14px; }
      .stack { gap: var(--space-3); }
      .stack label { font-size: .9rem; }
      .stack .compact-input,
      .stack .compact-btn,
      .stack select,
      .stack input {
        width: 100%;
      }
      .btns input,
      .btns select,
      .section-actions button,
      .table-actions button {
        width: 100%;
      }
      .btns .btn-text {
        display: inline;
      }
      .btns button,
      .btns .btn {
        justify-content: center;
      }
      .action-btn {
        min-width: auto;
        justify-content: center;
        flex-wrap: nowrap;
      }
      .action-btn .btn-text--responsive {
        display: inline-block;
      }
      .action-btn .btn-icon:empty + .btn-text--responsive {
        display: inline-block;
      }
      .admin-users-table td:nth-child(3) .btns .btn-text--responsive {
        display: inline;
      }
      .btn-icon .icon {
        width: 16px;
        height: 16px;
      }
      .rule-card-header {
        flex-direction: column;
        align-items: flex-start;
      }
      .rule-field--actions .rule-value {
        justify-content: flex-start;
        gap: var(--space-3);
        flex-wrap: wrap;
        align-items: center;
      }
      .rule-field--actions .btn-text--responsive {
        width: auto;
        text-align: left;
      }
      .rule-field--actions .action-btn {
        width: auto;
        flex: 0 0 auto;
        justify-content: center;
        flex-wrap: nowrap;
      }
      .rule-card summary {
        padding: var(--space-4);
      }
      .rule-content {
        padding: 0 var(--space-4) var(--space-4);
      }
      .alias-form__split {
        gap: var(--space-4);
      }
      .alias-form__column--preview {
        padding: var(--space-5) var(--space-3);
        margin: var(--space-2) auto var(--space-3);
        width: 100%;
        max-width: 360px;
      }
      .alias-form__divider {
        margin: var(--space-4) auto var(--space-2);
      }
      .alias-preview {
        margin: var(--space-1) auto 0;
        width: 100%;
        gap: var(--space-2);
      }
      .alias-preview__button {
        padding: var(--space-4) var(--space-3);
        gap: var(--space-2);
        font-size: .95rem;
      }
      .alias-preview__value {
        font-size: clamp(.92rem, .88rem + .4vw, 1rem);
      }
      .alias-preview__hint {
        font-size: .8rem;
      }
      

      /* Tarjetas */
      thead { display: none; }
      table.responsive { table-layout: auto; border-radius: 0; background: transparent; box-shadow: none; }
      table.responsive tbody { display: grid; gap: 10px; }
      table.responsive tr { display: grid; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 8px 20px rgba(0,0,0,.12); background: var(--panel); }

      /* CELDA: 2 columnas -> etiqueta (fija) + valor (fluido)  */
      table.responsive td {
        display: grid;
        grid-template-columns: var(--label-w) 1fr;
        align-items: start;
        gap: var(--space-3);
        padding: 0;
        border: 0;
        text-align: left; /* valor a la izquierda */
        font-size: .95rem;
      }
      table.responsive td::before {
        content: attr(data-label-short);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-size: .72rem;
        color: var(--ink-strong);
        text-align: left;
      }
      table.responsive td .cell-value {
        min-width: 0;
        padding-left: var(--space-3);
        border-left: 1px solid rgba(0,0,0,.15); /* separador vertical opcional */
      }
      /* Separador horizontal entre "filas" de la tarjeta */
      table.responsive tr > td + td {
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px dashed rgba(0,0,0,.15);
      }

      /* Ajustes de badges y acciones */
      table.responsive td .badge { justify-self: start; }
      table.responsive td:last-child .cell-value { border-left-style: solid; }
      .admin-users-table th:nth-child(2),
      .admin-users-table td:nth-child(2) {
        width: auto;
        min-width: 0;
      }
      .admin-users-table td:nth-child(2) code {
        display: block;
        min-width: 0;
      }
      table.responsive td.actions-cell .cell-value {
        border: 0;
        padding-left: 0;
        justify-content: flex-start;
        width: auto;
        min-width: 0;
        display: inline-flex;
      }
      table.responsive td.actions-cell {
        padding-bottom: 0;
      }
      table.responsive td.actions-cell::before {
        align-self: center;
      }
    }

    @container (max-width: 640px) {
      .admin-users-table th:nth-child(3),
      .admin-users-table td:nth-child(3) {
        width: auto;
        min-width: 0;
      }
      .admin-users-table td:nth-child(3) .btns {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: var(--space-3);
      }
      .admin-users-table td:nth-child(3) .btns .action-btn {
        flex: 1 1 140px;
        justify-content: center;
      }
      .admin-users-table td:nth-child(3) .btns .btn-text--responsive {
        display: inline;
      }
    }

    @container (max-width: 480px) {
      .admin-users-table td:nth-child(3) .btns .action-btn {
        flex: 1 1 100%;
      }
      .admin-users-table td:nth-child(3) .btns .btn-text--responsive {
        display: inline;
      }
    }

    /* --- Aún más estrecho ------------------------------------------------ */
    @media (max-width: 360px) {
      :root { --label-w: 74px; }
    }

    /* Medium screens */
    @media (max-width: 960px) { th, td { padding: 10px 12px; } }

    /* Accessibility helpers */
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    [hidden] { display: none !important; }
  
/* Logo junto al título */
h1 .logo { width: 32px; height: 32px; border-radius: 8px; vertical-align: -6px; margin-right: 8px; }
/* --- Landing page ------------------------------------------------------ */
.landing-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #f8fafc;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, transparent), transparent 40%), #f8fafc;
}

.landing-page .container {
  width: min(960px, calc(100% - 40px));
  margin: 0 auto;
}

.landing-header {
  padding: var(--space-6) 0;
}

.landing-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.landing-header .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink-strong);
}

.landing-header .brand__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
  background: #fff;
  padding: 8px;
}

.landing-nav {
  display: inline-flex;
  gap: var(--space-4);
  font-weight: 600;
}

.landing-nav .nav-link {
  padding: 10px 12px;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.landing-nav .nav-link:hover,
.landing-nav .nav-link:focus-visible {
  background: rgba(245,179,31,.2);
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  outline: none;
}

.hero {
  padding: var(--space-8) 0 var(--space-7);
}

.hero h1 {
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.8rem);
  margin-bottom: var(--space-4);
}

.hero p {
  max-width: 56ch;
  font-size: 1.05rem;
  color: var(--ink-muted);
  margin-bottom: var(--space-6);
}

.hero .actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-strong);
  box-shadow: none;
  border: 1px solid var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
}

.btn--ghost:hover {
  background: rgba(245,179,31,.18);
  background: color-mix(in srgb, var(--brand) 18%, transparent);
}

.benefits {
  padding: var(--space-7) 0 var(--space-8);
}

.benefits h2 {
  margin-bottom: var(--space-5);
}

.benefits__list {
  display: grid;
  gap: var(--space-3);
  font-size: 1rem;
  color: var(--ink-muted);
  padding-left: 1.2rem;
}

.benefits__list li {
  list-style: disc;
}

.landing-footer {
  margin-top: auto;
  padding: var(--space-7) 0 var(--space-6);
  background: var(--panel);
  background: color-mix(in srgb, var(--panel) 92%, rgba(255, 255, 255, 0.85));
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.landing-footer p {
  margin: 0 0 var(--space-3);
  color: var(--ink-muted);
}

.landing-footer .legal {
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .landing-header .container {
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-nav {
    width: 100%;
    justify-content: flex-start;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .hero {
    padding-top: var(--space-7);
  }

  .hero .actions {
    width: 100%;
  }

  .btn,
  .btn--ghost {
    flex: 1 1 160px;
    justify-content: center;
  }
}

@media (prefers-color-scheme: dark) {
  .landing-page {
    background: #020617;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 18%, transparent), transparent 45%), #020617;
  }

  .landing-nav .nav-link:hover,
  .landing-nav .nav-link:focus-visible {
    background: rgba(245,179,31,.35);
    background: color-mix(in srgb, var(--brand) 35%, transparent);
  }

  .hero p,
  .benefits__list,
  .landing-footer p {
    color: color-mix(in srgb, var(--ink), rgba(255, 255, 255, 0.75));
  }

  .btn--ghost {
    color: var(--ink);
    border-color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  }

.landing-footer {
  background: var(--panel);
  background: color-mix(in srgb, var(--panel) 75%, rgba(0, 0, 0, 0.55));
  border-top-color: rgba(255, 255, 255, 0.08);
}
}

/* --- Utilities ---------------------------------------------------------- */
.mr-auto { margin-right: auto; }
.ml-auto { margin-left: auto; }