/* ============================================================================
   ds.css — Design System soySMS
   Tokens globales + componentes con prefijo .ds-  (no colisiona con el CSS legacy)
   Ref. visual: design/design-system/index.html
   ============================================================================ */

/* ===================== TOKENS ===================== */
:root {
  /* Marca */
  --brand:      #8a77f0;
  --brand-600:  #7565db;
  --brand-700:  #6353c9;
  --brand-deep: #502274;
  --brand-50:   #f3f2fa;
  --brand-100:  #ebe8f9;
  --brand-200:  #dbd8f1;
  --brand-300:  #cfcaec;
  --brand-400:  #c3bde7;

  /* Alias para CSS legacy que usa --primary */
  --primary: var(--brand);

  /* Texto / neutros */
  --ink:   #090202;
  --ink-2: #1f2937;
  --body:  #454545;
  --muted: #757575;

  /* Slate */
  --slate-900:#0f172a;
  --slate-700:#475569;
  --slate-500:#64748b;
  --slate-300:#cbd5e1;
  --slate-100:#f1f5f9;
  --slate-50: #f8fafc;

  --white:  #ffffff;
  --border: #e7e5f0;

  /* Estados */
  --success:#135732; --success-bg:#e7f4ec; --success-border:#bfe3cc;
  --warning:#856404; --warning-bg:#f9f3ea; --warning-border:#ffd166;
  --danger: #d52f31; --danger-bg: #fdecec; --danger-border: #f3b6b7;
  --info:   #2563eb; --info-bg:   #e8f0fe; --info-border:   #bcd3fb;

  /* Radios */
  --r-pill: 9999px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  /* Sombras */
  --sh-sm: 0 1px 3px rgba(9,2,2,.06);
  --sh:    0 4px 16px rgba(9,2,2,.08);
  --sh-lg: 0 14px 34px rgba(9,2,2,.12);
}

/* Box-sizing para todos los elementos del design system (sin tocar el legacy) */
[class^="ds-"], [class*=" ds-"] { box-sizing: border-box; }

/* ===================== TIPOGRAFÍA (jerarquía homogénea) ===================== */
/* Escala única para toda la app. Mínimo de cuerpo 13px. */
.ds-page-title    { font-size: clamp(1.4rem, 2.6vw, 1.6rem); font-weight: 800; color: var(--ink); margin: 0; line-height: 1.2; }
.ds-page-sub      { color: var(--muted); font-size: .95rem; margin: 6px 0 0; }
.ds-section-title { font-size: 1.3rem; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.3; }
.ds-subtitle      { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0; }
.ds-text-sm       { font-size: .85rem; }   /* ~13.6px, sobre el mínimo de 13px */

/* Layout de formularios (crear/editar): cabecera mínima con logo + volver */
.ds-form-body { min-height: 100vh; margin: 0; background: #faf9fd; font-family: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.ds-form-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 28px; background: #fff; border-bottom: 1px solid var(--border); }
.ds-form-topbar__brand img { height: 30px; display: block; }
.ds-form-back { display: inline-flex; align-items: center; gap: 7px; color: var(--body); text-decoration: none; font-weight: 700; font-size: .9rem; }
.ds-form-back:hover { color: var(--brand); }
.ds-form-back svg { width: 18px; height: 18px; }
.ds-form-main { padding: 8px 16px 48px; }

/* En pantallas bajas, formularios (layouts.form) con menos padding/gutter en la tarjeta */
@media (max-width: 480px) {
  .ds-form-main { padding: 8px 8px 40px; }
  .ds-form-body .ds-card { padding: 16px; }
}

/* Botones-icono con padding fijo: evita que reglas globales button{} del CSS legacy los inflen */
.ds-icon-btn, .ds-ra, .ds-input-act, .ds-stepper button,
.ds-toast-close, .ds-banner-close, .ds-toggle { padding: 0; }

/* Herencia de tipografía en controles ds- */
.ds-btn, .ds-form-control, .ds-tag-btn, .ds-file-btn, .ds-stepper input,
.ds-otp input, .ds-search-box input, .ds-icon-btn { font-family: inherit; }

/* ===================== BOTONES ===================== */
.ds-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:.95rem; cursor:pointer;
  border:1.5px solid transparent; border-radius:var(--r-pill);
  padding:12px 26px; text-decoration:none; transition:.15s ease; white-space:nowrap;
}
.ds-btn svg{ width:18px;height:18px; }
.ds-btn-primary { background:var(--brand); color:#fff; }
.ds-btn-primary:hover { background:var(--brand-600); box-shadow:var(--sh); }
.ds-btn-outline { background:#fff; color:var(--brand); border-color:var(--brand); }
.ds-btn-outline:hover { background:var(--brand-50); }
.ds-btn-white { background:#fff; color:var(--ink); border-color:var(--border); }
.ds-btn-white:hover { box-shadow:var(--sh); }
.ds-btn-ghost { background:transparent; color:var(--body); }
.ds-btn-ghost:hover { background:var(--slate-100); }
.ds-btn-danger { background:var(--danger); color:#fff; }
.ds-btn-danger:hover { filter:brightness(.94); }
.ds-btn:disabled, .ds-btn.is-disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.ds-btn-sm { padding:8px 16px; font-size:.85rem; }
.ds-btn-lg { padding:15px 34px; font-size:1.05rem; }
.ds-btn-block { width:100%; }

/* ===================== BADGES / PILLS ===================== */
.ds-badge {
  display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:800;
  letter-spacing:.04em; padding:5px 12px; border-radius:var(--r-pill); text-transform:uppercase;
}
.ds-badge svg{ width:13px;height:13px; }
.ds-badge-brand   { background:var(--brand); color:#fff; }
.ds-badge-soft    { background:var(--brand-50); color:var(--brand-deep); border:1px solid var(--brand-200); }
.ds-badge-success { background:var(--success-bg); color:var(--success); }
.ds-badge-warning { background:var(--warning-bg); color:var(--warning); }
.ds-badge-danger  { background:var(--danger-bg);  color:var(--danger); }
.ds-badge-info    { background:var(--info-bg);    color:var(--info); }

.ds-pill { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.85rem; padding:6px 14px; border-radius:var(--r-pill); }
.ds-pill svg{ width:15px;height:15px; }
.ds-pill--ok, .ds-pill--delivered, .ds-pill--active, .ds-pill--paid   { background:var(--success-bg); color:var(--success); }
.ds-pill--wait, .ds-pill--pending, .ds-pill--pend                     { background:var(--info-bg);    color:var(--info); }
.ds-pill--warn, .ds-pill--paused                                      { background:var(--warning-bg); color:var(--warning); }
.ds-pill--err, .ds-pill--undeliverable, .ds-pill--failed, .ds-pill--nocredit { background:var(--danger-bg); color:var(--danger); }
.ds-pill--done { background:var(--slate-100); color:var(--slate-500); }

/* ===================== TOGGLE ===================== */
.ds-toggle { position:relative; width:46px; height:26px; border-radius:var(--r-pill); border:none; background:var(--slate-300); cursor:pointer; transition:.2s; padding:0; }
.ds-toggle::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--sh-sm); transition:.2s; }
.ds-toggle.is-on { background:var(--brand); }
.ds-toggle.is-on::after { left:23px; }
.ds-toggle-row { display:flex; align-items:center; gap:12px; }

/* ===================== FORMULARIOS ===================== */
.ds-field { margin-bottom:18px; }
.ds-form-label { display:block; font-weight:700; color:var(--ink); font-size:.9rem; margin-bottom:7px; }
.ds-form-control {
  width:100%; font-size:.95rem; color:var(--ink); background:var(--brand-50);
  border:1.5px solid var(--brand-200); border-radius:var(--r-sm); padding:12px 14px; transition:.15s;
}
.ds-form-control::placeholder { color:var(--muted); }
.ds-form-control:focus { outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px rgba(138,119,240,.18); }
.ds-form-control:disabled { background:var(--slate-100); color:var(--slate-500); cursor:not-allowed; }
.ds-form-control.is-error { border-color:var(--danger); background:var(--danger-bg); }
.ds-help { font-size:.82rem; color:var(--muted); margin-top:6px; }
.ds-help.is-error { color:var(--danger); }

/* Fila de dos campos lado a lado; .is-single hace que el primero ocupe todo */
.ds-field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
/* El segundo campo toma solo su ancho (a la derecha) y el primero el espacio restante */
.ds-field-row--auto-end { grid-template-columns:1fr auto; }
.ds-field-row.is-single > .ds-field:first-child { grid-column:1 / -1; }
.ds-field-row > .ds-field { margin-bottom:0; }
@media(max-width:560px){ .ds-field-row { grid-template-columns:1fr; } }

/* Icono de info con tooltip al hover */
.ds-info { position:relative; display:inline-grid; place-items:center; width:18px; height:18px;
  color:var(--info); cursor:help; vertical-align:middle; }
.ds-info svg { width:16px; height:16px; }
.ds-info::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:.78rem; font-weight:400; line-height:1.45; text-align:left;
  padding:8px 11px; border-radius:var(--r-sm); width:max-content; max-width:220px;
  opacity:0; visibility:hidden; transition:.15s; z-index:60; pointer-events:none; box-shadow:var(--sh-lg); }
.ds-info::before { content:""; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--ink); opacity:0; visibility:hidden; transition:.15s; z-index:60; }
.ds-info:hover::after, .ds-info:hover::before { opacity:1; visibility:visible; }

.ds-input-icon { position:relative; }
.ds-input-icon .ds-form-control { padding-right:44px; }
.ds-input-icon .ds-input-act { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--muted); display:grid; place-items:center; }
.ds-input-icon .ds-input-act svg{ width:19px;height:19px; }

.ds-check { display:flex; align-items:center; gap:10px; font-size:.92rem; color:var(--ink); cursor:pointer; margin:10px 0; }
.ds-check input { position:absolute; opacity:0; width:0;height:0; }
.ds-check .ds-box { width:20px;height:20px;border-radius:6px;border:2px solid var(--brand-300); display:grid;place-items:center; color:#fff; transition:.15s; flex:0 0 auto; }
.ds-check .ds-box svg{ width:14px;height:14px; opacity:0; }
.ds-check input:checked + .ds-box { background:var(--brand); border-color:var(--brand); }
.ds-check input:checked + .ds-box svg{ opacity:1; }
.ds-check .ds-radio { width:20px;height:20px;border-radius:50%;border:2px solid var(--brand-300); display:grid;place-items:center; flex:0 0 auto; transition:.15s; }
.ds-check .ds-radio::after{ content:""; width:9px;height:9px;border-radius:50%; background:var(--brand); transform:scale(0); transition:.15s; }
.ds-check input:checked + .ds-radio { border-color:var(--brand); }
.ds-check input:checked + .ds-radio::after { transform:scale(1); }

.ds-select-wrap { position:relative; }
.ds-select-wrap > svg { position:absolute; right:14px; top:50%; transform:translateY(-50%); width:18px;height:18px; color:var(--muted); pointer-events:none; }
select.ds-form-control { appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer; }

/* Stepper numérico */
.ds-stepper { display:inline-flex; align-items:center; border:1.5px solid var(--brand-200); border-radius:var(--r-sm); overflow:hidden; background:transparent; }
.ds-stepper button { width:42px;height:44px; border:none; background:var(--brand-100); color:var(--brand-deep); font-size:1.1rem; font-weight:800; cursor:pointer; }
.ds-stepper button:hover { background:var(--brand-200); }
.ds-stepper input { width:80px; height:44px; border:none; text-align:center; font-family:inherit; font-size:1rem; font-weight:700; color:var(--ink); background:transparent; -moz-appearance:textfield; appearance:textfield; }
.ds-stepper input::-webkit-outer-spin-button, .ds-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.ds-stepper input:focus{ outline:none; }

/* ===================== ALERTAS / TOAST / BANNER ===================== */
.ds-alert { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-sm); border:1px solid; font-size:.92rem; }
.ds-alert svg{ width:20px;height:20px;flex:0 0 auto; }
.ds-alert strong{ display:block; color:inherit; }
.ds-alert-success { background:var(--success-bg); border-color:var(--success-border); color:var(--success); }
.ds-alert-warning { background:var(--warning-bg); border-color:var(--warning-border); color:var(--warning); }
.ds-alert-danger  { background:var(--danger-bg);  border-color:var(--danger-border);  color:var(--danger); }
.ds-alert-info    { background:var(--info-bg);    border-color:var(--info-border);    color:var(--info); }

.ds-toast-stack { position:fixed; top:16px; right:16px; z-index:1000; display:flex; flex-direction:column; gap:10px; max-width:360px; }
.ds-toast { display:flex; gap:10px; align-items:flex-start; padding:13px 15px; border-radius:var(--r-sm); box-shadow:var(--sh-lg); font-size:.9rem; border:1px solid; background:#fff; }
.ds-toast svg{ width:18px;height:18px;flex:0 0 auto;margin-top:1px; }
.ds-toast ul{ margin:4px 0 0; padding-left:16px; }
.ds-toast-error   { border-color:var(--danger-border);  background:var(--danger-bg);  color:var(--danger); }
.ds-toast-success { border-color:var(--success-border); background:var(--success-bg); color:var(--success); }
.ds-toast-warning { border-color:var(--warning-border); background:var(--warning-bg); color:var(--warning); }
.ds-toast .ds-toast-close { margin-left:auto; background:none; border:none; cursor:pointer; color:inherit; opacity:.7; }
.ds-toast .ds-toast-close:hover{ opacity:1; }

.ds-banner { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-sm); border:1px solid; font-size:.9rem; }
.ds-banner .ds-banner-ico{ width:18px;height:18px;flex:0 0 auto; }
.ds-banner .ds-banner-close { margin-left:auto; background:none; border:none; cursor:pointer; color:inherit; opacity:.7; display:grid;place-items:center; }
.ds-banner .ds-banner-close:hover { opacity:1; }
.ds-banner .ds-banner-close svg{ width:16px;height:16px; }
.ds-banner--err  { background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger); }
.ds-banner--info { background:var(--info-bg);   border-color:var(--info-border);   color:var(--info); }

/* ===================== DIÁLOGO DE CONFIRMACIÓN ===================== */
.ds-dialog-backdrop { position:fixed; inset:0; background:rgba(9,2,2,.35); display:grid; place-items:center; z-index:1100; padding:20px; }
.ds-dialog-backdrop[hidden] { display:none; }
.ds-dialog { background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:24px; max-width:400px; width:100%; text-align:center; }
.ds-dialog .ds-dialog-ico { width:52px;height:52px;border-radius:50%; background:var(--danger-bg); color:var(--danger); display:grid;place-items:center; margin:0 auto 14px; }
.ds-dialog .ds-dialog-ico svg{ width:26px;height:26px; }
.ds-dialog h4 { margin:0 0 6px; color:var(--ink); }
.ds-dialog p { margin:0; color:var(--muted); font-size:.9rem; }
.ds-dialog .ds-dialog-actions { display:flex; gap:10px; justify-content:center; margin-top:20px; }

/* ===================== SPINNER / EMPTY / STATUS PAGE ===================== */
.ds-spinner { width:34px;height:34px;border-radius:50%;border:3px solid var(--brand-200); border-top-color:var(--brand); animation:ds-spin .7s linear infinite; }
@keyframes ds-spin { to { transform:rotate(360deg); } }

.ds-empty { text-align:center; padding:36px 20px; color:var(--muted); }
.ds-empty .ds-empty-ico { width:52px;height:52px;border-radius:50%;background:var(--brand-50); display:grid;place-items:center; margin:0 auto 12px; color:var(--brand); }
.ds-empty .ds-empty-ico svg{ width:26px;height:26px; }
.ds-empty h4{ margin:0 0 4px; color:var(--ink); }

.ds-statuspage { text-align:center; max-width:460px; margin:0 auto; padding:40px 20px; }
.ds-statuspage .ds-sp-ico { width:66px;height:66px;border-radius:50%; display:grid;place-items:center; margin:0 auto 16px; }
.ds-statuspage .ds-sp-ico svg{ width:32px;height:32px; }
.ds-sp-ico--ok  { background:var(--success-bg); color:var(--success); }
.ds-sp-ico--err { background:var(--danger-bg);  color:var(--danger); }
.ds-sp-ico--wait{ background:var(--brand-50);   color:var(--brand); }
.ds-statuspage h3{ font-size:1.4rem; margin:0 0 8px; color:var(--ink); }
.ds-statuspage > p { color:var(--muted); }
.ds-statuspage .ds-sp-list { list-style:none; padding:0; margin:18px 0; text-align:left; display:inline-block; }
.ds-statuspage .ds-sp-list li { display:flex; gap:10px; align-items:flex-start; margin:9px 0; color:var(--body); font-size:.9rem; }
.ds-statuspage .ds-sp-list svg{ width:18px;height:18px;color:var(--brand);flex:0 0 auto;margin-top:1px; }

/* ===================== AUTH LAYOUT ===================== */
.ds-auth-shell { min-height:100vh; background:var(--slate-100); display:grid; place-items:center; padding:32px 20px; }
.ds-auth-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh); padding:36px; width:100%; max-width:400px; }
.ds-auth-logo { display:flex; align-items:center; justify-content:center; gap:9px; font-weight:900; font-size:1.2rem; color:var(--ink); margin-bottom:30px; }
.ds-auth-logo .ds-auth-logo-mark { width:34px;height:34px;border-radius:9px;background:var(--brand);display:grid;place-items:center;color:#fff; }
.ds-auth-card h1, .ds-auth-card h2, .ds-auth-card h3 { text-align:center; margin:0 0 26px; font-size:1.35rem; color:var(--ink); }
.ds-auth-card .ds-btn-block { margin-top:14px; }
.ds-auth-alt { text-align:center; font-size:.85rem; color:var(--muted); margin-top:20px; }
.ds-auth-terms { text-align:center; font-size:.8rem; color:var(--muted); margin-top:16px; line-height:1.5; }
.ds-auth-terms a { color:var(--brand-700); font-weight:600; }

/* OTP */
.ds-otp { display:flex; gap:10px; justify-content:center; }
.ds-otp input { width:46px; height:56px; text-align:center; font-size:1.4rem; font-weight:800; color:var(--ink);
  border:1.5px solid var(--brand-200); background:var(--brand-50); border-radius:var(--r-sm); }
.ds-otp input:focus { outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px rgba(138,119,240,.18); }
.ds-countdown { text-align:center; font-weight:700; color:var(--danger); margin-top:14px; }
.ds-countdown.is-expired { color:var(--muted); }

/* ===================== REDACTOR SMS (helpers) ===================== */
.ds-tag-btn { font-size:.8rem; font-weight:700; cursor:pointer; padding:6px 12px; border-radius:var(--r-pill);
  border:1px solid var(--brand-200); background:var(--brand-50); color:var(--brand-deep); }
.ds-tag-btn:hover{ background:var(--brand-100); }
.ds-tag-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ds-sms-meter { display:flex; justify-content:space-between; font-size:.8rem; color:var(--muted); margin-top:8px; }
.ds-sms-meter b{ color:var(--ink); }
.ds-autosave { display:inline-flex; align-items:center; gap:7px; background:var(--brand-50); color:var(--brand); font-style:italic; font-size:.82rem; padding:5px 13px; border-radius:var(--r-pill); }
.ds-autosave svg{ width:14px;height:14px; }
.ds-inline-panel { background:var(--brand-50); border:1px solid var(--brand-200); border-radius:var(--r-sm); padding:12px 14px; }
.ds-dashed-panel { background:var(--brand-50); border:1.5px dashed var(--brand-300); border-radius:var(--r-md); padding:16px; }
.ds-tag-badge { display:inline-block; background:var(--brand-100); color:var(--brand-deep); border-radius:6px; padding:1px 7px; font-size:.85em; font-weight:700; }
.ds-tag-badge.is-link { background:var(--brand); color:#fff; }
.ds-file-btn { display:inline-flex; align-items:center; gap:8px; border:2px solid var(--border); background:#fff; color:var(--ink); border-radius:var(--r-pill); padding:9px 18px; font-weight:700; font-size:.88rem; cursor:pointer; }
.ds-file-btn:hover{ border-color:var(--brand-300); }
.ds-file-btn svg{ width:17px;height:17px; }

/* ===================== TABLAS / LISTADOS ===================== */
.ds-list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.ds-list-toolbar h1, .ds-list-toolbar h2, .ds-list-toolbar h3 { font-size:1.4rem; margin:0; color:var(--ink); }
.ds-lt-heading { min-width:0; }
.ds-lt-desc { margin:4px 0 0; color:var(--muted); font-size:.9rem; line-height:1.45; max-width:600px; }
.ds-lt-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ds-search-box { position:relative; }
.ds-search-box input { padding-left:42px; border-radius:var(--r-pill); }
.ds-search-box > svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:16px;height:16px; color:var(--muted); }
.ds-icon-btn { width:42px;height:42px;border-radius:var(--r-pill); border:1px solid var(--border); background:#fff; display:grid;place-items:center; cursor:pointer; color:var(--body); }
.ds-icon-btn:hover { border-color:var(--brand-300); color:var(--brand); }
.ds-icon-btn svg{ width:18px;height:18px; }
.ds-icon-btn--danger { color:var(--danger); }
.ds-icon-btn--danger:hover { color:var(--danger); border-color:var(--danger); background:var(--danger-bg); }

.ds-daterange { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.ds-daterange label { display:block; font-size:.78rem; color:var(--muted); margin-bottom:4px; font-weight:700; }

.ds-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-md); }
.ds-table { width:100%; border-collapse:collapse; background:#fff; }
.ds-table th { background:var(--brand-50); color:var(--ink); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:14px 16px; font-weight:800; }
.ds-table td { padding:14px 16px; border-top:1px solid var(--border); font-size:.9rem; color:var(--body); }
.ds-table tbody tr:hover { background:var(--brand-50); }
/* Neutraliza reglas globales de <td>/<th> del CSS legacy (dashboard.css en el layout admin): altura fija, bg y esquinas */
.ds-table td, .ds-table th { height:auto; max-height:none; max-width:none; text-align:left; vertical-align:middle; }
.ds-table td { background:transparent; }
.ds-table th:first-child, .ds-table th:last-child,
.ds-table tr:last-child td:first-child, .ds-table tr:last-child td:last-child { border-radius:0; }
.ds-table th.ds-sortable a { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.ds-table th .ds-sort-caret { width:13px;height:13px; opacity:.45; transition:.15s; }
.ds-table th.is-sorted .ds-sort-caret { opacity:1; color:var(--brand); }
.ds-table th.is-sorted.is-desc .ds-sort-caret { transform:rotate(180deg); }

.ds-row-actions { display:inline-flex; gap:4px; }
.ds-ra { width:32px;height:32px;border-radius:8px; border:1px solid transparent; background:none; cursor:pointer; display:grid;place-items:center; color:var(--muted); text-decoration:none; }
.ds-ra:hover { background:var(--slate-100); color:var(--ink); }
.ds-ra.is-danger:hover { background:var(--danger-bg); color:var(--danger); }
.ds-ra svg{ width:16px;height:16px; }

.ds-bulk-bar { display:flex; align-items:center; gap:14px; background:var(--brand-50); border:1px solid var(--brand-200); border-radius:var(--r-sm); padding:10px 14px; margin-bottom:12px; }
.ds-bulk-bar .ds-bb-count { font-weight:700; color:var(--brand-deep); font-size:.9rem; }
.ds-bulk-bar .ds-bb-spacer { flex:1; }

.ds-pagination { display:flex; gap:6px; align-items:center; justify-content:center; padding:14px; flex-wrap:wrap; background:none; }
.ds-pagination a, .ds-pagination span { min-width:34px; height:34px; padding:0 9px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); border:1px solid var(--border); background:#fff; color:var(--body); text-decoration:none; font-size:.88rem; font-weight:600; }
.ds-pagination a:hover { border-color:var(--brand-300); color:var(--brand); }
.ds-pagination .is-active { background:var(--brand); border-color:var(--brand); color:#fff; }
.ds-pagination .is-gap { border:none; background:none; }
.ds-pagination svg { width:16px; height:16px; }
.ds-composer .ds-tag-row { margin-bottom:12px; }

/* ===================== CARDS ===================== */
.ds-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; }
.ds-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.ds-section-head h1, .ds-section-head h2, .ds-section-head h3 { font-size:1.3rem; margin:0; color:var(--ink); }
.ds-section-head .ds-sh-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Stat cards con fondo pastel */
.ds-stat { border:1px solid var(--border); border-radius:var(--r-md); background:#fff; padding:22px 20px; }
.ds-stat .ds-stat-t { font-weight:700; color:var(--ink); margin-bottom:8px; }
.ds-stat .ds-stat-n { font-size:2rem; font-weight:900; color:var(--ink); margin:0 0 6px; line-height:1.1; }
.ds-stat .ds-stat-s { font-size:.85rem; color:var(--brand); }
.ds-stat--green  { background:#dcf3e8; border-color:#c3e9d6; }
.ds-stat--amber  { background:#fbeecb; border-color:#f1e0ad; }
.ds-stat--pink   { background:#fbdde4; border-color:#f4c4d0; }
.ds-stat--cyan   { background:#d0eef3; border-color:#b6e2ea; }
.ds-stat--mauve  { background:#e4dbeb; border-color:#d4c7de; }
.ds-stat--green  .ds-stat-s{ color:#0f7a52; }
.ds-stat--amber  .ds-stat-s{ color:#a67c1a; }
.ds-stat--pink   .ds-stat-s{ color:#c43e63; }
.ds-stat--cyan   .ds-stat-s{ color:#1596ad; }
.ds-stat--mauve  .ds-stat-s{ color:#7a5e93; }

/* Stat cards seleccionables por color: contorno en reposo, relleno al activar */
.ds-stat--pick { cursor:pointer; border-width:1.5px; transition:.15s; }
.ds-stat--pick:hover { box-shadow:var(--sh-sm); }
.ds-stat--pick.active .ds-stat-t, .ds-stat--pick.active .ds-stat-n { color:#fff; }

.ds-stat--pick-blue   { border-color:#93c5fd; } .ds-stat--pick-blue   .ds-stat-n{ color:#2563eb; }
.ds-stat--pick-blue.active   { background:#3b82f6; border-color:#3b82f6; }
.ds-stat--pick-green  { border-color:#86efac; } .ds-stat--pick-green  .ds-stat-n{ color:#16a34a; }
.ds-stat--pick-green.active  { background:#16a34a; border-color:#16a34a; }
.ds-stat--pick-violet { border-color:#c4b5fd; } .ds-stat--pick-violet .ds-stat-n{ color:var(--brand); }
.ds-stat--pick-violet.active { background:var(--brand); border-color:var(--brand); }
.ds-stat--pick-amber  { border-color:#fcd34d; } .ds-stat--pick-amber  .ds-stat-n{ color:#d97706; }
.ds-stat--pick-amber.active  { background:#f59e0b; border-color:#f59e0b; }
.ds-stat--pick-amber.active .ds-stat-t, .ds-stat--pick-amber.active .ds-stat-n { color:#3a2c05; }
.ds-stat--pick-pink   { border-color:#f9a8d4; } .ds-stat--pick-pink   .ds-stat-n{ color:#db2777; }
.ds-stat--pick-pink.active   { background:#ec4899; border-color:#ec4899; }

/* Radio-card (plan / paquete seleccionable) */
.ds-radio-card { border:1.5px solid var(--border); border-radius:var(--r-md); padding:16px 18px; cursor:pointer; position:relative; transition:.12s; background:#fff; display:block; }
.ds-radio-card:hover { border-color:var(--brand-300); }
.ds-radio-card.sel { border-color:var(--brand); box-shadow:0 0 0 3px rgba(138,119,240,.15); }
.ds-radio-card .rc-head { display:flex; align-items:center; gap:12px; }
.ds-radio-card .rc-radio { width:20px;height:20px;border-radius:50%;border:2px solid var(--brand-300); flex:0 0 auto; display:grid;place-items:center; }
.ds-radio-card.sel .rc-radio { border-color:var(--brand); }
.ds-radio-card.sel .rc-radio::after { content:""; width:10px;height:10px;border-radius:50%;background:var(--brand); }
.ds-radio-card .rc-title { font-weight:800; color:var(--ink); }
.ds-radio-card .rc-sub { color:var(--muted); font-size:.82rem; }
.ds-radio-card .rc-pricebox { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.ds-radio-card .rc-price { font-weight:900; color:var(--ink); font-size:1.1rem; text-align:right; white-space:nowrap; }
.ds-radio-card .rc-persms { color:var(--muted); font-size:.8rem; font-weight:600; white-space:nowrap; }
.ds-radio-card .rc-badge2 { position:absolute; top:-11px; right:16px; }
.ds-radio-card .rc-reco { position:absolute; top:-10px; left:18px; background:var(--brand); color:#fff; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:3px 11px; border-radius:var(--r-pill); box-shadow:var(--sh-sm); }
.ds-radio-card .rc-counter { display:flex; align-items:center; gap:8px; }
.ds-radio-card .rc-step { width:30px; height:30px; border-radius:8px; border:1.5px solid var(--border); background:#fff; color:var(--brand); font-size:1.15rem; font-weight:700; line-height:1; cursor:pointer; display:grid; place-items:center; transition:.12s; }
.ds-radio-card .rc-step:hover { border-color:var(--brand); background:var(--brand-50); }
.ds-radio-card .rc-count-input { width:74px; text-align:center; font-weight:800; color:var(--ink); border:1.5px solid var(--border); border-radius:8px; padding:6px 4px; font-family:inherit; font-size:.95rem; -moz-appearance:textfield; appearance:textfield; }
.ds-radio-card .rc-count-input::-webkit-outer-spin-button, .ds-radio-card .rc-count-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* ===================== ACORDEÓN / FAQ ===================== */
.ds-accordion .ds-ac-item { border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:10px; overflow:hidden; background:#fff; }
.ds-accordion .ds-ac-item.is-open { background:var(--brand-50); border-color:var(--brand-200); }
.ds-accordion .ds-ac-head { display:flex; align-items:center; gap:12px; padding:15px 16px; cursor:pointer; font-weight:700; color:var(--ink); }
.ds-accordion .ds-ac-chev { margin-left:auto; width:18px; height:18px; color:var(--brand); transition:.2s; flex:0 0 auto; }
.ds-accordion .ds-ac-item.is-open .ds-ac-chev { transform:rotate(180deg); }
.ds-accordion .ds-ac-body { padding:0 16px 16px; color:var(--body); font-size:.92rem; display:none; }
.ds-accordion .ds-ac-item.is-open .ds-ac-body { display:block; }

/* ===================== PERFIL / AJUSTES ===================== */
/* Chips de remitente */
.ds-sender-chip { display:inline-flex; align-items:center; gap:8px; background:var(--brand-50); border:1px solid var(--brand-200); color:var(--slate-700); border-radius:var(--r-pill); padding:5px 14px; font-weight:600; font-size:.85rem; }
.ds-sender-chip:has(.ds-sender-def) { padding-right:6px; }
.ds-sender-chip .ds-sender-def { background:var(--brand); color:#fff; font-size:.68rem; font-weight:800; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill); }

/* Fila de token API */
.ds-token-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ds-token-masked { font-family:ui-monospace,monospace; letter-spacing:2px; color:var(--slate-500); background:var(--slate-50); border:1px solid var(--border); border-radius:var(--r-sm); padding:9px 14px; flex:1; min-width:200px; }

/* Bloque de código (on-brand claro) */
.ds-codeblock { position:relative; background:var(--brand-50); border:1px solid var(--brand-200); border-radius:var(--r-md); padding:16px; }
.ds-codeblock pre { margin:0; overflow-x:auto; color:var(--brand-deep); font-family:ui-monospace,monospace; font-size:.82rem; white-space:pre-wrap; word-break:break-all; padding-right:96px; }
.ds-codeblock-copy { position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; padding:6px 12px; border-radius:var(--r-sm); border:1px solid var(--brand-200); background:#fff; color:var(--brand-deep); cursor:pointer; font-family:inherit; }
.ds-codeblock-copy:hover { background:var(--brand-100); }
.ds-codeblock-copy svg { width:14px; height:14px; }
.ds-codeblock-ok { display:block; margin-top:10px; color:var(--success); font-size:.8rem; font-weight:600; }

/* Copiar inline con tooltip */
.ds-copy { cursor:pointer; }
.ds-copy-tip { margin-left:8px; color:var(--success); font-size:.8rem; font-weight:700; opacity:0; transition:.2s; }
.ds-copy.is-copied .ds-copy-tip { opacity:1; }

/* Fila de toggle con texto secundario */
.ds-toggle-info strong { display:block; color:var(--ink); }
.ds-toggle-info span { color:var(--muted); font-size:.84rem; }

/* Rejilla de definición (datos fiscales / pares etiqueta-valor) */
.ds-def-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px 24px; }
.ds-def-grid .dg-k { font-size:.74rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px; }
.ds-def-grid .dg-v { color:var(--ink); font-weight:600; }
@media(max-width:560px){ .ds-def-grid { grid-template-columns:1fr; } }

/* Tarjetas de plantilla (grid) */
.ds-tpl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.ds-tpl-card { border:1px solid var(--border); border-radius:var(--r-md); background:#fff; display:flex; flex-direction:column; overflow:hidden; }
.ds-tpl-card .ds-tc-head { padding:14px 16px; border-bottom:1px solid var(--border); font-weight:800; color:var(--ink); }
.ds-tpl-card .ds-tc-body { padding:18px; color:var(--body); font-size:.9rem; line-height:1.65; flex:1; word-break:break-word; }
.ds-tpl-var { color:var(--brand-700); font-weight:600; }
.ds-tpl-card .ds-tc-foot { display:flex; border-top:1px solid var(--border); }
.ds-tpl-card .ds-tc-foot > a, .ds-tpl-card .ds-tc-foot button { flex:1; background:none; border:none; padding:12px; cursor:pointer; font-family:inherit; font-weight:700; font-size:.85rem; display:inline-flex; align-items:center; justify-content:center; gap:6px; color:var(--body); text-decoration:none; }
.ds-tpl-card .ds-tc-foot > a:hover, .ds-tpl-card .ds-tc-foot button:hover { background:var(--slate-100); }
.ds-tpl-card .ds-tc-foot .del:hover { background:var(--danger-bg); color:var(--danger); }
.ds-tpl-card .ds-tc-foot > * + * { border-left:1px solid var(--border); }
.ds-tpl-card .ds-tc-foot svg { width:15px; height:15px; }

/* Multi-select con checkboxes + búsqueda */
.ds-ms-search { position:relative; margin-bottom:8px; }
.ds-ms-search input { padding-left:42px; border-radius:var(--r-pill); }
.ds-ms-search > svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:16px;height:16px; color:var(--muted); }
.ds-ms-list { max-height:220px; overflow-y:auto; border:1px solid var(--brand-200); border-radius:var(--r-sm); background:#fff; }
.ds-ms-opt { display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:.92rem; color:var(--ink); cursor:pointer; border-bottom:1px solid var(--border); }
.ds-ms-opt:last-child { border-bottom:none; }
.ds-ms-opt:hover { background:var(--brand-50); }
.ds-ms-opt input { position:absolute; opacity:0; width:0; height:0; }
.ds-ms-check { width:20px;height:20px;border-radius:6px;border:2px solid var(--brand-300); display:grid;place-items:center; color:#fff; flex:0 0 auto; transition:.12s; }
.ds-ms-check svg { width:14px;height:14px; opacity:0; }
.ds-ms-opt input:checked + .ds-ms-check { background:var(--brand); border-color:var(--brand); }
.ds-ms-opt input:checked + .ds-ms-check svg { opacity:1; }
.ds-ms-opt input:checked ~ .ds-ms-label { font-weight:700; color:var(--brand-deep); }
.ds-ms-opt.is-hidden { display:none; }
.ds-ms-empty { padding:14px; text-align:center; color:var(--muted); font-size:.9rem; }

/* Chips seleccionables (días de semana / mes) */
.ds-chip-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:8px; }
.ds-chip-grid.week { grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); }
.ds-chip { position:relative; display:block; }
.ds-chip input { position:absolute; opacity:0; width:0; height:0; }
.ds-chip span { display:block; text-align:center; padding:9px 6px; border-radius:var(--r-sm); border:1.5px solid var(--brand-200); background:#fff; color:var(--body); font-size:.85rem; font-weight:600; cursor:pointer; transition:.12s; }
.ds-chip input:checked + span { background:var(--brand); border-color:var(--brand); color:#fff; }

/* Utilidades mínimas */
.ds-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.ds-divider { border:0; border-top:1px solid var(--border); margin:20px 0; }
.ds-muted { color:var(--muted); font-size:.9rem; }
.ds-mt-0 { margin-top:0 !important; }

/* Menú de anclas a secciones (chips tipo pill) */
.ds-anchor-nav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.ds-anchor-nav a { display:inline-flex; padding:6px 14px; border-radius:var(--r-pill); background:var(--brand-50); color:var(--brand-deep); font-weight:600; font-size:.85rem; text-decoration:none; border:1px solid var(--brand-200); }
.ds-anchor-nav a:hover { background:var(--brand-100); }

/* Desplegable de eliminar cuenta */
.ds-card-danger summary { cursor:pointer; font-weight:700; color:var(--danger); list-style:none; }
.ds-card-danger summary::-webkit-details-marker { display:none; }