:root{
  --bg:#f4f7fb;--surface:#fff;--border:#dde4ec;--text1:#111827;--text2:#4b5563;--text3:#9ca3af;
  --accent:#102FCF;--accent2:#0a2494;--r-sm:6px;--r-md:10px;--r-lg:16px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text1);min-height:100vh}

/* Header */
header{background:#030F54;color:#fff;padding:1.25rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.safe-top{background:#030F54;height:env(safe-area-inset-top);min-height:8px;width:100%;position:sticky;top:0;z-index:10}
.h-left h1{font-size:1.4rem;font-weight:600;letter-spacing:-.02em;color:#fff}
.h-left p{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:rgba(255,255,255,.4);margin-top:3px;letter-spacing:.05em;text-transform:uppercase}
.h-accent{width:26px;height:3px;background:#C3D945;border-radius:2px;margin-bottom:7px}
.h-right{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.cg{display:flex;flex-direction:column;gap:3px}
.cg label{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.cg select{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;padding:6px 26px 6px 9px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09);color:#fff;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,.45)'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;min-width:170px}
.cg select:focus{outline:none;border-color:var(--accent)}
.cg select option{background:#030F54;color:#fff}
.icon-btn{display:flex;align-items:center;gap:6px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;padding:6px 12px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:rgba(255,255,255,.72);cursor:pointer;transition:background .15s;white-space:nowrap;align-self:flex-end}
.icon-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.icon-btn svg{opacity:.7;flex-shrink:0}

/* ── Menú de cuenta del header ──
   Recoge Categoría, Moneda y las acciones de cuenta. Fuera se quedan
   Cliente, que es lo que más se toca, y la campana, que tiene que poder
   enseñar su globo sin que nadie abra nada. */
.hm{position:relative;align-self:flex-end}
.hm-btn{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.72);cursor:pointer;transition:background .15s}
.hm-btn:hover{background:rgba(255,255,255,.14);color:#fff}
/* Verde Elysis sobre el azul del header. El acento azul de la marca es
   casi el mismo tono que el fondo, asi que el avatar se perdia. */
.hm-ini{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:#C3D945;color:#030F54;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.02em}
.hm-caret{opacity:.6;flex-shrink:0}

.hm-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:246px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:0 10px 34px rgba(3,15,84,.18);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s,transform .15s,visibility .15s}
.hm-panel.open{opacity:1;visibility:visible;transform:translateY(0)}

.hm-id{padding:.45rem .55rem .55rem}
.hm-id-nom{display:block;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;
  color:var(--text1);font-weight:600;word-break:break-word}

.hm-sec{padding:.4rem .55rem}
.hm-sec>label{display:block;font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:5px}
.hm-sec select{width:100%;font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;
  padding:6px 26px 6px 9px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--bg);color:var(--text1);cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888780'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center}
.hm-sec select:focus{outline:none;border-color:var(--accent)}
.hm-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.hm-seg{display:flex;gap:2px;padding:2px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm)}
.hm-seg button{flex:1;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:600;
  padding:5px 0;border:none;border-radius:calc(var(--r-sm) - 1px);background:none;
  color:var(--text3);cursor:pointer;transition:background .15s,color .15s}
.hm-seg button:hover{color:var(--text1)}
.hm-seg button.on{background:var(--accent);color:#fff}
.hm-fx{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:var(--text2);margin-top:6px}
.hm-fx strong{color:var(--text1);font-weight:600}
/* Tipo de cambio de respaldo: el de config.json en vez del vivo de Banxico.
   Se avisa con color porque un numero viejo se lee igual que uno bueno. */
.hm-fx.hm-fx-fijo,.hm-fx.hm-fx-fijo strong{color:#b4462f}

.hm-sep{height:1px;background:var(--border);margin:.4rem .55rem}

.hm-item{display:flex;align-items:center;gap:9px;width:100%;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;text-align:left;
  padding:.5rem .55rem;border:none;border-radius:var(--r-sm);background:none;
  color:var(--text1);cursor:pointer;transition:background .15s}
.hm-item:hover{background:var(--bg)}
.hm-item svg{opacity:.55;flex-shrink:0}

/* Toast */
#toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--text1);color:#fff;font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;padding:10px 18px;border-radius:var(--r-md);box-shadow:0 4px 20px rgba(0,0,0,.25);border-left:3px solid var(--accent);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none;z-index:200;max-width:320px}
#toast.show{opacity:1;transform:translateY(0)}

/* Drop overlay */
#dropOverlay{display:none;position:fixed;inset:0;background:rgba(26,25,22,.87);z-index:100;align-items:center;justify-content:center;flex-direction:column;gap:14px}
#dropOverlay.show{display:flex}
#dropOverlay p{font-family:'Helvetica Neue',Arial,sans-serif;font-size:1rem;color:#fff;letter-spacing:.04em}
.drop-box{width:240px;height:150px;border:2px dashed var(--accent);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center}

/* Config modal */
#cfgModal{display:none;position:fixed;inset:0;background:rgba(26,25,22,.75);z-index:150;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto}
#cfgModal.show{display:flex}
.cfg-box{background:var(--surface);border-radius:var(--r-lg);padding:2rem;width:100%;max-width:780px;box-shadow:0 8px 40px rgba(0,0,0,.2)}
.cfg-box h2{font-size:1.1rem;font-weight:400;margin-bottom:.3rem}
.cfg-box .sub{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;color:var(--text3);margin-bottom:1.5rem}
.cfg-clients{display:flex;flex-direction:column;gap:1.25rem}
.cfg-selector{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.cfg-selector label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text2)}
.cfg-selector select{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;padding:5px 8px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg);color:var(--text1);min-width:200px}
.cfg-selector select:focus{outline:none;border-color:var(--accent)}
.cfg-selector-count{font-size:11px;color:var(--text2)}
.cfg-selector-warn{font-size:11px;color:#b4462f;margin-left:auto}
.cfg-client{border:1px solid var(--border);border-radius:var(--r-md);padding:1rem 1.2rem}
.cfg-client-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;gap:.5rem;flex-wrap:wrap}
.cfg-client-head input{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;padding:5px 8px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg);color:var(--text1);min-width:160px}
.cfg-client-head input:focus{outline:none;border-color:var(--accent)}
.del-btn{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;padding:4px 10px;border-radius:var(--r-sm);border:1px solid #fca5a5;background:#fff5f5;color:#c44;cursor:pointer}
.del-btn:hover{background:#fee2e2}
/* Client inner tabs */
.cfg-tabs{display:flex;gap:2px;border-bottom:1.5px solid var(--border);margin-bottom:1rem}
.cfg-tab{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;cursor:pointer;border:none;background:transparent;color:var(--text3);border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:color .15s,border-color .15s}
.cfg-tab:hover{color:var(--text2)}
.cfg-tab.on{color:var(--text1);border-bottom-color:var(--accent);font-weight:600}
.cfg-panel{display:none}.cfg-panel.on{display:block}
/* Shared field styles */
.cfg-cats{display:flex;flex-direction:column;gap:6px;margin-bottom:.75rem}
.cfg-cat-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cfg-cat-row input{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;padding:4px 8px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg);color:var(--text1)}
.cfg-cat-row input:focus{outline:none;border-color:var(--accent)}
.cfg-cat-row input.code{width:80px}
.cfg-cat-row input.name{flex:1;min-width:120px}
/* units input removed */
.cfg-cat-block{border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;background:var(--bg);margin-bottom:4px}
.cfg-cat-main{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:7px 10px;background:var(--bg2);cursor:pointer;user-select:none}
.cfg-cat-toggle{font-size:9px;color:var(--text3);transition:transform .2s;flex-shrink:0;line-height:1;width:16px;text-align:center}
.cfg-cat-toggle.open{transform:rotate(180deg)}
.cfg-cat-ids{padding:8px 10px 10px;background:var(--bg);display:none}
.cfg-cat-ids.open{display:block}
.cfg-cat-ids label{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;color:var(--text3);letter-spacing:.05em;text-transform:uppercase;display:block;margin-bottom:4px}
.cfg-cat-ids textarea{width:100%;box-sizing:border-box;font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;padding:5px 8px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg);color:var(--text1);resize:vertical;min-height:52px;line-height:1.5}
.cfg-cat-ids textarea:focus{outline:none;border-color:var(--accent)}
.cfg-cat-row .swatch{width:24px;height:24px;border-radius:4px;border:1px solid var(--border);cursor:pointer;flex-shrink:0}
.cfg-cat-row button.rm{background:none;border:none;cursor:pointer;color:var(--text3);font-size:16px;line-height:1;padding:0 4px}
.cfg-cat-row button.rm:hover{color:#c44}
/* col-heads removed */
.add-cat-btn,.add-client-btn,.cfg-save-btn,.cfg-cancel-btn{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;padding:5px 12px;border-radius:var(--r-sm);cursor:pointer}
.cfg-global{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:1rem;padding:.85rem 1rem;background:var(--bg);border-radius:var(--r-md);border:1px solid var(--border)}
.cfg-field{display:flex;flex-direction:column;gap:3px}
.cfg-field label{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.cfg-field input,.cfg-field select{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;padding:5px 8px;border-radius:var(--r-sm);border:1px solid var(--border);background:#fff;color:var(--text1)}
.cfg-field input{width:100px}
.cfg-field select{width:auto;cursor:pointer}
.cfg-field input:focus,.cfg-field select:focus{outline:none;border-color:var(--accent)}
.cfg-field .hint{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;color:var(--text3)}
.cfg-field.wide input{width:160px}
.cfg-field.auto input{width:auto}
.add-cat-btn{border:1px dashed var(--border);background:transparent;color:var(--text2)}
.add-cat-btn:hover{background:var(--bg)}
.add-client-btn{border:1px solid var(--border);background:var(--bg);color:var(--text2);margin-top:.5rem}
.add-client-btn:hover{background:#ece9e4}
.cfg-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:1.5rem;border-top:1px solid var(--border);padding-top:1rem}
.dest-cal-wrap{font-family:'Helvetica Neue',Arial,sans-serif}
.dest-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dest-cal-nav button{background:none;border:1px solid var(--border);border-radius:6px;padding:4px 10px;cursor:pointer;font-size:13px;color:var(--text2)}
.dest-cal-nav button:hover:not(:disabled){background:var(--bg2)}
.dest-cal-nav span{font-size:13px;font-weight:600;color:var(--text1)}
.dest-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dest-cal-dow{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);text-align:center;padding:2px 0}
.dest-cal-day{border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;cursor:pointer;transition:transform .1s;position:relative;height:52px;max-height:52px}
.dest-cal-day:hover{transform:scale(1.08);z-index:2}
.dest-cal-day.empty{cursor:default;background:transparent!important}
.dest-cal-day.empty:hover{transform:none}
.dest-cal-day .cal-num{font-weight:600;line-height:1}
.dest-cal-day .cal-res{font-size:9px;opacity:.8;line-height:1;margin-top:2px}
.cfg-save-btn{background:var(--accent);color:#fff;border:none}
.cfg-save-btn:hover{background:var(--accent2)}
.cfg-cancel-btn{background:var(--bg);color:var(--text2);border:1px solid var(--border)}
.cfg-cancel-btn:hover{background:#ece9e4}
.rev-toggles{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:.1rem}
.rev-toggle{display:flex;align-items:center;gap:5px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:var(--text2);cursor:pointer;user-select:none}
.rev-toggle input[type=checkbox]{width:13px;height:13px;cursor:pointer;border-radius:3px;flex-shrink:0}
.rev-toggle input[type=checkbox].cb-gross{accent-color:#102FCF}
.rev-toggle input[type=checkbox].cb-neto{accent-color:#C3D945}
.rev-toggle input[type=checkbox].cb-pnt{accent-color:#f59e42}
.rev-toggle input[type=checkbox].cb-gp{accent-color:#6366f1}
/* OTA cards */
.ota-list{display:flex;flex-direction:column;gap:10px;margin-bottom:.75rem}
.ota-card{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.ota-card-head{display:flex;align-items:center;gap:8px;padding:.55rem .8rem;background:var(--bg);cursor:pointer;user-select:none}
.ota-card-head .ota-name-inp{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:500;padding:3px 8px;border-radius:var(--r-sm);border:1px solid var(--border);background:#fff;color:var(--text1);flex:1;min-width:140px;cursor:pointer}
.ota-card-head .ota-name-inp:focus{outline:none;border-color:var(--accent)}
.ota-card-head .ota-chevron{font-size:10px;color:var(--text3);margin-left:auto;transition:transform .2s;flex-shrink:0}
.ota-card-head.open .ota-chevron{transform:rotate(180deg)}
.ota-body{display:none;padding:.75rem .9rem;border-top:1px solid var(--border)}
.ota-body.open{display:block}
.ota-section-title{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin-bottom:.5rem;margin-top:.75rem}
.ota-section-title:first-child{margin-top:0}
.ota-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:.5rem}
.ota-field{display:flex;flex-direction:column;gap:3px}
.ota-field label{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.ota-field input,.ota-field select{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;padding:4px 7px;border-radius:var(--r-sm);border:1px solid var(--border);background:#fff;color:var(--text1)}
.ota-field input:focus,.ota-field select:focus{outline:none;border-color:var(--accent)}
.ota-field input.w60{width:60px}
.ota-field input.w80{width:80px}
.ota-field input.w90{width:90px}
.ota-field select.w90{width:90px}
.ota-toggle{display:flex;align-items:center;gap:5px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:var(--text2);cursor:pointer}
.ota-toggle input[type=checkbox]{width:14px;height:14px;cursor:pointer;accent-color:var(--accent)}
.fee-row{display:flex;gap:6px;align-items:center;margin-bottom:4px}
.fee-row input.fee-name{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;padding:3px 6px;border-radius:var(--r-sm);border:1px solid var(--border);background:#fff;color:var(--text1);flex:1;min-width:80px}
.fee-row input.fee-val{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;padding:3px 6px;border-radius:var(--r-sm);border:1px solid var(--border);background:#fff;color:var(--text1);width:65px}
.fee-row select.fee-type{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;padding:3px 5px;border-radius:var(--r-sm);border:1px solid var(--border);background:#fff;color:var(--text1);width:50px}
.fee-row .rm{background:none;border:none;cursor:pointer;color:var(--text3);font-size:15px;line-height:1;padding:0 2px}
.fee-row .rm:hover{color:#c44}
.ota-sep{border:none;border-top:1px solid var(--border);margin:.65rem 0}

/* Main */
main{max-width:1100px;margin:0 auto;padding:1.75rem 2rem 4rem}
#dataBadge{display:none;font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:var(--text3);margin-bottom:1rem;padding:6px 10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);border-left:3px solid var(--accent)}

/* KPIs */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;margin-bottom:1.75rem}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:.7rem .9rem;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);opacity:.25;border-radius:0 0 0 0}
.kpi.hl::before{opacity:1;background:#C3D945}
.kpi-l{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:3px}
.kpi-v{font-size:1.35rem;font-weight:400;color:var(--text1);line-height:1.15}
.kpi-s{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;color:var(--text3);margin-top:2px}

/* Tabs */
.tab-nav{display:flex;gap:2px;margin-bottom:1.5rem;border-bottom:1.5px solid var(--border);overflow:visible}
.tab-btn{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:7px 14px;cursor:pointer;border:none;background:transparent;color:var(--text3);border-bottom:2px solid transparent;margin-bottom:-1.5px;white-space:nowrap;transition:color .15s,border-color .15s}
.tab-btn:hover{color:var(--text2)}
.tab-btn.on{color:var(--text1);border-bottom-color:var(--accent);font-weight:600}
.tab-btn.tab-sep{margin-left:12px;padding-left:14px;border-left:1px solid var(--border)}
.panel{display:none}.panel.on{display:block}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.4rem;box-shadow:var(--shadow);margin-bottom:1.25rem}
.sl{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin-bottom:.5rem}
.sec{margin-bottom:1.5rem}
.note{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:var(--text3);margin-top:5px}
.res-card-section{margin-bottom:1rem}
.res-card-title{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin-bottom:.4rem}
.res-card-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--border)}
.res-card-row:last-child{border-bottom:none}
.res-card-row .lbl{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;color:var(--text2)}
.res-card-row .val{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;color:var(--text1);font-weight:500}
.res-card-row .val.neg{color:#c44}
.res-card-row .val.pos{color:#1d9e75}
.res-card-total{display:flex;justify-content:space-between;align-items:baseline;padding:.6rem 0 0;margin-top:.4rem;border-top:2px solid var(--border)}
.res-card-total .lbl{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;font-weight:600;color:var(--text1)}
.res-card-total .val{font-family:'Helvetica Neue',Arial,sans-serif;font-size:15px;font-weight:700;color:var(--accent)}
.res-badge{display:inline-block;font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:500;margin-left:6px}
.res-not-found{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;color:var(--text3);text-align:center;padding:2rem 0}
.otb-section{margin-bottom:.25rem}
.otb-section-label{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);padding:.6rem 0 .4rem;border-top:1px solid var(--border);margin-bottom:.5rem}
.otb-section:first-child .otb-section-label{border-top:none;padding-top:0}
hr.dv{border:none;border-top:1px solid var(--border);margin:1.4rem 0}
.leg{display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:6px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;color:var(--text2);word-break:break-word}
.leg span{display:flex;align-items:center;gap:4px}
.lb{width:10px;height:10px;border-radius:2px;flex-shrink:0;display:inline-block}
.cw{position:relative;width:100%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}

@media(max-width:640px){
  #elysisLogo{margin:0 auto 2px;}
  .h-left{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;}
  .h-left>p{text-align:center;}
  .h-accent{display:none;}
  header{padding:1rem}
  main{padding:1rem 1rem 3rem}
  .two{grid-template-columns:1fr}
  .h-right{width:100%}
  .cg select{min-width:0;width:100%}
  /* Con el selector de Cliente a ancho completo, la campana y el avatar
     bajan a su propia linea. El panel se ancla al header y no al boton,
     para poder ocupar el ancho de la pantalla: si se deja anclado al
     avatar sale un panel estrecho pegado al borde. Hace falta que el
     header sea el bloque contenedor, o el top:100% lo manda a la altura
     del viewport y el menu queda fuera de pantalla. */
  header{position:relative}
  /* El selector de Cliente comparte linea con la campana y el avatar en
     vez de ocupar el ancho entero: son tres controles pequenos y apilarlos
     gastaba dos lineas de cabecera en cada pantalla. */
  .h-right{flex-wrap:nowrap;align-items:flex-end;gap:6px}
  .cg{flex:1 1 auto;min-width:0}
  .hm{position:static;flex-shrink:0}
  .hm-panel{right:1rem;left:1rem;min-width:0}
}
/* Password modal */
#pwdModal{display:none;position:fixed;inset:0;background:rgba(26,25,22,.75);z-index:160;align-items:center;justify-content:center}
#pwdModal.show{display:flex}
#savePwdModal{display:none;position:fixed;inset:0;background:rgba(26,25,22,.75);z-index:170;align-items:center;justify-content:center}
#savePwdModal.show{display:flex}
.pwd-box{background:var(--surface);border-radius:var(--r-lg);padding:2rem;width:100%;max-width:320px;box-shadow:0 8px 40px rgba(0,0,0,.2);text-align:center}
.pwd-box h3{font-size:1rem;font-weight:400;margin-bottom:.35rem}
.pwd-box p{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;color:var(--text3);margin-bottom:1.1rem}
.pwd-box input{font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;padding:8px 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg);color:var(--text1);width:100%;margin-bottom:.5rem;text-align:center;letter-spacing:.1em}
.pwd-box input:focus{outline:none;border-color:var(--accent)}
.pwd-box input.err{border-color:#c8442a;animation:shake .25s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pwd-err{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:#c8442a;margin-bottom:.5rem;min-height:14px}
.pwd-actions{display:flex;gap:8px;justify-content:center}
.pwd-ok{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;padding:6px 20px;border-radius:var(--r-sm);border:none;background:var(--accent);color:#fff;cursor:pointer}
.pwd-ok:hover{background:var(--accent2)}
.pwd-cancel{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;padding:6px 14px;border-radius:var(--r-sm);border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer}
.pwd-cancel:hover{background:var(--bg)}

/* ── Validación del panel de configuración ── */
.req-star{color:#c8442a;font-weight:700;margin-left:2px}
.ota-field label.label-err,.ota-section-title.label-err{color:#c8442a}
.ota-field input.field-err,input.field-err{border-color:#c8442a!important;background:#fdf0ed!important}
.ota-field input.field-err:focus{outline:none;border-color:#c8442a!important}
/* Retenciones deshabilitadas (sin Payments by Booking) */
.ota-ret-wrap.ret-disabled{opacity:.4}
.ota-ret-wrap.ret-disabled input{cursor:not-allowed}
/* Botón Guardar bloqueado por campos faltantes */
.cfg-save-btn.btn-disabled,.cfg-save-btn:disabled{background:#c9ccd1;color:#fff;cursor:not-allowed}
.cfg-save-btn.btn-disabled:hover,.cfg-save-btn:disabled:hover{background:#c9ccd1}

/* ── Campos con vigencia temporal ── */
.vf{position:relative}
.vf-when{display:none;align-items:center;gap:6px;margin-top:5px;padding:5px 7px;background:#f4f7fb;border:1px solid var(--border);border-left:2px solid var(--accent);border-radius:var(--r-sm)}
.vf-when label{font-family:'Helvetica Neue',Arial,sans-serif;font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);margin:0}
.vf-when input[type=date]{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;padding:2px 5px;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--text1)}
.vf-when input[type=date]:disabled{opacity:.4;cursor:not-allowed}
.vf-nodate{display:flex;align-items:center;gap:3px;text-transform:none!important;letter-spacing:0!important;font-size:10px!important;cursor:pointer;white-space:nowrap}
.vf-nodate input{width:11px;height:11px;cursor:pointer;accent-color:var(--text3)}
/* Desplegable de historial */
.vf-hist-toggle{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;color:var(--text3);cursor:pointer;user-select:none;margin-top:4px;padding:1px 0}
.vf-hist-toggle:hover{color:var(--text2)}
.vf-caret{display:inline-block;font-size:8px;transition:transform .15s}
.vf-hist{display:none;margin-top:4px;padding:5px 7px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm)}
.vf-hist.open{display:block}
.vf-hist-row{display:flex;align-items:center;gap:5px;padding:2px 0;opacity:.55;transition:opacity .15s}
.vf-hist-row.vf-unlocked{opacity:1}
.vf-hist-row input{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;padding:2px 5px;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--text1)}
.vf-hist-row input.vf-h-val{width:64px}
.vf-hist-row input:disabled{background:var(--bg2);cursor:not-allowed}
.vf-lock{background:none;border:none;cursor:pointer;font-size:11px;line-height:1;padding:0 2px;filter:grayscale(1)}
.vf-hist-row.vf-unlocked .vf-lock{filter:none}
.vf-siempre{font-family:'Helvetica Neue',Arial,sans-serif;font-size:9px;color:var(--text3);font-style:italic}
.fee-wrap{margin-bottom:6px}
.fee-from-lbl{font-family:'Helvetica Neue',Arial,sans-serif;font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);white-space:nowrap}
.fee-row input.fee-from{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;padding:3px 5px;border:1px solid var(--border);border-radius:var(--r-sm);background:#fff;color:var(--text1)}
.vf-hist-row select.pm-h-val{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;padding:2px 5px;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--text1)}
.vf-hist-row select:disabled{background:var(--bg2);cursor:not-allowed}

/* ══════════════════════════════════════════════════════
   PANTALLA DE ACCESO
   ══════════════════════════════════════════════════════ */
/* Visible POR DEFECTO: el acceso debe fallar cerrado. Si el JS no carga
   o lanza antes del gate, el dashboard queda tapado en vez de expuesto.
   Solo hideLogin() lo retira, y solo tras validar la sesion. */
#authOverlay{display:flex;position:fixed;inset:0;z-index:500;background:#030F54;
  align-items:center;justify-content:center;padding:1.5rem;overflow-y:auto}
body.auth-locked{overflow:hidden}
/* El dashboard no debe asomarse detrás del login */
body.auth-locked > header,
body.auth-locked > main,
body.auth-locked > .safe-top{visibility:hidden}

.auth-box{background:var(--surface);border-radius:var(--r-lg);width:100%;
  padding:1.9rem 1.9rem 1.6rem;box-shadow:0 10px 50px rgba(0,0,0,.35);text-align:center}
.auth-wrap{width:100%;max-width:390px}
.auth-brand{text-align:center;margin-bottom:1.4rem}
/* El logo es blanco con la flecha lima: se luce sobre el navy, no
   dentro de la tarjeta blanca. */
.auth-logo{height:54px;width:auto;object-fit:contain}
.auth-box h2{font-size:1.15rem;font-weight:600;color:var(--text1);margin-bottom:.2rem}
.auth-sub{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;color:var(--text3);margin-bottom:1.3rem}

.auth-providers{display:flex;flex-direction:column;gap:8px;margin-bottom:1.1rem}
.auth-btn{width:100%;font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;font-weight:500;
  padding:10px 14px;border-radius:var(--r-sm);cursor:pointer;transition:background .15s,border-color .15s;
  display:flex;align-items:center;justify-content:center;gap:9px}
.auth-btn-prov{border:1px solid var(--border);background:#fff;color:var(--text1)}
.auth-btn-prov:hover{background:var(--bg)}
.auth-btn-primary{border:none;background:var(--accent);color:#fff;margin-top:.3rem}
.auth-btn-primary:hover{background:var(--accent2)}
.auth-btn-primary:disabled{background:#c9ccd1;cursor:not-allowed}
.auth-btn-ghost{border:1px solid var(--border);background:transparent;color:var(--text2);margin-top:1.1rem}
.auth-btn-ghost:hover{background:var(--bg)}

.auth-sep{position:relative;text-align:center;margin:1rem 0 1.1rem}
.auth-sep::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border)}
.auth-sep span{position:relative;background:var(--surface);padding:0 10px;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text3)}

.auth-row{text-align:left;margin-bottom:.7rem}
.auth-row label{display:block;font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.auth-row input{width:100%;font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;
  padding:9px 11px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--bg);color:var(--text1)}
.auth-row input:focus{outline:none;border-color:var(--accent);background:#fff}

.auth-msg{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11.5px;min-height:16px;
  margin:.35rem 0 .1rem;color:var(--text3);line-height:1.4}
.auth-msg-err{color:#c8442a}
.auth-msg-ok{color:#1d9e75}

.auth-link{display:inline-block;font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;
  color:var(--text3);text-decoration:none;margin-top:.9rem}
.auth-link:hover{color:var(--accent);text-decoration:underline}
.auth-switch{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11.5px;color:var(--text3);
  margin-top:.7rem;padding-top:.9rem;border-top:1px solid var(--border)}
.auth-switch a{color:var(--accent);text-decoration:none;font-weight:500}
.auth-switch a:hover{text-decoration:underline}

/* Cuenta pendiente o deshabilitada */
.auth-state{padding:.5rem 0}
.auth-state-icon{font-size:34px;line-height:1;margin-bottom:.7rem}
.auth-state h2{margin-bottom:.5rem}
.auth-state p{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12.5px;color:var(--text2);
  line-height:1.5;margin-bottom:.4rem}
.auth-state-mail{font-size:11px!important;color:var(--text3)!important;font-weight:500}

@media(max-width:480px){
  .auth-box{padding:1.6rem 1.3rem 1.3rem}
}

/* ══════════════════════════════════════════════════════
   PANEL DE ADMINISTRACIÓN
   ══════════════════════════════════════════════════════ */
#adminModal{display:none;position:fixed;inset:0;background:rgba(26,25,22,.75);z-index:200;
  align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto}
#adminModal.show{display:flex}
.admin-box{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:920px;
  box-shadow:0 8px 40px rgba(0,0,0,.25);padding:1.6rem 1.8rem 1.8rem}
.admin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.admin-head h2{font-size:1.1rem;font-weight:600;color:var(--text1)}
.admin-head-actions{display:flex;align-items:center;gap:6px}
.admin-close{background:none;border:none;cursor:pointer;font-size:22px;color:var(--text3);line-height:1;padding:0 2px}
.admin-close:hover{color:var(--text1)}

.admin-tabs{display:flex;gap:2px;border-bottom:1.5px solid var(--border);margin-bottom:1.1rem}
.admin-tab{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;padding:6px 14px;cursor:pointer;border:none;background:transparent;
  color:var(--text3);border-bottom:2px solid transparent;margin-bottom:-1.5px}
.admin-tab:hover{color:var(--text2)}
.admin-tab.on{color:var(--text1);border-bottom-color:var(--accent);font-weight:600}

.admin-table{width:100%;border-collapse:collapse;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px}
.admin-table th{text-align:left;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text3);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--border)}
.admin-table td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-mail{color:var(--text2);font-size:11.5px}
.admin-yo{font-size:9px;background:var(--bg2);color:var(--text3);padding:1px 5px;border-radius:8px;margin-left:4px}
.admin-inp{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;padding:4px 7px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--text1);width:100%}
.admin-inp:focus{outline:none;border-color:var(--accent);background:#fff}
.admin-inp:disabled{opacity:.55;cursor:not-allowed}

.admin-btn-sm{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;padding:4px 10px;
  border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg);color:var(--text2);cursor:pointer}
.admin-btn-sm:hover:not(:disabled){background:#ece9e4}
.admin-btn-sm:disabled{opacity:.45;cursor:not-allowed}
.admin-btn-save{background:var(--accent);color:#fff;border-color:var(--accent)}
.admin-btn-save:hover:not(:disabled){background:var(--accent2)}

.admin-badge{display:inline-block;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:500}
.admin-badge-ok{background:#e6f6ef;color:#1d9e75}
.admin-badge-warn{background:#fff6e5;color:#b07218}
.admin-badge-off{background:#f1f1f1;color:var(--text3)}

/* Interruptor de activo. El mismo control se usa en el panel de admin y
   en la barra de rango del tab OTBs, de ahi el selector compartido. */
.admin-switch,.el-switch{position:relative;display:inline-block;width:34px;height:19px;cursor:pointer}
.admin-switch input,.el-switch input{opacity:0;width:0;height:0}
.admin-switch span,.el-switch span{position:absolute;inset:0;background:#c9ccd1;border-radius:19px;transition:background .2s}
.admin-switch span::before,.el-switch span::before{content:'';position:absolute;height:15px;width:15px;left:2px;top:2px;
  background:#fff;border-radius:50%;transition:transform .2s}
.admin-switch input:checked + span,.el-switch input:checked + span{background:#1d9e75}
.admin-switch input:checked + span::before,.el-switch input:checked + span::before{transform:translateX(15px)}
.admin-switch input:disabled + span,.el-switch input:disabled + span{opacity:.5;cursor:not-allowed}

/* Ayuda en linea — la "?" junto a un control y la nota que despliega */
.help-dot{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;font-weight:600;line-height:1;
  width:16px;height:16px;padding:0;border:1px solid var(--border);border-radius:50%;
  background:transparent;color:var(--text3);cursor:pointer;transition:all .15s}
.help-dot:hover,.help-dot[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.help-note{position:fixed;z-index:120;max-width:min(420px,calc(100vw - 24px));
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:11.5px;line-height:1.55;
  color:var(--text2);background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--r-sm);
  padding:.7rem .85rem;margin:0;box-shadow:0 8px 24px rgba(16,20,40,.14)}
.help-note strong{color:var(--text1);font-weight:600}
.help-note p{margin:0 0 .5rem}
.help-note p:last-child{margin-bottom:0}

.admin-loading,.admin-empty,.admin-error{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12.5px;
  color:var(--text3);text-align:center;padding:2rem 0}
.admin-error{color:#c8442a}
.admin-pending-note{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11.5px;color:#b07218;
  background:#fff6e5;border:1px solid #f0d9a8;border-radius:var(--r-sm);padding:7px 11px;margin-bottom:.9rem}

/* Tab Roles */
.admin-roles-note{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11.5px;color:var(--text3);margin-bottom:1rem}
.admin-role{border:1px solid var(--border);border-radius:var(--r-md);padding:.9rem 1.1rem;margin-bottom:.8rem}
.admin-role-head{margin-bottom:.7rem}
.admin-role-head strong{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;color:var(--text1);display:block}
.admin-role-head span{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:var(--text3)}
.admin-role-perms{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:.7rem}
.admin-perm{display:flex;align-items:center;gap:5px;font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:11.5px;color:var(--text2);cursor:pointer}
.admin-perm input{width:13px;height:13px;cursor:pointer;accent-color:var(--accent)}
.admin-perm input:disabled{cursor:not-allowed;opacity:.5}

/* Subventana de asignación de clientes */
#adminSub{display:none;position:fixed;inset:0;background:rgba(26,25,22,.55);z-index:210;
  align-items:center;justify-content:center;padding:1rem}
.admin-sub-box{background:var(--surface);border-radius:var(--r-lg);padding:1.4rem 1.5rem;
  width:100%;max-width:380px;box-shadow:0 8px 40px rgba(0,0,0,.25)}
.admin-sub-box h4{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;font-weight:600;
  color:var(--text1);margin-bottom:.7rem}
.admin-sub-note{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:var(--text3);
  margin-bottom:.6rem;line-height:1.45}
.admin-cli-list{display:flex;flex-direction:column;gap:7px;margin-bottom:1rem;max-height:250px;overflow-y:auto}
.admin-cli{display:flex;align-items:center;gap:7px;font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:12.5px;color:var(--text1);cursor:pointer}
.admin-cli input{width:14px;height:14px;cursor:pointer;accent-color:var(--accent)}
.admin-sub-actions{display:flex;gap:8px;justify-content:flex-end}

@media(max-width:640px){
  .admin-box{padding:1.2rem}
  .admin-table{font-size:11px}
  .admin-table th,.admin-table td{padding:5px 4px}
}
/* Contador de solicitudes pendientes en el botón Admin */
.admin-count{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;
  padding:0 4px;margin-left:5px;border-radius:9px;background:#C3D945;color:#030F54;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:9.5px;font-weight:700;line-height:1}
.admin-msg{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11.5px;min-height:16px;
  color:var(--text3);margin:.3rem 0}
.admin-msg-err{color:#c8442a}
.admin-sub-warn{color:#b07218!important;background:#fff6e5;border:1px solid #f0d9a8;
  border-radius:var(--r-sm);padding:6px 9px}
/* Método de registro y acciones por usuario */
.admin-prov{display:inline-block;font-size:9.5px;padding:2px 7px;border-radius:9px;font-weight:500;white-space:nowrap}
.admin-prov-mail{background:#eef1f6;color:var(--text2)}
.admin-prov-google{background:#e8f0fe;color:#1a73e8}
.admin-prov-apple{background:#f1f1f1;color:#333}
.admin-prov-other{background:#f1f1f1;color:var(--text3)}
.admin-prov-none{background:transparent;color:var(--text3)}
.admin-acciones{display:flex;gap:5px;align-items:center;white-space:nowrap}
.admin-btn-del{background:#fff5f5;border-color:#fca5a5;color:#c44;font-size:14px;line-height:1;padding:3px 9px}
.admin-btn-del:hover:not(:disabled){background:#fee2e2}

/* ══════════════════════════════════════════════════════
   PANEL DE ADMINISTRACIÓN EN MÓVIL
   La tabla se convierte en tarjetas apiladas: en pantallas
   estrechas una tabla de 8 columnas obliga a scroll lateral
   y deja la mitad de los controles fuera de vista.
   ══════════════════════════════════════════════════════ */
/* Respeta el notch y la barra de estado */
#adminModal{padding-top:max(2rem, calc(env(safe-area-inset-top) + 1rem));
  padding-bottom:max(2rem, calc(env(safe-area-inset-bottom) + 1rem))}

@media(max-width:760px){
  .admin-box{padding:1.1rem 1rem 1.3rem;border-radius:var(--r-md)}
  .admin-head h2{font-size:1rem}
  .admin-head .sub{font-size:11px}

  /* Cada fila pasa a ser una tarjeta */
  .admin-table,.admin-table tbody,.admin-table tr,.admin-table td{display:block;width:100%}
  .admin-table thead{display:none}
  .admin-table tr{border:1px solid var(--border);border-radius:var(--r-md);
    padding:.7rem .85rem;margin-bottom:.7rem;background:var(--bg)}
  .admin-table td{border:none;padding:5px 0;display:flex;align-items:center;
    justify-content:space-between;gap:10px}
  /* La etiqueta de columna se muestra a la izquierda de cada dato */
  .admin-table td::before{content:attr(data-label);flex:0 0 auto;
    font-family:'Helvetica Neue',Arial,sans-serif;font-size:9.5px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--text3);font-weight:600}
  .admin-table td.admin-acciones::before{content:''}
  .admin-table td > input,.admin-table td > select{flex:1 1 auto;max-width:62%}
  .admin-mail{font-size:12px;word-break:break-all;text-align:right}
  .admin-acciones{justify-content:flex-end;padding-top:.6rem!important;
    margin-top:.3rem;border-top:1px solid var(--border)}
  .admin-acciones .u-guardar{flex:1 1 auto}

  /* Roles */
  .admin-role-perms{gap:9px 14px}
  .admin-perm{font-size:12px}

  /* Subventanas a pantalla casi completa */
  .admin-sub-box{max-width:100%;padding:1.2rem 1.1rem}
  #adminSub{padding-top:max(1rem, env(safe-area-inset-top))}
}

/* ── Centro de Notificaciones ───────────────────────────────────── */
/* Alta guiada de una unidad: ID, fecha y boton. Evita tener que conocer
   el sufijo |AAAA-MM-DD para escribirlo a mano. */
.cfg-alta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.cfg-alta input{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;padding:5px 8px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--text1)}
.cfg-alta input:focus{outline:none;border-color:var(--accent)}
.cfg-alta-id{flex:1;min-width:150px}
.cfg-alta-btn{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;padding:5px 11px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);
  color:var(--text2);cursor:pointer;white-space:nowrap}
.cfg-alta-btn:hover{border-color:var(--accent);color:var(--accent)}
.cfg-alta-msg{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:var(--text3)}

.ntf-badge{position:absolute;top:1px;right:0;display:inline-flex;align-items:center;
  justify-content:center;min-width:15px;height:15px;padding:0 3px;border-radius:8px;
  background:#C3D945;color:#243b00;font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:9px;font-weight:700;line-height:1;pointer-events:none}
#ntfModal{display:none;position:fixed;inset:0;background:rgba(26,25,22,.75);z-index:200;
  align-items:flex-start;justify-content:center;overflow-y:auto;
  padding:max(2rem, calc(env(safe-area-inset-top) + 1rem)) 1rem
          max(2rem, calc(env(safe-area-inset-bottom) + 1rem))}
#ntfModal.show{display:flex}
.ntf-box{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:720px;
  box-shadow:0 8px 40px rgba(0,0,0,.25);padding:1.5rem 1.6rem 1.7rem}

.ntf-subtabs{display:flex;gap:2px;border-bottom:1.5px solid var(--border);margin-bottom:1rem}
.ntf-subtab{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;padding:6px 12px;cursor:pointer;border:none;background:transparent;
  color:var(--text3);border-bottom:2px solid transparent;margin-bottom:-1.5px}
.ntf-subtab.on{color:var(--text1);border-bottom-color:var(--accent);font-weight:600}

.ntf-cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1rem}
.ntf-h2{font-size:1.05rem;font-weight:600;color:var(--text1);margin:0}
.ntf-h2sub{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:var(--text3);margin:2px 0 0}
.ntf-acciones{display:flex;gap:6px;flex-shrink:0}
.ntf-btn{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;padding:5px 11px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);
  color:var(--text2);cursor:pointer;transition:border-color .15s,color .15s}
.ntf-btn:hover{border-color:var(--accent);color:var(--accent)}

.ntf-chips{display:flex;gap:5px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.ntf-chips::-webkit-scrollbar{display:none}
.ntf-chip{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;padding:5px 10px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);
  color:var(--text2);cursor:pointer;transition:all .15s}
.ntf-chip:hover{border-color:var(--accent)}
.ntf-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ntf-chip-n{font-size:10px;opacity:.7;font-weight:600}

.ntf-dia{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text3);margin:1.1rem 0 .5rem;font-weight:600}
.ntf-dia:first-child{margin-top:.4rem}

.ntf-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  margin-bottom:7px;overflow:hidden;transition:border-color .15s}
.ntf-item.abierta{border-color:var(--accent)}
/* La barra lateral marca lo no leido sin robar espacio ni pedir un punto
   mas que mirar. En movil, donde cada pixel cuenta, importa. */
.ntf-item.nueva{border-left:3px solid #C3D945}
.ntf-cab{display:flex;align-items:center;gap:10px;width:100%;padding:.6rem .8rem;
  background:none;border:none;cursor:pointer;text-align:left;font:inherit}
.ntf-ico{flex-shrink:0}
.ntf-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.ntf-tit{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13.5px;font-weight:600;color:var(--text1)}
.ntf-item.nueva .ntf-tit{font-weight:700}
.ntf-sub{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12.5px;color:var(--text2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ntf-meta{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0}
.ntf-cli{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:var(--text2);
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ntf-hora{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;color:var(--text3)}

.ntf-detalle{border-top:1px solid var(--border);padding:.55rem .8rem .7rem}
.ntf-fila{display:flex;align-items:center;gap:8px;padding:4px 0}
.ntf-lbl{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text3);min-width:92px;flex-shrink:0}
.ntf-val{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13.5px;color:var(--text1);
  word-break:break-word}

.ntf-vacio{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;color:var(--text3);
  text-align:center;padding:2.5rem 1rem}

/* Cierra la lista en vez de dejarla desvanecerse: un scroll sin fondo no
   dice cuanto queda ni ofrece parar. */
.ntf-mas{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:600;
  padding:.7rem;margin-top:.6rem;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);color:var(--text2);cursor:pointer;transition:all .15s}
.ntf-mas:hover{border-color:var(--accent);color:var(--accent)}
.ntf-mas-n{font-size:10px;font-weight:400;color:var(--text3)}

@media(max-width:560px){
  .ntf-box{padding:1.1rem 1rem 1.3rem;border-radius:var(--r-md)}
  .ntf-cabecera{flex-direction:column;gap:.6rem}
  .ntf-acciones{width:100%}
  .ntf-btn{flex:1}
  /* El nombre del cliente baja a la linea del subtitulo: en pantalla
     estrecha, dos columnas de texto se estrangulan entre si. */
  /* El nombre del cliente y la hora bajan a su propia linea. Con la letra
     mas grande, el titulo pide 133px de los 228 disponibles y la meta otros
     112: no caben, y lo que cedia era el titulo, que se partia en dos. Darle
     la fila entera lo resuelve para cualquier nombre de propiedad, por largo
     que sea, en vez de para los que hoy caben por poco. */
  .ntf-cab{flex-wrap:wrap;row-gap:2px}
  .ntf-txt{flex:1 1 auto}
  .ntf-meta{flex:1 0 100%;flex-direction:row;align-items:center;justify-content:flex-end;gap:7px}
  .ntf-cli{max-width:none}

  /* En el movil la letra sube mas que en escritorio. La pantalla es mas
     pequena pero se sostiene mas cerca y se lee de paso, muchas veces de
     pie: lo que en el monitor es comodo, aqui se entrecierra los ojos.
     La referencia es como se lee el mismo aviso en Slack. */
  .ntf-tit{font-size:15px}
  .ntf-sub{font-size:14px}
  .ntf-cli{font-size:12px}
  .ntf-hora{font-size:11px}
  .ntf-dia{font-size:12px}
  .ntf-chip{font-size:12px;padding:6px 11px}
  .ntf-chip-n{font-size:11px}
  .ntf-cab{padding:.75rem .85rem;gap:11px}
  .ntf-detalle{padding:.65rem .85rem .8rem}
  .ntf-fila{padding:5px 0;gap:9px}
  .ntf-lbl{font-size:11px;min-width:86px}
  .ntf-val{font-size:15px}
  /* Los iconos suben con la letra: dejarlos al tamano de escritorio los
     encoge en relacion al texto y la fila pierde su ancla visual. */
  .ntf-ico{width:30px;height:30px}
  .ntf-fila img{width:20px;height:20px}
  .ntf-mas{font-size:13px;padding:.85rem}
}

/* La barra se desplaza en movil aunque hoy quepan las tres pestanas: en
   pantallas muy estrechas 'Flujo de Efectivo' ya roza el borde. */
@media(max-width:640px){
  .tab-nav{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    padding-bottom:2px;margin-bottom:calc(1.5rem - 2px)}
  .tab-nav::-webkit-scrollbar{display:none}
  .tab-btn{padding:7px 11px}
}

/* Casilla dentro de un campo de configuracion: se alinea con los inputs
   de al lado, que llevan etiqueta encima y control debajo. */
.cfg-check{display:flex;align-items:center;gap:6px;font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:12px;color:var(--text1);cursor:pointer;padding:5px 0;white-space:nowrap}
.cfg-check input{margin:0;cursor:pointer}

/* ── Ajustes del centro de notificaciones ───────────────────────── */
.ntf-aj-bloque{margin-bottom:1.4rem}
.ntf-aj-titulo{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text3);font-weight:600;margin-bottom:.5rem}
.ntf-aj-nota{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:var(--text3);
  margin:.35rem 0 0;line-height:1.45}
.ntf-aj-fila{display:flex;align-items:center;gap:10px;padding:.55rem .7rem;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:5px}
.ntf-aj-fila img{flex-shrink:0}
.ntf-aj-txt{flex:1;min-width:0;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;color:var(--text1)}
/* Interruptor: mas claro que una casilla para "esto llega o no llega" */
.ntf-sw{position:relative;width:38px;height:21px;flex-shrink:0;cursor:pointer}
.ntf-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.ntf-sw span{position:absolute;inset:0;background:var(--border);border-radius:999px;transition:background .18s}
.ntf-sw span::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;
  background:#fff;border-radius:50%;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ntf-sw input:checked + span{background:var(--accent)}
.ntf-sw input:checked + span::after{transform:translateX(17px)}
.ntf-sw input:disabled + span{opacity:.4;cursor:not-allowed}

.ntf-aj-estado{padding:.7rem .85rem;border-radius:var(--r-sm);font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:12px;line-height:1.5;margin-bottom:.9rem}
.ntf-aj-estado.ok{background:#eef7e6;border:1px solid #cfe3b8;color:#3d5c1f}
.ntf-aj-estado.aviso{background:#fdf6e3;border:1px solid #f0e0b0;color:#7a5c12}
.ntf-aj-estado.err{background:#fdeeee;border:1px solid #f2c6c6;color:#8c2f2f}
.ntf-aj-btn{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;padding:8px 16px;
  border:none;border-radius:var(--r-sm);background:var(--accent);color:#fff;cursor:pointer;
  margin-top:.6rem}
.ntf-aj-btn:hover{background:var(--accent2)}
.ntf-aj-btn.ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}
.ntf-aj-btn.ghost:hover{background:var(--bg);color:var(--text1)}
.ntf-aj-btn:disabled{opacity:.55;cursor:default}

/* Botón de compartir dentro del detalle de una notificación */
.ntf-compartir{display:inline-flex;align-items:center;gap:6px;margin-top:.65rem;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;padding:7px 14px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);
  color:var(--text2);cursor:pointer;transition:border-color .15s,color .15s}
.ntf-compartir:hover{border-color:var(--accent);color:var(--accent)}
.ntf-compartir:disabled{opacity:.6;cursor:default}


/* ── Indicador de carga con el isotipo de Elysis ──
   Tres capas del mismo PNG, recortadas del arte original y con el mismo
   lienzo, asi que encajan solas: la «e» fija y las dos flechas
   parpadeando en secuencia como un intermitente — primero la de abajo,
   luego la de arriba, apagon, y vuelta a empezar.

   Se separaron del PNG por color y por componentes conexas, no a ojo, y
   por eso son el trazo exacto de la marca y no una imitacion. Si algun
   dia aparece el SVG original, se sustituyen los <img> por <path> y la
   animacion sigue igual.

   Existe porque la pantalla de acceso tarda lo que tarde Supabase en
   contestar, y sin nada moviendose no se distingue "cargando" de
   "trabado" — ni de un formulario listo para usar, que era lo peor: el
   boton de Google se veia pulsable segundos antes de estar conectado. */
.elysis-load{position:relative;display:block;aspect-ratio:276/320}
.elysis-load img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.elysis-load .p1,.elysis-load .p2{opacity:.16}
.elysis-load .p1{animation:elysisBlink 1.7s infinite}
.elysis-load .p2{animation:elysisBlink 1.7s infinite .4s}
@keyframes elysisBlink{0%{opacity:.16}10%{opacity:1}34%{opacity:1}46%{opacity:.16}100%{opacity:.16}}
/* Quien pide menos movimiento ve el isotipo entero y quieto. */
@media (prefers-reduced-motion:reduce){
  .elysis-load .p1,.elysis-load .p2{animation:none;opacity:1}
}

/* El atributo hidden gana siempre.
   Sin esto, cualquier elemento con una clase que fije display -como
   .auth-checking, que es flex- ignora el hidden: las reglas del autor
   vencen a las del navegador con la misma especificidad. Asi es como el
   indicador de carga se quedo visible DEBAJO del formulario de acceso. */
[hidden]{display:none!important}

/* Va fuera de la caja blanca, sobre el azul: es donde el verde del
   isotipo se lee como en la marca. */
.auth-checking{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem 0}
.auth-checking .elysis-load{width:59px}
.auth-checking p{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12.5px;
  color:rgba(255,255,255,.62);margin:0;letter-spacing:.03em}

/* Progreso real, no decorativo: avanza en los hitos que de verdad
   ocurren -sesion comprobada, datos dentro- y no con un temporizador.
   Una barra que se mueve sola miente sobre cuanto falta. */
.auth-progress{width:88px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.14);overflow:hidden}
.auth-progress i{display:block;height:100%;width:0;border-radius:2px;
  background:#C3D945;transition:width .45s cubic-bezier(.4,0,.2,1)}

/* ── Los dos interruptores del tab OTBs ──
   En escritorio van en linea con las fechas, separados por una barra:
   display:contents hace que el contenedor no exista para el layout y los
   hijos se coloquen como si fueran hermanos de los inputs.
   En movil el contenedor si cuenta, y se lleva los dos interruptores a
   una fila propia —juntos, no uno por linea— para dejar el boton arriba,
   al lado de las fechas. */
.otb-sw-fila{display:contents}
.otb-sw{display:none;align-items:center;gap:7px;padding-left:12px;
  border-left:1px solid var(--border)}
@media (max-width:640px){
  .otb-sw-fila{display:flex;width:100%;align-items:center;gap:16px;flex-wrap:wrap}
  .otb-sw{padding-left:0;border-left:none}
  /* La etiqueta se va: dos fechas con una flecha en medio no necesitan
     que les digan que son un rango, y sin ella cabe el boton en la fila. */
  #otbRangeBar > span:first-child{display:none}
  #otbRangeBar{gap:7px}
  /* Los inputs de fecha traen un ancho propio que no sueltan: con flex y
     min-width:0 se reparten lo que sobre y dejan sitio al boton, que si
     conserva su tamaño natural. */
  #otbRangeBar input[type=date]{flex:1 1 0;min-width:0;width:100%;
    font-size:11px;padding:4px 5px}
  #otbRangeReset{flex:0 0 auto;padding:4px 9px}
}

/* ── Tooltip en HTML (ver js/charts/_tooltip.js) ───────────────────────
   Réplica del tooltip de Chart.js, con una diferencia: una línea puede
   colgar de la anterior, y entonces la flecha va antes del cuadro de
   color en lugar de después. */
.chart-tip{position:absolute;z-index:60;pointer-events:none;opacity:0;
  transition:opacity .1s ease;transform:translateY(-50%);
  background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:6px 8px;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;line-height:1.4;
  white-space:nowrap}
.chart-tip .tip-title{font-weight:700;margin-bottom:4px}
.chart-tip .tip-row{display:flex;align-items:center;gap:6px}
.chart-tip .tip-sub{padding-left:14px}
.chart-tip .tip-arrow{flex:0 0 auto;width:12px;text-align:center;opacity:.8}
.chart-tip .tip-box{flex:0 0 auto;width:12px;height:12px;border-radius:2px;
  border:1px solid transparent;box-sizing:border-box}
.chart-tip::before{content:'';position:absolute;top:50%;margin-top:-6px;
  border:6px solid transparent}
.chart-tip:not(.der)::before{left:-12px;border-right-color:rgba(0,0,0,.8)}
.chart-tip.der::before{right:-12px;border-left-color:rgba(0,0,0,.8)}

/* Aviso de datos incompletos sobre los KPIs de OTBs */
.aviso-datos{margin-bottom:.75rem;padding:.55rem .75rem;border-radius:var(--r-sm);
  border:1px solid #e0b400;background:#fff8e1;color:#6b5200;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;line-height:1.45}
.aviso-datos strong{font-weight:700}

/* Aviso de importes convertidos de otra moneda */
.conv-aviso{margin:0 0 .9rem;padding:.4rem .7rem;border-radius:var(--r-sm);
  border:1px solid #e0b400;background:#fff8e1;color:#6b5200;cursor:help;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;line-height:1.4}

/* Baja de una categoría: interruptor + fecha, en la fila de la categoría */
.cfg-cat-baja{display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:var(--text3)}
.cfg-cat-baja-txt{white-space:nowrap}
.cfg-cat-baja input[type=date]{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;
  padding:2px 5px;border:1px solid var(--border);border-radius:var(--r-sm);background:#fff;color:var(--text1)}
/* La categoría inactiva se queda a la vista, atenuada: sigue guardando el
   histórico y hay que poder abrirla. */
.cfg-cat-block.cat-inactiva .code,
.cfg-cat-block.cat-inactiva .name,
.cfg-cat-block.cat-inactiva .swatch{opacity:.5}

/* Interruptor de cancelaciones, en la barra de Ventas. No reutiliza
   .otb-sw porque esa nace oculta —la enciende la logica de OTBs segun el
   PMS— y aqui tiene que verse siempre. */
.ventas-sw{display:flex;align-items:center;gap:7px;margin-left:auto;
  padding-left:12px;border-left:1px solid var(--border)}
@media (max-width:640px){
  .ventas-sw{margin-left:0;padding-left:0;border-left:none;width:100%}
}

/* ── Ventas: contra el ano pasado ──────────────────────────────────
   Va pegado a los KPIs, con el mismo ancho de columna, para que se lea
   como una segunda linea de la misma cifra y no como otro bloque. */
.yoy{margin:-1.25rem 0 1.25rem}
.yoy-cab{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:7px}
.yoy-cab span{text-transform:none;letter-spacing:0;color:var(--text3);opacity:.75;margin-left:6px}
.yoy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px}
.yoy-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:.5rem .7rem}
.yoy-l{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
/* El signo va ademas del color: en la impresion en gris, y para quien no
   distingue rojo de verde, el color solo no dice nada. */
.yoy-d{font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;margin-top:2px;letter-spacing:-.01em}
.yoy-d.up{color:#2f7d54}
.yoy-d.dn{color:#b4432c}
.yoy-d.nu{color:var(--text3)}
.yoy-b{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;color:var(--text3);margin-top:2px}
.yoy-b strong{color:var(--text2);font-weight:500}
.yoy-vacio{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:var(--text3)}

/* ── Ventas: los hechos del periodo ────────────────────────────────
   Tarjetas mas bajas que los KPIs y sin la barra de color de arriba:
   son contexto, no cifras de cabecera, y competir con ellas las dejaria
   a las dos a media voz. */
.hechos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin-bottom:1.25rem}
.hecho{background:var(--surface);border:1px solid var(--border);border-left:2px solid var(--accent);border-radius:var(--r-sm);padding:.55rem .75rem}
.hecho-t{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.hecho-v{font-size:1.05rem;color:var(--text1);line-height:1.25;margin-top:1px}
.hecho-s{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;color:var(--text3);margin-top:2px}