/* ==========================================================================
   FideliA — sistema de diseño
   Un solo lugar para colores, tipografía y componentes.
   ========================================================================== */

:root{
  /* Marca */
  --ink:#0B0B0C;
  --ink-2:#5A5A5F;
  --ink-3:#8C8C93;
  --accent:#F5A623;
  --accent-ink:#8A5A05;
  --accent-soft:#FDF1DC;

  /* Superficies */
  --bg:#F3F0EA;
  --card:#FFFFFF;
  --card-2:#FBFAF7;
  --line:#E6E1D8;
  --line-2:#D3CCC0;

  /* Semánticos */
  --ok:#12784F;
  --ok-soft:#E1F2E9;
  --danger:#B02525;
  --danger-soft:#FBE7E7;
  --warn:#8A6410;
  --warn-soft:#FBEFD5;

  /* Barra lateral */
  --side:#0B0B0C;
  --side-2:#1B1B1E;
  --side-text:#F2F2F3;
  --side-muted:#7A7A81;
  --side-label:#5C5C63;

  /* Tipografía */
  --f-display:'Outfit','Segoe UI',system-ui,sans-serif;
  --f-ui:'DM Sans','Segoe UI',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;

  /* Medidas */
  --side-w:236px;
  --r:10px;
  --r-sm:6px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-ui); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ---------- Aviso de maqueta ---------- */
.demobar{
  background:var(--accent); color:#3A2703; text-align:center;
  font-size:13.5px; padding:9px 16px; position:relative; z-index:60;
}
.demobar b{font-weight:700}

/* ---------- Estructura ---------- */
.shell{display:flex; min-height:calc(100vh - 36px)}

.side{
  width:var(--side-w); flex:none; background:var(--side); color:var(--side-text);
  display:flex; flex-direction:column; padding:22px 0 14px;
  position:sticky; top:0; height:calc(100vh - 36px); overflow-y:auto;
}
.side-brand{padding:0 20px 22px}
.wordmark{
  font-family:var(--f-display); font-weight:800; font-size:26px;
  letter-spacing:-.02em; line-height:1; color:#fff;
}
.wordmark i{font-style:normal; color:var(--accent)}
.side-biz{font-size:12.5px; color:var(--side-muted); margin-top:5px}

.side-group{margin-bottom:4px}
.side-label{
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--side-label); padding:14px 20px 6px;
}
.side a{
  display:flex; align-items:center; gap:11px; padding:9px 14px; margin:1px 12px;
  border-radius:8px; text-decoration:none; color:var(--side-text);
  font-size:14.5px; line-height:1.3;
}
.side a:hover{background:#161618}
.side a.on{background:var(--side-2); font-weight:500}
.side a svg{width:17px; height:17px; flex:none; opacity:.85}
.side .count{
  margin-left:auto; background:var(--accent); color:#3A2703;
  font-size:11px; font-weight:700; min-width:20px; height:20px; border-radius:10px;
  display:grid; place-items:center; padding:0 6px;
}
.side-foot{margin-top:auto; padding-top:14px; border-top:1px solid #1E1E21}
.side-foot a{color:var(--side-muted); font-size:13.5px}

.main{flex:1; min-width:0; padding:26px clamp(16px,3vw,34px) 60px}

/* ---------- Encabezado de página ---------- */
.head{display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; margin-bottom:22px}
.head-t{flex:1; min-width:220px}
h1{
  font-family:var(--f-display); font-weight:800; font-size:31px; margin:0;
  letter-spacing:-.025em; line-height:1.1;
}
.sub{color:var(--ink-2); font-size:14px; margin:4px 0 0}
.head-a{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
  border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--card);
  font-size:13.5px; font-weight:500; cursor:pointer; text-decoration:none; color:var(--ink);
  white-space:nowrap;
}
.btn:hover{background:var(--card-2)}
.btn-dark{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn-dark:hover{background:#26262A}
.btn-accent{background:var(--accent); color:#3A2703; border-color:var(--accent); font-weight:600}
.btn-accent:hover{filter:brightness(1.05)}
.btn-sm{padding:5px 11px; font-size:12.5px}

/* ---------- Grupo de filtros ---------- */
.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tab{
  padding:7px 14px; border-radius:var(--r-sm); border:1px solid var(--line-2);
  background:var(--card); font-size:13.5px; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--ink);
}
.tab:hover{background:var(--card-2)}
.tab.on{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:500}
.tab .count{
  background:var(--accent); color:#3A2703; font-size:11px; font-weight:700;
  border-radius:9px; padding:1px 7px;
}
.tab.on .count{background:var(--accent)}

/* ---------- Buscador ---------- */
.search{display:flex; gap:0; margin-left:auto}
.search input{
  border:1px solid var(--line-2); border-right:none;
  border-radius:var(--r-sm) 0 0 var(--r-sm); padding:8px 12px; font:inherit;
  font-size:13.5px; min-width:210px; background:var(--card); color:var(--ink);
}
.search input::placeholder{color:var(--ink-3)}
.search button{
  border-radius:0 var(--r-sm) var(--r-sm) 0; border:1px solid var(--accent);
  background:var(--accent); color:#3A2703; font-weight:600; font-size:13.5px;
  padding:8px 16px; cursor:pointer;
}

/* ---------- Tarjetas KPI ---------- */
.kpis{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-bottom:16px}
.kpi{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 17px 16px;
}
.kpi-l{
  font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-2); display:flex; align-items:center; gap:7px;
}
.kpi-n{
  font-family:var(--f-display); font-weight:800; font-size:34px; line-height:1.1;
  letter-spacing:-.03em; margin:7px 0 3px; font-variant-numeric:tabular-nums;
}
.kpi-f{font-size:12.5px; color:var(--ink-3)}
.kpi.dark{background:var(--ink); border-color:var(--ink); color:#fff}
.kpi.dark .kpi-l{color:#A7A7AE}
.kpi.dark .kpi-f{color:#8C8C93}
.kpi.hot{border-color:var(--accent); background:var(--card)}
.kpi.hot .kpi-n{color:var(--accent)}
.kpi.hot .kpi-f a{color:var(--accent); font-weight:600; text-decoration:none}
.dot{width:7px; height:7px; border-radius:50%; background:#28C76F; display:inline-block}

/* ---------- Paneles ---------- */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.panel-h{
  display:flex; align-items:center; gap:10px; padding:13px 17px;
  border-bottom:1px solid var(--line); font-weight:600; font-size:15px;
}
.panel-h .more{margin-left:auto; font-size:13px; color:var(--ink-2); text-decoration:none}
.panel-h .more:hover{color:var(--accent)}
.panel-b{padding:17px}

.cols{display:grid; gap:14px; grid-template-columns:1fr; align-items:start}
@media(min-width:1080px){ .cols.c-2-1{grid-template-columns:1.35fr 1fr} }

/* ---------- Tablas ---------- */
.tw{overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--r)}
table{border-collapse:collapse; width:100%; min-width:780px; font-size:13.5px}
th{
  text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); padding:11px 15px;
  border-bottom:1px solid var(--line-2); background:var(--card-2); white-space:nowrap;
}
td{padding:11px 15px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--card-2)}
tr.hit{background:var(--accent-soft)}
tr.hit:hover{background:var(--accent-soft)}
.t-name{font-weight:600}
.t-mut{color:var(--ink-2); font-size:12.5px}
.t-mono{font-family:var(--f-mono); font-size:12px; color:var(--ink-2)}
.t-num{font-variant-numeric:tabular-nums}
.t-right{text-align:right}

/* ---------- Píldoras y contadores ---------- */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:20px;
  font-size:11.5px; font-weight:600; white-space:nowrap;
}
.pill-a{background:var(--accent-soft); color:var(--accent-ink)}
.pill-ok{background:var(--ok-soft); color:var(--ok)}
.pill-no{background:var(--danger-soft); color:var(--danger)}
.pill-w{background:var(--warn-soft); color:var(--warn)}
.pill-g{background:#EEEBE4; color:var(--ink-2)}

.vcount{
  display:inline-grid; place-items:center; min-width:30px; height:24px; padding:0 8px;
  border-radius:12px; background:var(--accent-soft); color:var(--accent-ink);
  font-weight:700; font-size:12.5px; font-variant-numeric:tabular-nums;
}
.vcount.now{background:var(--accent); color:#3A2703}

/* ---------- Barra de progreso ---------- */
.prog{display:flex; align-items:center; gap:9px; min-width:150px}
.prog-t{flex:1; height:7px; background:#E4DFD6; border-radius:4px; overflow:hidden}
.prog-f{height:100%; background:var(--accent); border-radius:4px}
.prog-n{font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- Avatar ---------- */
.av{
  width:38px; height:38px; border-radius:9px; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-family:var(--f-display); font-weight:700;
  font-size:16px; flex:none;
}

/* ---------- Lista de filas ---------- */
.rows{display:flex; flex-direction:column}
.row{
  display:flex; align-items:center; gap:13px; padding:13px 17px;
  border-bottom:1px solid var(--line);
}
.row:last-child{border-bottom:none}
.row:hover{background:var(--card-2)}
.row-b{flex:1; min-width:0}
.row-t{font-weight:600; font-size:14px}
.row-s{font-size:12.5px; color:var(--ink-2); margin-top:1px}
.row-a{margin-left:auto; display:flex; align-items:center; gap:8px; flex:none}

/* ---------- Gráfico ---------- */
.chart{display:flex; align-items:flex-end; gap:8px; height:210px; padding:8px 4px 0}
.bar-w{flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%}
.bar-t{flex:1; width:100%; display:flex; align-items:flex-end}
.bar{
  width:100%; background:var(--accent); border-radius:4px 4px 0 0; min-height:3px;
  position:relative;
}
.bar:hover{filter:brightness(1.08)}
.bar-v{
  position:absolute; top:-19px; left:0; right:0; text-align:center; font-size:11px;
  font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.bar-x{font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums}

/* ---------- Estado vacío ---------- */
.empty{padding:64px 24px; text-align:center}
.empty-i{font-size:38px; line-height:1; margin-bottom:14px}
.empty-t{font-family:var(--f-display); font-weight:700; font-size:18px}
.empty-s{color:var(--ink-2); font-size:14px; margin-top:5px}

/* ---------- Formularios ---------- */
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:17px}
.field label{font-size:13px; font-weight:600}
.field label .req{color:var(--danger)}
.field label .opt{font-weight:400; color:var(--ink-3)}
.field input[type=text],.field input[type=tel],.field input[type=email],
.field input[type=password],.field input[type=number],.field select,.field textarea{
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:9px 11px;
  font:inherit; font-size:14px; background:var(--card); color:var(--ink); width:100%;
}
.field input:disabled{background:#EFECE5; color:var(--ink-3)}
.field textarea{min-height:180px; resize:vertical; font-family:inherit}
.hint{font-size:12.5px; color:var(--ink-2); line-height:1.5}
.grid2{display:grid; gap:0 18px; grid-template-columns:1fr}
@media(min-width:760px){ .grid2{grid-template-columns:1fr 1fr} }

.check{display:flex; gap:10px; align-items:flex-start; margin-bottom:17px}
.check input{margin-top:3px; width:16px; height:16px; flex:none; accent-color:var(--accent)}
.check-b label{font-size:14px; font-weight:600; display:block; cursor:pointer}
.check-b .hint{margin-top:3px}

/* ---------- Solapas de configuración ---------- */
.subtabs{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto}
.subtab{
  padding:11px 15px; font-size:14px; text-decoration:none; color:var(--ink-2);
  border-bottom:2px solid transparent; white-space:nowrap; display:flex; gap:7px; align-items:center;
}
.subtab:hover{color:var(--ink)}
.subtab.on{color:var(--ink); font-weight:600; border-bottom-color:var(--ink)}

/* ---------- Bloques de aviso ---------- */
.note{
  border:1px solid var(--line); border-left:3px solid var(--accent);
  background:var(--accent-soft); border-radius:var(--r-sm); padding:13px 15px;
  font-size:13.5px; line-height:1.55;
}
.note-t{font-weight:700; margin-bottom:3px}
.note.danger{border-left-color:var(--danger); background:var(--danger-soft)}
.note.danger .note-t{color:var(--danger)}
.note.ok{border-left-color:var(--ok); background:var(--ok-soft)}
.note.ok .note-t{color:var(--ok)}

/* ---------- Pasos numerados ---------- */
.steps{list-style:none; margin:0; padding:0}
.steps li{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.steps li:last-child{border-bottom:none}
.steps .n{
  width:22px; height:22px; border-radius:50%; background:var(--accent-soft);
  color:var(--accent-ink); display:grid; place-items:center; font-size:11.5px;
  font-weight:700; flex:none;
}

/* ---------- Bloque de URL ---------- */
.urlbox{
  font-family:var(--f-mono); font-size:11.5px; line-height:1.6; word-break:break-all;
  background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 11px; color:var(--ink-2);
}
.lbl{
  font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:5px;
}

.stack{display:flex; flex-direction:column; gap:14px}
.mb0{margin-bottom:0}

.reward-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.reward-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left}
.reward-list .btn{width:auto;white-space:nowrap}