:root{--navy:#0A2B6E;--navy2:#1456C8;--blue:#00A3E0;--green:#19B36B;--lime:#7AC943;--bg:#f3f5fa;--card:#fff;--line:#e4e9f2;--ink:#1b2437;--mut:#7a8699;--red:#e5484d;--amber:#f59e0b}
*{box-sizing:border-box}
body{background:radial-gradient(900px 400px at 100% -50px,rgba(25,179,107,.10),transparent 70%),radial-gradient(900px 500px at -10% 0,rgba(0,163,224,.12),transparent 70%),var(--bg);background-attachment:fixed;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums}
a{color:var(--navy2)}

/* ---------- barra superior ---------- */
.topbar{background:linear-gradient(90deg,var(--navy),var(--navy2));border-bottom:3px solid var(--green);position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(20,38,92,.25)}
.topbar-in{max-width:1280px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{color:#fff;font-weight:800;font-size:1.25rem;text-decoration:none;letter-spacing:-.3px}
.brand span{color:var(--lime)}
.brand img{height:32px;display:block}
.tnav{display:flex;gap:4px;flex:1;overflow-x:auto}
.tnav a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.88rem;padding:6px 12px;border-radius:99px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.tnav a:hover{background:rgba(255,255,255,.1);color:#fff}
.tnav a.on{background:rgba(255,255,255,.18);color:#fff;font-weight:600}
.nbadge{background:var(--lime);color:#2b1d00;font-size:.7rem;font-weight:700;border-radius:99px;padding:1px 7px}
.nbadge.red{background:var(--red);color:#fff}
.who{color:rgba(255,255,255,.65);font-size:.82rem}
.who a{color:#fff}

.wrap{max-width:1280px;margin:0 auto;padding:18px 16px 60px}
.wrap.narrow{max-width:760px}

/* ---------- tarjetas ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:16px;padding:20px;margin-bottom:16px;box-shadow:0 1px 2px rgba(20,38,92,.04)}
.panel h5,.panel h6{font-weight:700;margin:0}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.sec{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:18px 0 8px;display:flex;align-items:center;gap:8px}
.sec .n{background:linear-gradient(135deg,var(--navy2),var(--blue));color:#fff;width:20px;height:20px;border-radius:99px;display:inline-grid;place-items:center;font-size:.7rem;letter-spacing:0}
.hint{color:var(--mut);font-size:.8rem}

/* ---------- cabecera con resumen ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--navy) 0%,var(--navy2) 55%,#12a98a 120%);color:#fff;border-radius:20px;padding:22px 26px;box-shadow:0 10px 30px rgba(10,43,110,.22);margin-bottom:16px;display:grid;grid-template-columns:1.2fr 2fr 1.2fr;gap:20px;align-items:center}
.hero::before{content:'';position:absolute;right:-60px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(122,201,67,.45),transparent 68%)}
.hero::after{content:'';position:absolute;left:30%;bottom:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(0,163,224,.35),transparent 68%)}
.hero>*{position:relative;z-index:1}
.hero .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;opacity:.65}
.hero .big{font-size:1.8rem;font-weight:800;letter-spacing:-.5px;line-height:1.15}
.hero .sub{font-size:.82rem;opacity:.75}
.hero .bar{height:10px;background:rgba(255,255,255,.18);border-radius:99px;overflow:hidden;margin-top:8px}
.hero .bar>div{height:100%;background:linear-gradient(90deg,var(--blue),var(--lime));border-radius:99px;transition:width .5s}
.hero .right{text-align:right}
@media(max-width:820px){.hero{grid-template-columns:1fr 1fr}.hero .mid{grid-column:1/-1;order:3}}

/* ---------- KPIs ---------- */
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px 14px 18px;margin-bottom:10px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c,var(--blue))}
.kpi{display:grid;grid-template-columns:62px 1fr;gap:4px 14px;align-items:center}
.kpi .ring{grid-row:1/3;width:62px;height:62px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),#e8edf6 0);display:grid;place-items:center;position:relative}
.kpi .ring::before{content:'';position:absolute;inset:7px;background:#fff;border-radius:50%}
.kpi .ring b{position:relative;font-size:.8rem;font-weight:800}
.kpi-main{min-width:0}
.kpi-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.kpi-name{font-size:.86rem;font-weight:600}
.kpi-num{font-size:1.35rem;font-weight:800;letter-spacing:-.4px}
.kpi-num small{font-size:.8rem;color:var(--mut);font-weight:600}
.kpi-bar{height:9px;background:#edf1f7;border-radius:99px;margin:8px 0 6px;overflow:hidden}
.kpi-bar>div{height:100%;border-radius:99px;transition:width .5s}
.kpi-foot{display:flex;justify-content:space-between;font-size:.76rem;color:var(--mut);gap:8px;flex-wrap:wrap}
.kpi-foot b{color:var(--ink)}
.kpi.done::after{content:"✓ meta";position:absolute;right:12px;top:8px;font-size:.66rem;font-weight:700;color:#fff;background:var(--green);border-radius:99px;padding:1px 8px;opacity:0}
.kpi.done .kpi-num{color:var(--green)}

/* ---------- formulario de la mesa ---------- */
.form-control,.form-select{border-color:#d7deea;border-radius:10px}
.form-control:focus,.form-select:focus{border-color:var(--blue);box-shadow:0 0 0 .2rem rgba(41,171,226,.18)}
.cat-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin-bottom:8px;background:#fbfcfe}
.cat-dot{width:11px;height:11px;border-radius:99px;flex-shrink:0}
.cat-row .nombre{flex:1;font-size:.9rem;font-weight:500}
.cat-row input{width:74px;text-align:center}
.cat-row .plan{width:140px;text-align:right}
.btn-tigo{background:linear-gradient(135deg,var(--green),#12a98a);color:#fff;font-weight:600;border:none;border-radius:10px;padding:9px 18px;box-shadow:0 4px 12px rgba(25,179,107,.3)}
.btn-tigo:hover{filter:brightness(.93);color:#fff}
.btn-navy{background:var(--navy);color:#fff;border:none;border-radius:10px}
.btn-navy:hover{background:#0e1c47;color:#fff}

/* ---------- chips de pendientes en el formulario ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.pchip{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:12px;padding:8px 12px;cursor:pointer;background:#fbfcfe;font-size:.88rem;transition:.15s;margin:0}
.pchip:hover{border-color:#b9c6dc}
.pchip input[type=checkbox]{accent-color:var(--green);width:17px;height:17px;flex-shrink:0}
.pchip .t{flex:1}
.pchip select{display:none;width:auto;font-size:.78rem;padding:2px 24px 2px 8px;border-radius:8px}
.pchip:has(input:checked){border-color:var(--green);background:#effaf4}
.pchip:has(input:checked) select{display:inline-block}

/* ---------- pendientes (lista de recordatorios) ---------- */
.pend{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:12px;padding:10px 14px;margin-bottom:8px;background:#fff}
.pend.s-vencido{border-left-color:var(--red);background:#fff7f7}
.pend.s-hoy{border-left-color:var(--amber);background:#fffaf0}
.pend.s-manana{border-left-color:#e7c200}
.pend .t{font-weight:600;font-size:.92rem}
.pend .who2{font-size:.8rem;color:var(--mut)}
.pend .acc{margin-left:auto;display:flex;gap:6px;align-items:center;flex-shrink:0}
.pend .info{flex:1;min-width:0}
.due{font-size:.72rem;font-weight:700;border-radius:99px;padding:2px 10px;white-space:nowrap}
.due-vencido{background:#fde4e4;color:#b42318}
.due-hoy{background:#ffecd0;color:#b54708}
.due-manana{background:#fff6c9;color:#7a5c00}
.due-proximo{background:#e3f2fb;color:#0b6a99}
.ok-empty{text-align:center;padding:14px;color:var(--mut);font-size:.9rem}
.alerta{background:#fde4e4;color:#b42318;border-radius:12px;padding:10px 14px;font-size:.88rem;font-weight:600;margin-bottom:12px}

/* ---------- ventas de hoy ---------- */
.vta{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.88rem;background:#fff}
.chip{font-size:.72rem;padding:2px 9px;border-radius:99px;background:#e6f1fd;color:var(--navy);margin:2px 3px 0 0;white-space:nowrap;display:inline-block;font-weight:500}
.chip.warn{background:#fff1dd;color:#b54708;font-weight:600}
.chip.good{background:#e6f6ea;color:#1c6b32;font-weight:600}
.iconbtn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:3px 9px;text-decoration:none;font-size:.9rem;color:var(--ink);cursor:pointer}
.iconbtn:hover{background:#f0f4fb}
.iconbtn.danger:hover{background:#fde4e4;border-color:#f3b5b5}

/* ---------- historial ---------- */
.tbl{font-size:.82rem}
.tbl thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);border-bottom:2px solid var(--line);white-space:nowrap}
.tbl td{vertical-align:top;padding:.7rem .5rem}
.tbl .cli{font-weight:700}
.tbl .sub{color:var(--mut);font-size:.76rem}

#draftMsg{font-size:.78rem;color:var(--mut)}
@media(max-width:768px){.kpi-col{order:2}.cat-row{flex-wrap:wrap}.cat-row .plan{width:100%}.pend{flex-wrap:wrap}.pend .info{flex:1 1 100%}.pend .acc{margin-left:auto}.tnav{order:3;flex:1 1 100%}.topbar-in{gap:8px 14px}.who{margin-left:auto}}