/* CAMINHO: clicplantao.com.br/public/assets/css/widgets.css
   Widgets portados do dominiotarefas: botão-lista (BLIST) e calendário (DP). */
:root{ --w-brd:#E4E6EE; --w-bg2:#F5F8FC; --w-v:#76BFF9; --w-vt:#14375F; --w-gl:#64748b; --w-sans:'Poppins',system-ui,sans-serif; }

/* (O botão-lista virou componente próprio: components/botao-lista.php, com CSS inline.) */

/* ===== CALENDÁRIO / DATEPICKER ===== */
.dp{position:fixed;z-index:100050;left:50%;top:50%;transform:translate(-50%,-50%) scale(.97);opacity:0;
  width:340px;max-width:calc(100vw - 32px);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border:1px solid var(--w-brd);border-radius:18px;
  box-shadow:0 30px 80px rgba(16,32,64,.34);font-family:var(--w-sans);display:none}
.dp.on{display:block;opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity .14s ease,transform .14s cubic-bezier(.4,0,.2,1)}
.dp-back{position:fixed;inset:0;z-index:100049;background:rgba(11,26,46,.5);backdrop-filter:blur(4px);display:none}
.dp-back.on{display:block}
.dp-nav{display:flex;align-items:center;gap:4px;padding:14px 14px 6px}
.dp-nav .t{flex:1;text-align:center;font-size:14.5px;font-weight:800;color:var(--w-vt);text-transform:capitalize}
.dp-nav button{width:30px;height:30px;border:1px solid var(--w-brd);background:#fff;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--w-vt)}
.dp-nav button:hover{background:var(--w-bg2)}
.dp-nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);padding:0 12px}
.dp-dow span{text-align:center;font-size:10px;font-weight:800;color:var(--w-gl);padding:2px 0}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:2px 12px 4px}
.dp-d{height:36px;border:none;background:none;border-radius:9px;font-family:inherit;font-size:13px;font-weight:600;color:var(--w-vt);cursor:pointer;transition:background .1s}
.dp-d:hover{background:var(--w-bg2)}
.dp-d.fora{color:#c2cbd8}
.dp-d.hoje{box-shadow:inset 0 0 0 1.5px var(--w-v)}
.dp-d.sel{background:var(--w-v);color:#fff;font-weight:800}
.dp-quick{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 2px}
.dp-q{border:1px solid var(--w-brd);background:#fff;border-radius:100px;padding:5px 11px;font-family:inherit;font-size:11px;font-weight:700;color:var(--w-vt);cursor:pointer;transition:all .12s}
.dp-q:hover{border-color:var(--w-v);color:var(--w-v)}
.dp-foot{display:flex;gap:8px;padding:12px 14px}
.dp-foot .sp{flex:1}
.dp-btn2{border:1px solid var(--w-brd);background:#fff;border-radius:10px;padding:9px 15px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--w-gl);cursor:pointer}
.dp-btn2:hover{background:var(--w-bg2)}
.dp-btn2.pri{background:var(--w-v);border-color:var(--w-v);color:#fff}

/* campo de data (gatilho) */
.datefield{width:100%;min-height:42px;box-sizing:border-box;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--w-brd);border-radius:10px;font-size:14px;color:var(--w-vt);font-family:var(--w-sans);padding:0 13px;cursor:pointer;font-weight:600;text-align:left}
.datefield:hover{border-color:var(--w-v)}
.datefield svg{width:16px;height:16px;flex:none;stroke:#94a3b8;fill:none;stroke-width:2}
.datefield .ph{color:#94a3b8;font-weight:500}