
/*
FLUXUS PESSOAL — REFINO VISUAL SEGURO DOS 3 CADASTROS SIMPLES
ESCOPO: somente .ptcv3-*
OBJETIVO: aproximar as telas do padrão visual do Fluxus Pessoal
SEM alterar rotas, renderers, endpoints, banco, menu ou eventos.
*/

:root{
  --ptc-bg:#ffffff;
  --ptc-soft:#f7f9fb;
  --ptc-soft-2:#fbfcfd;
  --ptc-border:#d7e1e8;
  --ptc-border-strong:#bdcad4;
  --ptc-text:#173b59;
  --ptc-text-2:#35536a;
  --ptc-muted:#708494;
  --ptc-primary:#2f80b9;
  --ptc-primary-2:#1765d5;
  --ptc-danger:#d63e3e;
  --ptc-shadow:0 4px 18px rgba(21,58,87,.05);
  --ptc-radius:7px;
  --ptc-control-h:32px;
  --ptc-font-xs:10px;
  --ptc-font-sm:11px;
  --ptc-font-md:12px;
  --ptc-font-title:20px;
}

/* =========================
   PÁGINA
   ========================= */

.ptcv3-page{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 146px!important;
  gap:12px!important;
  max-width:100%!important;
  padding:14px 18px 20px!important;
  color:var(--ptc-text)!important;
  background:transparent!important;
  box-sizing:border-box!important;
}

.ptcv3-main{
  min-width:0!important;
}

/* =========================
   CABEÇALHO
   ========================= */

.ptcv3-head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin-bottom:10px!important;
  padding:0 2px!important;
}

.ptcv3-head h1{
  margin:0 0 2px!important;
  color:var(--ptc-text)!important;
  font-size:var(--ptc-font-title)!important;
  line-height:1.15!important;
  font-weight:700!important;
  letter-spacing:-.1px!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

.ptcv3-head p{
  margin:0!important;
  color:var(--ptc-muted)!important;
  font-size:var(--ptc-font-sm)!important;
  line-height:1.35!important;
}

/* =========================
   BUSCA
   ========================= */

.ptcv3-search{
  display:flex!important;
  align-items:center!important;
  width:min(360px,34vw)!important;
  min-width:260px!important;
}

.ptcv3-search input{
  width:100%!important;
  height:var(--ptc-control-h)!important;
  padding:0 36px 0 10px!important;
  border:1px solid var(--ptc-border-strong)!important;
  border-radius:6px!important;
  background:#fff!important;
  color:#29475d!important;
  font-size:var(--ptc-font-sm)!important;
  box-sizing:border-box!important;
  outline:none!important;
}

.ptcv3-search input:focus{
  border-color:#7f9fba!important;
  box-shadow:0 0 0 2px rgba(47,128,185,.08)!important;
}

.ptcv3-search button{
  width:30px!important;
  height:30px!important;
  margin-left:-32px!important;
  border:0!important;
  background:transparent!important;
  color:#3d6078!important;
  font-size:14px!important;
  cursor:pointer!important;
}

/* =========================
   CARD / GRID
   ========================= */

.ptcv3-card{
  overflow:hidden!important;
  border:1px solid var(--ptc-border)!important;
  border-radius:var(--ptc-radius)!important;
  background:var(--ptc-bg)!important;
  box-shadow:var(--ptc-shadow)!important;
}

.ptcv3-scroll{
  max-width:100%!important;
  overflow:auto!important;
  scrollbar-gutter:stable!important;
}

.ptcv3-card table{
  width:100%!important;
  border-collapse:collapse!important;
  table-layout:auto!important;
  font-size:var(--ptc-font-sm)!important;
}

.ptcv3-card th{
  height:34px!important;
  padding:0 11px!important;
  border-bottom:1px solid var(--ptc-border)!important;
  background:#f2f5f7!important;
  color:#2d4b61!important;
  text-align:left!important;
  font-size:10.5px!important;
  font-weight:700!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

.ptcv3-card td{
  height:34px!important;
  padding:0 11px!important;
  border-bottom:1px solid #edf1f4!important;
  color:#29475c!important;
  vertical-align:middle!important;
  background:#fff!important;
}

.ptcv3-card tbody tr{
  cursor:pointer!important;
}

.ptcv3-card tbody tr:hover td{
  background:#f8fafc!important;
}

.ptcv3-card tbody tr.selected td{
  background:#eaf2f8!important;
}

.ptcv3-card td.empty{
  height:120px!important;
  text-align:center!important;
  color:#82939f!important;
  font-size:10.5px!important;
}

/* Proporções */
.ptcv3-card th:first-child,
.ptcv3-card td:first-child{
  width:115px!important;
  min-width:115px!important;
}

.ptcv3-card th:last-child:nth-child(3),
.ptcv3-card td:last-child:nth-child(3){
  width:160px!important;
  min-width:160px!important;
}

/* =========================
   ABSENTEÍSMO
   ========================= */

.ptcv3-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:42px!important;
  height:22px!important;
  padding:0 8px!important;
  border-radius:999px!important;
  font-size:10px!important;
  font-weight:600!important;
}

.ptcv3-pill.yes{
  background:#def3e5!important;
  color:#247a3f!important;
}

.ptcv3-pill.no{
  background:#edf1f4!important;
  color:#526b7d!important;
}

/* =========================
   RODAPÉ
   ========================= */

.ptcv3-card footer{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  min-height:42px!important;
  padding:0 11px!important;
  border-top:1px solid #e5eaee!important;
  background:var(--ptc-soft-2)!important;
  color:#6c8190!important;
  font-size:10px!important;
}

.ptcv3-card footer button{
  width:29px!important;
  height:29px!important;
  padding:0!important;
  border:1px solid #cad4dc!important;
  border-radius:5px!important;
  background:#fff!important;
  color:#37566d!important;
  font-size:10px!important;
}

.ptcv3-card footer button.active{
  border-color:#5f43c2!important;
  background:#5f43c2!important;
  color:#fff!important;
}

/* =========================
   AÇÕES LATERAIS
   ========================= */

.ptcv3-actions{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  padding-top:42px!important;
}

.ptcv3-actions button{
  width:100%!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 10px!important;
  border:1px solid #c8d3dc!important;
  border-radius:5px!important;
  background:#fff!important;
  color:#29475d!important;
  font-size:11px!important;
  font-weight:500!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  cursor:pointer!important;
  box-shadow:none!important;
}

.ptcv3-actions button:hover{
  background:#f6f9fb!important;
}

.ptcv3-actions button.primary{
  border-color:#2781bd!important;
  background:#2781bd!important;
  color:#fff!important;
  font-weight:600!important;
}

.ptcv3-actions button.primary:hover{
  background:#2377ad!important;
}

.ptcv3-actions button.danger{
  color:var(--ptc-danger)!important;
}

/* =========================
   MODAL
   ========================= */

.ptcv3-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:12000!important;
  display:grid!important;
  place-items:center!important;
  padding:20px!important;
  background:rgba(11,29,44,.38)!important;
}

.ptcv3-modal{
  width:min(520px,94vw)!important;
  max-height:calc(100vh - 40px)!important;
  overflow:auto!important;
  border:1px solid #d8e1e8!important;
  border-radius:9px!important;
  background:#fff!important;
  box-shadow:0 24px 64px rgba(11,29,44,.20)!important;
}

.ptcv3-modal header{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:14px!important;
  padding:16px 18px 13px!important;
  border-bottom:1px solid #e3e9ed!important;
}

.ptcv3-modal h2{
  margin:0 0 3px!important;
  color:var(--ptc-text)!important;
  font-size:17px!important;
  line-height:1.2!important;
}

.ptcv3-modal header p{
  margin:0!important;
  color:#758897!important;
  font-size:10.5px!important;
}

.ptcv3-modal header>button{
  width:28px!important;
  height:28px!important;
  padding:0!important;
  border:0!important;
  border-radius:5px!important;
  background:transparent!important;
  color:#5d7181!important;
  font-size:20px!important;
  cursor:pointer!important;
}

.ptcv3-modal .body{
  padding:16px 18px!important;
}

.ptcv3-form{
  display:grid!important;
  grid-template-columns:120px minmax(0,1fr)!important;
  gap:10px 12px!important;
  align-items:end!important;
}

.ptcv3-field{
  display:grid!important;
  gap:4px!important;
  min-width:0!important;
}

.ptcv3-field span{
  color:#35536a!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:1.2!important;
  white-space:normal!important;
  overflow:visible!important;
}

.ptcv3-field input,
.ptcv3-field select{
  width:100%!important;
  height:32px!important;
  box-sizing:border-box!important;
  padding:0 9px!important;
  border:1px solid var(--ptc-border-strong)!important;
  border-radius:6px!important;
  background:#fff!important;
  color:#29475d!important;
  font-size:12px!important;
}

.ptcv3-field input:focus,
.ptcv3-field select:focus{
  outline:none!important;
  border-color:#7f9fba!important;
  box-shadow:0 0 0 2px rgba(47,128,185,.08)!important;
}

.ptcv3-field input[readonly],
.ptcv3-field select:disabled{
  background:#f4f6f8!important;
  color:#657987!important;
}

.ptcv3-modal footer{
  display:flex!important;
  justify-content:flex-end!important;
  gap:8px!important;
  padding:11px 18px 14px!important;
  border-top:1px solid #e2e8ec!important;
  background:#fbfcfd!important;
}

.ptcv3-modal footer button{
  min-width:92px!important;
  height:32px!important;
  padding:0 12px!important;
  border-radius:5px!important;
  font-size:11px!important;
  font-weight:600!important;
  cursor:pointer!important;
}

.ptcv3-modal footer .primary{
  border:1px solid #2f80b9!important;
  background:#2f80b9!important;
  color:#fff!important;
}

.ptcv3-modal footer .secondary{
  border:1px solid #c1ccd5!important;
  background:#fff!important;
  color:#3e5b70!important;
}

/* =========================
   GARANTIA DE TEXTO
   ========================= */

.ptcv3-page h1,
.ptcv3-page p,
.ptcv3-page th,
.ptcv3-page td,
.ptcv3-page button,
.ptcv3-modal h2,
.ptcv3-modal p,
.ptcv3-modal span{
  text-overflow:clip!important;
}

/* =========================
   RESPONSIVO
   ========================= */

@media(max-width:980px){
  .ptcv3-page{
    grid-template-columns:1fr!important;
  }

  .ptcv3-actions{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    padding-top:0!important;
  }
}

@media(max-width:760px){
  .ptcv3-head{
    align-items:stretch!important;
    flex-direction:column!important;
  }

  .ptcv3-search{
    width:100%!important;
    min-width:0!important;
  }

  .ptcv3-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .ptcv3-form{
    grid-template-columns:1fr!important;
  }
}

