/* DBMaker Pro — sistema visual segun DESIGN.md (Notion)
   Lienzo de papel calido, tarjetas blancas encima, y UN solo acento
   estructural: el azul #0075de, reservado a la accion, los enlaces y el foco.
   La paleta de pegatinas (rosa, verde, naranja...) es DECORATIVA: nunca pinta
   un boton ni un relleno estructural. Titulares pesados con tracking negativo;
   el cuerpo se queda en 400. */
:root{
  /* ---- acento estructural: el unico color que pinta una accion ---- */
  --primary:#0075de; --primary-active:#005bab;
  --secondary:#213183;              /* indigo profundo: un solo momento */
  /* ---- superficies ---- */
  --canvas:#ffffff;                 /* tarjetas, paneles, barra, campos */
  --canvas-soft:#f6f5f4;            /* el lienzo de papel calido */
  --hairline:#e6e6e6;
  /* ---- tinta ---- */
  --ink:#000000; --ink-secondary:#31302e; --ink-muted:#615d59;
  --ink-faint:#a39e98; --on-primary:#ffffff;
  /* ---- pegatinas: SOLO decoracion (bandas, puntos, iconos, estados) ---- */
  --sticker-sky:#62aef0; --sticker-purple:#d6b6f6; --sticker-purple-deep:#391c57;
  --sticker-pink:#ff64c8; --sticker-orange:#dd5b00; --sticker-orange-deep:#793400;
  --sticker-teal:#2a9d99; --sticker-green:#1aae39; --sticker-brown:#523410;
  /* tintes suaves de las pegatinas, para fondos de estado */
  --tint-green:#e8f7ea; --tint-orange:#fdefe6; --tint-sky:#e9f3fd;
  /* ---- forma: los campos van tensos (4px), la pildora es para el CTA ---- */
  --r-xs:4px; --r-sm:5px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:9999px;
  /* ---- espaciado, base 8 ---- */
  --s-xxs:4px; --s-xs:8px; --s-sm:12px; --s-md:16px; --s-lg:24px;
  --s-xl:28px; --s-xxl:32px;
  /* ---- elevacion apenas perceptible: muchas capas casi transparentes ---- */
  --sh-1:rgba(0,0,0,.01) 0 .175px 1.041px, rgba(0,0,0,.02) 0 .8px 2.925px,
         rgba(0,0,0,.027) 0 2.025px 7.847px, rgba(0,0,0,.04) 0 4px 18px;
  --sh-2:rgba(0,0,0,.01) 0 .5px 2px, rgba(0,0,0,.02) 0 2px 6px,
         rgba(0,0,0,.03) 0 6px 16px, rgba(0,0,0,.05) 0 23px 52px;
  --sans:Inter,-apple-system,system-ui,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;

  /* ---- nombres antiguos, mapeados a los nuevos ---- */
  --surface-soft:var(--canvas-soft); --surface-strong:#ebe9e7;
  --surface-dark:#1f1e1c; --hairline-input:#dddddd;
  --body:var(--ink-secondary); --muted:var(--ink-muted); --ink-mute:var(--ink-muted); --faint:var(--ink-faint);
  --ink-2:var(--ink-secondary); --border-strong:var(--ink-faint);
  --primary-deep:var(--primary-active); --primary-press:var(--primary-active);
  --primary-subdued:var(--tint-sky); --brand-dark:var(--surface-dark);
  --brand-soft:var(--tint-sky); --brand-ink:var(--primary);
  --cream:var(--tint-orange); --mint:var(--tint-green); --coral:var(--sticker-orange);
  --peach:var(--sticker-sky); --yellow:var(--sticker-purple); --mustard:var(--sticker-pink);
  --forest:var(--sticker-teal);
  --link:var(--primary); --link-active:var(--primary-active);
  --info:var(--primary); --info-border:var(--primary);
  --success:var(--sticker-green); --success-border:var(--sticker-green);
  --ok:var(--sticker-green); --ok-soft:var(--tint-green);
  --warn:var(--sticker-orange-deep); --warn-soft:var(--tint-orange);
  --danger:var(--sticker-orange); --danger-soft:var(--tint-orange);
  --coral-soft:var(--tint-orange); --cream-soft:var(--tint-orange);
  --mint-soft:var(--tint-green); --yellow-soft:var(--tint-orange);
  --r-pill:var(--r-full);
  --bg:var(--canvas-soft); --surface:var(--canvas); --surface-2:var(--canvas-soft);
  --border:var(--hairline); --text:var(--ink);
  --radius:var(--r-lg); --radius-sm:var(--r-xs);
  --shadow:var(--sh-1); --shadow-lg:var(--sh-2);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--canvas-soft);color:var(--ink-secondary);
  font-family:var(--sans);font-size:15px;font-weight:400;line-height:1.33;
  font-feature-settings:"lnum","locl";-webkit-font-smoothing:antialiased}
/* cifras tabulares donde hay dinero o conteos */
.num,.kpi-value,.ds-count,.bar-count,.bar-pct,.detail-kpi .v,td.date,
.pager,.filas,.th-type,table.schema td{font-feature-settings:"lnum","tnum"}
button,input,select,textarea{font:inherit;color:inherit}
/* el azul es el color de ENLACE; el boton principal es tinta */
a{color:var(--link);text-decoration:none}
a:active{color:var(--link-active)}

/* ---------------------------------------------------------------- layout */
.app{display:grid;grid-template-columns:264px 1fr;height:100vh;overflow:hidden}

.sidebar{background:var(--canvas);color:var(--ink);display:flex;flex-direction:column;
  overflow:hidden;border-right:1px solid var(--hairline)}
.brand{display:flex;align-items:center;gap:12px;padding:20px 20px 18px}
.brand-mark{width:32px;height:32px;border-radius:var(--r-md);
  background:var(--primary);
  display:grid;place-items:center;color:#fff;font-weight:500;font-size:13px}
.brand-name{font-weight:700;color:var(--ink);font-size:17px;letter-spacing:-.25px}
.brand-sub{font-size:10px;font-weight:400;color:var(--ink-mute);letter-spacing:.1px;
  text-transform:uppercase}

.side-section{padding:16px 12px 4px}
.side-label{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.1px;
  color:var(--ink-mute);padding:0 8px 10px}
.side-scroll{flex:1;overflow-y:auto;padding-bottom:16px}
.ds-group{margin-bottom:6px}
.ds-group-title{font-size:11px;color:var(--ink-mute);padding:8px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ds-item{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-radius:var(--r-md);cursor:pointer;color:var(--ink-2);font-size:14px;
  transition:background .12s}
.ds-item:hover{background:var(--canvas-soft)}
.ds-item.active{background:var(--tint-sky);color:var(--primary);font-weight:600;
  box-shadow:inset 2px 0 0 var(--primary)}
.ds-item.active .ds-count{color:var(--primary)}
.ds-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-count{font-size:13px;color:var(--ink-mute);flex-shrink:0}
.side-foot{border-top:1px solid var(--hairline);padding:16px 20px;font-size:13px;
  color:var(--ink-mute)}
.side-foot b{color:var(--ink);font-weight:400}

.main{display:flex;flex-direction:column;overflow:hidden;background:var(--canvas-soft)}

/* ------------------------------------------------------------------ topbar */
.topbar{background:var(--canvas);border-bottom:1px solid var(--hairline);
  padding:16px 24px;display:flex;align-items:center;gap:16px;flex-shrink:0}
.title-block h1{margin:0;font-size:26px;font-weight:700;line-height:1.23;letter-spacing:-.625px;color:var(--ink)}
.title-block p{margin:0;font-size:13px;font-weight:400;color:var(--ink-mute)}
.spacer{flex:1}
.search{position:relative}
.search input{width:300px;padding:8px 12px 8px 32px;border:1px solid var(--hairline-input);
  border-radius:var(--r-xs);background:var(--canvas);outline:none;font-size:14px}
.search input:focus{border-color:var(--primary);box-shadow:var(--sh-1)}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-mute)}

/* button-utility: es el boton de la aplicacion. 8px, blanco, hairline. */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-md);
  border:1px solid var(--hairline);background:var(--canvas);color:var(--ink);
  cursor:pointer;font-size:16px;font-weight:500;line-height:1.5;white-space:nowrap}
.btn:hover{border-color:var(--ink-faint)}
.btn:active{background:var(--canvas-soft)}
/* button-primary: pildora azul. El unico color que pinta una accion. */
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary);
  border-radius:var(--r-full);padding:8px 18px}
.btn-primary:hover{background:var(--primary);border-color:var(--primary)}
.btn-primary:active{background:var(--primary-active);border-color:var(--primary-active);
  transform:scale(.97)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--surface-soft);border-color:transparent;color:var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed;border-color:var(--border-strong)}
.btn:disabled:hover{border-color:var(--border-strong);background:var(--canvas)}
.btn-sm{padding:7px 14px;font-size:14px}
.btn.toggled{background:var(--surface-strong);border-color:var(--surface-strong);
  color:var(--ink)}
.btn.toggled::before{content:"✓";font-size:12px}

/* -------------------------------------------------------------------- tabs */
.tabs{display:flex;gap:4px;padding:0 24px;background:var(--canvas);
  border-bottom:1px solid var(--hairline);flex-shrink:0;overflow-x:auto}
.tab{padding:12px 14px;border:none;background:none;cursor:pointer;font-size:14px;
  font-weight:400;color:var(--ink-mute);border-bottom:2px solid transparent;margin-bottom:-1px;
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;white-space:nowrap}
/* El asistente es la puerta de entrada para quien no sabe SQL: el icono lo
   distingue del resto de pestañas, que son de consulta manual. */
.tab-icono{width:15px;height:15px;flex-shrink:0;color:var(--sticker-pink);opacity:1;
  transition:opacity .15s}
.tab:hover .tab-icono,.tab.active .tab-icono{opacity:1}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}

.panel{flex:1;overflow:auto;padding:var(--s-xl) var(--s-lg)}
.panel.flush{padding:0;display:flex;flex-direction:column}
.hidden{display:none!important}

/* -------------------------------------------------------------------- kpis */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:12px;
  padding:20px 24px 0;flex-shrink:0}
/* feature-card: blanca sobre el lienzo de papel, hairline y sin sombra. La
   personalidad la pone una banda ilustrada arriba, de la paleta de pegatinas:
   decoracion, nunca relleno estructural. */
.kpi{position:relative;background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:18px 16px 16px;min-width:0;overflow:hidden}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}
.kpi:nth-child(6n+1)::before{background:var(--sticker-pink)}
.kpi:nth-child(6n+2)::before{background:var(--sticker-teal)}
.kpi:nth-child(6n+3)::before{background:var(--sticker-orange)}
.kpi:nth-child(6n+4)::before{background:var(--sticker-purple)}
.kpi:nth-child(6n+5)::before{background:var(--sticker-green)}
.kpi:nth-child(6n+6)::before{background:var(--sticker-sky)}
.kpi .kpi-value{color:var(--ink)}
.kpi-label{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.1px;
  color:var(--ink-mute)}
.kpi-value{font-size:26px;font-weight:700;line-height:1.23;letter-spacing:-.625px;margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.12}
.kpi-value.long{font-size:20px}
.kpi-value.xlong{font-size:14px}
.kpi-hint{font-size:11px;color:var(--ink-mute);margin-top:2px}

/* ----------------------------------------------------------------- filtros */
.filterbar{padding:16px 24px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-shrink:0}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--canvas);
  border:1px solid var(--hairline);border-radius:var(--r-sm);padding:5px 8px 5px 14px;
  font-size:13px}
.chip b{font-weight:500}
.chip .op{color:var(--ink);background:var(--surface-strong);border-radius:var(--r-sm);
  padding:2px 8px;font-size:10px;font-weight:400;letter-spacing:.1px;text-transform:uppercase}
.chip .x{border:none;background:none;cursor:pointer;color:var(--ink-mute);padding:0 4px;
  border-radius:var(--r-sm);font-size:14px;line-height:1}
.chip .x:hover{color:var(--danger)}
.filter-count{font-size:13px;color:var(--ink-mute)}

/* ------------------------------------------------------------------- tabla */
.table-wrap{flex:1;overflow:auto;background:var(--canvas);border-top:1px solid var(--hairline);
  position:relative}
table.grid{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;
  font-size:13px;font-weight:400}
table.grid th{position:sticky;top:0;z-index:2;background:var(--canvas-soft);
  border-bottom:1px solid var(--hairline);border-right:1px solid var(--hairline);
  padding:0;text-align:left;white-space:nowrap}
.th-inner{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;user-select:none}
.th-inner:hover{background:var(--surface-soft)}
.th-name{font-weight:600;font-size:12px;letter-spacing:.125px;text-transform:uppercase;
  color:var(--ink-muted)}
.th-type{font-size:10px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.1px}
.th-sort{color:var(--primary);font-size:10px}
table.grid td{padding:8px 14px;border-bottom:1px solid var(--hairline);
  border-right:1px solid var(--hairline);white-space:nowrap;max-width:340px;overflow:hidden;
  text-overflow:ellipsis}
table.grid tbody tr:hover td{background:var(--canvas-soft)}
td.num{text-align:right}
td.date{color:var(--ink-2)}
td.null{color:var(--border-strong)}
td.rownum{position:sticky;left:0;background:var(--canvas-soft);color:var(--ink-mute);
  text-align:right;font-size:11px;border-right:1px solid var(--hairline);z-index:1}
th.rownum{position:sticky;left:0;z-index:3;background:var(--canvas-soft)}

/* --------------------------------------------------------------- paginacion */
.pager{display:flex;align-items:center;gap:12px;padding:12px 24px;background:var(--canvas);
  border-top:1px solid var(--hairline);flex-shrink:0;font-size:13px}
.pager .muted{color:var(--ink-mute)}
.pager select{padding:6px 8px;border:1px solid var(--hairline-input);border-radius:var(--r-sm);
  background:var(--canvas)}

/* ------------------------------------------------------------------ modales */
.overlay{position:fixed;inset:0;background:rgba(13,37,61,.4);z-index:40;display:grid;
  place-items:center;padding:24px}
.modal{background:var(--canvas);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  width:min(520px,100%);max-height:82vh;display:flex;flex-direction:column;overflow:hidden}
.modal.wide{width:min(920px,100%)}
/* el mapeo necesita tres cosas por fila —el dato, el nombre y los botones—
   y en 520px el nombre se quedaba en «Subscribe» */
.modal.media{width:min(720px,100%)}
.modal-head{padding:20px 24px;border-bottom:1px solid var(--hairline);display:flex;align-items:center}
.modal-head h3{margin:0;font-size:22px;font-weight:700;line-height:1.27;letter-spacing:-.25px;color:var(--ink)}
.modal-head .back{border:none;background:none;cursor:pointer;color:var(--primary);font-size:14px;
  padding:2px 8px;border-radius:var(--r-sm);margin-right:10px}
.modal-head .back:hover{background:var(--brand-soft)}
.modal-body{padding:20px 24px;overflow-y:auto}
.modal-foot{padding:16px 24px;border-top:1px solid var(--hairline);display:flex;gap:8px;
  justify-content:flex-end;background:var(--canvas-soft)}
.field{margin-bottom:16px}
.field label{display:block;font-size:10px;font-weight:400;text-transform:uppercase;
  letter-spacing:.1px;color:var(--ink-mute);margin-bottom:6px}
.field input,.field select{width:100%;padding:8px 12px;border:1px solid var(--hairline-input);
  border-radius:var(--r-xs);background:var(--canvas);outline:none;font-size:14px}
.field input:focus,.field select:focus{border-color:var(--primary);box-shadow:var(--sh-1)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.facets{border:1px solid var(--hairline);border-radius:var(--r-md);max-height:220px;overflow-y:auto}
.facet{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;cursor:pointer;
  font-size:14px;border-bottom:1px solid var(--hairline)}
.facet:hover{background:var(--canvas-soft)}
.facet span:last-child{color:var(--ink-mute)}
.facet.on{background:var(--surface-strong);color:var(--ink)}

/* --------------------------------------------------------------- tarjetas */
.card{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:16px}
.card-head{padding:16px 20px;border-bottom:1px solid var(--hairline);font-size:22px;
  font-weight:700;letter-spacing:-.25px;color:var(--ink);display:flex;align-items:center;gap:8px}
table.schema{width:100%;border-collapse:collapse;font-size:14px;font-weight:400}
table.schema th{text-align:left;padding:10px 20px;background:var(--canvas-soft);
  color:var(--ink-mute);font-size:10px;font-weight:400;text-transform:uppercase;
  letter-spacing:.1px;border-bottom:1px solid var(--hairline)}
table.schema td{padding:10px 20px;border-bottom:1px solid var(--hairline);vertical-align:middle}
table.schema tr:hover td{background:var(--canvas-soft)}
.badge{display:inline-block;padding:3px 9px;border-radius:var(--r-full);font-size:12px;
  font-weight:400;letter-spacing:.1px;text-transform:uppercase}
.badge.numeric{background:var(--surface-strong);color:var(--ink)}
.badge.text{background:var(--surface-soft);color:var(--ink-2)}
.badge.date{background:var(--ok-soft);color:var(--ok)}
.badge.boolean{background:var(--mint-soft);color:var(--success)}
.bar{height:6px;background:var(--surface-strong);border-radius:var(--r-full);overflow:hidden;width:96px}
.bar i{display:block;height:100%;background:var(--primary);border-radius:var(--r-full)}
.mini-vals{display:flex;flex-wrap:wrap;gap:6px}
.mini-val{font-size:11px;background:var(--canvas-soft);border:1px solid var(--hairline);
  border-radius:var(--r-sm);padding:2px 8px;color:var(--ink-mute)}
textarea.sql{width:100%;min-height:130px;font-family:var(--mono);font-size:13px;padding:12px;
  border:1px solid var(--hairline-input);border-radius:var(--r-xs);resize:vertical;outline:none;
  background:var(--canvas)}
textarea.sql:focus{border-color:var(--primary);box-shadow:var(--sh-1)}
.sql-note{font-size:13px;color:var(--ink-mute);margin:8px 0 0}
pre.code{background:var(--brand-dark);color:#e6e8ec;padding:14px 16px;border-radius:var(--r-md);
  font-family:var(--mono);font-size:12px;overflow-x:auto;margin:0;white-space:pre-wrap;
  word-break:break-all}

/* ------------------------------------------------------------------ estados */
.empty{display:grid;place-items:center;height:100%;text-align:center;color:var(--ink-mute);padding:48px}
.empty h2{font-size:26px;font-weight:700;line-height:1.23;letter-spacing:-.625px;color:var(--ink);margin:12px 0 6px}
.empty p{margin:0;font-size:14px;max-width:440px}
.spinner{width:15px;height:15px;border:2px solid var(--hairline);border-top-color:var(--primary);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-bar{position:absolute;top:0;left:0;right:0;height:2px;background:var(--surface-strong);
  overflow:hidden;z-index:5}
.loading-bar i{display:block;height:100%;width:35%;background:var(--primary);
  animation:slide 1s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
.toast{position:fixed;bottom:24px;right:24px;background:var(--brand-dark);color:#fff;
  padding:12px 18px;border-radius:var(--r-md);box-shadow:var(--sh-2);font-size:14px;
  z-index:60;max-width:400px}
.toast.err{background:var(--danger)}

/* ---------------------------------------------------------------- usuarios */
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--brand-soft)!important}
.u-email{font-weight:400}
.pill{display:inline-block;padding:2px 8px;border-radius:var(--r-sm);font-size:10px;
  font-weight:400;letter-spacing:.1px;text-transform:uppercase}
.pill.ok{background:var(--tint-green);color:var(--sticker-green)}
.pill.bad{background:var(--tint-orange);color:var(--sticker-orange)}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px;
  margin-bottom:24px}
.detail-kpi{background:var(--canvas-soft);border:1px solid var(--hairline);
  border-radius:var(--r-md);padding:12px 14px}
.detail-kpi .l{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.1px;
  color:var(--ink-mute)}
.detail-kpi .v{font-size:20px;font-weight:400;line-height:1.4}
.pref-row{display:flex;gap:12px;align-items:baseline;margin-bottom:8px;font-size:14px}
.pref-row .k{color:var(--ink-mute);min-width:92px;text-transform:capitalize}
.section-title{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.1px;
  color:var(--ink-mute);margin:24px 0 10px}

/* Ficha de cliente: identidad, resumen y recorrido entre perfiles. */
.user-avatar{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;
  border-radius:50%;flex-shrink:0;font-size:30px;font-weight:700;letter-spacing:-1px;border:5px solid var(--canvas)}
.user-avatar-0{background:#ece2f6;color:#50376a}
.user-avatar-1{background:#dcefeb;color:#275e56}
.user-avatar-2{background:#f7e6d8;color:#80522c}
.user-avatar-3{background:#e0ebf6;color:#345a7e}
.user-avatar.small{width:34px;height:34px;border:0;font-size:12px;letter-spacing:0}
.user-list-person{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:0;
  text-align:left;cursor:pointer;max-width:300px;font-weight:600}
.user-list-person>span:last-child{overflow:hidden;text-overflow:ellipsis}
.user-list-person small{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:3px}
.user-list-person:hover small{color:var(--primary)}
.modal.user-profile{width:min(1100px,100%);max-height:92vh}
.user-profile .modal-body{padding:0;background:var(--canvas-soft);min-height:0}
.user-profile-toolbar{padding:12px 24px;justify-content:space-between;gap:12px}
.user-eyebrow{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:600}
.user-profile-nav{display:flex;align-items:center;gap:6px}
.user-profile-nav>span{font-size:11px;color:var(--muted);margin-right:8px}
.user-profile-nav .btn{min-width:34px;min-height:34px;padding:4px 9px}
.user-profile-hero{display:flex;align-items:center;gap:20px;padding:28px 32px;background:var(--canvas)}
.user-profile-identity{min-width:0;flex:1}
.user-profile-identity h2{font-size:28px;line-height:1.15;letter-spacing:-.7px;margin:7px 0;color:var(--ink);overflow-wrap:anywhere}
.user-profile-identity p{font-size:13px;color:var(--muted);margin:0;overflow-wrap:anywhere}
.user-profile-tags{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:11px;color:var(--muted);margin-top:12px}
.user-status{border:1px solid var(--hairline);border-radius:var(--r-full);padding:4px 9px;background:var(--canvas-soft);color:var(--ink-secondary)}
.user-profile-since{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted);text-align:right}
.user-profile-since strong{font-size:16px;color:var(--ink);font-weight:600}
.user-profile-highlights{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;margin:0;padding:0 32px 24px;background:var(--canvas);gap:16px}
.user-stat{min-width:0}
.user-stat dt{font-size:11px;color:var(--muted);line-height:1.5}
.user-stat dd{font-size:26px;font-weight:600;letter-spacing:-.6px;margin:5px 0;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.user-stat small{font-size:10px;color:var(--muted);display:block}
.user-profile-highlights .user-stat{border-top:1px solid var(--hairline);padding-top:16px}
.user-profile-tabs{display:flex;gap:24px;background:var(--canvas);padding:0 32px;border-bottom:1px solid var(--hairline)}
.user-profile-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;padding:14px 0;
  font-size:12px;color:var(--muted);cursor:pointer}
.user-profile-tabs button.active{border-color:var(--primary);color:var(--primary);font-weight:600}
.user-profile-tabs button span{font-size:10px;background:var(--canvas-soft);padding:2px 5px;border-radius:4px;margin-left:4px}
.user-profile-content{padding:24px 32px}
.user-profile-columns{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:16px}
.user-profile-card{padding:20px;background:var(--canvas);border:1px solid var(--hairline);border-radius:12px;min-width:0}
.user-profile-card h3{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 5px}
.user-profile-card>p{font-size:11px;color:var(--muted);margin:0 0 20px;line-height:1.5}
.user-frequency{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}
.user-frequency dd{font-size:24px}
.user-facts{margin:0;font-size:12px}
.user-facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--hairline)}
.user-facts dt{color:var(--muted)}
.user-facts dd{margin:0;text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.user-category-list{list-style:none;padding:0;margin:0 0 16px}
.user-category-list li{margin:16px 0}
.user-category-list li>div:first-child{display:flex;justify-content:space-between;gap:12px;font-size:12px}
.user-category-list strong{font-weight:500;overflow-wrap:anywhere}
.user-category-list small{font-size:10px;color:var(--muted)}
.user-category-track{height:5px;background:var(--canvas-soft);border-radius:5px;margin:8px 0 4px;overflow:hidden}
.user-category-track i{display:block;height:100%;background:var(--ink-secondary);border-radius:5px}
.user-preference{margin-top:14px}
.user-preference h4{font-size:11px;font-weight:500;color:var(--muted);margin:0 0 6px}
.user-preference .mini-val{font-size:11px;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.user-preference .mini-val b{font-weight:400;color:var(--muted)}
.user-method{font-size:11px;color:var(--muted);margin-top:20px;line-height:1.6}
.user-method summary{cursor:pointer}
.user-profile-empty,.user-loading{padding:28px 16px;text-align:center;color:var(--muted);font-size:13px;line-height:1.6}
.user-profile-content [hidden]{display:none}
.user-profile button:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.user-profile .modal-foot{padding:12px 24px;background:var(--canvas)}
@media(max-width:700px){
  .user-profile-hero{padding:20px;gap:12px;flex-wrap:wrap}
  .user-profile-identity h2{font-size:22px}
  .user-profile-since{width:100%;text-align:left;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:8px}
  .user-avatar{width:64px;height:64px;font-size:23px}
  .user-profile-highlights{grid-template-columns:1fr 1fr;padding:0 20px 20px}
  .user-profile-highlights dd{font-size:23px}
  .user-profile-columns{grid-template-columns:1fr}
  .user-profile-content{padding:16px}
  .user-profile-tabs{padding:0 20px;gap:16px}
  .user-profile-toolbar{padding:10px 16px}
  .user-profile-nav>span{display:none}
  .user-profile .modal-foot{padding:12px;flex-wrap:wrap}
  .user-profile .modal-foot .btn{min-height:44px}
}

.user-profile-interval-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0 32px 20px;background:var(--canvas)}
.user-profile-interval-summary dd{font-size:17px;letter-spacing:-.2px}
.user-gap-ranges{margin:16px 0}
.user-gap-range{display:grid;grid-template-columns:105px minmax(30px,1fr) 25px 45px;align-items:center;gap:10px;font-size:11px;margin:12px 0}
.user-gap-range strong,.user-gap-range small{text-align:right;font-variant-numeric:tabular-nums}
.user-gap-range .user-category-track{margin:0;height:7px}
.user-gap-range small{color:var(--muted)}
.user-timeline-heading{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.user-timeline-heading>div{flex:1;min-width:220px}
.user-timeline-heading h3{font-size:18px;color:var(--ink);margin:0 0 8px}
.user-timeline-heading p{font-size:12px;color:var(--muted);margin:0;line-height:1.6}
.user-timeline-heading label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted)}
.user-timeline-heading select{background:var(--canvas);border:1px solid var(--hairline);padding:8px;border-radius:5px;font-size:12px}
.user-story-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;padding:16px 20px;margin:20px 0;background:var(--canvas);border:1px solid var(--hairline);border-radius:10px}
.user-story-summary li{position:relative;padding-left:12px;min-width:0}
.user-story-summary li:before{content:'•';position:absolute;left:0;color:var(--muted)}
.user-story-summary strong{display:block;font-size:12px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.user-story-summary span{display:block;font-size:10px;color:var(--muted);line-height:1.5;margin-top:4px}
.user-story-legend{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:10px}
.user-story-legend span{display:flex;align-items:center;gap:5px}
.user-story-legend i{height:7px;width:7px;background:var(--ink-faint);border-radius:50%}
.user-story-legend i.delivered{background:var(--forest)}
.user-story-legend i.cancelled{background:var(--sticker-orange)}
#u-timeline-line{overflow-x:auto;padding:6px 0;scrollbar-width:thin}
.user-story-line{display:flex;list-style:none;padding:0;margin:12px 0;min-width:100%;width:max-content}
.user-story-line li{flex:1 0 126px;position:relative;max-width:180px}
.user-story-line li:before{content:'';position:absolute;top:38px;left:0;right:0;height:2px;background:var(--hairline-input)}
.user-story-line li:first-child:before{left:50%}
.user-story-line li:last-child:before{right:50%}
.user-story-line li:only-child:before{display:none}
.user-story-point{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 8px 10px;background:transparent;border:0;border-radius:8px;cursor:pointer;position:relative}
.user-story-point time{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}
.user-story-point i{height:12px;width:12px;border:2px solid var(--canvas);box-shadow:0 0 0 3px var(--canvas-soft);background:var(--ink-faint);border-radius:50%;margin:6px 0}
.user-story-point.delivered i{background:var(--forest)}
.user-story-point.cancelled i{background:var(--sticker-orange)}
.user-story-point strong{font-size:11px;font-weight:500;overflow-wrap:anywhere}
.user-story-point small{font-size:10px;color:var(--muted)}
.user-story-point:hover,.user-story-point[aria-pressed="true"]{background:var(--tint-sky)}
.user-story-point[aria-pressed="true"] i{box-shadow:0 0 0 3px var(--primary)}
.user-story-help{font-size:10px;color:var(--muted);margin:0 0 16px}
.user-story-selection{padding:0;list-style:none;margin:16px 0}
.user-story-selection .user-timeline-event{padding-bottom:0}
.user-story-selection .user-timeline-event:before{display:none}
.user-story-full{border-top:1px solid var(--hairline);padding-top:14px;font-size:12px;margin-top:16px}
.user-story-full>summary{cursor:pointer;color:var(--primary)}
@media(max-width:700px){.user-story-summary{grid-template-columns:1fr 1fr;padding:14px;gap:14px}}
.user-timeline{list-style:none;padding:0;margin:24px 0}
.user-timeline-month{font-size:12px;font-weight:600;letter-spacing:.5px;margin:24px 0 16px;color:var(--muted)}
.user-timeline-event{display:grid;grid-template-columns:100px minmax(0,1fr);gap:24px;position:relative;padding-bottom:16px}
.user-timeline-date{display:flex;flex-direction:column;gap:6px;font-size:12px;padding-top:18px;font-variant-numeric:tabular-nums}
.user-timeline-date small{font-size:10px;color:var(--muted)}
.user-timeline-card{background:var(--canvas);border:1px solid var(--hairline);border-radius:10px;padding:18px;position:relative;min-width:0}
.user-timeline-card:before{content:'';position:absolute;left:-18px;top:22px;width:7px;height:7px;border-radius:50%;background:var(--ink-faint);box-shadow:0 0 0 4px var(--canvas-soft)}
.user-timeline-event:before{content:'';position:absolute;left:109px;top:25px;bottom:-25px;width:1px;background:var(--hairline-input)}
.user-timeline li:last-child .user-timeline-event:before{bottom:25px}
.user-timeline-event.delivered .user-timeline-card:before{background:var(--forest)}
.user-timeline-title{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.user-timeline-title span{font-weight:600;white-space:nowrap}
.user-timeline-status{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0}
.user-timeline-gap{font-size:12px;font-weight:500;margin:12px 0;line-height:1.5}
.user-timeline-card summary{font-size:11px;color:var(--primary);cursor:pointer}
.user-timeline-card .user-facts{margin-top:14px}
.user-timeline-card dd{overflow-wrap:anywhere;max-width:65%}
.user-timeline-card .btn{margin-top:12px}
.user-profile-tabs{flex-wrap:wrap;gap:0 24px}
@media(max-width:700px){
  .user-profile-interval-summary{padding:0 20px 16px;grid-template-columns:1fr;gap:8px}
  .user-profile-interval-summary .user-stat{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .user-profile-interval-summary dd{font-size:14px;text-align:right}
  .user-timeline-event{grid-template-columns:1fr;gap:8px;padding-left:16px}
  .user-timeline-date{flex-direction:row;align-items:baseline;padding-top:0}
  .user-timeline-event:before{left:1px}
  .user-timeline-card:before{left:-19px}
  .user-timeline-title{font-size:12px;flex-wrap:wrap}
}

/* ---------------------------------------------------------- detalle pedido */
.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));
  background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden}
.kv{padding:10px 14px;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.kv .k{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.1px;color:var(--ink-mute)}
.kv .v{font-size:14px;overflow-wrap:anywhere}

/* -------------------------------------------------------------- dashboard */
.viz{--bar:var(--ink-secondary);--track:var(--canvas-soft)}
.bar-row{display:grid;grid-template-columns:216px 1fr 96px 62px;gap:16px;align-items:center;
  padding:7px 0;cursor:pointer;border-radius:var(--r-sm)}
.bar-row:hover{background:var(--canvas-soft)}
.bar-label{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{background:var(--track);border-radius:0 var(--r-xs) var(--r-xs) 0;height:12px;position:relative}
.bar-fill{height:100%;background:var(--bar);border-radius:0 var(--r-xs) var(--r-xs) 0;min-width:2px}
.bar-count{text-align:right;font-size:14px}
.bar-pct{text-align:right;font-size:13px;color:var(--ink-mute)}
.viz-tip{position:fixed;z-index:70;background:var(--brand-dark);color:#fff;padding:8px 12px;
  border-radius:var(--r-md);font-size:13px;pointer-events:none;box-shadow:var(--sh-2);white-space:nowrap}

/* -------------------------------------------------------------------- chat */
.chat-activity-toggle{align-self:center;display:grid;place-items:center;width:30px;height:32px;
  flex-shrink:0;padding:0;border:0;border-radius:7px;background:transparent;color:var(--faint);cursor:pointer}
.chat-activity-toggle:hover,.chat-activity-toggle[aria-expanded="true"]{color:var(--ink);background:var(--surface-strong)}
.chat-activity-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.chat-activity-toggle[data-state="active"]{color:var(--primary)}
.chat-activity-toggle[data-state="error"]{color:var(--danger)}
.chat-live{display:flex;flex-direction:column;gap:5px}
.chat-live small{color:var(--ink-mute);font-size:12px;font-variant-numeric:tabular-nums}
.chat-live small:empty{display:none}
.chat-activity{flex-shrink:0;border-top:1px solid var(--hairline);padding:12px 24px;background:var(--canvas);font-size:12px}
.activity-head{display:flex;align-items:center;gap:8px}
.activity-head strong{margin-right:auto;font-weight:600}
.chat-activity p{margin:6px 0;color:var(--ink-mute)}
#chat-activity-list{max-height:min(190px,24vh);overflow:auto;overflow-wrap:anywhere}
.activity-run{padding:10px 0;border-top:1px solid var(--hairline)}
.activity-run-title{display:flex;justify-content:space-between;gap:12px;color:var(--ink-mute)}
.activity-run-title span{font-family:monospace;font-size:11px}
.activity-run ol{padding:0;margin:8px 0 0;list-style:none}
.activity-run li{display:grid;grid-template-columns:70px minmax(0,1fr) 75px;gap:8px;padding:4px 0;color:var(--ink-mute)}
.activity-run li.active{color:var(--primary)}
.activity-run li.error{color:var(--danger)}
.activity-offset,.activity-duration{font-variant-numeric:tabular-nums;font-size:11px}
.activity-duration{text-align:right}
.chat-activity .activity-note{font-size:11px;margin-bottom:0}
@media(max-width:600px){.chat-activity{padding:10px 12px}.activity-head{flex-wrap:wrap}
  .activity-run li{grid-template-columns:50px minmax(0,1fr) 55px;gap:5px}}
.chat-log{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:16px}
.chat-empty{margin:auto;text-align:center;max-width:620px;color:var(--ink-mute);flex-shrink:0}
.chat-empty h2{font-size:40px;font-weight:700;color:var(--ink);margin:0 0 12px;line-height:1.1;letter-spacing:-1px}
.chat-empty p{margin:0 0 20px;font-size:16px;line-height:1.5}
/* Va debajo de las sugerencias, en pequeño: es contexto, no instrucciones. */
.chat-alcance{font-size:12.5px;color:var(--faint);margin:20px 0 0!important}
.suggestions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.suggestion{background:var(--canvas);border:1px solid var(--hairline-input);border-radius:var(--r-sm);
  padding:8px 16px;font-size:14px;cursor:pointer;text-align:left;color:var(--ink)}
.suggestion:hover{border-color:var(--border-strong)}
.msg-user{align-self:flex-end;max-width:75%;background:var(--primary);color:var(--on-primary);
  padding:12px 16px;border-radius:var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
  font-size:14px;white-space:pre-wrap;
  flex-shrink:0}
/* flex-shrink:0 es imprescindible: el chat es un contenedor flex y sin esto
   comprime los mensajes altos y recorta su contenido */
.msg-bot{align-self:stretch;background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-xs) var(--r-lg) var(--r-lg) var(--r-lg);
  overflow:hidden;flex-shrink:0}
.msg-bot .say{padding:16px 20px;font-size:14px}
.msg-bot .assume{padding:0 20px 14px;display:flex;flex-wrap:wrap;gap:6px}
.assume .mini-val{background:var(--warn-soft);border-color:var(--mustard);color:var(--warn)}
.sql-block{background:var(--surface-dark);color:#e6e8ec;padding:18px 20px;font-family:var(--mono);
  font-size:12.5px;line-height:1.6;white-space:pre-wrap;overflow-x:auto;max-height:420px;
  overflow-y:auto;tab-size:2}
.sql-block .kw{color:var(--sticker-sky)}
.sql-actions{display:flex;gap:8px;padding:10px 20px;background:var(--canvas-soft);
  border-top:1px solid var(--hairline);align-items:center}
.sql-actions .meta{margin-left:auto;font-size:11px;color:var(--ink-mute)}
.chat-result{max-height:340px;overflow:auto;border-top:1px solid var(--hairline)}
.chat-error{padding:14px 20px;background:var(--danger-soft);color:var(--danger);font-size:13px;
  border-top:1px solid var(--coral);font-family:var(--mono)}
.chat-input{display:flex;gap:12px;padding:16px 24px;background:var(--canvas);
  border-top:1px solid var(--hairline);align-items:flex-end;flex-shrink:0}
/* El comando activo deja de ser texto suelto en el prompt y pasa a ser una
   etiqueta dentro del cuadro: se ve que el modo está puesto y no se borra sin
   querer al reescribir la pregunta. */
.chat-caja{flex:1;display:flex;align-items:flex-end;gap:8px;background:var(--canvas);
  border:1px solid var(--hairline-input);border-radius:var(--r-sm);padding:4px 4px 4px 6px}
.chat-caja:focus-within{border-color:var(--primary);box-shadow:var(--sh-1)}
.chat-input textarea{flex:1;resize:none;max-height:150px;padding:5px 10px;
  border:none;outline:none;font-size:14px;background:none;
  font-family:var(--sans);font-weight:400;line-height:1.4}
.modo{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;margin:2px 0;
  background:var(--primary);color:#fff;border-radius:var(--r-sm);
  padding:5px 8px 5px 10px;font-size:13px;font-family:var(--mono);white-space:nowrap}
.modo .x{border:none;background:rgba(255,255,255,.22);color:#fff;cursor:pointer;
  width:16px;height:16px;border-radius:var(--r-xs);font-size:12px;line-height:1;
  display:grid;place-items:center;padding:0}
.modo .x:hover{background:rgba(255,255,255,.42)}
/* la misma etiqueta, en la burbuja del mensaje ya enviado */
.msg-user .modo{background:rgba(255,255,255,.22);margin:0 8px 0 0;padding:2px 8px;
  font-size:12px}
.sql-manual{border-top:1px solid var(--hairline);background:var(--canvas);flex-shrink:0;
  max-height:56vh;overflow:auto}
.sql-manual summary{padding:14px 24px;cursor:pointer;font-size:14px;color:var(--ink-mute)}
.sql-manual summary:hover{color:var(--ink)}
.setup-card{background:var(--warn-soft);border:1px solid var(--mustard);border-radius:var(--r-md);
  padding:16px 18px;font-size:14px}
.setup-card h4{margin:0 0 6px;font-size:18px;font-weight:400}
.setup-card pre{background:var(--brand-dark);color:#e6e8ec;padding:12px 14px;border-radius:var(--r-sm);
  font-family:var(--mono);font-size:12px;overflow-x:auto;margin:10px 0 0}

/* --------------------------------------------------------- ingesta diaria */
.alerta{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border-radius:var(--r-lg);
  border:1px solid var(--hairline);background:var(--tint-orange);margin-bottom:16px}
.alerta.ok{background:var(--tint-green)}
.alerta .icono{font-size:18px;line-height:1.2}
.alerta h4{margin:0 0 4px;font-size:18px;font-weight:400;letter-spacing:0}
.alerta p{margin:0;font-size:14px;color:var(--ink-mute)}
.cal-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--hairline)}
.cal-head .mes{font-size:20px;font-weight:400;min-width:170px;text-transform:capitalize}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:18px 20px}
.cal .dow{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.1px;
  color:var(--ink-mute);text-align:center;padding-bottom:4px}
.dia{border:1px solid var(--hairline);border-radius:var(--r-md);padding:9px 10px;min-height:60px;
  display:flex;flex-direction:column;gap:2px;background:var(--canvas)}
.dia .n{font-size:14px;font-weight:400}
.dia .filas{font-size:11px;color:var(--ink-mute)}
.dia.cargado{background:var(--ok-soft);border-color:var(--success-border)}
.dia.cargado .n{color:var(--ok)}
.dia.pendiente{background:var(--warn-soft);border-color:var(--mustard)}
.dia.pendiente .n{color:var(--warn)}
.dia.futuro{background:var(--canvas-soft);border-style:dashed;opacity:.55}
.dia.vacio{border:none;background:none}
.dia.elegido{outline:2px solid var(--primary);outline-offset:1px}
.leyenda{display:flex;gap:16px;padding:0 20px 18px;font-size:13px;color:var(--ink-mute);flex-wrap:wrap}
.leyenda i{display:inline-block;width:12px;height:12px;border-radius:var(--r-xs);margin-right:6px;
  vertical-align:-1px;border:1px solid var(--hairline)}
.leyenda .v{background:var(--ok-soft);border-color:var(--success-border)}
.leyenda .n{background:var(--warn-soft);border-color:var(--mustard)}
.leyenda .f{background:var(--canvas-soft);border-style:dashed}
.url-row{display:flex;gap:12px;align-items:center;padding:18px 20px}
.url-row input{flex:1;padding:9px 14px;border:1px solid var(--hairline-input);
  border-radius:var(--r-xs);outline:none;font-family:var(--mono);font-size:13px}
.url-row input:focus{border-color:var(--primary);box-shadow:var(--sh-1)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}

/* ------------------------------------------------- resultado del chat */
.res-head{display:flex;align-items:center;gap:14px;padding:12px 20px;
  border-bottom:1px solid var(--hairline);background:var(--canvas-soft);flex-wrap:wrap}
.res-sum{font-size:13px;color:var(--ink-mute);
  font-feature-settings:"ss01","tnum"}
.res-sum b{color:var(--ink);font-weight:400;font-size:14px}
.res-sum .sep{margin:0 2px;color:var(--hairline-input)}
.res-tabs{display:flex;gap:2px;margin-left:auto}
.res-tab{border:none;background:none;cursor:pointer;padding:5px 12px;border-radius:var(--r-sm);
  font-size:14px;color:var(--ink-mute)}
.res-tab:hover{color:var(--ink);background:var(--canvas)}
.res-tab.on{background:var(--surface-strong);color:var(--ink);font-weight:500}
.msg-bot .sql-block{border-radius:0}
.chat-result{max-height:420px}

/* pasos de exploración del asistente */
.pasos{padding:12px 20px 4px;display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.paso{font-size:13px;color:var(--ink-mute);
  font-feature-settings:"ss01","tnum"}
.paso b{color:var(--ink-2);font-weight:400}
.paso i{font-style:normal;color:var(--hairline-input)}
.paso .lupa{display:inline-block;width:18px;height:18px;border-radius:var(--r-full);
  background:var(--surface-strong);color:var(--ink);text-align:center;line-height:18px;
  font-size:11px;margin-right:6px}

/* opciones de respuesta del asistente */
.opciones{display:flex;flex-wrap:wrap;gap:8px;padding:4px 20px 18px}
.opcion{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  background:var(--canvas);border:1px solid var(--hairline-input);border-radius:var(--r-md);
  padding:10px 14px;cursor:pointer;max-width:340px;transition:.12s}
.opcion:hover{border-color:var(--primary);background:var(--brand-soft)}
.opcion .et{font-size:14px;font-weight:400;color:var(--ink)}
.opcion .de{font-size:13px;color:var(--ink-mute);
  font-feature-settings:"ss01","tnum"}
.opcion:hover .et{color:var(--primary-deep)}
.msg-bot .say b{font-weight:500}

/* ------------------------------------------- evidencia: por que entro alguien */
/* Las filas del resultado del chat se abren para ver que pedidos cumplieron el
   filtro. La pista en la cabecera es lo unico que lo anuncia, sin ella nadie
   descubre que la tabla es clicable. */
.res-sum .hint{color:var(--primary);font-size:12px}
.head-sub{margin-left:10px;color:var(--ink-mute);font-size:13px}
.ev-nota{border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:14px;font-size:14px;line-height:1.5}
.ev-nota.ok{background:var(--ok-soft);border-color:var(--success-border);color:var(--ok)}
.ev-nota.warn{background:var(--warn-soft);border-color:var(--mustard);color:var(--warn)}
.ev-detalle{margin:6px 0 10px;color:var(--ink-mute);font-size:12px}
.ev-sql{margin-top:14px}
.ev-sql summary{cursor:pointer;color:var(--ink-mute);font-size:13px;
  padding:6px 0;list-style:none}
.ev-sql summary::-webkit-details-marker{display:none}
.ev-sql summary::before{content:"▸ ";color:var(--primary)}
.ev-sql[open] summary::before{content:"▾ "}
.ev-sql .sql-block{margin-top:6px}
/* la línea que la plantilla tomó para representar al cliente */
tr.usada td{background:var(--brand-soft)!important;font-weight:400}
tr.usada td:first-child{box-shadow:inset 3px 0 0 var(--primary)}

/* ------------------------------------------- filtro por estatus del resultado */
.btn.on{background:var(--brand-soft);border-color:var(--primary-subdued);
  color:var(--primary-deep)}
.res-sum .menos{color:var(--ink-mute);font-size:12px}
.est-barra{padding:0 20px 12px;flex-shrink:0}
.est-fila{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.est-fila .et{font-size:12px;color:var(--ink-mute);margin-right:2px}
.est-todos{font-size:12.5px;color:var(--warn)}
.est-chip.quita{border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.est-chip.quita i{font-style:normal;opacity:.5;font-size:11px}
.est-chip.quita:hover i{opacity:1}
.est-mas{border:1px dashed var(--hairline-input);background:none;cursor:pointer;
  border-radius:var(--r-sm);padding:3px 11px;font-size:12px;color:var(--ink-mute)}
.est-mas:hover,.est-mas.on{border-color:var(--primary);color:var(--primary);border-style:solid}
.est-barra .est-lista{margin-top:10px;padding:10px;border:1px solid var(--hairline);
  border-radius:var(--r-md);background:var(--canvas);max-height:260px}
.est-pie{grid-column:1/-1;padding:8px 10px 2px;font-size:11.5px;color:var(--faint)}
.est-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:0 20px 12px;flex-shrink:0}
.est-chip{background:var(--tint-sky);color:var(--primary);border-radius:var(--r-full);
  padding:3px 11px;font-size:12px}
.est-limpiar{border:none;background:none;cursor:pointer;color:var(--ink-mute);
  font-size:12px;text-decoration:underline;padding:3px 4px}
.est-limpiar:hover{color:var(--danger)}
.est-rapidos{display:flex;gap:8px;margin-bottom:14px}
.est-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px;
  max-height:340px;overflow-y:auto}
.est-op{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  cursor:pointer;font-size:14px}
.est-op:hover{background:var(--canvas-soft)}
.est-op .et{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.est-op .n{color:var(--ink-mute);font-size:12px;font-feature-settings:"ss01","tnum"}

/* --------------------------------------------- catalogo de nombres de clientes */
/* La barra es lo unico que dice de un vistazo si el catalogo esta al dia: sin
   ella el porcentaje se lee como un dato mas y nadie lo vuelve a mirar. */
.cob{display:flex;flex-direction:column;gap:8px}
.cob-barra{height:8px;border-radius:var(--r-full);background:var(--canvas-soft);
  border:1px solid var(--hairline);overflow:hidden}
.cob-barra i{display:block;height:100%;background:var(--primary);border-radius:var(--r-full)}
.cob-txt{font-size:13px;color:var(--ink-2);font-feature-settings:"ss01","tnum"}

/* ------------------------------------------------- comandos del asistente */
/* Se despliegan al teclear "/". Sin esta lista nadie sabría que existen. */
.chat-comandos{border-top:1px solid var(--hairline);background:var(--canvas);
  padding:8px;display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto}
.cmd{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline;
  border:none;background:none;cursor:pointer;text-align:left;padding:8px 10px;
  border-radius:var(--r-md);width:100%}
.cmd:hover:not(.no){background:var(--brand-soft)}
.cmd.no{cursor:not-allowed;opacity:.55}
.cmd .n{font-family:var(--mono);font-size:13px;color:var(--primary);font-weight:400}
.cmd .d{font-size:13.5px;color:var(--ink)}
.cmd .e{grid-column:2;font-size:12px;color:var(--faint)}
.cmd.no .n{color:var(--ink-mute)}

/* ------------------------------------------- descarga con plantilla fija */
.campo{display:block;margin-bottom:18px}
.campo .et{display:block;font-size:13px;color:var(--ink-2);margin-bottom:6px}
.campo input{width:100%;padding:10px 14px;border:1px solid var(--hairline-input);
  border-radius:var(--r-md);font-size:14px;background:var(--canvas)}
.campo input:focus{outline:none;border-color:var(--primary);box-shadow:var(--sh-1)}
.campo .pista{display:block;margin-top:6px;font-size:12px;color:var(--faint)}
.pl-tipo{padding:9px 12px;background:var(--brand-soft);border-radius:var(--r-sm);
  font-size:14px;color:var(--primary-deep)}
.pl-tipo b{font-weight:400}
/* huecos de la base: se leen de un vistazo antes de descargar */
.huecos{display:flex;flex-wrap:wrap;gap:6px 14px;padding:0 20px 12px;flex-shrink:0}
.huecos span{font-size:12.5px;color:var(--ink-mute);font-feature-settings:"ss01","tnum"}
.huecos b{color:var(--ink-2);font-weight:400}
.huecos .cero{color:var(--ok)}
.huecos .cero b{color:var(--ok)}
.huecos .alto{color:var(--warn)}
.huecos .alto b{color:var(--warn);font-weight:500}
.pl-prog:hover{background:var(--canvas-soft)}

/* ------------------------------------------------------------- razonamiento */
/* Se lee de arriba abajo como una explicacion, no como una ficha de datos:
   que entendio, como lo comprobo, que decidio y con que reglas armo la tabla. */
.razon{padding:20px 24px 24px}
.razon section{margin-bottom:22px}
.razon section:last-child{margin-bottom:0}
.razon h4{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.125px;
  text-transform:uppercase;color:var(--ink-muted)}
.razon p{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
.razon p.nota{margin-top:8px;font-size:14px;color:var(--ink-muted)}
.razon ul{margin:0;padding-left:18px}
.razon li{font-size:15px;line-height:1.6;color:var(--ink-secondary)}
.razon li b{font-weight:600;color:var(--ink)}
.razon-paso{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--hairline)}
.razon-paso:first-of-type{border-top:none;padding-top:2px}
.razon-paso .ico{flex-shrink:0;width:22px;height:22px;border-radius:var(--r-full);
  background:var(--tint-sky);color:var(--primary);display:grid;place-items:center;
  font-size:12px;font-weight:600}
.razon-paso .que{font-size:15px;color:var(--ink)}
.razon-paso .hallado{font-size:14px;color:var(--ink-secondary);margin-top:3px;
  font-feature-settings:"lnum","tnum"}
.razon-paso .hallado .n{color:var(--ink-faint)}
.razon-paso .porque{font-size:13px;color:var(--ink-faint);margin-top:5px;line-height:1.45}

/* --------------------------------------------------- barras de desplazamiento */
/* En macOS las barras se ocultan solas y una tabla ancha parece que termina
   donde termina la pantalla. En las tablas se dejan SIEMPRE visibles: son la
   unica pista de que hay mas columnas a la derecha.
   Darles ancho por CSS es lo que fuerza a WebKit a usar la barra clasica en
   vez de la superpuesta que se desvanece. */
.table-wrap::-webkit-scrollbar,
.chat-result::-webkit-scrollbar,
.scroll-x::-webkit-scrollbar,
#u-table-wrap::-webkit-scrollbar,
#sql-result>div::-webkit-scrollbar,
.modal-body>div[style*="overflow"]::-webkit-scrollbar{
  width:11px;height:11px;background:var(--canvas-soft)}
.table-wrap::-webkit-scrollbar-thumb,
.chat-result::-webkit-scrollbar-thumb,
.scroll-x::-webkit-scrollbar-thumb,
#u-table-wrap::-webkit-scrollbar-thumb,
#sql-result>div::-webkit-scrollbar-thumb,
.modal-body>div[style*="overflow"]::-webkit-scrollbar-thumb{
  background:var(--ink-faint);border-radius:var(--r-full);
  border:3px solid var(--canvas-soft);background-clip:padding-box}
.table-wrap::-webkit-scrollbar-thumb:hover,
.chat-result::-webkit-scrollbar-thumb:hover,
.scroll-x::-webkit-scrollbar-thumb:hover,
#u-table-wrap::-webkit-scrollbar-thumb:hover{background:var(--ink-muted);
  border:3px solid var(--canvas-soft);background-clip:padding-box}
/* la esquina donde se cruzan las dos barras, sin el gris del navegador */
.table-wrap::-webkit-scrollbar-corner,
.chat-result::-webkit-scrollbar-corner,
#u-table-wrap::-webkit-scrollbar-corner{background:var(--canvas-soft)}
/* la barra horizontal se queda pegada abajo aunque la tabla se desplace */
.table-wrap,.chat-result,#u-table-wrap{overflow:auto;scrollbar-gutter:stable}

/* ------------------------------------------------------------------ acceso */
/* La pantalla de entrada: una tarjeta blanca centrada sobre el papel calido.
   Mismo sistema que el resto, sin adornos: es un tramite, no una portada. */
body.acceso{display:grid;place-items:center;min-height:100vh;background:var(--canvas-soft);
  padding:24px}
.acceso-caja{width:100%;max-width:400px;background:var(--canvas);
  border:1px solid var(--hairline);border-radius:var(--r-lg);padding:32px;
  box-shadow:var(--sh-1)}
.acceso-marca{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.acceso-marca .brand-mark{width:36px;height:36px;border-radius:var(--r-md);
  background:var(--primary);color:#fff;display:grid;place-items:center;
  font-weight:600;font-size:13px}
.acceso-marca .brand-sub{font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink-faint)}
.acceso-caja h1{margin:0 0 6px;font-size:26px;font-weight:700;letter-spacing:-.625px;
  color:var(--ink);line-height:1.23}
.acceso-sub{margin:0 0 24px;font-size:15px;color:var(--ink-muted);line-height:1.5}
/* el titulo deja 6px porque casi siempre le sigue un subtitulo; cuando entra
   directo al formulario necesita el hueco entero */
.acceso-caja h1 + form{display:block;margin-top:26px}
.acceso-enviar{width:100%;justify-content:center;margin-top:4px;padding:11px 18px}
.acceso-error{background:var(--tint-orange);color:var(--sticker-orange-deep);
  border-radius:var(--r-xs);padding:10px 12px;font-size:14px;margin-bottom:14px;
  line-height:1.45}
.acceso-cmd{background:var(--surface-dark);color:#e6e8ec;padding:14px 16px;
  border-radius:var(--r-md);font-family:var(--mono);font-size:12px;line-height:1.6;
  white-space:pre-wrap;word-break:break-all;margin:0}

/* la sesion abierta, al pie del lateral */
.sesion{display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-top:1px solid var(--hairline)}
.sesion .avatar{width:28px;height:28px;border-radius:var(--r-full);flex-shrink:0;
  background:var(--tint-sky);color:var(--primary);display:grid;place-items:center;
  font-size:11px;font-weight:600}
.sesion .quien{flex:1;min-width:0}
.sesion .nombre{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sesion .rol{font-size:11px;color:var(--ink-faint);text-transform:uppercase;
  letter-spacing:.5px}
.sesion button{border:none;background:none;cursor:pointer;color:var(--ink-faint);
  padding:6px;border-radius:var(--r-sm);font-size:12px}
.sesion button:hover{background:var(--canvas-soft);color:var(--ink)}

/* ------------------------------------------------------------- campañas */
/* El tablero es lo único del programa donde el color dice algo: el estado de
   un descanso se lee antes que su texto. Se usan las pegatinas —decorativas por
   sistema— como banda y como punto, nunca como relleno de un botón. */
.tab-icono.luna{color:var(--sticker-purple-deep)}
.tab-badge{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;
  margin-left:6px;border-radius:var(--r-full);background:var(--sticker-purple-deep);
  color:#fff;font-size:10px;font-weight:600;font-feature-settings:"tnum";line-height:1}

/* ---- salud de la audiencia ---- */
.board-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;margin-bottom:var(--s-lg)}
.salud{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:16px 18px;box-shadow:var(--sh-1)}
.salud-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.salud-marca{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.1px;
  color:var(--ink-mute)}
.salud-pct{font-size:22px;font-weight:700;letter-spacing:-.4px;color:var(--ink);
  font-feature-settings:"tnum"}
.salud-pct small{font-size:11px;font-weight:400;color:var(--ink-mute);letter-spacing:0}
.salud-barra{height:8px;border-radius:var(--r-full);background:var(--sticker-purple);
  overflow:hidden;margin:10px 0 8px}
.salud-barra i{display:block;height:100%;background:var(--sticker-teal);
  border-radius:var(--r-full);transition:width .5s ease}
.salud-pie{font-size:12.5px;color:var(--ink-mute);font-feature-settings:"tnum"}
.salud-pie b{color:var(--ink);font-weight:500}
.salud-pie .sep{margin:0 4px;color:var(--hairline-input)}
.salud.cargando .salud-barra i{background:var(--surface-strong)}

.board-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:14px 16px;box-shadow:var(--sh-1)}
.tile-l{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.1px;
  color:var(--ink-mute)}
.tile-v{font-size:24px;font-weight:700;letter-spacing:-.5px;color:var(--ink);margin-top:2px;
  font-feature-settings:"tnum"}
.tile-h{font-size:11px;color:var(--ink-mute);min-height:14px}

/* ---- filtros ---- */
.board-filtros{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.fchip{border:1px solid var(--hairline);background:var(--canvas);border-radius:var(--r-full);
  padding:5px 12px;font-size:13px;color:var(--ink-mute);cursor:pointer}
.fchip:hover{border-color:var(--ink-faint);color:var(--ink)}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fchip:disabled{opacity:.4;cursor:not-allowed}
.board-filtros .filter-count{margin-left:auto}

/* ---- tarjetas ---- */
.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(298px,1fr));gap:14px}
.camp{position:relative;background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:18px 18px 14px;box-shadow:var(--sh-1);
  display:flex;flex-direction:column;gap:10px;overflow:hidden}
.camp::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--surface-strong)}
.camp.dur::before{background:var(--sticker-purple-deep)}
.camp.prog::before{background:var(--sticker-sky)}
.camp.fin::before{background:var(--sticker-green)}
.camp.lib::before{background:var(--sticker-orange)}
.camp-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.camp-marca{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.1px;
  color:var(--ink-mute)}
.camp-estado{font-size:11px;padding:2px 9px;border-radius:var(--r-full);
  background:var(--surface-strong);color:var(--ink-2)}
.camp.dur .camp-estado{background:#efe4fb;color:var(--sticker-purple-deep)}
.camp.prog .camp-estado{background:var(--tint-sky);color:var(--primary)}
.camp.fin .camp-estado{background:var(--tint-green);color:var(--sticker-green)}
.camp.lib .camp-estado{background:var(--tint-orange);color:var(--sticker-orange-deep)}
.camp-nombre{margin:0;font-size:17px;font-weight:700;letter-spacing:-.25px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camp-gente{font-size:13px;color:var(--ink-mute);font-feature-settings:"tnum"}
.camp-gente b{color:var(--ink);font-weight:500;font-size:15px}
.camp-cmd{margin-left:6px;font-family:var(--mono);font-size:11px;color:var(--ink-faint)}

/* el anillo es la cuenta atrás: se entiende de un vistazo cuánto queda */
.camp-reloj{display:flex;align-items:center;gap:12px;padding:10px 0;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.camp-reloj.plano{min-height:52px}
.anillo{width:46px;height:46px;flex-shrink:0;border-radius:var(--r-full);display:grid;
  place-items:center;background:conic-gradient(var(--sticker-purple-deep)
    calc(var(--p,0) * 1%), var(--sticker-purple) 0)}
.anillo span{width:34px;height:34px;border-radius:var(--r-full);background:var(--canvas);
  display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--ink);
  font-feature-settings:"tnum"}
.camp.prog .anillo{background:conic-gradient(var(--sticker-sky) 0, var(--tint-sky) 0)}
.camp-cuando{font-size:12.5px;color:var(--ink-mute);line-height:1.35}
.camp-cuando b{display:block;color:var(--ink);font-weight:500}
.camp-pie{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-mute)}
.camp .avatar{width:24px;height:24px;border-radius:var(--r-full);flex-shrink:0;
  display:grid;place-items:center;background:var(--surface-strong);color:var(--ink-2);
  font-size:10px;font-weight:600}
.camp-quien{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camp-cuando-creo{margin-left:auto;color:var(--ink-faint);font-size:11.5px;flex-shrink:0}
.camp-acciones{display:flex;flex-wrap:wrap;gap:6px}
.camp-acciones .btn{padding:5px 10px;font-size:12.5px}
.camp-acciones a.btn{text-decoration:none;color:var(--ink)}

.board-vacio{background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:44px 32px;text-align:center;color:var(--ink-mute)}
.board-vacio h3{margin:0 0 8px;font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--ink)}
.board-vacio p{margin:0 auto;max-width:460px;font-size:14px;line-height:1.45}

/* ---- historial ---- */
.hist{display:flex;flex-direction:column;gap:2px}
.hist-fila{display:grid;grid-template-columns:96px 1fr auto auto;gap:10px;align-items:center;
  padding:8px 10px;border-radius:var(--r-sm);font-size:12.5px}
.hist-fila:nth-child(odd){background:var(--canvas-soft)}
.hist-acc{font-size:10px;text-transform:uppercase;letter-spacing:.1px;padding:2px 8px;
  border-radius:var(--r-full);background:var(--surface-strong);color:var(--ink-2);
  text-align:center}
.hist-acc.crear{background:var(--tint-green);color:var(--sticker-green)}
.hist-acc.liberar{background:var(--tint-orange);color:var(--sticker-orange-deep)}
.hist-acc.descansar{background:#efe4fb;color:var(--sticker-purple-deep)}
.hist-det{color:var(--ink-2)}
.hist-quien,.hist-en{color:var(--ink-faint);font-size:11.5px}

/* ---- opciones del guardado ---- */
.opcion-caja{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;
  border:1px solid var(--hairline);border-radius:var(--r-md);margin-bottom:12px;
  cursor:pointer;background:var(--canvas)}
.opcion-caja.anidada{display:block;cursor:default;background:var(--canvas-soft)}
.opcion-caja.apagada{opacity:.45}
.opcion-linea{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.opcion-caja input[type=checkbox],.opcion-linea input[type=checkbox]{margin-top:2px;
  accent-color:var(--primary);width:15px;height:15px;flex-shrink:0}
.opcion-caja b,.opcion-linea b{display:block;font-weight:500;color:var(--ink);font-size:14px}
.opcion-caja small,.opcion-linea small{display:block;margin-top:2px;font-size:12px;
  color:var(--ink-mute);line-height:1.4}
.rango{margin-top:12px}
.rango.apagada{opacity:.45;pointer-events:none}
.rango-rapido{display:flex;gap:6px;margin-bottom:10px}
.rango .row2{gap:10px}
.rango .campo{margin-bottom:0}
.rango input[type=date]{width:100%;padding:8px 10px;border:1px solid var(--hairline-input);
  border-radius:var(--r-xs);background:var(--canvas);font-size:14px}
.rango input[type=date]:focus{outline:none;border-color:var(--primary)}
.rango-nota{margin-top:8px;font-size:12px;color:var(--ink-mute);font-feature-settings:"tnum"}
.rango-nota.mal{color:var(--danger)}

/* ---- el aviso de descansos junto al resultado ---- */
.desc-barra{display:flex;align-items:center;gap:8px;padding:0 20px 12px;flex-shrink:0;
  font-size:12.5px;color:var(--ink-mute);font-feature-settings:"tnum"}
.desc-barra b{color:var(--ink-2);font-weight:500}
.desc-punto{width:7px;height:7px;border-radius:var(--r-full);flex-shrink:0;
  background:var(--sticker-purple-deep)}
.desc-barra.off .desc-punto{background:var(--sticker-orange)}
.desc-barra.off b{color:var(--sticker-orange-deep)}
.desc-barra .menos{color:var(--ink-faint)}
.desc-toggle{border:none;background:none;padding:0;cursor:pointer;color:var(--link);
  font-size:12.5px;text-decoration:underline;text-underline-offset:2px}
.desc-toggle:hover{color:var(--link-active)}

/* ---- el momento en que la base queda guardada ---- */
.modal.limpio .festejo{padding:32px 30px 24px;text-align:center}
.festejo h3{margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:-.3px;color:var(--ink)}
.festejo p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-mute)}
.festejo p b{color:var(--ink-2);font-weight:500}
.festejo-anillo{width:84px;height:84px;margin:0 auto 18px;border-radius:var(--r-full);
  display:grid;place-items:center;background:conic-gradient(var(--sticker-purple-deep) 100%,
  var(--sticker-purple) 0);animation:sella .5s cubic-bezier(.2,.9,.3,1.4)}
.festejo-anillo span{width:68px;height:68px;border-radius:var(--r-full);background:var(--canvas);
  display:grid;place-items:center;font-size:17px;font-weight:700;color:var(--ink);
  letter-spacing:-.4px;font-feature-settings:"tnum"}
.festejo-acciones{display:flex;gap:8px;justify-content:center;margin-top:22px}
@keyframes sella{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .festejo-anillo{animation:none}
  .salud-barra i{transition:none}
}

/* --------------------------------------------------- tabla a pantalla completa */
/* Va por debajo del modal (z-index 40) a propósito: desde una fila maximizada se
   sigue abriendo la evidencia, y esa tiene que quedar encima. */
.pantalla{position:fixed;inset:0;z-index:30;background:var(--canvas);
  display:flex;flex-direction:column}
.pantalla-barra{display:flex;align-items:center;gap:16px;flex-shrink:0;
  padding:14px 20px;border-bottom:1px solid var(--hairline);background:var(--canvas)}
.pantalla-titulo h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.35px;
  color:var(--ink);font-feature-settings:"tnum"}
.pantalla-titulo .head-sub{display:block;font-size:12.5px;color:var(--ink-mute);margin-top:1px}
.pantalla-barra .btn{margin-left:auto;flex-shrink:0}
.pantalla-cuerpo{flex:1;overflow:auto;scrollbar-gutter:stable}
.pantalla-cuerpo table.grid{min-width:100%}
kbd{font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:var(--r-xs);
  background:var(--surface-strong);color:var(--ink-mute)}

.btn.icono{padding:6px 9px;color:var(--ink-mute)}
.btn.icono:hover{color:var(--ink)}
.card-head.con-accion{display:flex;align-items:center;gap:12px}
.card-head.con-accion .btn{margin-left:auto;font-size:14px}

/* el teléfono verificado: cifras tabulares y sin envolver */
td.tel{font-feature-settings:"lnum","tnum";white-space:nowrap;color:var(--ink)}

/* ------------------------------------------- rango de fechas del resultado */
.est-barra.fechas{border-top:none;padding-top:0}
.est-barra.fechas .et{flex-shrink:0}
.fecha-inp{padding:5px 9px;border:1px solid var(--hairline-input);border-radius:var(--r-sm);
  background:var(--canvas);font-size:13.5px;color:var(--ink);
  font-feature-settings:"lnum","tnum"}
.fecha-inp:focus{border-color:var(--primary);outline:none;box-shadow:var(--sh-1)}
.est-barra.fechas .hasta{color:var(--ink-mute);font-size:13px}
.col-fecha{font-family:var(--mono);font-size:11px;color:var(--ink-mute);
  background:var(--canvas-soft);padding:2px 7px;border-radius:var(--r-sm)}

/* ---------------------------------- mientras se vuelve a consultar un turno */
/* El aviso va en la propia barra que se acaba de tocar. La tabla se atenúa para
   que nadie lea como definitivas unas cifras que están a punto de cambiar. */
.recargando-aviso{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  color:var(--primary);white-space:nowrap}
.msg-bot.recargando .chat-result,
.msg-bot.recargando .huecos,
.msg-bot.recargando .res-sum{opacity:.4;pointer-events:none;
  transition:opacity .15s ease}
.msg-bot.recargando .res-head .btn{pointer-events:none;opacity:.5}

/* el filtro de teléfono comparte forma con el de descansos */
.desc-barra.tel .desc-punto{background:var(--sticker-teal)}
.desc-barra.tel.on .desc-punto{background:var(--sticker-green)}
/* tres posturas no caben en un enlace: van como segmentado, más pequeño que el
   de los filtros porque aquí vive dentro de una línea de texto */
.tel-posturas{margin-left:auto;flex-shrink:0}
.tel-posturas button{padding:3px 9px;font-size:12px}

/* --------------------------------------------------- barra del hilo de chat */
/* Dice que el asistente recuerda lo anterior —que no es obvio— y da la salida
   para cuando eso estorba. Solo aparece con conversación empezada. */
.chat-barra{display:flex;align-items:center;gap:14px;flex-shrink:0;
  padding:10px 18px;border-bottom:1px solid var(--hairline);background:var(--canvas)}
.chat-hilo{font-size:13px;color:var(--ink-mute)}
.chat-hilo b{color:var(--ink);font-weight:600;font-feature-settings:"tnum"}
.chat-barra .btn{margin-left:auto}

/* ============================================================== dashboard */
.dash-filtros{display:flex;align-items:center;gap:8px;padding:0 0 16px;flex-wrap:wrap}
.chip-periodo{padding:6px 14px;border:1px solid var(--hairline-input);border-radius:var(--r-full);
  background:var(--canvas);font-size:13.5px;color:var(--ink-mute);cursor:pointer}
.chip-periodo:hover{border-color:var(--ink-faint);color:var(--ink)}
.chip-periodo.on{background:var(--surface-dark);border-color:var(--surface-dark);color:#fff}
.dash-nota{margin-left:auto;font-size:12.5px;color:var(--ink-mute)}

.fig{margin:0 0 18px;background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.fig figcaption{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;
  padding:16px 20px 12px;border-bottom:1px solid var(--hairline)}
.fig h4{margin:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--ink)}
.fig figcaption p{margin:3px 0 0;font-size:12.5px;color:var(--ink-mute);max-width:62ch}
/* la leyenda va siempre con dos o más series: la identidad no puede depender
   solo del color, y el punto coloreado va JUNTO al texto, nunca coloreándolo */
.fig-leyenda{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto;padding-top:2px}
.fig-leyenda span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--ink-secondary);white-space:nowrap}
.fig-leyenda i{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.fig-lienzo{padding:12px 14px 6px}
.fig-svg{width:100%;height:auto;display:block;overflow:visible}
.fig-tick{font-size:11px;fill:var(--ink-mute);font-family:var(--sans);
  font-feature-settings:"lnum","tnum"}
.fig-hit{fill:transparent;cursor:crosshair}
.fig-hit:hover{fill:var(--ink);fill-opacity:.03}
.fig-vacio{padding:30px;text-align:center;color:var(--ink-mute);font-size:13.5px}
.fig-tabla{max-height:420px;border-top:none;border-radius:0}
.fig .pt{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:8px;
  vertical-align:baseline}
.fig .pt.vacio{background:var(--hairline-input)}
/* la fila de mandos de la tabla del 80/20: los filtros a la izquierda y las
   dos acciones —copiar y descargar— al final, en la misma linea */
.par-acciones{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
/* el nombre de un producto no cabe en los 216px que le bastan a un estatus:
   dentro de una figura la etiqueta de la barra manda mas ancho */
.fig .bar-row{grid-template-columns:minmax(200px,1fr) 2fr 86px 62px}
/* la segunda fila de los mandos del 80/20: el mes o el rango de fechas, que
   solo aparece cuando se elige esa forma de acotar */
.par-rango{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-6px 0 16px}
.par-rango .et{font-size:12.5px;color:var(--ink-mute)}
/* los chips del filtro por sexo, dentro de una barra de aviso */
.desc-barra .desc-chips{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.desc-barra .desc-enlace{font-size:12.5px;color:var(--link);white-space:nowrap}

.fig-tip{position:fixed;z-index:60;pointer-events:none;background:var(--surface-dark);
  color:#fff;padding:7px 11px;border-radius:var(--r-md);font-size:12.5px;
  max-width:420px;box-shadow:var(--sh-2);font-feature-settings:"lnum","tnum"}

/* la fila del periodo elegido en la pestaña Nuevos */
tr.clickable.elegida td{background:var(--tint-sky)}
tr.clickable.elegida td:first-child{box-shadow:inset 3px 0 0 var(--primary)}

/* la nota que explica una figura, bajo el lienzo */
.fig-nota{padding:4px 20px 16px;border-top:1px solid var(--hairline);margin-top:8px}
.fig-nota p{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-secondary);
  max-width:78ch}
.fig-nota p.fig-aviso{color:var(--ink-mute);border-left:3px solid var(--sticker-orange);
  padding-left:12px;background:var(--tint-naranja);border-radius:0 6px 6px 0;
  padding:10px 12px;margin-top:14px}

/* ------------------------------------------- controles del universo, en fila */
/* Conjunto y año son excluyentes dentro de su grupo, así que van como control
   segmentado: ocupan una fila en vez de tres y se lee de un vistazo cuál está
   activo. Las explicaciones largas viven en el title, no en pantalla. */
.r-barra{padding-bottom:10px}
.r-grupos{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.segmentado{display:inline-flex;border:1px solid var(--hairline-input);
  border-radius:var(--r-md);overflow:hidden;background:var(--canvas)}
.segmentado button{border:none;background:none;cursor:pointer;padding:6px 11px;
  font-size:13px;color:var(--ink-mute);display:inline-flex;align-items:baseline;
  gap:6px;border-right:1px solid var(--hairline)}
.segmentado button:last-child{border-right:none}
.segmentado button:hover{background:var(--canvas-soft);color:var(--ink)}
.segmentado button.on{background:var(--surface-dark);color:#fff}
.segmentado button i{font-style:normal;font-size:11px;opacity:.65;
  font-feature-settings:"lnum","tnum"}
.r-barra{gap:10px}
/* columnas y descarga van juntos al extremo: los dos hablan del archivo, no de
   lo que se ve, y separarlos haría que «Columnas» pareciera un filtro más */
.r-acciones{margin-left:auto;display:flex;gap:8px;flex-shrink:0;align-items:center}
#r-columnas{display:inline-flex;align-items:center;gap:6px}
#r-columnas i{font-style:normal;font-size:11px;opacity:.7;
  font-feature-settings:"lnum","tnum"}
/* el buscador cede ancho para que los filtros y la descarga quepan en la fila */
.r-buscar input{width:170px}
/* en pantallas estrechas el buscador encoge y los conteos de cada botón se
   esconden: esas cifras ya están en las tarjetas de arriba, y sin ellas la
   descarga sigue cabiendo en la misma fila */
/* la etiqueta larga es la buena; la corta solo sale cuando no cabe la otra */
.segmentado .corta,.chip-tel .corta{display:none}
.chip-tel .larga{margin-left:2px}
/* la fila lleva tres grupos, el formato, las columnas y la descarga: los
   botones van más apretados de lo que irían solos */
.r-grupos .segmentado button{padding:6px 9px}
/* Por debajo de 1700 la fila deja de caber entera —medido con todo puesto:
   los tres grupos, «Formato 52», columnas y descarga—: se van los conteos —que
   están completos en las tarjetas de encima—, «Con teléfono» pasa a «Con tel.»
   y el botón de columnas se queda en su icono. Lo que ceden es justo lo que
   necesita la descarga para no bajar de fila. */
@media (max-width:1700px){
  .r-buscar input{width:150px}
  .segmentado button i,.chip-tel i{display:none}
  .segmentado button,.chip-tel{padding:6px 9px}
  .segmentado .larga{display:none}
  .segmentado .corta{display:inline}
}
/* «Columnas» conserva su palabra y su cifra mientras haya hueco: es lo más
   nuevo de la fila y un icono suelto no dice qué abre. Medido con todo puesto:
   a 1440 aún sobran 111 px y a 1380 solo 51, que no dan para las dos cosas. */
@media (max-width:1400px){
  #r-columnas .larga,#r-columnas i{display:none}
}
@media (max-width:1520px){
  .r-buscar input{width:104px}
  .r-grupos .segmentado button,.chip-tel{padding:6px 7px;font-size:12.5px}
  .r-grupos{gap:7px}
}
/* último recurso antes de partir la fila: el buscador se queda en su lupa y el
   texto de «Formato 52» en su icono. Los dos siguen diciendo qué son al pasar
   el ratón, y son los dos controles que menos se usan de la fila. */
@media (max-width:1340px){
  .r-buscar input{width:64px}
  .chip-tel .larga{display:none}
  .chip-tel .corta{display:inline}
  .r-grupos{gap:5px}
  .r-barra{gap:7px}
}
/* el panel de columnas del archivo */
.r-cols-nota{margin:0 0 12px;font-size:12.5px;color:var(--ink-mute);line-height:1.5}
/* la columna puesta a mano va separada de la lista: no es una más que marcar,
   es algo que se escribe */
.r-fija{margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline)}
.r-fija h4{margin:0 0 6px;font-size:13px;font-weight:600}
.r-fija p{margin:0 0 10px;font-size:12.5px;color:var(--ink-mute);line-height:1.5}
.r-fija-campos{display:flex;gap:8px}
.r-fija-campos input{flex:1;min-width:0;padding:7px 10px;font:inherit;font-size:13px;
  border:1px solid var(--hairline-input);border-radius:var(--r-sm);
  background:var(--canvas);color:var(--ink)}
.r-fija-campos input:focus{outline:none;border-color:var(--primary)}
.r-fija-eco{margin:9px 0 0;font-size:12.5px;color:var(--ink-mute)}
.r-fija-eco b{color:var(--ink);font-weight:600}
.facet b{font-weight:600;font-feature-settings:"lnum"}
.r-pie{padding:0 24px 12px;font-size:12.5px;color:var(--ink-mute)}
.r-pie b{color:var(--ink)}
/* la línea que describe el archivo lleva sus dos ajustes dentro: subrayado
   punteado para que se vean pulsables sin gritar como un enlace */
.r-pie a{color:var(--link);text-decoration:none;
  border-bottom:1px dashed currentColor;cursor:pointer}
.r-pie a:hover{color:var(--link-active);border-bottom-style:solid}

/* el filtro de teléfono: es un interruptor, no una opción de un grupo, así que
   va suelto y no dentro de un segmentado */
.chip-tel{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;
  border:1px solid var(--hairline-input);border-radius:var(--r-md);
  background:var(--canvas);font-size:13px;color:var(--ink-mute);cursor:pointer}
.chip-tel:hover{border-color:var(--ink-faint);color:var(--ink)}
/* encendido se pinta igual que un boton elegido del segmentado de al lado:
   en toda la fila "activo" quiere decir lo mismo, fondo solido y tinta blanca */
.chip-tel.on{background:var(--surface-dark);border-color:var(--surface-dark);
  color:#fff;font-weight:500}
.chip-tel.on:hover{background:var(--surface-dark);border-color:var(--surface-dark);
  color:#fff}
.chip-tel.on i{opacity:.7}
/* el formato cuelga del filtro de teléfono: va pegado a él, mas cerca que la
   separacion normal de la fila, para que se lea como su continuacion y no como
   un tercer filtro suelto */
.chip-sub{margin-left:-5px;border-left-style:dashed}
.chip-sub.on{border-left-style:solid}
.chip-tel i{font-style:normal;font-size:11px;opacity:.7;
  font-feature-settings:"lnum","tnum"}

/* ===================================================== bases adicionales */
/* La pestaña tiene dos mitades que responden a dos preguntas distintas: qué
   listas hay cargadas, y cuánta gente comparten. Van separadas por su propio
   encabezado en vez de mezcladas, porque se consultan en momentos distintos. */
.b-barra{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;padding:20px 24px 12px}
.b-barra h3{margin:0 0 4px;font-size:15px;font-weight:600}
.b-nota{margin:0;font-size:12.5px;color:var(--ink-mute);line-height:1.5;max-width:64ch}
.b-nota.pie{padding:10px 4px 0}
.b-vacio,.b-cargando{margin:0 24px 20px;padding:18px 20px;border-radius:var(--r-md);
  background:var(--canvas-soft);color:var(--ink-mute);font-size:13px;line-height:1.6}
.b-cargando{display:flex;align-items:center;gap:10px}
.b-tabla td{vertical-align:top}
.b-arch{font-size:11.5px;color:var(--ink-faint);margin-top:2px}
.b-cmd{cursor:pointer;font-family:var(--mono);font-size:12px;padding:2px 7px;
  border-radius:var(--r-xs);background:var(--tint-sky);color:var(--primary)}
.b-cmd:hover{background:var(--primary);color:#fff}
.b-borrar{border:none;background:none;padding:0;cursor:pointer;font-size:12px;
  color:var(--ink-faint);text-decoration:underline;text-underline-offset:2px}
.b-borrar:hover{color:var(--sticker-orange)}
.b-tabla .menos,.b-matriz .menos{display:block;font-size:11.5px;color:var(--ink-faint)}

/* subir: la zona de soltar y la vista previa */
.b-soltar{display:flex;align-items:center;justify-content:center;min-height:86px;
  border:1.5px dashed var(--hairline-input);border-radius:var(--r-md);
  cursor:pointer;color:var(--ink-mute);font-size:13px;text-align:center;padding:12px}
.b-soltar:hover,.b-soltar.encima{border-color:var(--primary);color:var(--primary);
  background:var(--tint-sky)}
.b-campos{display:flex;gap:12px;margin:16px 0 0}
.b-campos label{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;
  font-size:12.5px;color:var(--ink-mute)}
.b-campos input,.b-campos select{padding:7px 10px;font:inherit;font-size:13px;
  color:var(--ink);border:1px solid var(--hairline-input);
  border-radius:var(--r-sm);background:var(--canvas)}
.b-campos input:focus,.b-campos select:focus{outline:none;border-color:var(--primary)}
.b-eco{margin:10px 0 0;font-size:12.5px;color:var(--ink-mute);line-height:1.6}
.b-eco b{color:var(--ink);font-weight:600}
.b-eco .aviso{color:var(--sticker-orange-deep)}
.b-muestra{max-height:210px;margin-top:14px;border:1px solid var(--hairline);
  border-radius:var(--r-sm)}
.b-muestra td{white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}

/* cuánto comparten */
.b-fuentes{display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 4px}
.chip-f{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;
  border:1px solid var(--hairline-input);border-radius:var(--r-full);
  background:var(--canvas);font-size:13px;color:var(--ink-mute);cursor:pointer}
.chip-f:hover{border-color:var(--ink-faint);color:var(--ink)}
.chip-f.on{border-color:var(--ink-faint);color:var(--ink);font-weight:500}
.chip-f .pt{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.chip-f i{font-style:normal;font-size:11px;opacity:.6;font-feature-settings:"lnum","tnum"}
.b-venn{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:16px 24px 8px}
.venn{width:340px;max-width:100%;flex-shrink:0}
.venn-n{font-size:13px;font-weight:600;text-anchor:middle;fill:var(--ink);
  font-feature-settings:"lnum","tnum"}
.venn-n.g{font-size:14px}
.venn-lista{display:flex;flex-direction:column;gap:7px;font-size:13px}
.venn-f{display:flex;align-items:center;gap:8px}
.venn-f .pt{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.venn-f .menos{color:var(--ink-faint);font-size:12px}
.venn-f.total{margin-top:6px;padding-top:9px;border-top:1px solid var(--hairline)}
.b-matriz td.propio{color:var(--ink-faint)}
/* la tabla del catálogo: las columnas cortas no deben partirse, y la lista de
   nombres de columna no debe empujar a las demás fuera de la pantalla */
.b-tabla td,.b-tabla th{white-space:nowrap}
.b-tabla td:nth-child(5){white-space:normal;max-width:320px}
.b-tabla td:nth-child(5) .menos{white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:320px}
.b-acciones{display:flex;gap:8px;flex-shrink:0}
.b-uni{display:flex;flex-wrap:wrap;gap:26px;padding:4px 24px 12px;font-size:13px}
.b-uni-n b{font-size:19px;font-weight:600;font-feature-settings:"lnum","tnum"}
.b-uni-n .menos{color:var(--ink-mute);margin-left:5px}
.b-mas{display:block;margin-top:3px;border:none;background:none;padding:0;
  cursor:pointer;font-size:11.5px;color:var(--link)}
.b-mas:hover{color:var(--link-active);text-decoration:underline}

/* la lista de combinaciones, para cuando hay más fuentes de las que caben en
   un diagrama: una fila por grupo de gente que está exactamente en las mismas */
.upset{padding:8px 24px 4px;font-size:13px}
.up-cab,.up-fila{display:flex;align-items:center;gap:14px;padding:5px 0}
.up-fila{border-top:1px solid var(--hairline)}
.up-cab{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.up-puntos{display:flex;gap:5px;flex-shrink:0}
.up-p{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--hairline-input);
  background:var(--canvas);box-sizing:border-box}
.up-cab-n{width:11px;font-size:9px;font-weight:700;text-align:center;
  text-transform:uppercase}
.up-que{flex:0 0 clamp(180px,26%,340px);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:var(--ink-mute)}
.up-que b{color:var(--ink);font-weight:600}
.up-barra{flex:1;min-width:60px;height:14px;background:var(--canvas-soft);
  border-radius:3px;overflow:hidden}
.up-barra span{display:block;height:100%;background:var(--surface-dark);
  border-radius:3px}
.up-n{flex:0 0 108px;text-align:right;font-weight:600;
  font-feature-settings:"lnum","tnum"}
.up-n .menos{display:inline-block;margin-left:6px;font-weight:400;
  color:var(--ink-faint);font-size:11.5px}
.b-lapiz{border:none;background:none;padding:0;margin-left:7px;cursor:pointer;
  font-size:11.5px;color:var(--link)}
.b-lapiz:hover{color:var(--link-active);text-decoration:underline}
/* «la primera fila ya son datos» y las cabeceras que se pueden escribir */
.b-sincab{display:flex;align-items:center;gap:7px;margin-top:14px;font-size:13px;
  color:var(--ink-2);cursor:pointer}
.b-sincab .menos{color:var(--ink-faint);font-size:12px}
.b-muestra thead th{padding:4px 5px}
.b-muestra thead input[data-col]{width:100%;min-width:92px;box-sizing:border-box;
  padding:4px 7px;font:inherit;font-size:12px;font-weight:600;color:var(--ink);
  border:1px solid var(--hairline-input);border-radius:var(--r-xs);
  background:var(--canvas)}
.b-muestra thead input[data-col]:focus{outline:none;border-color:var(--primary)}
/* los trozos del diagrama se pueden pulsar */
/* El anillo necesita más sitio que el Venn de tres: los nombres van dentro del
   dibujo y el lienzo crece con el número de círculos. */
.venn.venn-anillo{width:520px;height:auto;display:block}
.venn-nombre{font-size:12px;font-weight:600;text-anchor:middle;fill:var(--ink);
  letter-spacing:-.01em;pointer-events:none}
.venn-pie{flex:1 1 280px;min-width:260px;font-size:12.5px;line-height:1.55;
  color:var(--ink-mute)}
.venn-pie p{margin:0 0 9px}
.venn-resto{margin-top:4px;border-top:1px solid var(--hairline);padding-top:9px}
.venn-resto summary{cursor:pointer;color:var(--ink-mute)}
.venn-resto summary:hover{color:var(--ink)}
.venn-resto-l{display:flex;flex-direction:column;gap:2px;margin-top:8px;
  max-height:220px;overflow:auto}
.venn-r-f{display:flex;gap:10px;align-items:baseline;padding:3px 6px;
  border-radius:5px;cursor:pointer}
.venn-r-f:hover,.venn-r-f:focus-visible{background:var(--canvas-soft);outline:none}
.venn-r-f b{font-feature-settings:"lnum","tnum";min-width:62px;text-align:right;
  color:var(--ink)}
.venn-r-f span{font-size:12px}
@media (max-width:900px){.venn.venn-anillo{width:100%}}

/* Los nombres de las bases son largos y pueden ser muchas, así que esta barra
   sí envuelve; las otras tres posturas caben siempre en una línea. */
.desc-barra.excl{flex-wrap:wrap}
/* No es un segmentado: se pueden marcar VARIAS a la vez, así que cada una es un
   interruptor suelto y lo dice con su palomita. Un segmentado prometía que al
   elegir una se soltaba la anterior, que no es lo que hace. */
.excl-bases{display:inline-flex;gap:6px;flex-wrap:wrap;max-width:100%}
/* Un trozo del padrón no es una base: se distingue sin gritar. */
.chip-f.derivada{border-style:dashed}

.ex-una,.ex-todas{display:inline-block;padding:1px 7px;border-radius:var(--r-full);
  font-size:11.5px;border:1px solid var(--hairline)}
.ex-una{background:var(--canvas-soft);color:var(--ink)}
.ex-todas{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.ex-marcas-f{flex:0 0 auto}

.ex-marca{font-style:normal;font-size:10.5px;letter-spacing:.02em;
  text-transform:uppercase;opacity:.55;margin-left:2px}

.chip-excl{padding:4px 10px;border:1px solid var(--hairline);border-radius:var(--r-full);
  background:var(--canvas);color:var(--ink-mute);font-size:12px;cursor:pointer;
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-excl:hover:not(:disabled){border-color:var(--ink-faint);color:var(--ink)}
.chip-excl.on{background:var(--ink);border-color:var(--ink);color:var(--canvas);
  font-weight:500}
.chip-excl:disabled{opacity:.5;cursor:default}

.venn-r{cursor:pointer}
.venn-r rect{fill:transparent}
.venn-r:hover rect,.venn-r:focus-visible rect{fill:rgba(0,0,0,.06)}
.venn-r:focus-visible{outline:none}
.venn-r:focus-visible rect{stroke:var(--primary);stroke-width:1.5}
.up-fila[data-region]{cursor:pointer}
.up-fila[data-region]:hover{background:var(--canvas-soft)}
.up-fila[data-region]:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.rg-tabla{max-height:380px;border:1px solid var(--hairline);
  border-radius:var(--r-sm);margin-top:12px}
.rg-pie{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 2px 0;font-size:12.5px}
.rg-pasos{display:flex;align-items:center;gap:10px}
.rg-pasos button{border:1px solid var(--hairline-input);background:var(--canvas);
  border-radius:var(--r-xs);width:26px;height:24px;cursor:pointer;color:var(--ink)}
.rg-pasos button:disabled{opacity:.4;cursor:default}
/* nunca contactar */
.ex-caja{padding:0 24px 16px}
.ex-buscar{max-width:340px;margin-bottom:10px}
.ex-buscar input{width:100%}
.ex-tabla{max-height:320px;border:1px solid var(--hairline);border-radius:var(--r-sm)}
.ex-cargas{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ex-cargas .chip-f{cursor:default}
.ex-x{border:none;background:none;padding:0 0 0 4px;cursor:pointer;
  color:var(--ink-faint);font-size:14px;line-height:1}
.ex-x:hover{color:var(--sticker-orange)}

/* --- opciones de descarga de la pestaña Nuevos ------------------------- */
/* Las mismas que el Universo, pero dentro del modal: ahí no hay barra de
   filtros donde ponerlas, porque lo que se ve es un gráfico y no un padrón. */
.n-dl-fila{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.n-dl-fila>div{display:flex;gap:6px;flex-wrap:wrap}
.n-dl-etq{font-size:12.5px;color:var(--ink-mute);min-width:64px}
.n-dl-h{margin:16px 0 6px;font-size:13px}
.n-dl-check{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
.n-dl-check input{margin:0}

/* --- el mapeo de columnas del archivo --------------------------------- */
/* Cada fila dice qué dato sale y cómo se llamará. La flecha entre los dos no
   es decoración: es lo que hace que se lea «el correo → PersonEmail» y no como
   dos ajustes sueltos que por casualidad están en la misma línea. */
.map-caja{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.map-cab{display:flex;gap:8px;padding:8px 12px;background:var(--surface-2);
  font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-mute)}
.map-cab span:first-child{width:214px;flex:none}
.map-fila{display:flex;align-items:center;gap:8px;padding:7px 12px;
  border-top:1px solid var(--line)}
.map-fila select{width:214px;flex:none;padding:6px 8px;font:inherit;font-size:13px;
  border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink)}
.map-fila select:has(+ .map-valor){width:126px}
.map-valor{width:80px;flex:none}
.map-fila input[data-campo="nombre"]{flex:1;min-width:120px}
.map-fila input{flex:1;min-width:0;padding:6px 9px;font:inherit;font-size:13px;
  border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink)}
.map-fila input:focus,.map-fila select:focus{outline:none;border-color:var(--primary)}
.map-fila.mala input[data-campo="nombre"]{border-color:var(--sticker-orange)}
.map-flecha{color:var(--ink-mute);font-size:13px;flex:none}
.map-btn{flex:none;width:26px;height:26px;padding:0;line-height:1;cursor:pointer;
  border:1px solid var(--line);border-radius:6px;background:var(--surface);
  color:var(--ink-mute);font-size:12px}
.map-btn:hover:not(:disabled){color:var(--ink);border-color:var(--ink-mute)}
.map-btn:disabled{opacity:.3;cursor:default}
.map-quita:hover{color:var(--sticker-orange);border-color:var(--sticker-orange)}
.map-pie{display:flex;gap:8px;padding:9px 12px;border-top:1px solid var(--line);
  background:var(--surface-2)}

/* --- la barra de la pestaña Nuevos ------------------------------------ */
/* Dos controles y una explicación en UNA fila. Antes eran dos filas de chips
   sueltos, una debajo de otra, y no se leía que fueran dos cosas distintas:
   qué conjunto se mira y con qué grano. Y el cuerpo iba a sangre —el panel es
   `flush`, sin padding—, así que los textos acababan pegados al borde de la
   pantalla mientras las tarjetas de arriba sí tenían margen. */
#n-cuerpo{padding:16px 24px 24px}
.n-barra{display:flex;align-items:center;gap:14px;margin:0 0 16px}
/* segmentado: los dos botones son un solo control, no dos chips que por
   casualidad están juntos */
.seg{display:inline-flex;flex:none;background:var(--surface-2);
  border:1px solid var(--hairline-input);border-radius:var(--r-full);padding:3px}
.seg button{padding:6px 16px;border:none;border-radius:var(--r-full);
  background:none;font:inherit;font-size:13.5px;color:var(--ink-mute);cursor:pointer;
  white-space:nowrap}
.seg button:hover:not(.on){color:var(--ink)}
.seg button.on{background:var(--surface-dark);color:#fff}
.seg-sec{margin-left:auto}
.seg-sec button{font-size:13px;padding:6px 14px}
/* la explicación cede antes que los botones: se recorta y, si la ventana no da
   para los tres, desaparece. Nunca empuja un control fuera de la fila. */
.n-barra-nota{flex:1;min-width:0;font-size:12.5px;color:var(--ink-mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1180px){.n-barra-nota{display:none}}
@media (max-width:620px){
  .n-barra{flex-wrap:wrap}
  .seg-sec{margin-left:0}
}

/* --- los ajustes de un resultado del asistente ------------------------- */
/* Todos con la misma rejilla: qué se ajusta a la izquierda, el control a la
   derecha y la nota debajo del control. Así las decisiones se leen en vertical
   y se comparan de un vistazo, en vez de ser barras de formas distintas. */
.ajustes{margin:10px 0 0;border:1px solid var(--hairline);border-radius:var(--r-md);
  background:var(--canvas);overflow:hidden}
.ajustes + .ajustes{margin-top:8px}
.ajustes-tit{font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;color:var(--ink-faint);padding:8px 14px 7px;
  background:var(--canvas-soft);border-bottom:1px solid var(--hairline)}
.ajuste{display:grid;grid-template-columns:132px minmax(0,1fr);gap:5px 14px;
  align-items:center;padding:9px 14px;border-top:1px solid var(--hairline)}
.ajuste:nth-of-type(1){border-top:none}
.ajuste-que{font-size:12.5px;color:var(--ink-mute);display:flex;align-items:center;gap:7px}
/* el punto dice, de un vistazo, cuáles están tocados */
.ajuste-que::before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:var(--hairline-input)}
.ajuste.on .ajuste-que{color:var(--ink)}
.ajuste.on .ajuste-que::before{background:var(--primary)}
.ajuste-ctrl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
/* dentro de la rejilla los controles van pegados a la izquierda: el
   `margin-left:auto` que traian de las barras viejas los mandaba al otro
   extremo y rompia la unica columna que hace legible todo esto */
.ajuste-ctrl .tel-posturas,
.ajuste-ctrl .desc-chips{margin-left:0}
.ajuste-nota{grid-column:2;margin:0;font-size:12px;line-height:1.45;color:var(--ink-mute)}
.ajuste-nota b{color:var(--ink-secondary);font-weight:600}
.ajuste .est-lista{grid-column:1/-1;margin-top:2px}
@media (max-width:760px){
  .ajuste{grid-template-columns:1fr}
  .ajuste-nota{grid-column:1}
}

/* --- «Se descargará», en el pie del Universo -------------------------- */
/* Iba al final de una frase gris larga y nadie lo leía. Es lo único de esa
   línea que se puede cambiar y lo que hay que mirar antes de pulsar, así que
   sale del renglón y se pone en su propio recuadro, a la derecha, alineado con
   el botón que describe. */
.r-pie{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.r-viendo{flex:1;min-width:0}
.r-archivo{display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:5px 12px;border:1px solid var(--hairline-input);border-radius:var(--r-full);
  background:var(--canvas);font-size:12.5px;color:var(--ink-mute)}
.r-archivo b{color:var(--ink);font-weight:600}
/* un punto entre cada dato: sin él los tres se leen como una sola frase */
.r-archivo > :not(svg):not(b) + :not(svg)::before{content:"·";margin-right:8px;
  color:var(--ink-faint)}
.r-archivo svg{width:13px;height:13px;flex:none;color:var(--ink-mute)}
.r-dato{color:var(--ink);font-feature-settings:"tnum"}
.r-archivo a{color:var(--link);text-decoration:none;
  border-bottom:1px dashed currentColor;cursor:pointer}
.r-archivo a:hover{color:var(--link-active);border-bottom-style:solid}
@media (max-width:900px){.r-archivo{margin-left:0}}

/* --- los universos, en una fila que se desplaza ------------------------ */
/* Son once en Sears y no caben. Envolviendo se comían el alto de la tabla, que
   es lo que se ha venido a mirar, así que se desplazan. Un carrusel a secas
   esconde la mitad y nadie la encuentra: por eso lleva flechas, los bordes
   difuminados del lado por el que queda algo, y la rueda del ratón. */
.r-tabs-wrap{display:flex;align-items:center;gap:2px;padding:14px 24px 0;
  min-width:0}
.r-tabs{display:flex;align-items:center;gap:6px;flex:1;min-width:0;
  flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.r-tabs::-webkit-scrollbar{display:none}
/* el difuminado dice que hay más por ese lado sin ocupar sitio */
.r-tabs.mas-der{mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
.r-tabs.mas-izq{mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
.r-tabs.mas-izq.mas-der{mask-image:linear-gradient(to right,transparent,#000 40px,
  #000 calc(100% - 40px),transparent)}
.r-tab{display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:6px 12px;border:1px solid transparent;border-radius:var(--r-full);
  background:none;font:inherit;font-size:13px;color:var(--ink-mute);cursor:pointer;
  white-space:nowrap}
.r-tab:hover:not(.on){background:var(--surface-2);color:var(--ink)}
.r-tab.on{background:var(--surface-dark);border-color:var(--surface-dark);color:#fff}
/* la cifra va dentro: es lo que se compara al elegir universo */
.r-tab i{font-style:normal;font-size:11.5px;opacity:.65;font-feature-settings:"tnum"}
.r-tab.on i{opacity:.8}
/* una base sin archivo se ve, pero apagada: está creada y esperando */
.r-tab.vacia:not(.on){color:var(--ink-faint)}
.r-tab-sep{width:1px;height:18px;flex:none;background:var(--hairline);margin:0 4px}
.r-flecha{flex:none;width:24px;height:26px;padding:0;line-height:1;cursor:pointer;
  border:none;background:none;color:var(--ink-mute);font-size:19px;border-radius:var(--r-md)}
.r-flecha:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.r-flecha:disabled{opacity:.25;cursor:default}
.r-flecha.hidden{display:none}

/* el separador entre bloques del panorama: no es una fila de datos */
.grid-sep td{background:var(--surface-2);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-mute);font-weight:600;padding:7px 12px}

/* la barra de descarga de Nuevos: el resumen y el botón, a la derecha del título */
.n-dl-barra{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.n-dl-barra .r-archivo{cursor:pointer}
.n-dl-barra .r-archivo:hover{border-color:var(--ink-faint)}

/* --- el mapa de universos --------------------------------------------- */
/* Cada marca es una galaxia y sus bases la orbitan. El tamaño es cuánta gente
   hay, el grosor del puente cuánta comparten, y el color de qué marca es —dos
   tonos, no uno por base: con catorce cuerpos un tono cada uno estaría por
   encima del techo y sus pares serían indistinguibles sin ver bien el color.
   Lo que identifica es el nombre, que va escrito al lado de cada cuerpo. */
.mapa-lienzo{padding:16px 24px 28px}
.mapa-svg{display:block;width:100%;height:auto;max-height:66vh}
.mapa-astro{transition:fill-opacity .12s}
.mapa-cuerpo:hover .mapa-astro{fill-opacity:1}
.mapa-toque{cursor:pointer}
.mapa-puente{transition:opacity .12s}
.mapa-toque:hover + .mapa-puente{opacity:.62}
/* el nombre y la cifra van en tinta, nunca en el color de la serie */
.mapa-nom{font-size:12.5px;font-weight:600;fill:var(--ink)}
.mapa-nom.grande{font-size:14.5px}
.mapa-nom.apagado{font-weight:500;fill:var(--ink-faint)}
.mapa-cifra{font-size:11.5px;fill:var(--ink-mute);font-feature-settings:"tnum"}
.mapa-leyenda{display:flex;align-items:center;gap:16px;font-size:12.5px;
  color:var(--ink-mute);padding:0 0 6px}
.mapa-leyenda span{display:inline-flex;align-items:center;gap:6px}
.mapa-leyenda i{width:11px;height:11px;border-radius:50%;flex:none}
.mapa-leyenda i.vacio{background:none;border:1.5px dashed #b8b4b0}
/* las bases sin archivo: fuera del cielo, en una banda propia. Sin gente no
   cruzan con nadie, y en el mapa solo servían para pisarse los nombres */
.mapa-espera{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 2px 0;border-top:1px solid var(--hairline);margin-top:6px}
.mapa-espera-tit{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-faint);font-weight:600}
.mapa-espera-uno{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--ink-faint)}
.mapa-espera-uno i{width:9px;height:9px;border-radius:50%;flex:none;
  border:1.5px dashed currentColor}
/* las cifras escritas sobre los puentes: opcionales, para enseñar el diagrama
   sin tener que ir pasando el ratón. Llevan halo del color del lienzo porque
   caen encima de las líneas y sin él no se leen */
.mapa-puente-cifra{font-size:11.5px;font-weight:600;fill:var(--ink-mute);
  font-feature-settings:"tnum";paint-order:stroke;stroke:var(--canvas);
  stroke-width:3.5px;stroke-linejoin:round}
.mapa-leyenda .btn.on{background:var(--surface-dark);border-color:var(--surface-dark);
  color:#fff}

/* --- Usuarios · días sin compra por tramos (static/js/recencia.js) ---
   La recurrencia es ordinal (1 → 2–3 → 4+): una sola tonalidad de claro a
   oscuro, no colores distintos. El tono claro queda bajo 3:1 sobre blanco, por
   eso cada tramo lleva su cifra escrita y la tabla está a un clic. */
:root{--rec-1:#7db5f0;--rec-2:#2f86e0;--rec-3:#0a4f99}
.rec-host{padding:0 20px 8px}
.rec{border:1px solid var(--hairline);border-radius:14px;background:var(--canvas);padding:0 18px}
.rec>summary{cursor:pointer;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px 0;list-style:none}
.rec>summary::-webkit-details-marker{display:none}
.rec>summary::before{content:'▸';color:var(--ink-faint);transition:transform .15s}
.rec[open]>summary::before{transform:rotate(90deg)}
.rec-titulo{font-size:15px;font-weight:600;color:var(--ink)}
.rec-sub{font-size:12px;color:var(--ink-mute)}
.rec-universos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.rec-u{border:1px solid var(--hairline);background:var(--canvas);border-radius:999px;padding:5px 12px;font:inherit;font-size:12px;cursor:pointer;color:var(--ink-secondary)}
.rec-u.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.rec-u:disabled{opacity:.6;cursor:default}
.rec-cuerpo{position:relative;padding-bottom:12px}
.rec-cargando,.rec-error{font-size:13px;color:var(--ink-mute);padding:16px 0}
.rec-error{color:var(--warn)}
.rec-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.rec-kpis>div{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:var(--canvas-soft);border-radius:10px}
.rec-kpis span{font-size:11.5px;color:var(--ink-mute)}
.rec-kpis b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.rec-kpis small{font-size:11px;color:var(--ink-mute)}
.rec-leyenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:12px;color:var(--ink-secondary);margin-bottom:8px}
.rec-leyenda span{display:inline-flex;align-items:center;gap:6px}
.rec-leyenda i,.rec-tip i{display:inline-block;width:10px;height:10px;border-radius:3px}
.rec-acciones{margin-left:auto;gap:6px!important}
.rec-grafica{display:flex;flex-direction:column;gap:4px}
.rec-fila{display:grid;grid-template-columns:130px minmax(0,1fr) 150px 92px;align-items:center;gap:12px;padding:5px 8px;border-radius:8px;cursor:pointer}
.rec-fila:hover,.rec-fila:focus-visible{background:var(--canvas-soft);outline:none}
.rec-fila:focus-visible{box-shadow:0 0 0 2px var(--primary)}
.rec-fila.sin{cursor:default}.rec-fila.sin:hover{background:transparent}
.rec-etq{font-size:12.5px;color:var(--ink-secondary)}
.rec-barra{display:block;height:22px}
.rec-pila{display:flex;height:100%;gap:2px;min-width:2px}
.rec-pila>span{min-width:0}
.rec-pila>span:first-child{border-radius:0}
.rec-pila>span:last-child{border-radius:0 4px 4px 0}
.rec-nota{font-size:11.5px;color:var(--ink-mute);line-height:22px}
.rec-val{font-variant-numeric:tabular-nums;font-size:13px;text-align:right;white-space:nowrap}
.rec-val small{color:var(--ink-mute);margin-left:4px}
.rec-ir{font-size:11.5px;color:var(--primary);opacity:0;transition:opacity .15s;white-space:nowrap}
.rec-fila:hover .rec-ir,.rec-fila:focus-visible .rec-ir{opacity:1}
.rec-tip{position:absolute;z-index:5;pointer-events:none;background:var(--canvas);border:1px solid var(--hairline);box-shadow:var(--sh-2);border-radius:8px;padding:9px 11px;font-size:12px;min-width:210px;line-height:1.7}
.rec-tip div{display:flex;align-items:center;gap:7px}.rec-tip div b{margin-left:auto;font-variant-numeric:tabular-nums}
.rec-tip div small{color:var(--ink-mute);width:44px;text-align:right}
.rec-tip>small{display:block;color:var(--ink-mute);margin-top:4px}
.rec-tabla{margin-top:12px;overflow:auto;border:1px solid var(--hairline);border-radius:8px}
.rec-nota-pie{font-size:11.5px;color:var(--ink-mute);line-height:1.6;margin:12px 0 0}
.rec-opciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.rec-opcion{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px 14px;border:1px solid var(--hairline);border-radius:10px;background:var(--canvas);cursor:pointer;font:inherit;color:var(--ink)}
.rec-opcion:hover{border-color:var(--primary)}.rec-opcion span{font-size:12px;color:var(--ink-mute)}
@media(max-width:900px){.rec-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.rec-fila{grid-template-columns:96px minmax(0,1fr) 110px}.rec-ir{display:none}}