/* ============================================================
   dashboard.css — apartado principal (post-login)
   Depende de las variables de ds.css y de componentes de auth.css
   (--bg, --surface, --accent, .ds-btn, .ds-input, .ds-field,
   .ds-pill, .ds-gauge, .ds-signal-chip, .ds-check…)
   ============================================================ */

/* ---------- colores de riesgo (información, no decoración) ---------- */
:root{
  --risk-high:#e07f72;
  --risk-mid:#d4b062;
  --risk-low:#7fb092;
  --risk-none:var(--muted-2);
  --appbar-h:68px;
}

/* ---------- encabezado: marca · pestañas · usuario ---------- */
.ds-appbar .ds-container{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  height:var(--appbar-h); gap:var(--sp-3);
}
.ds-appbar .ds-brand{justify-self:start;}
.ds-appnav-list{
  position:relative; display:flex; gap:.25rem; padding:.3rem;
  border:1px solid var(--border); border-radius:999px;
  background:rgba(23,24,27,.7);
}
.ds-appnav-link{
  position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.55rem 1.05rem; border-radius:999px; border:1px solid transparent;
  font-family:var(--font-body); font-size:.86rem; font-weight:500;
  color:var(--muted); background:none; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.ds-appnav-link svg{width:16px; height:16px; flex:none;}
.ds-appnav-link:hover{color:var(--ink); background:rgba(255,255,255,.04);}
.ds-appnav-link.is-active{color:var(--ink);}
.ds-appnav-link.is-active:hover{background:none;}
.ds-appnav-link svg{transition:color .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1);}
.ds-appnav-link.is-active svg{color:var(--accent); transform:scale(1.12);}

/* Pastilla que se desliza hasta la pestaña activa (posición calculada en dashboard.js) */
.ds-appnav-indicator{
  position:absolute; z-index:0; top:.3rem; bottom:.3rem; left:0; width:0;
  border-radius:999px; border:1px solid var(--border-strong);
  background:var(--surface-2);
  box-shadow:0 0 0 1px rgba(143,163,179,.06), 0 6px 18px -8px rgba(143,163,179,.35);
  opacity:0; pointer-events:none;
}
.ds-appnav-indicator.is-ready{
  opacity:1;
  transition:transform .42s cubic-bezier(.22,1,.36,1), width .42s cubic-bezier(.22,1,.36,1);
}
/* Línea de acento bajo la pastilla */
.ds-appnav-indicator::after{
  content:""; position:absolute; left:50%; bottom:-.32rem; width:18px; height:2px;
  margin-left:-9px; border-radius:2px; background:var(--accent);
}

/* Entrada del contenido al cambiar de sección, en la dirección del cambio */
@keyframes ds-panel-in-right{from{opacity:0; transform:translateX(24px);} to{opacity:1; transform:none;}}
@keyframes ds-panel-in-left{from{opacity:0; transform:translateX(-24px);} to{opacity:1; transform:none;}}
.ds-tab-panel.is-entering-right{animation:ds-panel-in-right .38s cubic-bezier(.22,1,.36,1) both;}
.ds-tab-panel.is-entering-left{animation:ds-panel-in-left .38s cubic-bezier(.22,1,.36,1) both;}

.ds-appbar-user{display:flex; align-items:center; gap:.75rem; justify-self:end;}
.ds-user-pill{display:flex; align-items:center; gap:.6rem;}
.ds-user-avatar{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);
  font-family:var(--font-display); font-weight:600; font-size:.9rem;
  border:1px solid rgba(143,163,179,.35);
}
.ds-user-info{display:flex; flex-direction:column; line-height:1.25;}
.ds-user-info strong{font-family:var(--font-display); font-weight:600; font-size:.86rem;}
.ds-user-info span{font-size:.72rem; color:var(--muted);}
.ds-btn--sm{padding:.45rem .9rem; font-size:.74rem;}

/* ---------- contenido ---------- */
.ds-app-main{padding:var(--sp-5) var(--sp-4) var(--sp-7); outline:none;}
.ds-app-main-inner{max-width:1120px; margin:0 auto;}

.ds-panel-head{margin-bottom:var(--sp-4); max-width:62ch;}
.ds-panel-head h1{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(1.65rem, 3.2vw, 2.25rem); line-height:1.1; margin:0 0 .6rem;
}
.ds-panel-head p{color:var(--muted); font-size:1rem; line-height:1.6;}

/* ---------- layout de dos columnas dentro de cada panel ---------- */
.ds-panel-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:var(--sp-5);
  align-items:start;
}

/* ---------- tarjeta de consejos ---------- */
.ds-tips{
  position:sticky; top:calc(var(--appbar-h) + var(--sp-3));
  border:1px solid var(--border); border-radius:var(--radius-m);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  padding:var(--sp-3);
}
.ds-tips h3{font-family:var(--font-display); font-weight:600; font-size:.95rem; margin:0 0 var(--sp-2);}
.ds-tips-list{display:flex; flex-direction:column; gap:.75rem;}
.ds-tips-list li{
  position:relative; padding-left:1.1rem;
  font-size:.86rem; line-height:1.5; color:var(--muted);
}
.ds-tips-list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}

/* ---------- selects (comparten .ds-input) ---------- */
select.ds-input{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239a9ea3' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center; background-size:14px;
  padding-right:2.3rem;
}
textarea.ds-input{resize:vertical; min-height:120px; line-height:1.55;}

.ds-field-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3);}

/* ---------- resultado: reportar fraude ---------- */
.ds-result-card{
  display:flex; gap:.85rem; align-items:flex-start;
  border:1px solid var(--border-strong); border-radius:var(--radius-m);
  background:var(--surface-2); padding:var(--sp-3); margin-top:var(--sp-4);
}
.ds-result-card[hidden]{display:none;}
.ds-result-icon{font-size:1.35rem; line-height:1.3; flex:none;}
.ds-result-card strong{display:block; font-family:var(--font-display); font-weight:600; font-size:1rem; margin-bottom:.3rem;}
.ds-result-card p{color:var(--muted); font-size:.88rem; line-height:1.55; margin:0 0 .6rem;}

.ds-gauge--lg{width:78px; height:78px;}
.ds-gauge--lg .ds-gauge-value{font-size:1.05rem;}
.ds-gauge[data-risk="high"] .ds-gauge-arc{stroke:var(--risk-high);}
.ds-gauge[data-risk="mid"] .ds-gauge-arc{stroke:var(--risk-mid);}
.ds-gauge[data-risk="low"] .ds-gauge-arc{stroke:var(--risk-low);}
.ds-gauge-arc{transition:stroke-dasharray .6s ease;}
#report-result-new[data-risk="high"]{border-color:rgba(224,127,114,.45); box-shadow:inset 3px 0 0 var(--risk-high);}
#report-result-new[data-risk="mid"]{border-color:rgba(212,176,98,.45); box-shadow:inset 3px 0 0 var(--risk-mid);}
#report-result-new[data-risk="low"]{border-color:rgba(127,176,146,.45); box-shadow:inset 3px 0 0 var(--risk-low);}

/* ---------- buscar: filtros ---------- */
.ds-filter-bar{
  display:flex; flex-wrap:wrap; gap:.85rem; align-items:end;
  border:1px solid var(--border); border-radius:var(--radius-m);
  background:var(--surface); padding:var(--sp-3); margin-bottom:var(--sp-4);
}
.ds-filter-field{display:flex; flex-direction:column; gap:.35rem; flex:1; min-width:150px;}
.ds-filter-field label{
  font-family:var(--font-body); font-size:.82rem; font-weight:500; color:var(--muted);
}
.ds-filter-actions{display:flex; gap:.5rem;}

/* ---------- buscar: resultados ---------- */
.ds-results-count{font-size:.84rem; color:var(--muted); margin:0 0 var(--sp-2);}
.ds-results-count:empty{display:none;}
.ds-report-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:var(--sp-3);
}
.ds-report-card{
  border:1px solid var(--border-strong); border-radius:var(--radius-m);
  background:var(--surface); padding:var(--sp-3);
  display:flex; flex-direction:column; gap:.85rem;
  transition:border-color .15s ease;
}
.ds-report-card:hover{border-color:rgba(143,163,179,.4);}
.ds-report-card-head{display:flex; align-items:flex-start; gap:.75rem;}
.ds-report-card-title{display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1;}
.ds-report-card h3{font-family:var(--font-display); font-weight:600; font-size:1rem; margin:0;}
.ds-report-card p{color:var(--muted); font-size:.86rem; line-height:1.55; margin:0;}
.ds-report-card-foot{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding-top:.75rem; border-top:1px solid var(--border); margin-top:auto;
}
.ds-report-card-date{font-size:.76rem; color:var(--muted-2);}
.ds-btn--block{width:100%;}

/* ícono de tipo (tarjetas, selector) */
.ds-type-icon, .ds-type-card-icon{
  flex:none; width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); background:var(--accent-soft); border:1px solid rgba(143,163,179,.22);
}
.ds-type-icon svg, .ds-type-card-icon svg{width:19px; height:19px;}

/* medidor de riesgo */
.ds-risk{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:.35rem .75rem;
  --risk:var(--risk-none);
}
.ds-risk[data-risk="high"]{--risk:var(--risk-high);}
.ds-risk[data-risk="mid"]{--risk:var(--risk-mid);}
.ds-risk[data-risk="low"]{--risk:var(--risk-low);}
.ds-risk-label{font-size:.78rem; color:var(--risk); font-weight:500;}
.ds-risk-value{font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--ink);}
.ds-risk-bar{grid-column:1 / -1; height:4px; border-radius:2px; background:var(--border-strong); overflow:hidden;}
.ds-risk-bar i{display:block; height:100%; border-radius:2px; background:var(--risk);}

.ds-empty{
  text-align:center; color:var(--muted); font-family:var(--font-mono); font-size:.85rem;
  border:1px dashed var(--border-strong); border-radius:var(--radius-m);
  padding:var(--sp-6) var(--sp-3);
}
.ds-empty[hidden]{display:none;}

/* ---------- modal de detalle ---------- */
.ds-modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,7,9,0.65); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:var(--sp-3);
}
.ds-modal-overlay[hidden]{display:none;}
.ds-modal{
  width:100%; max-width:520px; max-height:85vh; overflow:auto;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-l); padding:var(--sp-4);
}
.ds-modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-2); margin-bottom:var(--sp-3);}
.ds-modal-head h2{font-family:var(--font-display); font-weight:600; font-size:1.2rem; margin:0;}
.ds-modal-close{
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:1.4rem; line-height:1; padding:.1rem .3rem; border-radius:6px;
}
.ds-modal-close:hover{color:var(--ink); background:rgba(255,255,255,.05);}
.ds-modal-top{display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3);}
.ds-modal-meta{display:grid; grid-template-columns:1fr 1fr; gap:.6rem .9rem; margin-bottom:var(--sp-3);}
.ds-modal-meta div{display:flex; flex-direction:column; gap:.2rem;}
.ds-modal-meta span.k{font-size:.76rem; color:var(--muted-2);}
.ds-modal-meta span.v{font-size:.88rem; color:var(--ink);}
.ds-modal-desc{
  font-size:.9rem; color:var(--muted); line-height:1.6;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-s);
  padding:.85rem 1rem; margin-bottom:var(--sp-3);
}
.ds-modal-foot{display:flex; gap:.6rem; flex-wrap:wrap; justify-content:flex-end;}

/* ---------- reportar: pasos del formulario ---------- */
.ds-report-form{gap:var(--sp-4);}
.ds-guest-notice{margin-top:0;}
.ds-report-step{border:0; padding:0; margin:0; min-width:0;}
.ds-report-step[hidden], .ds-report-submit[hidden], .ds-report-form[hidden], .ds-guest-notice[hidden], .ds-field[hidden]{display:none;}
/* Opciones dentro de un campo: texto normal, no el estilo de etiqueta en mayúsculas */
.ds-field .ds-checkbox, .ds-field .ds-segmented label{
  font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:.86rem;
}
.ds-report-step legend{
  display:flex; align-items:center; gap:.6rem; padding:0; margin-bottom:var(--sp-2);
  font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--ink);
}
.ds-report-step-n{
  width:24px; height:24px; flex:none; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  color:var(--accent); border:1px solid rgba(143,163,179,.4); background:var(--accent-soft);
}
.ds-report-step-optional, .ds-optional{
  font-family:var(--font-body); font-weight:400; font-size:.78rem; color:var(--muted-2);
  text-transform:none; letter-spacing:0;
}
.ds-report-step-body{
  display:flex; flex-direction:column; gap:var(--sp-3);
  border:1px solid var(--border); border-radius:var(--radius-m);
  background:var(--surface); padding:var(--sp-3);
}
.ds-details-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3);}
.ds-details-grid .ds-field:has(textarea){grid-column:1 / -1;}
.ds-field--narrow{max-width:240px;}
.ds-field-label{
  font-family:var(--font-body); font-size:.86rem; font-weight:500; color:var(--ink);
}
.ds-field-error{font-size:.78rem; color:#f0a8a8;}
.ds-field-error:empty{display:none;}
.ds-input[aria-invalid="true"]{border-color:rgba(224,98,98,.7);}
.ds-mono{font-family:var(--font-mono); font-size:.82rem; word-break:break-all;}

/* tarjetas de tipo de fraude (radios) */
.ds-type-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:.75rem;}
.ds-type-card{
  position:relative; display:flex; gap:.75rem; align-items:flex-start;
  border:1px solid var(--border-strong); border-radius:var(--radius-m);
  background:var(--surface); padding:1rem; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.ds-type-card:hover{border-color:rgba(143,163,179,.45);}
.ds-type-card input{position:absolute; opacity:0; width:1px; height:1px;}
.ds-type-card-body{display:flex; flex-direction:column; gap:.2rem;}
.ds-type-card-body strong{font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--ink);}
.ds-type-card-body span{font-size:.78rem; line-height:1.45; color:var(--muted);}
.ds-type-card:has(input:checked){border-color:var(--accent); background:var(--surface-2);}
.ds-type-card:has(input:checked) .ds-type-card-icon{color:var(--accent-ink); background:var(--accent); border-color:var(--accent);}
.ds-type-card:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px;}

/* opciones segmentadas (radios cortos) */
.ds-segmented{display:inline-flex; flex-wrap:wrap; gap:.4rem;}
.ds-segmented label{cursor:pointer;}
.ds-segmented input{position:absolute; opacity:0; width:1px; height:1px;}
.ds-segmented span{
  display:inline-block; padding:.5rem 1rem; border-radius:999px;
  border:1px solid var(--border-strong); background:var(--surface);
  font-size:.86rem; color:var(--muted); transition:all .15s ease;
}
.ds-segmented input:checked + span{border-color:var(--accent); background:var(--accent-soft); color:var(--ink);}
.ds-segmented input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}
.ds-amount-row[hidden]{display:none;}

.ds-check-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:.6rem .9rem;}

/* evidencias */
.ds-dropzone{
  display:flex; align-items:center; gap:.9rem; cursor:pointer;
  border:1px dashed var(--border-strong); border-radius:var(--radius-m);
  padding:var(--sp-3); color:var(--muted); font-size:.84rem; line-height:1.5;
  transition:border-color .15s ease, background .15s ease;
}
.ds-dropzone svg{width:28px; height:28px; flex:none; color:var(--accent);}
.ds-dropzone strong{color:var(--ink); font-weight:500;}
.ds-dropzone input{position:absolute; opacity:0; width:1px; height:1px;}
.ds-dropzone:hover, .ds-dropzone.is-drag{border-color:var(--accent); background:var(--accent-soft);}
.ds-dropzone:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px;}
.ds-dropzone.is-full{opacity:.5; pointer-events:none;}
.ds-thumbs{display:flex; flex-wrap:wrap; gap:.6rem; margin:0; padding:0; list-style:none;}
.ds-thumbs:empty{display:none;}
.ds-thumb{
  position:relative; width:96px; height:96px; border-radius:var(--radius-s); overflow:hidden;
  border:1px solid var(--border-strong); background:var(--surface-2);
}
.ds-thumb img{width:100%; height:100%; object-fit:cover;}
.ds-thumb-size{
  position:absolute; left:4px; bottom:4px; padding:.05rem .35rem; border-radius:4px;
  font-family:var(--font-mono); font-size:.6rem; color:var(--ink); background:rgba(6,7,9,.75);
}
.ds-thumb-remove{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  border:none; cursor:pointer; line-height:1; font-size:1rem;
  color:var(--ink); background:rgba(6,7,9,.8);
}
.ds-thumb-remove:hover{background:#b54a4a;}

.ds-report-submit{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2);}
.ds-report-submit .ds-status{margin:0;}
.ds-result-card .ds-signal-chips{margin-bottom:.8rem;}
.ds-pill--bad{background:rgba(224,98,98,.1); color:#f0a8a8; border:1px solid rgba(224,98,98,.35);}

/* tarjetas y modal de reportes */
.ds-report-card-top{display:flex; align-items:center; justify-content:space-between; gap:.5rem;}
.ds-report-card-indicator{
  font-family:var(--font-mono); font-size:.74rem; color:var(--accent);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ds-report-grid[aria-busy="true"]{opacity:.55;}
.ds-modal{max-width:580px;}
.ds-modal-details{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:.45rem .9rem;
  margin:0 0 var(--sp-3); padding-top:var(--sp-2); border-top:1px solid var(--border);
}
.ds-modal-details:empty{display:none;}
.ds-modal-details dt{font-size:.8rem; color:var(--muted-2);}
.ds-modal-details dd{margin:0; font-size:.86rem; color:var(--ink); overflow-wrap:anywhere;}
.ds-modal-evidence{display:flex; flex-direction:column; gap:.5rem; margin-bottom:var(--sp-3);}
.ds-modal-evidence[hidden]{display:none;}
.ds-modal-evidence .k{font-size:.76rem; color:var(--muted-2);}


/* ============================================================
   Data AI: chat a pantalla completa
   ============================================================ */
.ds-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;}
.ds-btn[hidden]{display:none;}

/* La pestaña del chat usa todo el alto disponible bajo el encabezado */
.ds-app-main:has(#tab-data-ai:not([hidden])){padding-top:0; padding-bottom:0;}
.ds-chat{
  --col:760px;
  display:flex; flex-direction:column;
  height:calc(100dvh - var(--appbar-h));
  margin:0 calc(-1 * var(--sp-4));
}

/* fila mínima: estado + nueva conversación */
.ds-chat-top{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  width:100%; max-width:var(--col); margin:0 auto; padding:.9rem var(--sp-3) .2rem;
}
.ds-chat-status{display:inline-flex; align-items:center; gap:.45rem; font-size:.76rem; color:var(--muted);}
.ds-chat-status .dot{width:7px; height:7px; border-radius:50%; background:var(--muted-2); transition:background .3s ease, box-shadow .3s ease;}
.ds-chat-status[data-mode="ai"] .dot{background:var(--risk-low); box-shadow:0 0 0 3px rgba(127,176,146,.18);}
.ds-chat-status[data-mode="basic"] .dot{background:var(--risk-mid); box-shadow:0 0 0 3px rgba(212,176,98,.18);}
.ds-chat-status[data-mode="offline"] .dot{background:var(--risk-high);}
.ds-chat-status[data-mode="loading"] .dot{animation:ds-pulse 1.1s ease-in-out infinite;}
.ds-chat-icon-btn{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  padding:.4rem .75rem; border-radius:999px; border:1px solid var(--border-strong);
  background:transparent; color:var(--muted); font:500 .78rem var(--font-body);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
  animation:ds-pop .25s cubic-bezier(.34,1.56,.64,1);
}
.ds-chat-icon-btn svg{width:15px; height:15px;}
.ds-chat-icon-btn:hover{color:var(--ink); border-color:rgba(143,163,179,.5); background:rgba(255,255,255,.03);}
.ds-chat-icon-btn[hidden]{display:none;}

/* conversación: los mensajes se alinean a una columna central */
.ds-chat-log{
  flex:1; overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth;
  padding:var(--sp-3) var(--sp-3) var(--sp-4);
  display:flex; flex-direction:column; gap:1.6rem;
}
.ds-chat-log > *{width:100%; max-width:var(--col); margin-left:auto; margin-right:auto;}
.ds-chat-log::-webkit-scrollbar{width:8px;}
.ds-chat-log::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:4px;}

/* estado vacío */
.ds-chat-empty{margin-top:auto; margin-bottom:auto; text-align:center; padding:var(--sp-4) 0;}
.ds-chat-empty[hidden]{display:none;}
.ds-chat-hero{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; margin-bottom:var(--sp-3);
  background:radial-gradient(circle at 30% 25%, var(--surface-2), var(--surface));
  border:1px solid var(--border-strong);
  animation:ds-hero-in .7s cubic-bezier(.22,1,.36,1) both;
}
.ds-chat-hero img{width:28px; height:28px; object-fit:contain;}
/* halo que respira suavemente */
.ds-chat-hero::after{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  background:radial-gradient(circle, rgba(143,163,179,.22), transparent 70%);
  animation:ds-halo 3.2s ease-in-out infinite; z-index:-1;
}
@keyframes ds-hero-in{from{opacity:0; transform:scale(.7) translateY(8px);} to{opacity:1; transform:none;}}
@keyframes ds-halo{0%,100%{transform:scale(.92); opacity:.6;} 50%{transform:scale(1.12); opacity:1;}}
.ds-chat-empty h2{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(1.5rem, 3vw, 1.9rem); margin:0 0 var(--sp-4);
  animation:ds-msg-in .5s .08s cubic-bezier(.22,1,.36,1) both;
}
.ds-chat-suggestions{display:grid; grid-template-columns:1fr 1fr; gap:.65rem; text-align:left;}
.ds-suggestion{
  display:flex; flex-direction:column; gap:.25rem; cursor:pointer;
  padding:.9rem 1rem; border-radius:var(--radius-m);
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  font:inherit; text-align:left;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
  animation:ds-msg-in .45s cubic-bezier(.22,1,.36,1) both;
}
.ds-suggestion:nth-child(1){animation-delay:.14s;}
.ds-suggestion:nth-child(2){animation-delay:.19s;}
.ds-suggestion:nth-child(3){animation-delay:.24s;}
.ds-suggestion:nth-child(4){animation-delay:.29s;}
.ds-suggestion strong{font-family:var(--font-display); font-weight:600; font-size:.88rem;}
.ds-suggestion span{font-size:.79rem; color:var(--muted); line-height:1.4;}
.ds-suggestion[data-kind="report"] strong::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-right:.45rem; vertical-align:middle;
}
.ds-suggestion:hover{border-color:rgba(143,163,179,.45); transform:translateY(-2px); background:var(--surface-2);}

/* mensajes */
@keyframes ds-msg-in{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.ds-msg{display:flex; gap:.8rem; animation:ds-msg-in .34s cubic-bezier(.22,1,.36,1) both;}
.ds-msg--user{justify-content:flex-end;}
.ds-msg--user .ds-msg-bubble{
  max-width:min(80%, 560px); white-space:pre-wrap; overflow-wrap:anywhere;
  padding:.7rem 1rem; border-radius:20px 20px 6px 20px;
  background:var(--surface-2); border:1px solid var(--border-strong);
  font-size:.94rem; line-height:1.55; color:var(--ink);
}
.ds-msg-avatar{
  position:relative; width:30px; height:30px; flex:none; border-radius:50%; margin-top:.05rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border-strong);
}
.ds-msg-avatar img{width:15px; height:15px; object-fit:contain; position:relative; z-index:1;}
/* anillo que gira mientras Data AI responde */
.ds-msg-avatar::before{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 55%, var(--accent) 80%, transparent 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity:0; transition:opacity .4s ease;
}
.ds-msg.is-streaming .ds-msg-avatar::before{opacity:1; animation:ds-spin 1.1s linear infinite;}
@keyframes ds-spin{to{transform:rotate(360deg);}}

.ds-msg-body{display:flex; flex-direction:column; gap:.65rem; min-width:0; flex:1;}
/* la IA escribe sin burbuja, como texto limpio */
.ds-msg--ai .ds-msg-bubble{font-size:.95rem; line-height:1.7; color:var(--ink); overflow-wrap:anywhere; padding-top:.2rem;}
.ds-msg--ai .ds-msg-bubble[hidden]{display:none;}
.ds-msg.is-error .ds-msg-bubble{color:#f3c4c4;}

.ds-md p{margin:0 0 .7rem;}
.ds-md p:last-child, .ds-md ul:last-child{margin-bottom:0;}
.ds-md ul{margin:0 0 .7rem; padding-left:1.15rem; list-style:disc;}
.ds-md li{margin:.25rem 0;}
.ds-md li::marker{color:var(--accent);}
.ds-md strong{font-weight:600; color:#fff;}
.ds-md em{color:var(--muted); font-style:italic;}
.ds-md code{font-family:var(--font-mono); font-size:.84em; padding:.08rem .35rem; border-radius:5px; background:var(--surface-2); border:1px solid var(--border);}
.ds-msg-stopped{font-size:.8rem; color:var(--muted-2); font-style:italic;}

/* cursor de escritura al final del texto */
.ds-msg.is-streaming .ds-md-content > p:last-child::after,
.ds-msg.is-streaming .ds-md-content > ul:last-child > li:last-child::after{
  content:""; display:inline-block; width:.5em; height:1em; margin-left:.15em; vertical-align:-.15em;
  border-radius:2px; background:var(--accent); animation:ds-caret 1s steps(2, start) infinite;
}
@keyframes ds-caret{to{visibility:hidden;}}

/* veredicto */
.ds-verdict{
  display:flex; width:max-content; align-items:center; gap:.45rem; margin-bottom:.7rem;
  padding:.3rem .75rem .3rem .6rem; border-radius:999px;
  font-family:var(--font-display); font-weight:600; font-size:.86rem;
  --v:var(--muted); color:color-mix(in srgb, var(--v) 70%, #fff);
  background:color-mix(in srgb, var(--v) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--v) 50%, transparent);
  animation:ds-verdict-in .45s cubic-bezier(.34,1.56,.64,1) both;
}
.ds-verdict::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--v);}
.ds-verdict[data-verdict="fraud"]{--v:var(--risk-high);}
.ds-verdict[data-verdict="suspicious"]{--v:var(--risk-mid);}
.ds-verdict[data-verdict="legit"]{--v:var(--risk-low);}
@keyframes ds-verdict-in{from{opacity:0; transform:scale(.85);} to{opacity:1; transform:none;}}

/* "escribiendo…" */
.ds-typing{display:inline-flex; gap:5px; padding:.45rem .1rem;}
.ds-typing i{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:ds-typing 1.2s ease-in-out infinite;}
.ds-typing i:nth-child(2){animation-delay:.15s;}
.ds-typing i:nth-child(3){animation-delay:.3s;}
@keyframes ds-typing{0%, 60%, 100%{transform:translateY(0); opacity:.4;} 30%{transform:translateY(-5px); opacity:1;}}

/* lo que encontró DataShield */
.ds-msg-context{display:flex; flex-wrap:wrap; gap:.4rem;}
.ds-msg-context[hidden], .ds-msg-actions[hidden]{display:none;}
.ds-ctx-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .65rem; border-radius:999px; font-size:.75rem; color:var(--muted);
  border:1px solid var(--border-strong); background:var(--surface);
  animation:ds-msg-in .35s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i, 0) * 60ms);
}
.ds-ctx-chip code{font-family:var(--font-mono); font-size:.73rem; color:var(--ink);}
.ds-ctx-chip .dot{width:7px; height:7px; border-radius:50%; background:var(--risk-mid);}
.ds-ctx-chip[data-risk="high"]{color:var(--ink); border-color:rgba(224,127,114,.45);}
.ds-ctx-chip[data-risk="high"] .dot{background:var(--risk-high);}
.ds-ctx-chip--lock svg{width:12px; height:12px;}

/* acciones bajo la respuesta */
.ds-msg-actions{display:flex; flex-wrap:wrap; gap:.4rem; animation:ds-msg-in .3s ease both;}
.ds-msg-action{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .75rem; border-radius:999px; cursor:pointer;
  font:500 .76rem var(--font-body); color:var(--muted);
  background:transparent; border:1px solid transparent;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.ds-msg-action svg{width:14px; height:14px;}
.ds-msg-action:hover{color:var(--ink); background:var(--surface-2);}
.ds-msg-action--primary{color:var(--accent-ink); background:var(--accent);}
.ds-msg-action--primary:hover{color:var(--accent-ink); background:var(--accent); opacity:.9;}

/* tarjeta del reporte para confirmar */
.ds-msg-drafts:empty{display:none;}
.ds-msg-drafts{display:flex; flex-direction:column; gap:.75rem;}
@keyframes ds-draft-in{from{opacity:0; transform:translateY(14px) scale(.97);} to{opacity:1; transform:none;}}
.ds-draft{
  border:1px solid rgba(143,163,179,.35); border-radius:var(--radius-l);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  padding:1.15rem 1.2rem; display:flex; flex-direction:column; gap:.9rem;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.7);
  animation:ds-draft-in .5s cubic-bezier(.22,1,.36,1) both;
  transition:opacity .3s ease, border-color .3s ease;
}
.ds-draft[data-state="replaced"]{opacity:.5;}
.ds-draft[data-state="replaced"] .ds-draft-fields, .ds-draft[data-state="replaced"] .ds-draft-desc{display:none;}
.ds-draft[data-state="sent"]{border-color:rgba(127,176,146,.5);}
.ds-draft-head{display:flex; align-items:center; gap:.75rem;}
.ds-draft-title{display:flex; flex-direction:column; line-height:1.25;}
.ds-draft-title span{font-size:.74rem; color:var(--muted);}
.ds-draft-title strong{font-family:var(--font-display); font-weight:600; font-size:1.05rem;}
.ds-draft-fields{display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1.2rem; margin:0;}
.ds-draft-row{display:flex; flex-direction:column; gap:.1rem; min-width:0;}
.ds-draft-row dt{font-size:.72rem; color:var(--muted-2);}
.ds-draft-row dd{margin:0; font-size:.88rem; color:var(--ink); overflow-wrap:anywhere;}
.ds-draft-desc{
  margin:0; font-size:.88rem; line-height:1.6; color:var(--muted);
  padding:.75rem .9rem; border-radius:var(--radius-s); background:rgba(14,15,17,.45); border:1px solid var(--border);
}
.ds-draft-prev{display:flex; align-items:center; gap:.5rem; margin:0; font-size:.82rem; color:var(--ink);}
.ds-draft-prev .dot{width:8px; height:8px; border-radius:50%; background:var(--risk-high); flex:none;}
.ds-draft-confirm{padding-top:.9rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:.65rem;}
.ds-draft-question{margin:0; font-family:var(--font-display); font-weight:600; font-size:.92rem;}
.ds-draft-buttons{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;}
.ds-draft-link{
  background:none; border:0; cursor:pointer; padding:.4rem .3rem;
  font:500 .8rem var(--font-body); color:var(--muted); text-decoration:underline; text-underline-offset:3px;
}
.ds-draft-link:hover{color:var(--ink);}
.ds-draft-note{margin:0; font-size:.82rem; color:var(--muted);}
.ds-draft-error{margin:0; font-size:.82rem; color:#f0a8a8;}
.ds-draft-error[hidden]{display:none;}
.ds-draft[data-state="sending"] .ds-btn--primary{opacity:.7; cursor:progress;}
.ds-draft-success{display:flex; gap:.75rem; align-items:flex-start; animation:ds-msg-in .4s ease both;}
.ds-draft-success strong{display:block; font-family:var(--font-display); font-weight:600; font-size:.95rem; margin-bottom:.25rem;}
.ds-draft-success ul{margin:0; padding-left:1rem; list-style:disc; font-size:.84rem; color:var(--muted); line-height:1.6;}
.ds-draft-success b[data-risk="high"]{color:var(--risk-high);}
.ds-draft-success b[data-risk="mid"]{color:var(--risk-mid);}
.ds-draft-success b[data-risk="low"]{color:var(--risk-low);}
.ds-draft-check{
  width:30px; height:30px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#0f1a13; background:var(--risk-low);
  animation:ds-check-in .5s cubic-bezier(.34,1.56,.64,1) both;
}
.ds-draft-check svg{width:16px; height:16px; stroke-dasharray:24; stroke-dashoffset:24; animation:ds-check-draw .4s .25s ease forwards;}
@keyframes ds-check-in{from{transform:scale(0);} to{transform:none;}}
@keyframes ds-check-draw{to{stroke-dashoffset:0;}}

/* composer flotante */
.ds-chat-dock{
  width:100%; max-width:calc(var(--col) + 2 * var(--sp-3)); margin:0 auto;
  padding:0 var(--sp-3) .9rem; position:relative;
}
.ds-chat-dock::before{
  content:""; position:absolute; left:0; right:0; top:-28px; height:28px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg));
}
.ds-chat-composer{
  position:relative; display:flex; align-items:flex-end; gap:.5rem;
  padding:.5rem .5rem .5rem 1.1rem;
  border:1px solid var(--border-strong); border-radius:26px; background:var(--surface);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.8);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ds-chat-composer:focus-within{border-color:rgba(143,163,179,.6); box-shadow:0 0 0 4px var(--accent-soft), 0 10px 30px -18px rgba(0,0,0,.8);}
.ds-chat-composer textarea{
  flex:1; resize:none; border:0; outline:0; background:transparent; color:var(--ink);
  font:inherit; font-size:.96rem; line-height:1.5; padding:.5rem 0; max-height:200px;
  min-height:2.5rem; box-sizing:border-box;
}
.ds-chat-composer textarea::placeholder{color:var(--muted-2);}
.ds-chat-count{position:absolute; right:3.8rem; bottom:-1.3rem; font-family:var(--font-mono); font-size:.66rem; color:var(--risk-mid);}
.ds-chat-send{
  width:40px; height:40px; flex:none; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--accent-ink);
  transition:transform .15s ease, opacity .15s ease;
  animation:ds-pop .25s cubic-bezier(.34,1.56,.64,1);
}
.ds-chat-send[hidden]{display:none;}
.ds-chat-send svg{width:18px; height:18px;}
.ds-chat-send:hover:not(:disabled){transform:scale(1.06);}
.ds-chat-send:active:not(:disabled){transform:scale(.92);}
.ds-chat-send:disabled{opacity:.3; cursor:default;}
.ds-chat-stop{background:var(--ink); color:var(--bg);}
.ds-chat-stop svg{width:14px; height:14px;}
@keyframes ds-pop{from{transform:scale(.6); opacity:0;} to{transform:none; opacity:1;}}
.ds-chat-foot{margin:.55rem 0 0; font-size:.72rem; color:var(--muted-2); text-align:center;}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .ds-appnav-long{display:none;}
}
@media (max-width:900px){
  :root{--appbar-h:auto;}
  .ds-appbar .ds-container{
    grid-template-columns:1fr auto;
    grid-template-areas:"brand user" "nav nav";
    height:auto; padding-top:.7rem; padding-bottom:.7rem; row-gap:.7rem;
  }
  .ds-appbar .ds-brand{grid-area:brand;}
  .ds-appbar-user{grid-area:user;}
  .ds-appnav{grid-area:nav;}
  .ds-appnav-list{width:100%;}
  .ds-appnav-link{flex:1; padding:.55rem .5rem;}
  .ds-appnav-long{display:inline;}
  .ds-panel-layout{grid-template-columns:1fr; gap:var(--sp-4);}
  .ds-tips{position:static;}
  .ds-field-row{grid-template-columns:1fr;}
  .ds-details-grid{grid-template-columns:1fr;}
  .ds-app-main{padding:var(--sp-4) var(--sp-3) var(--sp-6);}
  .ds-chat{height:calc(100dvh - 118px); margin:0 calc(-1 * var(--sp-3));}
}
@media (max-width:560px){
  .ds-appbar-user .ds-user-info{display:none;}
  .ds-appbar .ds-container{padding-left:var(--sp-2); padding-right:var(--sp-2);}
  .ds-appnav-long{display:none;}
  .ds-appnav-link{font-size:.8rem; gap:.35rem;}
  .ds-app-main{padding:var(--sp-4) var(--sp-2) var(--sp-6);}
  .ds-modal-meta{grid-template-columns:1fr;}
  .ds-report-grid{grid-template-columns:1fr;}
  .ds-chat{margin:0 calc(-1 * var(--sp-2));}
  .ds-chat-suggestions{grid-template-columns:1fr;}
  .ds-chat-top, .ds-chat-log, .ds-chat-dock{padding-left:var(--sp-2); padding-right:var(--sp-2);}
  .ds-msg--user .ds-msg-bubble{max-width:88%;}
  .ds-msg-avatar{display:none;}
  .ds-draft-fields{grid-template-columns:1fr;}
  .ds-chat-empty h2{margin-bottom:var(--sp-3);}
}
@media (prefers-reduced-motion:reduce){
  .ds-gauge-arc, .ds-type-card, .ds-appnav-link, .ds-appnav-link svg,
  .ds-appnav-indicator.is-ready{transition:none;}
  .ds-tab-panel.is-entering-right, .ds-tab-panel.is-entering-left{animation:none;}
  .ds-msg, .ds-suggestion, .ds-ctx-chip, .ds-msg-actions, .ds-verdict, .ds-chat-send, .ds-chat-icon-btn,
  .ds-chat-hero, .ds-chat-hero::after, .ds-chat-empty h2, .ds-draft, .ds-draft-success, .ds-draft-check{animation:none;}
  .ds-draft-check svg{animation:none; stroke-dashoffset:0;}
  .ds-msg.is-streaming .ds-msg-avatar::before{animation-duration:3s;}
  .ds-typing i{animation:none; opacity:.7;}
  .ds-chat-log{scroll-behavior:auto;}
}

/* ============================================================
   Roles, búsqueda por secciones, moderación y administración
   Peligrosidad: amarillo (moderado) · naranja (peligroso) · rojo (muy peligroso).
   Siempre con texto e ícono además del color.
   ============================================================ */
:root{
  --risk-danger:#e89a5b;
  --lvl-moderate:var(--risk-mid);
  --lvl-danger:var(--risk-danger);
  --lvl-very:var(--risk-high);
}

/* ---------- insignias ---------- */
.ds-danger{
  --lvl:var(--lvl-moderate);
  display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap;
  padding:.22rem .6rem .22rem .45rem; border-radius:999px;
  font-size:.72rem; font-weight:600; letter-spacing:.01em;
  color:var(--lvl); background:color-mix(in srgb, var(--lvl) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--lvl) 40%, transparent);
}
.ds-danger svg{width:14px; height:14px; flex:none;}
.ds-danger--danger{--lvl:var(--lvl-danger);}
.ds-danger--very{--lvl:var(--lvl-very);}
.ds-danger--sm{font-size:.66rem; padding:.15rem .5rem .15rem .35rem;}
.ds-danger--sm svg{width:12px; height:12px;}
.ds-danger--lg{font-size:.86rem; padding:.35rem .8rem .35rem .6rem;}
.ds-danger--lg svg{width:17px; height:17px;}
.ds-danger-manual{font-weight:500; opacity:.8;}

.ds-channel{display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; color:var(--muted); white-space:nowrap;}
.ds-channel svg{width:14px; height:14px; flex:none;}

.ds-reasons{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem;}
.ds-reasons li{
  font-size:.72rem; color:var(--ink); padding:.2rem .55rem; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
}

.ds-form-status{min-height:1.2em; margin:.4rem 0 0; font-size:.82rem; color:var(--muted);}
.ds-form-status:empty{display:none;}

.ds-btn--ok{background:color-mix(in srgb, var(--risk-low) 18%, transparent); color:#bfe0cb; border-color:color-mix(in srgb, var(--risk-low) 45%, transparent);}
.ds-btn--ok:hover{background:color-mix(in srgb, var(--risk-low) 28%, transparent);}
.ds-btn--bad{background:color-mix(in srgb, var(--risk-high) 14%, transparent); color:#f3c2bb; border-color:color-mix(in srgb, var(--risk-high) 45%, transparent);}
.ds-btn--bad:hover{background:color-mix(in srgb, var(--risk-high) 24%, transparent);}

/* ---------- pestañas por rol ---------- */
/* .ds-appnav-link define display: sin esto el atributo hidden no ocultaría las pestañas de staff */
.ds-appnav-link[hidden]{display:none;}
/* con 4 o 5 pestañas (moderación/admin) se usan las etiquetas cortas para no pisar la marca */
.ds-many-tabs .ds-appnav-long{display:none;}
.ds-many-tabs .ds-appnav-link{padding-left:.85rem; padding-right:.85rem;}

/* ---------- pestañas: contador de pendientes ---------- */
.ds-tab-badge{
  min-width:1.25rem; height:1.25rem; padding:0 .35rem; border-radius:999px;
  display:inline-grid; place-items:center; font-size:.66rem; font-weight:700;
  color:#1a1206; background:var(--risk-mid);
}
.ds-tab-badge[hidden]{display:none;}

/* ---------- invitado: pantalla bloqueada ---------- */
.ds-lock{
  max-width:520px; margin:var(--sp-5) auto; text-align:center;
  padding:var(--sp-5) var(--sp-4); border-radius:var(--radius-l);
  background:var(--surface); border:1px solid var(--border);
}
.ds-lock[hidden]{display:none;}
.ds-lock-icon{display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--accent-soft); color:var(--accent); margin-bottom:var(--sp-2);}
.ds-lock-icon svg{width:26px; height:26px;}
.ds-lock h2{font-family:var(--font-display); font-weight:600; font-size:1.3rem; margin:0 0 .5rem;}
.ds-lock p{color:var(--muted); line-height:1.6; margin:0 0 var(--sp-3);}
.ds-lock-actions{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;}

/* ---------- buscador ---------- */
.ds-search{
  position:relative; display:flex; align-items:center; gap:.5rem;
  padding:.4rem .4rem .4rem 3rem; border-radius:999px;
  background:var(--surface); border:1px solid var(--border-strong);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ds-search:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
.ds-search-icon{position:absolute; left:1.1rem; width:20px; height:20px; color:var(--muted);}
.ds-search-input{
  flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink);
  font-family:var(--font-body); font-size:1rem; padding:.65rem 0;
}
.ds-search-input::placeholder{color:var(--muted-2);}
.ds-search .ds-btn{border-radius:999px;}

.ds-search-filters{display:flex; flex-direction:column; gap:.75rem; margin:var(--sp-2) 0 var(--sp-4);}
.ds-search-filters-row{display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap;}
.ds-search-tools{display:flex; align-items:center; gap:.6rem;}
.ds-chip-row{display:flex; gap:.4rem; flex-wrap:wrap;}
.ds-chip{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  padding:.42rem .8rem; border-radius:999px; font-family:var(--font-body); font-size:.78rem;
  color:var(--muted); background:transparent; border:1px solid var(--border-strong);
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.ds-chip svg{width:15px; height:15px;}
.ds-chip:hover{color:var(--ink); border-color:var(--muted-2);}
.ds-chip[aria-pressed="true"]{color:var(--accent-ink); background:var(--accent); border-color:var(--accent);}
.ds-chip-dot{width:8px; height:8px; border-radius:50%; background:var(--lvl-moderate);}
.ds-chip-dot--danger{background:var(--lvl-danger);}
.ds-chip-dot--very{background:var(--lvl-very);}
.ds-sort{display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--muted);}
.ds-input--sm{padding:.45rem .7rem; font-size:.82rem; width:auto;}
select.ds-input.ds-input--sm{padding-right:2rem;}
.ds-search-advanced{
  display:flex; gap:var(--sp-2); align-items:flex-end; flex-wrap:wrap;
  padding:var(--sp-2); border-radius:var(--radius-m); background:var(--surface); border:1px solid var(--border);
}
.ds-search-advanced[hidden]{display:none;}
.ds-search-advanced .ds-filter-field{flex:0 1 220px;}
.ds-search-advanced .ds-filter-field span{font-size:.74rem; color:var(--muted);}
.ds-toggle{display:inline-flex; align-items:center; gap:.5rem; font-size:.84rem; color:var(--ink); cursor:pointer; padding-bottom:.45rem;}
.ds-toggle[hidden]{display:none;}
.ds-toggle input{width:16px; height:16px; accent-color:var(--accent);}

/* ---------- resumen de niveles ---------- */
.ds-level-summary{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-2); margin-bottom:var(--sp-5);}
.ds-level-card{
  --lvl:var(--lvl-moderate);
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; text-align:left; cursor:pointer;
  padding:var(--sp-3); border-radius:var(--radius-m); color:var(--ink);
  background:linear-gradient(160deg, color-mix(in srgb, var(--lvl) 10%, var(--surface)), var(--surface) 60%);
  border:1px solid color-mix(in srgb, var(--lvl) 28%, var(--border));
  font-family:var(--font-body);
  transition:transform .15s ease, border-color .15s ease;
}
.ds-level-card:hover{transform:translateY(-2px); border-color:color-mix(in srgb, var(--lvl) 55%, transparent);}
.ds-level-card--danger{--lvl:var(--lvl-danger);}
.ds-level-card--very{--lvl:var(--lvl-very);}
.ds-level-n{font-family:var(--font-display); font-weight:700; font-size:2rem; line-height:1; font-variant-numeric:tabular-nums;}
.ds-level-help{font-size:.76rem; color:var(--muted); line-height:1.45;}

/* ---------- secciones ---------- */
.ds-feed{margin-bottom:var(--sp-5);}
.ds-feed[hidden]{display:none;}
.ds-feed-head{margin-bottom:var(--sp-2);}
.ds-feed-head h2{display:flex; align-items:center; gap:.55rem; font-family:var(--font-display); font-weight:600; font-size:1.15rem; margin:0 0 .25rem;}
.ds-feed-head p{color:var(--muted); font-size:.85rem; margin:0;}
.ds-feed-head--row{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); flex-wrap:wrap;}
.ds-feed-dot{width:10px; height:10px; border-radius:50%; background:var(--lvl-danger); box-shadow:0 0 0 4px color-mix(in srgb, var(--lvl-danger) 20%, transparent);}
.ds-feed-dot--very{background:var(--lvl-very); box-shadow:0 0 0 4px color-mix(in srgb, var(--lvl-very) 20%, transparent);}
.ds-feed-split{display:grid; grid-template-columns:1.3fr 1fr; gap:var(--sp-4);}

.ds-fraud-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:var(--sp-2);}
.ds-fraud-grid[aria-busy="true"]{opacity:.55;}

/* ---------- tarjeta de fraude ---------- */
.ds-fraud{
  --lvl:var(--lvl-moderate);
  position:relative; display:flex; flex-direction:column; gap:.75rem;
  padding:1.1rem 1.15rem 1rem; border-radius:var(--radius-m);
  background:var(--surface); border:1px solid var(--border);
  transition:border-color .15s ease, transform .15s ease;
}
.ds-fraud::before{ /* filete superior con el color del nivel */
  content:""; position:absolute; left:1.15rem; right:1.15rem; top:0; height:2px; border-radius:0 0 2px 2px;
  background:var(--lvl); opacity:.75;
}
.ds-fraud--danger{--lvl:var(--lvl-danger);}
.ds-fraud--very{--lvl:var(--lvl-very);}
.ds-fraud:hover{border-color:color-mix(in srgb, var(--lvl) 35%, var(--border-strong));}
.ds-fraud--featured{background:linear-gradient(170deg, color-mix(in srgb, var(--lvl) 7%, var(--surface)), var(--surface) 55%);}
.ds-fraud-top{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;}
.ds-fraud-status{margin-left:auto;}
.ds-fraud-rank{font-family:var(--font-display); font-weight:700; color:var(--muted-2);}
.ds-fraud-head{display:flex; gap:.75rem; align-items:flex-start;}
.ds-fraud-title{display:flex; flex-direction:column; gap:.15rem; min-width:0;}
.ds-fraud-title h3{font-family:var(--font-display); font-weight:600; font-size:.98rem; margin:0;}
.ds-fraud-indicator{font-family:var(--font-mono); font-size:.8rem; color:var(--accent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ds-fraud-desc{color:var(--muted); font-size:.85rem; line-height:1.55; margin:0;}
.ds-fraud-facts{display:flex; gap:.9rem; flex-wrap:wrap;}
.ds-fact{display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; color:var(--muted);}
.ds-fact svg{width:15px; height:15px;}
.ds-fact b{color:var(--ink); font-weight:600;}
.ds-fact--money b{color:var(--lvl);}
.ds-fraud-foot{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:auto; padding-top:.7rem; border-top:1px solid var(--border);}
.ds-fraud-date{font-size:.74rem; color:var(--muted-2);}
.ds-fraud-actions{display:flex; gap:.4rem;}

/* ---------- ranking de más reportados ---------- */
.ds-rank-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem;}
.ds-rank{
  width:100%; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:.85rem;
  padding:.75rem .9rem; border-radius:var(--radius-s); text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); color:var(--ink); font-family:var(--font-body);
  transition:border-color .15s ease, background .15s ease;
}
.ds-rank:hover{border-color:var(--border-strong); background:var(--surface-2);}
.ds-rank-n{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:.8rem; background:rgba(255,255,255,.05);
}
.ds-rank-list li:first-child .ds-rank-n{background:var(--accent); color:var(--accent-ink);}
.ds-rank-main{display:flex; flex-direction:column; min-width:0;}
.ds-rank-main code{font-family:var(--font-mono); font-size:.84rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ds-rank-sub{font-size:.72rem; color:var(--muted);}
.ds-rank-people{font-size:.78rem; color:var(--muted); white-space:nowrap;}
.ds-rank-people b{color:var(--ink); font-size:.95rem;}
.ds-rank-empty{color:var(--muted); font-size:.85rem; padding:.6rem 0;}

/* ---------- por red social ---------- */
.ds-channel-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:.5rem;}
.ds-channel-tile{
  display:flex; align-items:center; gap:.55rem; padding:.75rem .85rem; cursor:pointer;
  border-radius:var(--radius-s); background:var(--surface); border:1px solid var(--border);
  color:var(--ink); font-family:var(--font-body); font-size:.82rem; text-align:left;
  transition:border-color .15s ease, background .15s ease;
}
.ds-channel-tile svg{width:18px; height:18px; color:var(--accent); flex:none;}
.ds-channel-tile span{flex:1; min-width:0;}
.ds-channel-tile b{font-family:var(--font-display); font-weight:700;}
.ds-channel-tile:hover{border-color:var(--border-strong); background:var(--surface-2);}

/* ---------- resultados ---------- */
.ds-results-head{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2);}
.ds-results-head .ds-results-count{margin:0;}
.ds-empty strong{display:block; font-family:var(--font-body); color:var(--ink); margin-bottom:.35rem;}
.ds-empty span{font-family:var(--font-body);}

/* ---------- moderación ---------- */
.ds-segmented{display:inline-flex; padding:.25rem; border-radius:999px; border:1px solid var(--border); background:var(--surface); margin-bottom:var(--sp-3);}
.ds-segmented button{
  display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border-radius:999px; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:.82rem; color:var(--muted); background:none;
}
.ds-segmented button.is-active{color:var(--accent-ink); background:var(--accent);}
.ds-count:empty{display:none;}
.ds-count{font-size:.7rem; font-weight:700; padding:.05rem .45rem; border-radius:999px; background:rgba(0,0,0,.2);}

/* ---------- modal: peligrosidad y moderación ---------- */
.ds-modal-danger{
  --lvl:var(--lvl-moderate);
  display:flex; flex-direction:column; gap:.6rem; margin-bottom:var(--sp-3);
  padding:var(--sp-2); border-radius:var(--radius-m);
  background:color-mix(in srgb, var(--lvl) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--lvl) 28%, transparent);
}
.ds-modal-danger[data-level="danger"]{--lvl:var(--lvl-danger);}
.ds-modal-danger[data-level="very"]{--lvl:var(--lvl-very);}
.ds-modal-danger-top{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; font-size:.84rem; color:var(--ink);}
.ds-modal-danger-help{margin:0; font-size:.8rem; color:var(--muted); line-height:1.5;}
.ds-modal-note{
  margin:0 0 var(--sp-3); padding:.75rem .9rem; border-radius:var(--radius-s); font-size:.84rem; line-height:1.5;
  background:rgba(255,255,255,.03); border:1px solid var(--border-strong); color:var(--ink);
}
.ds-modal-note[hidden]{display:none;}
.ds-mod-panel{
  display:flex; flex-direction:column; gap:.75rem; margin-bottom:var(--sp-3);
  padding:var(--sp-2); border-radius:var(--radius-m); border:1px dashed var(--border-strong);
}
.ds-mod-panel[hidden]{display:none;}
.ds-mod-panel h3{margin:0; font-family:var(--font-display); font-weight:600; font-size:.95rem;}
.ds-mod-label{display:block; font-size:.8rem; color:var(--ink); margin-bottom:.35rem;}
.ds-mod-label span{color:var(--muted-2);}
.ds-mod-panel textarea.ds-input{min-height:64px;}
.ds-mod-row{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;}
.ds-mod-row [hidden]{display:none;}

/* ---------- administración ---------- */
.ds-stat-row{display:grid; grid-template-columns:repeat(5, 1fr) 1.6fr; gap:var(--sp-2); margin-bottom:var(--sp-5);}
.ds-stat{
  display:flex; flex-direction:column; gap:.35rem; padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-m); background:var(--surface); border:1px solid var(--border);
}
.ds-stat b{font-family:var(--font-display); font-weight:700; font-size:1.45rem; line-height:1.1; font-variant-numeric:tabular-nums;}
.ds-stat span{font-size:.76rem; color:var(--muted);}
.ds-stat--warn{border-color:color-mix(in srgb, var(--risk-mid) 45%, transparent);}
.ds-stat--warn b{color:var(--risk-mid);}
.ds-stat--levels{flex-direction:row; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;}
.ds-stat--levels > span:not(.ds-stat-caption){display:inline-flex; align-items:center; gap:.4rem;}
.ds-stat--levels b{font-size:1.05rem;}
.ds-stat-caption{width:100%;}
.ds-admin-filter{display:flex; gap:.5rem; flex-wrap:wrap;}
.ds-admin-filter .ds-input--sm[type="search"]{width:240px;}
.ds-table-wrap{overflow-x:auto; border-radius:var(--radius-m); border:1px solid var(--border);}
.ds-table{width:100%; border-collapse:collapse; font-size:.84rem;}
.ds-table th{text-align:left; font-weight:500; font-size:.74rem; color:var(--muted); padding:.75rem 1rem; background:var(--surface); border-bottom:1px solid var(--border);}
.ds-table td{padding:.7rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle;}
.ds-table tr:last-child td{border-bottom:0;}
.ds-table strong{display:block; font-weight:600;}
.ds-table-sub{display:block; font-size:.74rem; color:var(--muted-2);}
.ds-table .ds-num{font-variant-numeric:tabular-nums;}
.ds-table tr.is-suspended td{opacity:.55;}
.ds-table tr.is-suspended td:last-child{opacity:1;}
.ds-you{font-size:.66rem; font-weight:500; color:var(--accent); border:1px solid var(--accent-soft); border-radius:999px; padding:.05rem .4rem;}
.ds-log{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.ds-log li{display:flex; flex-wrap:wrap; gap:.25rem .5rem; align-items:baseline; padding:.7rem 0; border-bottom:1px solid var(--border); font-size:.84rem;}
.ds-log-who{font-weight:600;}
.ds-log-what{color:var(--muted);}
.ds-log-what b{color:var(--ink); font-weight:500;}
.ds-log-what code{font-family:var(--font-mono); font-size:.78rem;}
.ds-log-note{width:100%; color:var(--muted); font-style:italic; font-size:.8rem;}
.ds-log time{margin-left:auto; font-size:.74rem; color:var(--muted-2);}

@media (max-width:1060px){
  .ds-stat-row{grid-template-columns:repeat(3, 1fr);}
  .ds-stat--levels{grid-column:1 / -1;}
}
@media (max-width:900px){
  .ds-feed-split{grid-template-columns:1fr; gap:0;}
  .ds-level-summary{grid-template-columns:1fr; gap:.6rem;}
  .ds-level-card{flex-direction:row; align-items:center; flex-wrap:wrap; padding:var(--sp-2);}
  .ds-level-help{width:100%;}
}
@media (max-width:560px){
  .ds-search{padding-left:2.6rem;}
  .ds-search-icon{left:.9rem;}
  .ds-search .ds-btn{padding-left:.9rem; padding-right:.9rem;}
  .ds-chip-row{flex-wrap:nowrap; overflow-x:auto; margin:0 calc(-1 * var(--sp-2)); padding:0 var(--sp-2) .2rem; scrollbar-width:none;}
  .ds-chip{flex:none;}
  .ds-search-filters-row{flex-direction:column; align-items:stretch;}
  .ds-search-filters, .ds-search-filters-row, .ds-search-filters-row > *{min-width:0; max-width:100%;}
  .ds-search-filters-row > .ds-chip-row{max-width:none; width:calc(100% + 2 * var(--sp-2));}
  .ds-search-tools{justify-content:space-between; gap:.5rem;}
  .ds-search-tools .ds-sort{flex:1; min-width:0;}
  .ds-search-tools .ds-sort select{flex:1; min-width:0; width:100%;}
  .ds-fraud-grid{grid-template-columns:1fr;}
  .ds-rank{grid-template-columns:auto 1fr auto; }
  .ds-rank .ds-danger{grid-column:2 / -1; justify-self:start;}
  .ds-stat-row{grid-template-columns:1fr 1fr;}
  .ds-admin-filter, .ds-admin-filter .ds-input--sm[type="search"]{width:100%;}
  .ds-segmented{display:flex; width:100%;}
  .ds-segmented button{flex:1; justify-content:center; padding:.5rem .4rem;}
}
@media (prefers-reduced-motion:reduce){
  .ds-level-card, .ds-fraud, .ds-chip{transition:none;}
  .ds-level-card:hover{transform:none;}
}
@media (max-width:560px){
  /* 4–5 pestañas en móvil: solo íconos; el texto queda para lectores de pantalla */
  .ds-many-tabs .ds-appnav-link > span:not(.ds-tab-badge){
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .ds-many-tabs .ds-appnav-link svg{width:19px; height:19px;}
}