/* ============================================================================
   GERENCIAR DIAS DE USO DOS INGRESSOS - CajueiroPark ERP
   Servido por ServerModule.CustomFiles (?v=N fura o cache).
   O HTML e montado no Delphi (Cadastros\uCadGerenciarDiaUsoIngresso) e usa
   so estas classes (prefixo cjd-): o visual fica aqui, o Pascal cuida dos
   dados. Cliques voltam ao Delphi por ajaxRequest (files\...\dias-uso.js).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.cjd-raiz {
  --cjd-pri: #2563eb; --cjd-pri2: #004ac6; --cjd-pri-fixo: #dbe1ff;
  --cjd-tinta: #131b2e; --cjd-sub: #434655; --cjd-cinza: #737686;
  --cjd-sup: #faf8ff; --cjd-sup-low: #f2f3ff; --cjd-sup-cont: #eaedff; --cjd-sup-high: #e2e7ff;
  --cjd-verde-bg: #82f5c1; --cjd-verde-tx: #00714e; --cjd-verde: #006c4a;
  --cjd-verm-bg: #ffdad6; --cjd-verm-tx: #93000a; --cjd-sab: #004ac6; --cjd-dom: #ae0010;
  font-family: Inter, 'Segoe UI', Arial, sans-serif; font-size: 14px; color: var(--cjd-tinta);
  background: var(--cjd-sup); height: 100%; overflow-y: auto; box-sizing: border-box;
  padding: 18px 20px 24px; position: relative;
}
.cjd-raiz * { box-sizing: border-box; }
.cjd-coluna { display: flex; flex-direction: column; gap: 16px; }

/* ---------- topo ---------- */
.cjd-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.cjd-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.cjd-tag .cjd-p { background: var(--cjd-pri); color: #fff; border-radius: 999px; padding: 2px 9px; }
.cjd-tag .cjd-s { color: var(--cjd-sub); text-transform: none; font-weight: 500; display: inline-flex; gap: 5px; align-items: center; }
.cjd-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--cjd-verde); display: inline-block; }
.cjd-topo h1 { font-size: 25px; line-height: 31px; margin: 6px 0 2px; letter-spacing: -.3px; font-weight: 700; }
.cjd-desc { color: var(--cjd-sub); margin: 0; }
.cjd-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- botoes ---------- */
.cjd-bt { border: 0; border-radius: 12px; padding: 10px 14px; font: 600 13.5px Inter, 'Segoe UI', sans-serif;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; transition: filter .15s, transform .1s; }
.cjd-bt:hover { filter: brightness(.96); }
.cjd-bt:active { transform: scale(.97); }
.cjd-bt-cinza { background: var(--cjd-sup-cont); color: var(--cjd-tinta); }
.cjd-bt-claro { background: var(--cjd-sup-low); color: var(--cjd-sub); }
.cjd-bt-pri { background: var(--cjd-pri); color: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, .3); }
.cjd-bt-verm { background: var(--cjd-verm-bg); color: var(--cjd-verm-tx); }
.cjd-bt-sm { padding: 7px 11px; font-size: 12.5px; border-radius: 10px; }
.cjd-bt.cjd-off { opacity: .45; pointer-events: none; }

/* ---------- faixa do dia ---------- */
.cjd-faixa { position: relative; overflow: hidden; border-radius: 18px; padding: 18px 20px; color: #fff;
  background: linear-gradient(90deg, #2563eb, #004ac6 55%, #283044); box-shadow: 0 10px 24px rgba(0, 74, 198, .25);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cjd-faixa.cjd-fechado { background: linear-gradient(90deg, #5b6478, #3b4356 55%, #283044); }
.cjd-faixa::after { content: ""; position: absolute; right: -80px; bottom: -90px; width: 300px; height: 300px;
  border-radius: 50%; background: rgba(255, 255, 255, .1); filter: blur(30px); pointer-events: none; }
.cjd-faixa .cjd-esq { display: flex; gap: 14px; align-items: center; position: relative; z-index: 1; }
.cjd-calic { width: 48px; height: 48px; border-radius: 12px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; font-size: 22px; }
.cjd-rot { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #dbe1ff; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cjd-status { background: #006c4a; color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 11px; display: inline-flex; gap: 5px; align-items: center; text-transform: none; letter-spacing: 0; }
.cjd-status.cjd-st-fech { background: #8a90a2; }
.cjd-status i { width: 6px; height: 6px; border-radius: 50%; background: #fff; display: inline-block; }
.cjd-faixa h2 { margin: 3px 0 2px; font-size: 21px; letter-spacing: -.2px; font-weight: 700; }
.cjd-sub2 { font-size: 12.5px; color: #b4c5ff; }
.cjd-metricas { position: relative; z-index: 1; display: flex; gap: 8px; background: rgba(255, 255, 255, .1); padding: 7px; border-radius: 14px; flex-wrap: wrap; }
.cjd-met { background: rgba(255, 255, 255, .12); border-radius: 10px; padding: 7px 12px; min-width: 120px; }
.cjd-met span { display: block; font-size: 11px; color: #b4c5ff; }
.cjd-met b { font-size: 16px; }

/* ---------- cartoes ---------- */
.cjd-duas { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; align-items: start; }
@media (max-width: 1050px) { .cjd-duas { grid-template-columns: 1fr; } }
.cjd-cartao { background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 1px 6px rgba(19, 27, 46, .06); display: flex; flex-direction: column; gap: 12px; }
.cjd-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cjd-cab h3 { margin: 0; font-size: 16px; display: flex; align-items: center; font-weight: 700; }
.cjd-cab small { color: var(--cjd-sub); font-size: 12px; font-weight: 500; }
.cjd-num { width: 24px; height: 24px; border-radius: 7px; background: var(--cjd-pri-fixo); color: var(--cjd-pri2);
  display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; margin-right: 8px; }
.cjd-num.cjd-ok { background: #e6f4ea; color: #1e7e34; }

/* ---------- tabelas ---------- */
.cjd-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.cjd-tab thead th { background: var(--cjd-sup-cont); color: var(--cjd-sub); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; padding: 9px 8px; text-align: left; }
.cjd-tab thead th:first-child { border-radius: 10px 0 0 10px; }
.cjd-tab thead th:last-child { border-radius: 0 10px 10px 0; }
.cjd-tab tbody td { padding: 9px 8px; border-bottom: 1px solid #eef0fb; vertical-align: middle; }
.cjd-tab tbody tr:hover td { background: #f7f8ff; }
.cjd-tab tr.cjd-clic { cursor: pointer; }
.cjd-dir { text-align: right; } .cjd-cen { text-align: center; }
.cjd-ck { width: 17px; height: 17px; border-radius: 5px; border: 2px solid #b4c0dd; display: inline-block; vertical-align: middle; position: relative; background: #fff; }
.cjd-ck.cjd-on { background: var(--cjd-pri); border-color: var(--cjd-pri); }
.cjd-ck.cjd-on::after { content: "\2713"; color: #fff; font-size: 11px; font-weight: 800; position: absolute; left: 2px; top: -1px; }
.cjd-nome { font-weight: 600; }
.cjd-classe { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--cjd-sup-cont); color: var(--cjd-sub); }
.cjd-classe.cjd-esp { background: var(--cjd-sup-high); color: var(--cjd-pri2); }
.cjd-inativo { display: inline-block; margin-left: 5px; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: #fdecea; color: #c62828; }
.cjd-lib { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--cjd-verde-bg); color: var(--cjd-verde-tx); }
.cjd-de { display: block; font-size: 11px; color: var(--cjd-cinza); text-decoration: line-through; }
.cjd-por { font-weight: 700; }
.cjd-gratis { font-weight: 700; color: var(--cjd-verde); }
.cjd-vend { font-weight: 700; color: var(--cjd-pri2); }
.cjd-zero { color: #a6abbd; }
.cjd-vazio { color: var(--cjd-cinza); padding: 18px 8px; text-align: center; }
.cjd-lixo { color: var(--cjd-verm-tx); background: var(--cjd-verm-bg); border-radius: 9px; padding: 5px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.cjd-rodape { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; }
.cjd-ajuda { background: var(--cjd-sup-low); border-radius: 12px; padding: 10px 12px; color: var(--cjd-sub); font-size: 12.5px; line-height: 1.5; display: flex; gap: 9px; }
.cjd-ajuda b { color: var(--cjd-tinta); }
.cjd-resumo { color: var(--cjd-sub); font-size: 13px; }
.cjd-resumo b { color: var(--cjd-tinta); }

/* ---------- calendario ---------- */
.cjd-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cjd-seg { display: inline-flex; background: var(--cjd-sup-low); border-radius: 12px; padding: 3px; gap: 2px; }
.cjd-seg span { padding: 5px 10px; border-radius: 9px; font-size: 12px; font-weight: 600; color: var(--cjd-sub); cursor: pointer; }
.cjd-seg span:hover { background: #fff; color: var(--cjd-tinta); }
.cjd-mes { background: var(--cjd-sup-cont); border-radius: 12px; padding: 7px 14px; font-weight: 700; min-width: 150px; text-align: center; }
.cjd-multi { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--cjd-sub);
  background: var(--cjd-sup-low); border-radius: 12px; padding: 7px 11px; cursor: pointer; }
.cjd-chave { width: 30px; height: 17px; border-radius: 999px; background: #c3c6d7; position: relative; display: inline-block; transition: background .15s; }
.cjd-chave::after { content: ""; position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: left .15s; }
.cjd-multi.cjd-on { color: var(--cjd-pri2); background: var(--cjd-pri-fixo); }
.cjd-multi.cjd-on .cjd-chave { background: var(--cjd-pri); }
.cjd-multi.cjd-on .cjd-chave::after { left: 15px; }
.cjd-gcal { border-radius: 14px; overflow: hidden; background: var(--cjd-sup-cont); }
.cjd-semana { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--cjd-sup-high); text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 9px 0; }
.cjd-semana .cjd-sab { color: var(--cjd-sab); } .cjd-semana .cjd-dom { color: var(--cjd-dom); }
.cjd-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--cjd-sup-cont); }
.cjd-d { min-height: 82px; background: #fff; padding: 7px; display: flex; flex-direction: column; justify-content: space-between; gap: 3px; cursor: pointer; transition: background .12s; }
.cjd-d:hover { background: #f7f8ff; }
.cjd-d .cjd-n { font-weight: 600; font-size: 13.5px; }
.cjd-d.cjd-sab .cjd-n { color: var(--cjd-sab); } .cjd-d.cjd-dom .cjd-n { color: var(--cjd-dom); }
.cjd-d.cjd-fora { background: #f6f7fd; opacity: .55; }
.cjd-d.cjd-passou { background: #fafbff; }
.cjd-d.cjd-passou .cjd-n { opacity: .55; }
.cjd-d .cjd-fech { font-size: 11px; color: #a6abbd; }
.cjd-chip { display: block; text-align: center; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 4px; background: var(--cjd-verde-bg); color: var(--cjd-verde-tx); }
.cjd-vd { font-size: 11px; color: var(--cjd-pri2); font-weight: 600; }
.cjd-topd { display: flex; justify-content: space-between; align-items: center; }
.cjd-d.cjd-sel { background: linear-gradient(180deg, rgba(219, 225, 255, .7), #fff); box-shadow: inset 0 0 0 2px var(--cjd-pri); }
.cjd-d.cjd-sel .cjd-n { width: 24px; height: 24px; border-radius: 50%; background: var(--cjd-pri); color: #fff !important; display: grid; place-items: center; font-weight: 800; opacity: 1; }
.cjd-ed { font-size: 10.5px; font-weight: 800; color: var(--cjd-pri2); }
.cjd-d.cjd-marc { box-shadow: inset 0 0 0 2px #00897b; background: #f0fbf7; }
.cjd-marcado { font-size: 10.5px; font-weight: 800; color: #00897b; }
.cjd-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--cjd-sub); align-items: center; }
.cjd-legenda span { display: inline-flex; gap: 6px; align-items: center; }
.cjd-bol { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

/* ---------- painel replicar ---------- */
.cjd-modal { display: none; position: fixed; inset: 0; background: rgba(19, 27, 46, .45); z-index: 50; align-items: center; justify-content: center; }
.cjd-modal.cjd-on { display: flex; }
.cjd-caixa { width: 620px; max-width: 94%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }
.cjd-caixa .cjd-mc { background: var(--cjd-pri); color: #fff; padding: 12px 16px; font-weight: 700; }
.cjd-caixa .cjd-mb { padding: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.cjd-lin { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.cjd-caixa label { font-size: 11.5px; color: var(--cjd-sub); font-weight: 600; display: block; margin-bottom: 4px; }
.cjd-caixa input[type=date] { border: 0; background: var(--cjd-sup-low); border-radius: 10px; padding: 8px 10px; font: 600 13px Inter, 'Segoe UI', sans-serif; color: var(--cjd-tinta); }
.cjd-dsem { display: inline-flex; gap: 5px; }
.cjd-dsem span { width: 40px; text-align: center; padding: 7px 0; border-radius: 9px; background: var(--cjd-sup-low); color: var(--cjd-sub); font-weight: 700; font-size: 12px; cursor: pointer; user-select: none; }
.cjd-dsem span.cjd-on { background: var(--cjd-pri); color: #fff; }
.cjd-opc { display: flex; flex-direction: column; gap: 7px; }
.cjd-opc label { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--cjd-tinta); font-weight: 500; margin: 0; cursor: pointer; }
.cjd-previa { background: var(--cjd-sup-low); border-radius: 10px; padding: 9px 12px; line-height: 1.55; color: var(--cjd-sub); }
.cjd-caixa .cjd-rodape { justify-content: flex-end; }