/* Baleal · panel › Inicio (primeros pasos, números, sellos por día, actividad) y herramientas de Clientes. */
.tabs{grid-template-columns:repeat(6,1fr);gap:2px}
.tabs button{font-size:11.5px;padding:8px 0 7px;min-width:0}
.isub{margin:-6px 0 0;color:var(--muted);font-size:14px}

/* primeros pasos */
.ipasos{border:1px solid var(--line);border-radius:20px;background:var(--bg);padding:16px 16px 10px;display:flex;flex-direction:column;gap:10px}
.iph{display:flex;align-items:center;justify-content:space-between;gap:12px}
.iph h2{margin:0;font-size:16px}
.iph p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.ipbar{height:6px;border-radius:99px;background:var(--soft);overflow:hidden}
.ipbar i{display:block;height:100%;border-radius:99px;background:var(--ink);transition:width .25s cubic-bezier(.23,1,.32,1)}
.ipasos ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ipasos li button{appearance:none;border:0;background:none;width:100%;display:flex;align-items:center;gap:12px;padding:8px 4px;min-height:52px;text-align:left;cursor:pointer;border-radius:12px;font-family:inherit;color:var(--ink)}
.ipasos li button:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.ipn{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.ipn svg{width:14px;height:14px}
.ipasos li.ok .ipn{background:var(--ok);border-color:var(--ok);color:#fff}
.ipasos li b{display:block;font-size:14px}
.ipasos li small{display:block;font-size:12.5px;color:var(--muted)}
.ipasos li.ok b{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(98,98,106,.5)}

/* números */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi span{font-size:13px;color:var(--muted);font-weight:600}
.kpi b{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi small{font-size:12px;color:var(--muted)}

/* columnas */
.igrid{display:flex;flex-direction:column;gap:16px}
/* En celular las dos columnas se funden y "Por atender" sube primero */
.icol{display:contents}
.iaten{order:-1}
.ichart,.iact,.ipv,.iaten{border:1px solid var(--line);border-radius:20px;background:var(--bg);padding:16px}
.ichart h2,.iact h2,.ipv h2,.iaten h2{margin:0;font-size:16px}
.ichart{overflow:hidden}

/* sellos por día: una sola serie, un solo color; hoy en tinta */
.ich-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ich-h span{font-size:13px;color:var(--muted)}
.ich-h b{color:var(--ink);font-variant-numeric:tabular-nums}
.bars{display:flex;align-items:flex-end;gap:4px;height:120px;border-bottom:1px solid var(--line)}
.bc{flex:1;height:100%;display:flex;align-items:flex-end;position:relative}
.bc i{display:block;width:100%;border-radius:4px 4px 0 0;background:var(--c-bar);transform-origin:bottom}
.bc.hoy i{background:var(--ink)}
.bc .tt{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:#fff;font-size:12px;font-weight:600;padding:5px 8px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:2}
.bc:first-child .tt{left:0;transform:none}
.bc:last-child .tt{left:auto;right:0;transform:none}
.bx{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:6px;font-weight:600}
@media (hover:hover) and (pointer:fine){
  .bc:hover .tt{opacity:1}
  .bc:hover i{background:var(--c-bar-hi)}
  .bc.hoy:hover i{background:var(--ink)}
  .iact li button:hover,.iat:not(:disabled):hover,.ipasos li button:hover{background:var(--soft2)}
  .chip:hover{border-color:var(--ink)}
}

/* actividad */
.iact ul{list-style:none;margin:10px 0 0;padding:0}
.iact li button,.iat{appearance:none;border:0;background:none;width:100%;display:flex;align-items:center;gap:12px;padding:8px 6px;min-height:52px;text-align:left;cursor:pointer;border-radius:12px;font-family:inherit;color:var(--body);font-size:14px}
.iact li button:focus-visible,.iat:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.ia-i{width:32px;height:32px;border-radius:50%;background:var(--soft);display:grid;place-items:center;flex:none;color:var(--ink)}
.ia-i svg{width:16px;height:16px}
.ia-i.g{background:var(--okbg);color:var(--ok)}
.ia-i.w{background:var(--c-warn-bg);color:var(--c-warn-t)}
.ia-t{flex:1;min-width:0}
.ia-t b{color:var(--ink)}
.iact small{color:var(--muted);font-size:12px;white-space:nowrap}
.iempty{margin:10px 0 4px;color:var(--muted);font-size:14px}

/* tu tarjeta y por atender */
.ipv{display:flex;flex-direction:column;gap:12px}
.ipv .card{transform:none}
.iaten{display:flex;flex-direction:column;gap:6px}
.iat b{display:block;color:var(--ink);font-size:14px}
.iat small{display:block;color:var(--muted);font-size:12.5px}
.iat:disabled{cursor:default;opacity:.75}

/* clientes: filtros, orden, CSV */
.ctools{display:flex;flex-direction:column;gap:10px;min-width:0}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:2px}
.chips::-webkit-scrollbar{display:none}
.chip{appearance:none;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:99px;border:1.5px solid var(--line);background:var(--bg);font-family:inherit;font-size:13.5px;font-weight:600;color:var(--body);cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .16s cubic-bezier(.23,1,.32,1)}
.chip b{font-size:12px;font-weight:700;background:var(--soft);color:var(--ink);border-radius:99px;padding:1px 7px;font-variant-numeric:tabular-nums}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[aria-pressed=true] b{background:rgba(255,255,255,.18);color:#fff}
.chip:active{transform:scale(.97)}
.chip:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.ctrow{display:flex;gap:8px;align-items:center}
.csort{flex:1;min-width:0}
.csort select{width:100%;min-height:44px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--soft2);font-size:15px;color:var(--ink);font-family:inherit}
.ctrow .btn.sm{min-height:44px;flex:none}
.ctrow .btn svg{width:16px;height:16px}
.cnote{margin:0;font-size:13px;color:var(--c-warn-t2);background:var(--c-warn-bg);border:1px solid var(--c-warn-line);border-radius:12px;padding:10px 12px}
.tag.w{background:var(--c-warn-bg);color:var(--c-warn-t)}

/* ficha: invitar a volver y notas */
.volver{display:flex;flex-direction:column;gap:10px;border:1px solid var(--c-warn-line);background:var(--c-warn-bg2);border-radius:18px;padding:14px}
.volver b{display:block;font-size:15px;color:var(--c-warn-t2)}
.volver small{display:block;font-size:13px;color:var(--c-warn-t)}
.volver .btn{background:#166534}
.volver .btn svg{width:18px;height:18px}
.sinpromo{margin:0;padding:12px 14px;border-radius:14px;background:var(--c-gray-2);font-size:14px;color:var(--body)}
.nota textarea{min-height:84px;resize:vertical}
.nrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nrow small{color:var(--muted);font-size:12.5px}
.nrow .btn.sm{min-height:44px}
.nmut{margin:0;font-size:13px;color:var(--muted)}

@media (min-width:600px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){
  .kpis{grid-template-columns:repeat(3,1fr);gap:12px}
  .ipasos ol{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
  .ipasos li button{flex-direction:column;align-items:flex-start;padding:10px;min-height:96px;gap:8px}
}
@media (min-width:1180px){
  .kpis{grid-template-columns:repeat(6,1fr)}
  .igrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:18px;align-items:start}
  .icol{display:flex;flex-direction:column;gap:16px;min-width:0}
  .iaten{order:0}
}
@media (prefers-reduced-motion:reduce){.bc i,.ipbar i,.chip{animation:none;transition:none}}

/* ===================== Panel · Boleto premium (7 nov 2026) =====================
   Gris de sistema, superficies blancas sin borde, letra del sistema.
   Archivo condensada (--disp) solo en titulares y números grandes. */
html.in-panel{--soft:var(--c-gray);--soft2:var(--c-gray-2);--line:var(--c-hair);--muted:var(--c-muted);--body:var(--c-body);--oro:var(--acc-chart)}
html.in-panel ::selection{background:color-mix(in srgb,var(--acc-chart) 18%,transparent)}
html.in-panel body,html.in-panel .app{background:var(--c-gray)}
html.in-panel .app{border-color:transparent;box-shadow:none}
html.in-panel .top{background:rgba(242,242,244,.86);border-bottom-color:transparent}
html.in-panel .tabs{background:var(--c-seg)}
html.in-panel #view h1:not(.fname){font-family:var(--disp);font-stretch:66%;font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:0;font-size:clamp(44px,12vw,56px);text-wrap:balance}
html.in-panel #view h1:not(.fname) em{font:inherit;font-size:1em;letter-spacing:inherit;color:inherit}
html.in-panel h2{font-weight:650}
html.in-panel .panel,html.in-panel .list,html.in-panel .ipasos,html.in-panel .ichart,html.in-panel .iact,html.in-panel .ipv,html.in-panel .iaten,html.in-panel .kpi{border-color:transparent;background:#fff;border-radius:16px}
html.in-panel .stat{background:#fff;border-radius:16px}
html.in-panel .stat b,html.in-panel .kpi b{font-family:var(--disp);font-stretch:62%;font-weight:800;font-size:44px;line-height:1;letter-spacing:0;margin:2px 0}
html.in-panel .kpi span{font-size:13px}

/* hoy: anillo contra tu mejor día del mes y el botón que más se usa */
.ihoy{background:#fff;border-radius:22px;padding:18px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 18px;align-items:center}
.ring{width:112px;height:112px;position:relative;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.ring circle{fill:none;stroke-width:3.2}
.ring .rb{stroke:var(--c-hair-2)}
.ring .rf{stroke:var(--oro);stroke-linecap:round;transition:stroke-dashoffset .28s cubic-bezier(.23,1,.32,1)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-stretch:62%;font-weight:800;font-size:56px;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.ih-tx{min-width:0}
.ih-k{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ih-v{font-size:19px;line-height:1.25;font-weight:600;color:var(--ink);margin:4px 0 6px;text-wrap:balance}
.ih-tr{font-size:15px;color:var(--muted)}
.ih-tr.up{color:#1A7F37;font-weight:600}
.ih-btn{grid-column:1/-1;min-height:60px;font-size:18px;border-radius:999px;background:var(--c-ink)}
.ih-btn svg{width:20px;height:20px}

/* actividad: iniciales, qué pasó y una etiqueta */
.iact ul{margin-top:6px}
.iact li{position:relative}
.iact li+li::before{content:"";position:absolute;top:0;left:58px;right:6px;border-top:1px solid var(--c-hair-2)}
.iact li button{min-height:62px;padding:8px 6px}
.ia-av{width:40px;height:40px;border-radius:50%;background:var(--c-press);color:var(--c-body);display:grid;place-items:center;font-size:14px;font-weight:600;flex:none}
.iact .ia-t b{display:block;font-size:15.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iact .ia-t small{display:block;font-size:13.5px;color:var(--muted);white-space:normal}
.itag{flex:none;font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--c-hair-2);color:var(--c-body);font-variant-numeric:tabular-nums}
.itag.g{background:var(--acc-wash);color:var(--acc-wash-t)}
.itag.n{background:#E6EEFB;color:#1D4A9E}

/* sellos por día: una serie en gris, hoy en dorado */
html.in-panel .bc i{background:var(--c-bar)}
html.in-panel .bc.hoy i{background:var(--oro)}
@media (hover:hover) and (pointer:fine){
  html.in-panel .bc:hover i{background:var(--c-bar-hi)}
  html.in-panel .bc.hoy:hover i{background:var(--oro)}
  .ih-btn:hover{background:var(--c-ink-hover)}
}

@media screen and (min-width:900px){
  html.is-desk.in-panel{--desk:var(--c-gray);--warm:var(--c-ink)}
  html.in-panel .phead h1:not(.fname){font-size:64px}
  html.in-panel .phead p{font-size:15px;color:var(--muted)}
  html.in-panel .sbrand b{font-family:var(--disp);font-stretch:66%;font-weight:800;font-size:19px;letter-spacing:.16em}
  html.in-panel .dstats .stat{border:0}
  html.in-panel .dstats .stat b{font-size:44px}
  html.in-panel .dlist,html.in-panel .dpane{border-color:transparent}
  html.in-panel .cfgsplit .cfgact{background:linear-gradient(to top,var(--c-gray) 72%,rgba(242,242,244,0))}
  html.in-panel .phone{border-color:transparent}
  .ihoy{grid-template-columns:auto minmax(0,1fr) auto;padding:22px 26px;gap:26px}
  .ring{width:124px;height:124px}
  .ring b{font-size:62px}
  .ih-btn{grid-column:auto;width:auto;padding:0 40px;font-size:19px}
}
@media (prefers-reduced-motion:reduce){.ring .rf{transition:none}}

/* panel: botones en píldora, iniciales en gris, sin monoespaciada y pie en letra del sistema */
html.in-panel .btn{border-radius:999px}
html.in-panel .row .av,html.in-panel .drow .av,html.in-panel .dpane .biz .av.plain,html.in-panel #view>.biz .av.plain{background:var(--c-press);color:var(--c-body);border:0;box-shadow:none;font-weight:600}
html.in-panel .url,html.in-panel .cardlink{font-family:var(--font);font-size:14px}
html.in-panel .foot{font-family:var(--font);font-style:normal;font-size:12px}

/* celular: sin barra de arriba ni pie; el negocio arriba y la navegación fija abajo (con safe-area) */
html.in-panel .top,html.in-panel .foot{display:none}
html.in-panel main{padding-top:max(14px,env(safe-area-inset-top,0px));padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.pbiz{display:flex;align-items:center;gap:10px;min-width:0}
.pbiz .av{box-shadow:none}
.pbiz strong{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.in-panel #view>.tabs{animation:none;position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:440px;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-radius:0;padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px));background:rgba(249,249,251,.94);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);border-top:.5px solid rgba(11,11,13,.14)}
html.in-panel .tabs button{min-height:52px;padding:6px 0 4px;gap:3px;font-size:11px;font-weight:600;color:var(--c-muted);border-radius:12px;background:none;box-shadow:none}
html.in-panel .tabs button svg{width:24px;height:24px}
html.in-panel .tabs button[aria-current=page]{color:var(--ink);background:none;box-shadow:none}
html.in-panel .tabs button[aria-current=page] svg{color:var(--acc)}
html.in-panel .tabs button:active{transform:scale(.97)}
.iall{appearance:none;border:0;background:none;width:100%;min-height:48px;margin-top:4px;border-top:1px solid var(--c-hair-2);font:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.iall span{color:var(--muted);font-weight:500}
.iall:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.psal p{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.psal .btn svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.iall:hover{background:var(--soft2)}}

/* Inicio en celular: los 6 números en 3 columnas compactas para que la actividad suba */
@media (max-width:599px){
  html.in-panel .kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  html.in-panel .kpi{padding:10px 10px 11px;border-radius:14px;gap:0}
  html.in-panel .kpi span{font-size:11.5px;line-height:1.2;order:2}
  html.in-panel .kpi b{font-size:34px;order:1;margin:0 0 4px}
  html.in-panel .kpi small{font-size:12px;line-height:1.25;order:3;margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* Inicio › Este mes (Pro, sql/16) */
.ipro{border:1px solid var(--line);border-radius:20px;background:var(--bg);padding:16px;display:flex;flex-direction:column;gap:14px}
.ipro h2{margin:0;font-size:16px}
.ipro .kpis{grid-template-columns:1fr 1fr}
.ipro .kpi{background:var(--c-gray-2);border-color:transparent}
.ipro .btn.sm{align-self:flex-start}
.ipro-b{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.ipro-b h3{margin:0;font-size:14px;font-weight:650;color:var(--ink)}
.ipe{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.ipe th,.ipe td{padding:9px 4px;text-align:right;border-top:1px solid var(--c-hair-2)}
.ipe thead th{border-top:0;font-size:12px;font-weight:600;color:var(--muted);padding-top:2px}
.ipe th:first-child{text-align:left;font-weight:600;color:var(--ink);max-width:0;width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ipe thead th:first-child{color:var(--muted)}
.icum{list-style:none;margin:0;padding:0}
.icum li button{appearance:none;border:0;background:none;width:100%;display:flex;align-items:center;gap:12px;padding:8px 6px;min-height:52px;text-align:left;cursor:pointer;border-radius:12px;font-family:inherit;color:var(--body);font-size:14px;transition:transform .12s cubic-bezier(.23,1,.32,1)}
.icum li button:active{transform:scale(.98)}
.icum li button:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.icum .ia-av svg{width:18px;height:18px}
.icum small{display:block;color:var(--muted);font-size:12px}
html.in-panel .ipro{border-color:transparent;background:#fff;border-radius:16px}
html.in-panel .ipro .kpi{background:var(--c-gray)}
@media (hover:hover) and (pointer:fine){.icum li button:hover{background:var(--soft2)}}