/* Hero pastel + logo mini (mantido) */
@media (max-width: 768px){
.kcfp-child-edit-active .kcfp-hero-bg{
  background: linear-gradient(180deg, #f8f7ff 0%, #f3e8ff 100%);
  padding: 20px 16px 48px 16px;
  border-bottom-left-radius: 28px; border-bottom-right-radius: 28px;
  position: relative; margin-bottom: 10px;
}
.kcfp-child-edit-active .kcfp-hero-logo{ position:absolute; right:12px; top:12px; z-index:1; }
.kcfp-child-edit-active .kcfp-hero-logo img{ max-width:110px; height:auto; display:block; opacity:.95; }
.kcfp-child-edit-active img.kcfp-logo-hidden{ display:none !important; }
.kcfp-child-edit-active .kcfp-hero-bg .kcfp-back{
  position:absolute; left: -6px; top: -10px; width:28px; height:28px; border-radius:999px;
  border:1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.85); box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.kcfp-child-edit-active .kcfp-hero-bg .kcfp-back:before{
  content:""; display:block; width:8px; height:8px; border-left:2px solid #333; border-bottom:2px solid #333;
  position:absolute; left:9px; top:8px; transform:rotate(45deg);
}
.kcfp-child-edit-active .kcfp-hero-bg .kcfp-hero{ display:flex; align-items:center; gap:12px; margin-top:36px; }
.kcfp-child-edit-active .kcfp-avatar{
  width:64px; height:64px; border-radius:999px; background:#fff;
  border:1px solid rgba(0,0,0,.06); display:grid; place-items:center;
  overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.kcfp-child-edit-active .kcfp-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.kcfp-child-edit-active .kcfp-hero-text .kcfp-child-name{ font-size:18px; font-weight:700; line-height:1.1; }
.kcfp-child-edit-active .kcfp-hero-text .kcfp-child-sub{ font-size:12px; opacity:.75; margin-top:2px; }

/* QR Badge no hero (fallback e também para conveniência) */
.kcfp-child-edit-active .kcfp-qr-badge{
  margin-left: auto; /* empurra para a direita do hero */
  width: 84px; height: 84px; border-radius: 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  display: grid; place-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.06);
}
.kcfp-child-edit-active .kcfp-qr-badge img{ width:74px; height:74px; display:block; }

/* Remover apenas background dos blocos de campos (mantendo inputs e bordas) */
.kcfp-child-edit-active .kcfp-form tr{
  background: transparent !important; box-shadow: none !important; border: none !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
.kcfp-child-edit-active .kcfp-form td{ background: transparent !important; }

/* NOVOS RÓTULOS: "Glass Tag" branca minimalista (surpresa clean) */
.kcfp-child-edit-active .kcfp-form th{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  color:#111827;
  background: rgba(255,255,255,.7);
  backdrop-filter: saturate(150%) blur(2px);
  -webkit-backdrop-filter: saturate(150%) blur(2px);
  padding:6px 12px; border-radius:999px; margin:0 0 8px 4px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.04);
}
.kcfp-child-edit-active .kcfp-form th::before{
  content:"";
    width:10px; height:10px; border-radius:999px;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #dbeafe 55%, #c7d2fe 100%);
    box-shadow: 0 0 0 3px rgba(255,255,255,.9);
}

/* Inputs: garantimos que seguem o white/clean existente */
.kcfp-child-edit-active .kcfp-form input,
.kcfp-child-edit-active .kcfp-form select,
.kcfp-child-edit-active .kcfp-form textarea{
  width:100%; max-width:100%; box-sizing:border-box;
  background:#fff; border:1px solid rgba(0,0,0,.12);
  border-radius:12px; padding:12px; font-size:15px;
}

/* QR dentro do bloco FOTO */
.kcfp-child-edit-active .kcfp-qr{
  display:flex; align-items:center; gap:10px; margin-top:8px;
  padding:8px; border:1px dashed rgba(0,0,0,.12); border-radius:12px; background:#fff;
}
.kcfp-child-edit-active .kcfp-qr img{
  width:96px; height:96px; display:block; border-radius:12px; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* No overflow horizontal */
html, body{ overflow-x:hidden; }

/* patch2h (from user) -> hotfix: lower QR next to child's name */
.kcfp-child-edit-active .kcfp-hero .kcfp-qr-badge{
  margin-top: 14px !important;  /* afastar do logo no cabeçalho */
}

/* hotfix: esconder QR dentro do bloco de 'FOTO' (mantém o QR do hero) */
.kcfp-child-edit-active .kcfp-qr{ display: none !important; }
}

/* ===== Consentimentos (MOBILE): empilhar botões 100% ===== */
@media (max-width: 768px){

  /* 1) A célula de ações vira coluna */
  .kcfp-card .kcfp-form tr td{
    display: block !important;
  }

  /* 2) Rótulo (Opcional/Obrigatório) vem primeiro */
  .kcfp-card .kcfp-form tr td > label{
    display: block !important;
    margin: 0 0 10px 0 !important;
  }

  /* 3) Cada “bloco” de botão vira linha e ocupa 100% */
  .kcfp-card .kcfp-form tr td > span,
  .kcfp-card .kcfp-form tr td > form{
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
  }

  /* 4) Os próprios botões preenchem toda a largura */
  .kcfp-card .kcfp-form tr td > span .button,
  .kcfp-card .kcfp-form tr td > span .button-small,
  .kcfp-card .kcfp-form tr td > form .button{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  /* 5) Se houver wrapper .kcfp-consent-actions, aproveita */
  .kcfp-card .kcfp-consent-actions{
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
  .kcfp-card .kcfp-consent-actions .button,
  .kcfp-card .kcfp-consent-actions .button-small{
    width: 100% !important;
  }

  /* 6) Remove os “…” que o tema injeta como separador */
  .kcfp-card .kcfp-form tr td > span::before,
  .kcfp-card .kcfp-form tr td > form::before{
    content: none !important;
  }
}
/* Zebra exclusiva do mobile para "Últimos 10 alertas" */
@media (max-width: 768px){
  .kcfp-card .kcfp-form.kcfp-zebra-alerts tbody tr:nth-child(odd){
    background-color: #ffffff !important;
  }
  .kcfp-card .kcfp-form.kcfp-zebra-alerts tbody tr:nth-child(even){
    background-color: #f8fafc !important;
  }
  .kcfp-card .kcfp-form.kcfp-zebra-alerts tbody td{
    padding: 10px 12px;
    border-top: 1px solid #eef2f7;
  }
  .kcfp-card .kcfp-form.kcfp-zebra-alerts tbody tr:first-child td{
    border-top: 0;
  }
}
/* Zebra exclusiva do mobile para a tabela de Consentimentos (Editar Criança) */
@media (max-width: 768px){
  .kcfp-card .kcfp-form.kcfp-zebra-consents tbody tr:nth-child(odd){
    background-color: #ffffff !important; /* linhas 1,3,5... */
  }
  .kcfp-card .kcfp-form.kcfp-zebra-consents tbody tr:nth-child(even){
    background-color: #f8fafc !important; /* linhas 2,4,6... */
  }
  .kcfp-card .kcfp-form.kcfp-zebra-consents tbody td{
    padding: 10px 12px;
    border-top: 1px solid #eef2f7;
  }
  .kcfp-card .kcfp-form.kcfp-zebra-consents tbody tr:first-child td{
    border-top: 0;
  }
}

/* Zebra SOMENTE no mobile para os consentimentos do "Adicionar criança" */
@media (max-width: 768px){
  .kcfp-child-edit-active #kcfpAddChildForm .kcfp-form tbody.kcfp-consents tr:nth-child(odd){
    background-color: #ffffff !important;   /* linha 1,3,5... */
  }
  .kcfp-child-edit-active #kcfpAddChildForm .kcfp-form tbody.kcfp-consents tr:nth-child(even){
    background-color: #f8fafc !important;   /* linha 2,4,6... */
  }
  .kcfp-child-edit-active #kcfpAddChildForm .kcfp-form tbody.kcfp-consents td{
    padding: 10px 12px;
    border-top: 1px solid #eef2f7;
  }
  .kcfp-child-edit-active #kcfpAddChildForm .kcfp-form tbody.kcfp-consents tr:first-child td{
    border-top: 0;
  }
}

/* =========================================================
   LILAC STACK (MOBILE-ONLY) — Portal Kids
   Escopo por página:
   - .kcfp-child-edit-active = Adicionar/Editar Criança
   - .kcfp-family-active     = Página da Família
   Tudo abaixo só ativa em telas <= 768px.
   ========================================================= */
@media (max-width: 768px){

  /* --- util --- */
  html, body{ overflow-x:hidden; }

  /* ===========================
     HERO (cabeçalho pastel)
     =========================== */
  .kcfp-child-edit-active .kcfp-hero-bg,
  .kcfp-family-active     .kcfp-hero-bg{
    background: linear-gradient(180deg, #f8f7ff 0%, #f3e8ff 100%);
    padding: 20px 16px 48px 16px;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    position: relative;
    margin-bottom: 10px;
  }
  .kcfp-child-edit-active .kcfp-hero-logo,
  .kcfp-family-active     .kcfp-hero-logo{
    position:absolute; right:12px; top:12px; z-index:1;
  }
  .kcfp-child-edit-active .kcfp-hero-logo img,
  .kcfp-family-active     .kcfp-hero-logo img{
    max-width:110px; height:auto; opacity:.95; display:block;
  }

  /* QR badge do hero */
  .kcfp-child-edit-active .kcfp-qr-badge,
  .kcfp-family-active     .kcfp-qr-badge{
    margin-left:auto; width:84px; height:84px; border-radius:16px;
    background:rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.08);
    display:grid; place-items:center; box-shadow:0 2px 4px rgba(0,0,0,.06);
  }
  .kcfp-child-edit-active .kcfp-qr-badge img,
  .kcfp-family-active     .kcfp-qr-badge img{
    width:74px; height:74px; display:block;
  }
}

  /* =========================================================
     LILAC LABEL PILL (rótulo branco com bolinha) — BASE
     (usamos o <th> existente e criamos o "pill" no seu filho)
     ========================================================= */
  /* Zera o th */
  @media (max-width: 768px){
  .kcfp-child-edit-active .kcfp-card .kcfp-form th,
  .kcfp-family-active     .kcfp-card .kcfp-form th{
    display:flex !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
    margin:0 !important;
  }

  /* O "pill" (normalmente é o <h3> ou <div> dentro do th) */
  .kcfp-child-edit-active .kcfp-card .kcfp-form th > *,
  .kcfp-family-active     .kcfp-card .kcfp-form th > *{
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 16px !important;
    margin:0 0 10px 0 !important;
    border-radius:9999px !important;

    /* VIDRO BRANCO + CONTORNO: assinatura visual do Stack */
    background: rgba(255,255,255,.85) !important;
    border: 1px solid rgba(15,23,42,.08) !important; /* slate-900 @ 8% */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.8),
      0 1px 2px rgba(2,6,23,.04) !important;

    color:#0f172a !important;  /* slate-900 */
    font-weight:700 !important;
    letter-spacing:.02em !important;
    text-align:left !important;
  }

  /* Bolinha lilás do rótulo */
  .kcfp-child-edit-active .kcfp-card .kcfp-form th > *::before,
  .kcfp-family-active     .kcfp-card .kcfp-form th > *::before{
    content:"";
    width:10px; height:10px; border-radius:999px;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #dbeafe 55%, #c7d2fe 100%);
    box-shadow: 0 0 0 3px rgba(255,255,255,.9);
  }
}
  /* =========================================================
     TABLE-AS-CARDS (cada <tr> vira bloco com inputs abaixo)
     ========================================================= */
     @media (max-width: 768px){
  .kcfp-child-edit-active .kcfp-card .kcfp-form tr,
  .kcfp-family-active     .kcfp-card .kcfp-form tr{
    display:block !important;
    padding:14px 0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  .kcfp-child-edit-active .kcfp-card .kcfp-form td,
  .kcfp-family-active     .kcfp-card .kcfp-form td{
    display:block !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  /* Inputs/Select/Textarea — idênticos entre páginas */
  .kcfp-child-edit-active .kcfp-card .kcfp-form input,
  .kcfp-child-edit-active .kcfp-card .kcfp-form select,
  .kcfp-child-edit-active .kcfp-card .kcfp-form textarea,
  .kcfp-family-active     .kcfp-card .kcfp-form input,
  .kcfp-family-active     .kcfp-card .kcfp-form select,
  .kcfp-family-active     .kcfp-card .kcfp-form textarea{
    width:100% !important;
    box-sizing:border-box !important;
    background:#fff !important;
    border:1px solid rgba(0,0,0,.12) !important;
    border-radius:16px !important;
    padding:16px 18px !important;
    font-size:17px !important;
    line-height:1.35 !important;
    color:#0f172a !important;
    box-shadow:0 1px 2px rgba(2,6,23,.05) !important;
  }
  .kcfp-child-edit-active .kcfp-card .kcfp-form input::placeholder,
  .kcfp-child-edit-active .kcfp-card .kcfp-form textarea::placeholder,
  .kcfp-family-active     .kcfp-card .kcfp-form input::placeholder,
  .kcfp-family-active     .kcfp-card .kcfp-form textarea::placeholder{
    color:#94a3b8 !important; /* slate-400 */
  }
  .kcfp-child-edit-active .kcfp-card .kcfp-form input:focus,
  .kcfp-child-edit-active .kcfp-card .kcfp-form select:focus,
  .kcfp-child-edit-active .kcfp-card .kcfp-form textarea:focus,
  .kcfp-family-active     .kcfp-card .kcfp-form input:focus,
  .kcfp-family-active     .kcfp-card .kcfp-form select:focus,
  .kcfp-family-active     .kcfp-card .kcfp-form textarea:focus{
    outline:0 !important;
    border-color:#a78bfa !important;
    box-shadow:0 0 0 4px rgba(167,139,250,.18),
               0 6px 18px rgba(124,58,237,.08) !important;
  }
  /* File input */
  .kcfp-child-edit-active .kcfp-card .kcfp-form input[type="file"],
  .kcfp-family-active     .kcfp-card .kcfp-form input[type="file"]{
    padding:14px !important;
  }

  /* Grid 2 colunas para Nome/Sobrenome (quebra no XS) */
  .kcfp-child-edit-active #kcfpAddChildForm .kcfp-row{
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
  }
     }
  @media (max-width:380px){
    .kcfp-child-edit-active #kcfpAddChildForm .kcfp-row{ grid-template-columns:1fr; }
  }
@media (max-width: 768px){
  /* Botões principais (+Adicionar / Guardar etc.) */
  .kcfp-child-edit-active #kcfpAddChildBtn,
  .kcfp-child-edit-active .kcfp-card .button-primary{
    background: linear-gradient(180deg, #ec4899 0%, #be185d 100%) !important;
    color:#fff !important; font-weight:700 !important;
    border:0 !important; border-radius:14px !important;
    padding:14px 18px !important;
    box-shadow:0 8px 20px rgba(190,24,93,.18) !important;
  }
  .kcfp-child-edit-active .kcfp-card .button{
    border-radius:14px !important;
  }
}
  /* =========================================================
     CONSENTIMENTOS — empilhar botões 100% e “…” removidos
     ========================================================= */
     @media (max-width: 768px){
  .kcfp-card .kcfp-form tr td{ display:block !important; }
  .kcfp-card .kcfp-form tr td > label{
    display:block !important; margin:0 0 10px 0 !important;
  }
  .kcfp-card .kcfp-form tr td > span,
  .kcfp-card .kcfp-form tr td > form{
    display:block !important; width:100% !important; margin:8px 0 0 0 !important;
  }
  .kcfp-card .kcfp-form tr td > span .button,
  .kcfp-card .kcfp-form tr td > span .button-small,
  .kcfp-card .kcfp-form tr td > form .button{
    display:block !important; width:100% !important; min-width:0 !important; text-align:center !important;
  }
  /* wrapper (se existir) */
  .kcfp-card .kcfp-consent-actions{
    margin-left:0 !important; display:flex !important; flex-direction:column !important;
    gap:10px !important; align-items:stretch !important; width:100% !important; margin-top:8px !important;
  }
  /* remove “…” do tema */
  .kcfp-card .kcfp-form tr td > span::before,
  .kcfp-card .kcfp-form tr td > form::before{ content:none !important; }

  /* Zebra exclusiva mobile – Últimos 10 alertas */
  .kcfp-card .kcfp-form.kcfp-zebra-alerts tbody tr:nth-child(odd){  background:#ffffff !important; }
  .kcfp-card .kcfp-form.kcfp-zebra-alerts tbody tr:nth-child(even){ background:#f8fafc !important; }
  .kcfp-card .kcfp-form.kcfp-zebra-alerts tbody td{ padding:10px 12px; border-top:1px solid #eef2f7; }
  .kcfp-card .kcfp-form.kcfp-zebra-alerts tbody tr:first-child td{ border-top:0; }

  /* Zebra exclusiva mobile – Consentimentos (Edit e Add) */
  .kcfp-card .kcfp-form.kcfp-zebra-consents tbody tr:nth-child(odd){  background:#ffffff !important; }
  .kcfp-card .kcfp-form.kcfp-zebra-consents tbody tr:nth-child(even){ background:#f8fafc !important; }
  .kcfp-card .kcfp-form.kcfp-zebra-consents tbody td{ padding:10px 12px; border-top:1px solid #eef2f7; }
  .kcfp-card .kcfp-form.kcfp-zebra-consents tbody tr:first-child td{ border-top:0; }

  /* Esconder o QR duplicado que aparece dentro do bloco "FOTO" (quando existir) */
  .kcfp-child-edit-active .kcfp-qr{ display:none !important; }
}

/* === Lilac Stack: RÓTULO BRANCO (glass tag) para a PÁGINA DA FAMÍLIA — override mobile === */
@media (max-width: 768px){
  /* rótulo em pill branco, igual ao aplicado no Add/Edit criança */
  .kcfp-family-active .kcfp-card .kcfp-form th{
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 16px !important;
    margin:0 0 10px 0 !important;
    border:1px solid rgba(0,0,0,.06) !important;
    border-radius:999px !important;
    font-weight:700 !important;
    letter-spacing:.02em !important;
    color:#0f172a !important;                    /* texto escuro */
    background: rgba(255,255,255,.72) !important;/* *** branco translúcido *** */
    backdrop-filter: saturate(150%) blur(2px);
    -webkit-backdrop-filter: saturate(150%) blur(2px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      0 1px 2px rgba(2,6,23,.05) !important;
  }

  /* bolinha do rótulo (mesmo detalhe sutil do stack) */
  .kcfp-family-active .kcfp-card .kcfp-form th::before{
    content:"";
    width:10px; height:10px; border-radius:999px;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #dbeafe 55%, #c7d2fe 100%);
    box-shadow: 0 0 0 3px rgba(255,255,255,.9);
  }
}


/* Família (MOBILE) — rótulo com contorno estilo Lilac Stack */
@media (max-width: 768px){
  /* o próprio "pill" dentro do <th> ganha borda e fundo branco translúcido */
  .kcfp-family-active .kcfp-card .kcfp-form th > *,
  .kcfp-family-active .kcfp-card .kcfp-label{
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 9999px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(15, 23, 42, .08);      /* contorno */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.7),
      0 1px 2px rgba(2,6,23,.04);
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* bolinha do rótulo (mesma do Lilac Stack) */
  .kcfp-family-active .kcfp-card .kcfp-form th > *::before{
    content:"";
    width:10px; height:10px; border-radius:999px;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #dbeafe 55%, #c7d2fe 100%);
    box-shadow: 0 0 0 3px rgba(255,255,255,.9);
  }

  /* alinhamento à esquerda e sem zebrado */
  .kcfp-family-active .kcfp-card .kcfp-form th{
    display:flex !important;
    justify-content:flex-start !important;
    text-align:left !important;
    background: transparent !important;
    box-shadow:none !important;
  }
  .kcfp-family-active .kcfp-card .kcfp-form tr,
  .kcfp-family-active .kcfp-card .kcfp-form td{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}
/* Força o rótulo a alinhar à esquerda no Família (mobile), sem mudar o layout */
@media (max-width: 768px){
  /* o <th> ocupa a linha inteira e alinha conteúdo à esquerda */
  .kcfp-family-active .kcfp-card .kcfp-form th{
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* o "pill" (seja <th> sozinho ou <th> > *) gruda na esquerda */
  .kcfp-family-active .kcfp-card .kcfp-form th,
  .kcfp-family-active .kcfp-card .kcfp-form th > *{
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
  }
}

/* =========================================================================
   LISTA DE CRIANÇAS — Lilac Stack (MOBILE ONLY)
   Aplica quando o <body> tiver .kcfp-children-list-active
   ========================================================================= */
@media (max-width: 768px){

  /* Container principal da lista */
  .kcfp-children-list-active .kcfp-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(2,6,23,.06), inset 0 1px 0 rgba(255,255,255,.6);
    padding: 18px;
  }

  /* Título "Crianças" com respiro */
  .kcfp-children-list-active .kcfp-card > h2,
  .kcfp-children-list-active .kcfp-card > h3,
  .kcfp-children-list-active .kcfp-card > .kcfp-title {
    margin: 4px 4px 14px 4px;
  }

  /* Grade responsiva (cai para 1 coluna em telas pequenas) */
  .kcfp-children-list-active .kcfp-kids-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Caso ainda não exista esse wrapper, aplicamos no(s) cartão(ões) interno(s) direto */
  .kcfp-children-list-active .kcfp-kid-card,
  .kcfp-children-list-active .kcfp-card .kcfp-child,
  .kcfp-children-list-active .kcfp-card .kid-item,
  .kcfp-children-list-active .kcfp-card .kcfp-list-item {
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 22px;
    padding: 16px 14px;
    box-shadow: 0 1px 2px rgba(2,6,23,.04);
  }

  /* Cabeçalho do cartão: avatar + textos */
  .kcfp-children-list-active .kcfp-kid-head{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
  }

  /* Avatar com moldura arredondada e anel lilás (independe da foto) */
  .kcfp-children-list-active .kcfp-kid-avatar{
    --size: 84px;
    width: var(--size);
    height: var(--size);
    border-radius: 999px;
    position: relative;
    display: grid;
    place-items: center;
    /* anel/lilac ring */
    background:
      radial-gradient(circle at 30% 30%, #e9d5ff 0%, #c4b5fd 55%, #a78bfa 100%);
    padding: 3px;              /* espessura do anel */
    box-shadow: 0 6px 16px rgba(124,58,237,.18);
  }
  .kcfp-children-list-active .kcfp-kid-avatar > img{
    width: 100%; height: 100%;
    border-radius: 999px;
    object-fit: cover;
    display: block;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  }

  /* Nome e meta */
  .kcfp-children-list-active .kcfp-kid-name{
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
    color: #0f172a;
  }
  .kcfp-children-list-active .kcfp-kid-meta{
    margin-top: 4px;
    font-size: 13px;
    color: #475569; /* slate-600 */
  }

  /* Área de ações (botões) */
  .kcfp-children-list-active .kcfp-kid-actions{
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  /* Botão primário (Abrir) */
  .kcfp-children-list-active .kcfp-kid-actions .button-primary,
  .kcfp-children-list-active .kcfp-kid-actions .kcfp-open {
    display: inline-block;
    text-align: center;
    padding: 12px 14px;
    border-radius: 14px;
    border: 0;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg,#8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 10px 24px rgba(124,58,237,.20);
  }
  /* Botão “Excluir” em estilo ghost-danger */
  .kcfp-children-list-active .kcfp-kid-actions .button-danger,
  .kcfp-children-list-active .kcfp-kid-actions .kcfp-delete {
    display: inline-block;
    text-align: center;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(220,38,38,.25);
    color: #b91c1c;
    background: rgba(254,242,242,.7);
  }

  /* Estado (active/inactive) como badge discreto */
  .kcfp-children-list-active .kcfp-kid-state{
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #0f172a;
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    padding: 6px 10px;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  }
  .kcfp-children-list-active .kcfp-kid-state::before{
    content:"";
    width:8px;height:8px;border-radius:999px;
    background:#22c55e; /* “active” verde */
    box-shadow: 0 0 0 3px rgba(34,197,94,.15);
  }
  .kcfp-children-list-active .kcfp-kid-state.is-inactive::before{
    background:#f97316; /* laranja para inativo */
    box-shadow: 0 0 0 3px rgba(249,115,22,.15);
  }

  /* Espaçamento entre blocos internos do cartão (foto/nome/meta/ações) */
  .kcfp-children-list-active .kcfp-kid-card .kcfp-slot + .kcfp-slot{
    margin-top: 12px;
  }
}
/*Início de estilização das fotos e do bloco de CRIANÇAS*/
/* === LISTA DE CRIANÇAS (Lilac) — mobile card SEM grid no <tr> === */
@media (max-width: 768px){

  /* Avatar — só na TABELA da listagem */
  .kcfp-children-view .kcfp-children-table img.kcfp-child-photo,
  .kcfp-children-view .kcfp-children-table .kcfp-child-photo img,
  .kcfp-children-view .kcfp-children-table .kcfp-avatar img{
    width: 80px !important;
    height: 80px !important;
    border-radius: 9999px !important;
    object-fit: cover !important;
    display: block !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px #ede9fe !important;
  }

  /* Cada linha vira um "card" mantendo a estrutura da tabela */
  .kcfp-children-view .kcfp-children-table{
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 12px !important; /* respiro entre cards */
  }
  .kcfp-children-view .kcfp-children-table thead{ display: none !important; }

  .kcfp-children-view .kcfp-children-table tbody tr{
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(10,10,30,.06);
    overflow: hidden; /* arredonda dentro */
  }

  /* Faz cada célula ocupar uma linha (stack) */
  .kcfp-children-view .kcfp-children-table td{
    display: block !important;
    padding: 12px 16px !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Esconde a 1ª célula (ID) */
  .kcfp-children-view .kcfp-children-table td:nth-child(1){ display: none !important; }

  /* Nome: avatar + texto na mesma linha, com ellipsis */
  .kcfp-children-view .kcfp-children-table td:nth-child(2){
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .kcfp-children-view .kcfp-children-table .kcfp-child-name{
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: -0.2px !important;
    color: #0f172a !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Nascimento + Estado: tipografia discreta */
  .kcfp-children-view .kcfp-children-table td:nth-child(3),
  .kcfp-children-view .kcfp-children-table td:nth-child(4){
    color: #475569 !important;
    font-size: 13px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* Ações: dois botões lado a lado, centralizados */
  .kcfp-children-view .kcfp-children-table td:last-child{
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 16px !important;
  }

  /* Botões base */
  .kcfp-children-view .kcfp-children-table .kcfp-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 10px 16px;
    min-height: 44px;
    min-width: 112px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    box-shadow: 0 6px 14px rgba(17,12,46,.08);
    transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  }
  .kcfp-children-view .kcfp-children-table .kcfp-btn:active{ transform: translateY(1px); }

  /* Abrir (verde) e Excluir (vermelho) — por CLASSE, sem nth-child */
  .kcfp-children-view .kcfp-children-table .kcfp-btn-open{
    background:#e8f7ee !important; color:#166534 !important; border-color:#86efac !important;
  }
  .kcfp-children-view .kcfp-children-table .kcfp-btn-open:hover{ background:#dcfce7 !important; }

  .kcfp-children-view .kcfp-children-table .kcfp-btn-delete,
  .kcfp-children-view .kcfp-children-table td:last-child button.kcfp-btn-delete,
  .kcfp-children-view .kcfp-children-table td:last-child input.kcfp-btn-delete[type="submit"]{
    background:#fee2e2 !important; color:#b91c1c !important; border-color:#fecaca !important;
  }
  .kcfp-children-view .kcfp-children-table .kcfp-btn-delete:hover{ background:#fecaca !important; }
}

/* Desktop: avatar apenas na TABELA da listagem (não toca no editor) */
@media (min-width: 769px){
  .kcfp-children-view .kcfp-children-table img.kcfp-child-photo,
  .kcfp-children-view .kcfp-children-table .kcfp-child-photo img,
  .kcfp-children-view .kcfp-children-table .kcfp-avatar img{
    width: 72px !important;
    height: 72px !important;
    border-radius: 9999px !important;
    object-fit: cover !important;
    display: block !important;
    background:#fff !important;
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px #ede9fe !important;
  }
}

/* Crianças — estiliza botões mesmo sem classes próprias */
@media (max-width: 768px){
  /* Seleciona QUALQUER link/botão na última coluna (ações) */
  .kcfp-children-view td:last-child a,
  .kcfp-children-view td:last-child button,
  .kcfp-children-view td:last-child input[type="submit"],
  .kcfp-children-view .kcfp-child-actions a,
  .kcfp-children-view .kcfp-child-actions button,
  .kcfp-children-view .kcfp-child-actions input[type="submit"]{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    padding: 10px 14px !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    box-shadow: 0 6px 14px rgba(17, 12, 46, 0.08) !important;
    transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease !important;
    min-height: 40px !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }
  .kcfp-children-view td:last-child a:active,
  .kcfp-children-view td:last-child button:active,
  .kcfp-children-view td:last-child input[type="submit"]:active{
    transform: translateY(1px) !important;
  }

 
}

/* Mantém o estilo no desktop também */
@media (min-width: 769px){
  .kcfp-children-view td:last-child a,
  .kcfp-children-view td:last-child button,
  .kcfp-children-view td:last-child input[type="submit"]{
    border-radius: 9999px !important;
    padding: 10px 14px !important;
    font-weight: 600 !important;
  }
}
/* === Crianças — botões alinhados ao padrão Lilac (iguais e previsíveis) === */
@media (max-width: 768px){
.kcfp-children-view .kcfp-child-actions{
  display: flex;
  gap: 10px;
  justify-content: center;   /* ou end, se preferir à direita */
  align-items: center;
}

.kcfp-children-view .kcfp-child-actions .kcfp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 10px 16px;
  min-height: 44px;
  min-width: 112px;          /* garante largura parecida */
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: 0 6px 14px rgba(17,12,46,.08);
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.kcfp-children-view .kcfp-child-actions .kcfp-btn:active{
  transform: translateY(1px);
}

/* Abrir — “success” suave */
.kcfp-children-view .kcfp-child-actions .kcfp-btn-open{
  background: #e8f7ee;   /* verde muito claro */
  color: #166534;        /* green-700 */
  border-color: #86efac; /* green-300 */
}
.kcfp-children-view .kcfp-child-actions .kcfp-btn-open:hover{
  background: #dcfce7;   /* green-100 */
  box-shadow: 0 8px 18px rgba(22,101,52,.12);
}

/* Excluir — “danger” suave */
.kcfp-children-view .kcfp-child-actions .kcfp-btn-delete{
  background: #fef2f2;   /* rose-50 */
  color: #b91c1c;        /* red-700 */
  border-color: #fecaca; /* red-200 */
}
.kcfp-children-view .kcfp-child-actions .kcfp-btn-delete:hover{
  background: #fee2e2;   /* red-100 */
  box-shadow: 0 8px 18px rgba(185,28,28,.12);
}
}
/* Mantém no mobile e desktop iguais (já que agora temos classes explícitas) */
@media (max-width: 768px){
  .kcfp-children-view .kcfp-child-actions{
    flex-direction: row; /* se preferir coluna no mobile, troque para column */
  }
}

/* === Fix: Excluir vermelho no mobile (igual desktop) === */
@media (max-width: 768px){
.kcfp-children-view .kcfp-child-actions .kcfp-btn-open{
  background: #e8f7ee !important;     /* verde claro */
  color: #166534 !important;           /* green-700 */
  border-color: #86efac !important;    /* green-300 */
}

.kcfp-children-view .kcfp-child-actions .kcfp-btn-delete,
.kcfp-children-view td:last-child .kcfp-btn-delete{
  background: #fee2e2 !important;      /* rose/red 100 */
  color: #b91c1c !important;           /* red-700 */
  border-color: #fecaca !important;    /* red-200 */
}

.kcfp-children-view .kcfp-child-actions .kcfp-btn-delete:hover,
.kcfp-children-view td:last-child .kcfp-btn-delete:hover{
  background: #fecaca !important;      /* red-200 */
}

/* === Crianças — botões base iguais === */
.kcfp-children-view .kcfp-child-actions .kcfp-btn,
.kcfp-children-view td:last-child .kcfp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  padding:10px 16px;
  min-height:44px;
  min-width:112px;
  font-size:16px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  border:1px solid transparent;
  box-shadow:0 6px 14px rgba(17,12,46,.08);
}

/* Abrir = verde */
.kcfp-children-view .kcfp-btn-open{
  background:#e8f7ee !important;
  color:#166534 !important;
  border-color:#86efac !important;
}
.kcfp-children-view .kcfp-btn-open:hover{
  background:#dcfce7 !important;
}
}
/* Excluir = vermelho (mobile e desktop) */
.kcfp-children-view .kcfp-btn-delete,
.kcfp-children-view td:last-child button.kcfp-btn-delete,
.kcfp-children-view td:last-child input.kcfp-btn-delete[type="submit"]{
  background:#fee2e2 !important;
  color:#b91c1c !important;
  border-color:#fecaca !important;
}
.kcfp-children-view .kcfp-btn-delete:hover{
  background:#fecaca !important;
}
/* === Topo compacto: Logo → Menu → 1º card (MOBILE) === */
@media (max-width: 768px){
  /* Container do portal */
  .kcfp-wrap{ padding-top: 6px !important; margin-top: 0 !important; }

  /* NAV do portal (zera topo) */
  .kcfp-nav{ margin-top: 0 !important; padding-top: 0 !important; }

  /* LOGO: cortar “barriga” inferior da imagem */
  .kcfp-brand{
    height: 90px !important;       /* ajuste: 80–110px conforme preferir TAMANHO DO LOGOTIPO */
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .kcfp-brand img{
    display: block !important;
    height: 100% !important;       /* ocupa a altura do container */
    width: auto !important;
    object-fit: cover !important;  /* corta excesso (principalmente embaixo) */
    object-position: top center !important;
    margin: 0 auto !important;
    max-width: none !important;    /* evita encolher por max-width anteriores */
  }

  /* Botão “Menu” colado ao logo */
  .kcfp-menu-toggle{
    display: block !important;
    margin: 0 !important;          /* remove qualquer espaço acima/abaixo */
    padding-top: 6px !important;   /* respiro mínimo; pode usar 0 */
    line-height: 1.1 !important;
  }

  /* Lista do menu (quando aberta) sem espaçamentos extras */
  #kcfp-nav-list{
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
  }

  /* Aproximar o primeiro card “Crianças” do nav */
  .kcfp-wrap > .kcfp-nav + .kcfp-card{ margin-top: 8px !important; }

  /* Se existir um spacer do editor, zera */
  .kcfp-wrap .wp-block-spacer{ height: 0 !important; margin: 0 !important; padding: 0 !important; }
}


/* === TOPO ZERO (Canvas/Elementor) — mover para kcfp-mobile-layout-4/assets/css/layout.css === */
@media (max-width: 768px){
  /* zera margem/padding padrão do documento */
  html, body { margin:0 !important; padding:0 !important; }

  /* Containers do Elementor (modelo novo com .e-con) */
  body.elementor-template-canvas .e-con:first-of-type,
  body.elementor-page .e-con:first-of-type,
  body.elementor .e-con:first-of-type{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  /* Sections clássicas do Elementor */
  body.elementor-template-canvas .elementor-section:first-of-type,
  body.elementor-page .elementor-section:first-of-type,
  body.elementor .elementor-section:first-of-type{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  /* Qualquer spacer antes do logo */
  body.elementor-template-canvas .elementor-widget-spacer:first-of-type,
  body.elementor-page .elementor-widget-spacer:first-of-type{
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
}

/* === Check-ins ativos (MOBILE) — foto em cima; nome/código/data centralizados === */
@media (max-width: 768px){

  /* Garante que o THEAD aparece no mobile neste card */
  .kcfp-checkins-view .kcfp-card:first-of-type .kcfp-table thead{
    display: table-header-group !important;
  }

  /* Foto + nome empilhados e centralizados */
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-child-cell{
    text-align: center !important;
  }
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-child-cell .kcfp-child-label{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center !important;
    margin: 8px 0 !important;
  }

  /* Avatar redondo com aro lilás */
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-child-cell .kcfp-child-photo,
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-child-cell .kcfp-child-photo img,
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-child-cell .kcfp-avatar img{
    width: 80px !important;
    height: 80px !important;
    border-radius: 9999px !important;
    object-fit: cover !important;
    display: block !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px #ede9fe !important;
  }

  /* Nome em destaque e central */
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-child-cell .kcfp-child-name{
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: -0.2px !important;
    color: #0f172a !important;
    text-align: center !important;
  }

  /* Centraliza código, QR e data/hora */
  .kcfp-checkins-view .kcfp-card:first-of-type .kcfp-pickup-cell,
  .kcfp-checkins-view .kcfp-card:first-of-type .kcfp-pickup-code,
  .kcfp-checkins-view .kcfp-card:first-of-type .kcfp-checkin-time{
    text-align: center !important;
  }

  /* Cabeçalho "Selecionar" + checkbox mestre */
  .kcfp-checkins-view .kcfp-table thead th.kcfp-select-col{
    text-align: left !important;
    white-space: nowrap;
  }
  .kcfp-checkins-view .kcfp-table thead th.kcfp-select-col span{
    margin-right: 6px;
    font-weight: 600;
  }
  .kcfp-checkins-view #kcfp_chk_all{
    vertical-align: middle;
    transform: translateY(1px);
  }
}
/* === Check-ins ativos (MOBILE) — rótulo "Selecionar" + centralizações === */
@media (max-width: 768px){

  /* 0) Esconde o THEAD no mobile para não virar “caixas” acima */
  .kcfp-checkins-view .kcfp-card:first-of-type .kcfp-table thead{
    display: none !important;
  }

  /* 1) 1ª célula (checkbox): "Selecionar" AO LADO do checkbox */
  .kcfp-checkins-view .kcfp-card:first-of-type table.kcfp-table tbody tr td:first-child{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: nowrap;
    padding: 10px 12px !important;
  }
  .kcfp-checkins-view .kcfp-card:first-of-type table.kcfp-table tbody tr td:first-child::before{
    content: "Selecionar";
    font-weight: 600;
  }
  .kcfp-checkins-view .kcfp-card:first-of-type table.kcfp-table tbody tr td:first-child input[type="checkbox"]{
    margin: 0 !important;
    transform: none !important;
    vertical-align: middle;
  }

  /* 2) Foto + nome empilhados e centralizados (célula da criança) */
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-child-cell{
    text-align: center !important;
  }
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-child-cell .kcfp-child-label{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center !important;
    margin: 8px 0 !important;
    width: 100%;
  }
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-child-cell .kcfp-child-photo,
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-child-cell .kcfp-child-photo img,
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-child-cell .kcfp-avatar img{
    width: 80px !important;
    height: 80px !important;
    border-radius: 9999px !important;
    object-fit: cover !important;
    display: block !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px #ede9fe !important;
  }
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-child-cell .kcfp-child-name{
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: -0.2px !important;
    color: #0f172a !important;
    text-align: center !important;
  }

  /* 3) Código/QR centralizados */
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-pickup-cell,
  .kcfp-checkins-view .kcfp-card:first-of-type .kcfp-pickup-code{
    text-align: center !important;
  }
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-pickup-cell .kcfp-pickup{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    text-align: center !important;
    width: 100%;
  }

  /* 4) Data/hora centralizada */
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-checkin-time{
    text-align: center !important;
  }
  .kcfp-checkins-view .kcfp-card:first-of-type td.kcfp-checkin-time > *{
    display: inline-block !important; /* evita heranças de alinhamento */
  }
}
/* === Check-ins ativos (MOBILE) — fundo ÚNICO por card (zebra) === */
@media (max-width: 768px){

  /* Espaço vertical entre os cards */
  .kcfp-checkins-view .kcfp-card:first-of-type .kcfp-table{
    border-collapse: separate !important;
    border-spacing: 0 16px !important;    /* gap entre cards */
    width: 100% !important;
    background: transparent !important;
  }

  /* Cada linha (criança) vira um BLOCO único com radius e zebra */
  .kcfp-checkins-view .kcfp-card:first-of-type .kcfp-table tbody tr{
    display: block !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ffffff !important;       /* ímpar: branco */
  }
  .kcfp-checkins-view .kcfp-card:first-of-type .kcfp-table tbody tr:nth-child(even){
    background: #f7f8fc !important;       /* par: cinza/lilás claro */
  }

  /* Todas as células ficam TRANSPARENTES (fundo vem do <tr>) */
  .kcfp-checkins-view .kcfp-card:first-of-type .kcfp-table tbody tr td{
    display: block !important;            /* empilha as células */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 12px 14px !important;
  }

  /* Primeira célula (Selecionar + checkbox) alinhada lado a lado */
  .kcfp-checkins-view .kcfp-card:first-of-type .kcfp-table tbody tr td:first-child{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    white-space: nowrap;
    padding: 10px 14px !important;
    text-align: left !important;
  }
  .kcfp-checkins-view .kcfp-card:first-of-type .kcfp-table tbody tr td:first-child::before{
    content: "Selecionar";
    font-weight: 600;
  }
  .kcfp-checkins-view .kcfp-card:first-of-type .kcfp-table tbody tr td:first-child input[type="checkbox"]{
    margin: 0 !important;
    transform: none !important;
    vertical-align: middle;
  }

  /* Remover qualquer fundinho interno que ainda apareça */
  .kcfp-checkins-view .kcfp-card:first-of-type .kcfp-pickup,
  .kcfp-checkins-view .kcfp-card:first-of-type .kcfp-pickup *{
    background: transparent !important;
    box-shadow: none !important;
  }
}
/* === Histórico recente — avatar circular com aro lilás (somente neste card) === */
@media (max-width: 768px){
.kcfp-checkins-view .kcfp-card:nth-of-type(2) .kcfp-child-photo,
.kcfp-checkins-view .kcfp-card:nth-of-type(2) .kcfp-child-photo img,
.kcfp-checkins-view .kcfp-card:nth-of-type(2) .kcfp-avatar img{
  border-radius: 9999px !important;
  object-fit: cover !important;
  background: #fff !important;
  display: inline-block !important;
  /* aro branco + lilás */
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ede9fe !important;
}
}

/* (opcional) no mobile, dá só um leve ganho visual no anel */
@media (max-width: 768px){
  .kcfp-checkins-view .kcfp-card:nth-of-type(2) .kcfp-child-photo,
  .kcfp-checkins-view .kcfp-card:nth-of-type(2) .kcfp-child-photo img,
  .kcfp-checkins-view .kcfp-card:nth-of-type(2) .kcfp-avatar img{
    box-shadow: 0 0 0 3px #fff, 0 0 0 7px #ede9fe !important;
  }
}
/* ===== Lilac Stack — Página CONTA (troca de senha) ===== */
@media (max-width: 768px){
/* Escopo: apenas a view de conta e apenas o 1º card (onde está o form) */
.kcfp-account-view .kcfp-card:first-of-type .kcfp-form{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

/* Cada linha vira um “card” suave */
.kcfp-account-view .kcfp-card:first-of-type .kcfp-form > tbody > tr{
  display:block;
  margin:16px 0;
  padding:18px 14px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 28px rgba(10,10,30,.06);
}

/* Zera estilos padrão das células */
.kcfp-account-view .kcfp-card:first-of-type .kcfp-form th,
.kcfp-account-view .kcfp-card:first-of-type .kcfp-form td{
  display:block;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

/* Rótulo “cartuchinho” branco com contorno fino + bolinha lilás (mesmo modelo) */
.kcfp-account-view .kcfp-card:first-of-type .kcfp-form th{
  display:inline-flex;               /* permite a bolinha “em linha” */
  align-items:center;
  gap:12px;
  max-width:fit-content;
  padding:12px 16px;
  margin:0 0 12px 0;
  background:#fff;
  border:1px solid #e6e9f2;          /* contorno bem fino */
  border-radius:18px;
  box-shadow:0 1px 0 rgba(17,12,46,.03);
  font-weight:800;
  color:#0f172a;
}

/* Bolinha lilás do rótulo — igual ao editar criança */
.kcfp-account-view .kcfp-card:first-of-type .kcfp-form th::before{
  content:"";
    width:10px; height:10px; border-radius:999px;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #dbeafe 55%, #c7d2fe 100%);
    box-shadow: 0 0 0 3px rgba(255,255,255,.9);
}

/* Campos arredondados (não mexe no botão) */
.kcfp-account-view .kcfp-card:first-of-type .kcfp-form td > input:not([type="submit"]),
.kcfp-account-view .kcfp-card:first-of-type .kcfp-form td > select,
.kcfp-account-view .kcfp-card:first-of-type .kcfp-form td > textarea{
  width:100%;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:22px;
  padding:16px 18px;
  font-size:18px;
  line-height:1.35;
  color:#0f172a;
  box-shadow:0 10px 24px rgba(17,12,46,.06);
  transition:border-color .2s, box-shadow .2s;
}
.kcfp-account-view .kcfp-card:first-of-type .kcfp-form td > textarea{
  min-height:112px;
  resize:vertical;
}

/* Foco lilás */
.kcfp-account-view .kcfp-card:first-of-type .kcfp-form td > input:not([type="submit"]):focus,
.kcfp-account-view .kcfp-card:first-of-type .kcfp-form td > select:focus,
.kcfp-account-view .kcfp-card:first-of-type .kcfp-form td > textarea:focus{
  outline:none;
  border-color:#c4b5fd;
  box-shadow:0 0 0 4px #ede9fe, 0 12px 30px rgba(76,29,149,.12);
}

/* Remove “caixas” internas que alguns temas injetam dentro do TD */
.kcfp-account-view .kcfp-card:first-of-type .kcfp-form td > div:only-child{
  background:transparent !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}
}
/* ==== FIX: bolinha dupla nos rótulos (mobile) =========================
   Mantemos UMA bolinha: a do "pill" (th > *::before).
   Desligamos a que está no próprio <th>.
   Aplica em: Editar/Adicionar criança e Página da família.
======================================================================= */
@media (max-width: 768px){
  /* Desliga a bolinha do <th> nessas páginas */
  .kcfp-child-edit-active .kcfp-card .kcfp-form th::before,
  .kcfp-family-active     .kcfp-card .kcfp-form th::before{
    content: none !important;
  }
  


  /* Mantém a bolinha do pill e usa o mesmo modelo do “editar criança” */
  .kcfp-child-edit-active .kcfp-card .kcfp-form th > *::before,
  .kcfp-family-active     .kcfp-card .kcfp-form th > *::before{
    content:"";
    width:10px; height:10px; border-radius:999px;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #dbeafe 55%, #c7d2fe 100%);
    box-shadow: 0 0 0 3px rgba(255,255,255,.9);
  }
}

/* === Mobile: rótulos acima de Severidade e Notas no bloco "Alertas & Alergias" === */
@media (max-width: 768px){

  /* Esconde o cabeçalho da tabela no mobile para não duplicar rótulos */
  #kcfpFlagsTable thead,
  .kcfp-flags-table thead{
    display: none !important;
  }

  /* Faz cada célula virar bloco vertical para o rótulo ficar acima */
  #kcfpFlagsTable tbody td,
  .kcfp-flags-table tbody td{
    display: block !important;
    padding-top: 10px;
  }

  /* Ordem típica dos <td> na linha:
     1=Tipo, 2=hidden(Label), 3=Severidade, 4=hidden(Icon), 5=Notas, 6=Excluir */
  #kcfpFlagsTable tbody td:nth-child(3)::before,
  .kcfp-flags-table tbody td:nth-child(3)::before{
    content: "Severidade";
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .7;
    margin-bottom: 6px;
  }

  #kcfpFlagsTable tbody td:nth-child(5)::before,
  .kcfp-flags-table tbody td:nth-child(5)::before{
    content: "Notas";
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .7;
    margin-bottom: 6px;
  }
}
@media (max-width:768px){
  #kcfpFlagsTable tbody td{ padding-top:8px }
  #kcfpFlagsTable tbody td:nth-child(3)::before,
  #kcfpFlagsTable tbody td:nth-child(5)::before{
    color:#475569; letter-spacing:.06em; opacity:.75;
  }
}

/* Espaço extra acima dos rótulos "SEVERIDADE" e "NOTAS" no mobile */
@media (max-width: 768px){
  #kcfpFlagsTable tbody td:nth-child(3)::before,
  #kcfpFlagsTable tbody td:nth-child(5)::before{
    display:block;
    margin-top:6px;      /* ← esse é o espacinho acima do rótulo */
    margin-bottom:6px;   /* se quiser, ajuste o espaço abaixo também */
  }
}
@media (max-width:768px){
  .kcfp-help-icon{
    width:20px; height:20px;          /* mesmo valor = círculo perfeito */
    display:inline-flex;               /* centraliza o “?” */
    align-items:center; justify-content:center;
    line-height:1; padding:0;          /* evita oval por line-height */
    border-radius:9999px;              /* círculo */
    border:1px solid rgba(0,0,0,.25);
    font-size:12px; font-weight:700;
    background:#fff; color:#111; opacity:.85;
    user-select:none; cursor:pointer;
  }
  .kcfp-help-icon:focus{ outline:2px solid #94a3b8; outline-offset:2px; }
}
/* COMEÇA AQUI CONFIGURAÇÃO DO ? DOS ROTULOS*/

/* === Ajuda (?) e rótulos — versão consolidada (mobile) === */
@media (max-width:768px){
  /* a célula vira âncora do popover */
  #kcfpFlagsTable tbody td.kcfp-has-label,
  .kcfp-flags-table tbody td.kcfp-has-label{
    position: relative;
  }

  /* rótulo visível dentro do <td> */
  .kcfp-mobile-label{
    margin: 4px 0 6px;
    font-weight: 600;
    text-transform: none;      /* sem MAIÚSCULAS */
    letter-spacing: .02em;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* se existe rótulo real, esconde o ::before antigo */
  #kcfpFlagsTable tbody td.kcfp-has-label::before,
  .kcfp-flags-table tbody td.kcfp-has-label::before{
    display: none !important;
  }

  /* ícone ? redondo, pequeno e sem herdar estilos do tema */
  .kcfp-help-icon{
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.30);
    background: #fff; color: #111;
    font: 700 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    cursor: pointer; user-select: none;
  }
  .kcfp-help-icon:focus{ outline:2px solid #94a3b8; outline-offset:2px; }

  /* popover acima de tudo */
  .kcfp-help-popover{
    position: absolute; left: 0; top: 100%;
    transform: translateY(8px);
    max-width: 280px;
    background:#fff; border:1px solid rgba(0,0,0,.08);
    border-radius:10px; box-shadow: 0 12px 28px rgba(0,0,0,.18);
    padding:10px 12px; font-size:13px; line-height:1.35;
    display: none; z-index: 2147483647;
  }
  .kcfp-help-popover.show{ display:block; }
  .kcfp-help-close{
    display:inline-block; margin-top:8px;
    font-size:12px; opacity:.7; text-decoration:underline;
  }
}

/* headings não cortam o popover */
.kcfp-section-title, .kcfp-card h3, .kcfp-card header, .kcfp-card header h3{
  position: relative; overflow: visible;
}
/* Força o "?" dos rótulos (Severidade/Notas) a ser um círculo pequeno */
@media (max-width:768px){
  /* alvo: o ? que está DENTRO do rótulo injetado */
  .kcfp-mobile-label > .kcfp-help-icon,
  #kcfpFlagsTable .kcfp-mobile-label > .kcfp-help-icon,
  .kcfp-flags-table .kcfp-mobile-label > .kcfp-help-icon{
    all: unset !important;                /* zera estilos herdados de button */
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;               /* mesmo valor => círculo perfeito */
    height: 16px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin-left: 6px !important;
    border: 1px solid rgba(0,0,0,.30) !important;
    background: #fff !important;
    color: #111 !important;
    font: 700 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    line-height: 1 !important;
    box-shadow: none !important;          /* remove sombra de pílula */
    vertical-align: middle !important;
    cursor: pointer !important;
  }
}
@media (max-width:768px){
  .kcfp-mobile-label > .kcfp-help-icon{
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 16px; height: 16px;          /* círculo pequeno */
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.30);
    background: #fff; color: #111;
    font: 700 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    cursor: pointer; user-select: none;
    margin-left: 6px;
  }
  .kcfp-help-popover{ z-index: 2147483647; }  /* fica por cima de tudo */
}
/* Popover SEM herdar uppercase/bold do título e sempre por cima */
.kcfp-help-popover{
  text-transform: none !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  z-index: 2147483647 !important; /* topo de tudo */
}

/* Garante que nada dentro do popover pegue uppercase/bold do heading */
.kcfp-help-popover *{
  text-transform: none !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

/* Em alguns temas o heading tem overflow:hidden; deixe ver o popover */
.kcfp-section-title,
.kcfp-card header,
.kcfp-card header h3{
  position: relative;
  overflow: visible !important;
}
/* rótulo simples acima do campo (mobile e desktop) */
.kcfp-mobile-label{
  margin: 4px 0 6px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .02em;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}


/* ADD — estilo dos rótulos e do "?" dentro do #kcfpFlagsTableNew */
@media (max-width: 768px){
  /* esconder thead no mobile (opcional) */
  #kcfpFlagsTableNew thead{ display:none !important; }

  #kcfpFlagsTableNew tbody td .kcfp-mobile-label{
    display:inline-flex; align-items:center; gap:8px;
    margin-bottom:6px; padding:6px 10px; border-radius:9999px;
    background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.06);
    font-size:12px; line-height:1; font-weight:600; color:#334155;
  }

  #kcfpFlagsTableNew .kcfp-help{
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; border-radius:9999px;
    border:1px solid rgba(51,65,85,.25);
    font-weight:700; font-size:11px; line-height:1;
    color:#334155; background:#fff; cursor:pointer;
    position:relative; padding:0; margin-left:2px;
  }
  #kcfpFlagsTableNew .kcfp-help::after{
    content:attr(data-tip);
    position:absolute; left:50%; transform:translateX(-50%) translateY(8px);
    min-width:200px; max-width:260px; padding:8px 10px; border-radius:10px;
    background:#0f172a; color:#fff; font-weight:500; font-size:12px; line-height:1.25;
    box-shadow:0 8px 24px rgba(2,6,23,.25);
    opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:30;
    white-space:normal; text-align:left;
  }
  #kcfpFlagsTableNew .kcfp-help:hover::after,
  #kcfpFlagsTableNew .kcfp-help:focus-visible::after,
  #kcfpFlagsTableNew .kcfp-help.kcfp-help-open::after{
    opacity:1;
  }
}
/* esconder rótulos mobile no desktop */
@media (min-width: 769px){
  .kcfp-only-mobile{ display:none !important; }
}


/* === Mobile (≤768px) — ADD: rótulos acima + "?" com popover no #kcfpFlagsTableNew === */
@media (max-width: 768px){

  /* Esconde o cabeçalho da tabela do ADD no mobile para não duplicar rótulos */
  #kcfpFlagsTableNew thead{
    display: none !important;
  }

  /* Faz cada célula virar bloco vertical para o rótulo ficar acima */
  #kcfpFlagsTableNew tbody td{
    display: block !important;
    padding-top: 10px;
  }

  /* Rótulos "Severidade" e "Notas" (ADD tem colunas: 1=Tipo, 2=Severidade, 3=Notas, 4=Excluir) */
  #kcfpFlagsTableNew tbody td:nth-child(2)::before{
    content: "Severidade";
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .7;
    margin-bottom: 6px;
  }
  #kcfpFlagsTableNew tbody td:nth-child(3)::before{
    content: "Notas";
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .7;
    margin-bottom: 6px;
  }

  /* Ajustes finos iguais ao código de referência */
  #kcfpFlagsTableNew tbody td{ padding-top:8px }
  #kcfpFlagsTableNew tbody td:nth-child(2)::before,
  #kcfpFlagsTableNew tbody td:nth-child(3)::before{
    color:#475569; letter-spacing:.06em; opacity:.75;
    margin-top:6px;   /* espacinho acima do rótulo */
    margin-bottom:6px;
  }

  /* A célula vira âncora do popover quando há rótulo real */
  #kcfpFlagsTableNew tbody td.kcfp-has-label{ position: relative; }

  /* rótulo real inserido no HTML do ADD */
  #kcfpFlagsTableNew .kcfp-mobile-label{
    margin: 4px 0 6px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .02em;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* Se existe rótulo real, esconde o ::before antigo para evitar duplicidade */
  #kcfpFlagsTableNew tbody td.kcfp-has-label::before{
    display: none !important;
  }

  /* Ícone "?" redondo — mesmo estilo do teu código */
  #kcfpFlagsTableNew .kcfp-mobile-label > .kcfp-help-icon{
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin-left: 6px !important;
    border: 1px solid rgba(0,0,0,.30) !important;
    background: #fff !important;
    color: #111 !important;
    font: 700 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    line-height: 1 !important;
    box-shadow: none !important;
    vertical-align: middle !important;
    cursor: pointer !important;
  }
  #kcfpFlagsTableNew .kcfp-help-icon:focus{ outline:2px solid #94a3b8; outline-offset:2px; }

  /* Popover — mesmo visual do teu snippet */
  #kcfpFlagsTableNew .kcfp-help-popover{
    position: absolute;
    left: 0; top: 100%;
    transform: translateY(8px);
    max-width: 280px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    padding:10px 12px;
    font-size:13px;
    line-height:1.35;
    display: none;
    z-index: 2147483647;
    text-transform: none !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }
  #kcfpFlagsTableNew .kcfp-help-popover.show{ display:block; }
  #kcfpFlagsTableNew .kcfp-help-popover *{
    text-transform: none !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }
  #kcfpFlagsTableNew .kcfp-help-close{
    display:inline-block;
    margin-top:8px;
    font-size:12px;
    opacity:.7;
    text-decoration:underline;
  }
}

/* Esconde os rótulos mobile no desktop */
@media (min-width: 769px){
  .kcfp-only-mobile{ display:none !important; }
}
@media (max-width: 768px){
  /* o popover fica posicionado relativo ao próprio rótulo */
  #kcfpFlagsTableNew .kcfp-mobile-label{ position: relative; }

  /* td não deve cortar o popover */
  #kcfpFlagsTableNew tbody td{
    position: relative;
    overflow: visible !important;
  }

  /* (mantém) estilos do popover e do ícone "?" que você já colou */
}


/* === Unificar largura do pop-up e tamanho do "?" === */
@media (max-width:768px){
  /* Largura igual à do Consentimentos (260px) */
  #kcfpFlagsTableNew .kcfp-help-popover,
  #kcfpFlagsTable .kcfp-help-popover{
    min-width: 200px !important;
    max-width: 260px !important; /* mude aqui se quiser outro tamanho */
  }
}

/* === Zebra robusta para Alertas & Alergias (ADD + EDIT) === */
#kcfpFlagsTableNew tbody tr > td,
#kcfpFlagsTable    tbody tr > td{
  background: transparent !important;   /* zera fundos herdados */
}

/* linhas pares */
#kcfpFlagsTableNew tbody tr:nth-child(even) > td,
#kcfpFlagsTable    tbody tr:nth-child(even) > td{
  background: #f8fafc !important;       /* slate-50 suave */
}

/* linhas ímpares */
#kcfpFlagsTableNew tbody tr:nth-child(odd) > td,
#kcfpFlagsTable    tbody tr:nth-child(odd) > td{
  background: #f8fafc !important;
}

/* cantos arredondados da “faixa” (desktop e mobile) */
#kcfpFlagsTableNew tbody tr > td:first-child,
#kcfpFlagsTable    tbody tr > td:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px; }
#kcfpFlagsTableNew tbody tr > td:last-child,
#kcfpFlagsTable    tbody tr > td:last-child{ border-top-right-radius:12px; border-bottom-right-radius:12px; }

/* respiro entre as faixas (não quebra tabela) */
#kcfpFlagsTableNew tbody tr + tr > td,
#kcfpFlagsTable    tbody tr + tr > td{ border-top: 8px solid transparent; }

/* Opcional: separação mais “card” no desktop */
@media (hover:hover){
  #kcfpFlagsTableNew tbody tr:hover > td,
  #kcfpFlagsTable    tbody tr:hover > td{
    background: #eef2f7 !important;
  }
}

/* Mobile: mantém blocagem dos TDs e o zebra visível */
@media (max-width:768px){
  #kcfpFlagsTableNew tbody td,
  #kcfpFlagsTable    tbody td{
    display:block !important;
    padding-top:8px;
  }
  #kcfpFlagsTableNew tbody tr + tr > td,
  #kcfpFlagsTable    tbody tr + tr > td{
    border-top-width:10px;
  }
}


/* ===================================================================
   Zebra contínua por linha (ADD + EDIT) — sem “quebras” entre TDs
   Aplica-se a: #kcfpFlagsTableNew (Adicionar) e #kcfpFlagsTable (Editar)
   =================================================================== */

/* 1) A tabela fornece o “respiro” entre as linhas */
#kcfpFlagsTableNew,
#kcfpFlagsTable{
  border-collapse: separate !important;      /* garante que o spacing funcione */
  border-spacing: 0 10px !important;         /* ↑ gap vertical entre as linhas */
  background: transparent;
}

/* 2) O <tr> vira um “card” com fundo único via ::before */
#kcfpFlagsTableNew tbody tr,
#kcfpFlagsTable    tbody tr{
  position: relative;                         /* ancora o ::before */
}

/* Fundo do “card” da linha — par/ímpar */
#kcfpFlagsTableNew tbody tr:nth-child(odd)::before,
#kcfpFlagsTable    tbody tr:nth-child(odd)::before{
  content:""; position:absolute; inset:0;
  background:#ffffff; border-radius:12px; z-index:0;
}
#kcfpFlagsTableNew tbody tr:nth-child(even)::before,
#kcfpFlagsTable    tbody tr:nth-child(even)::before{
  content:""; position:absolute; inset:0;
  background:#f8fafc; /* slate-50 */ border-radius:12px; z-index:0;
}

/* 3) Conteúdo por cima; remove fundos individuais dos TDs */
#kcfpFlagsTableNew tbody tr > td,
#kcfpFlagsTable    tbody tr > td{
  position: relative; z-index: 1;             /* sobre o ::before */
  background: transparent !important;         /* sem “tiras” por célula */
  border-top: none !important;                /* remove divisórias internas */
}

/* 4) Mobile: mantém os TDs em bloco, mas o fundo continua contínuo */
@media (max-width:768px){
  #kcfpFlagsTableNew tbody td,
  #kcfpFlagsTable    tbody td{
    display:block !important;
    padding: 10px 12px;                        /* conforto interno */
  }
}

/* 5) Hover suave (desktop) sobre a linha toda */
@media (hover:hover){
  #kcfpFlagsTableNew tbody tr:hover::before,
  #kcfpFlagsTable    tbody tr:hover::before{
    background:#eef2f7;                        /* um tom acima */
  }
}

/* FIM DO ZEBROU NO ALERTAS E ALERGIAS*/

/* ===================================================================
   EDITAR CRIANÇA — Estilo base do rótulo (pill) no bloco Alertas & Alergias
   Escopo: #kcfpFlagsTable (editar). Não altera o ADD.
   =================================================================== */
@media (max-width:768px){

  /* Se quiser esconder o cabeçalho no mobile (como no ADD), deixe esta linha: */
  /* #kcfpFlagsTable thead{ display:none !important; } */

  /* As células viram bloco para o rótulo ficar acima (igual ao ADD) */
  #kcfpFlagsTable tbody td{
    display:block !important;
    padding-top:8px;
  }

  /* Estilo base do rótulo real (quando existir .kcfp-mobile-label) */
  #kcfpFlagsTable .kcfp-mobile-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:4px 0 6px;
    padding:6px 10px;
    border-radius:9999px;
    background:#fff;
    box-shadow:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.06);
    font-size:12px;
    line-height:1;
    font-weight:600;
    color:#334155; /* slate-700 */
  }

  /* Se sua lógica injeta o rótulo real e marca a célula, evite duplicidade */
  #kcfpFlagsTable tbody td.kcfp-has-label::before{
    display:none !important;
  }
}

/* Opcional: se você ainda usa ::before para “Severidade/Notas” no EDIT,
   dê o MESMO look de pill ao ::before (sem precisar injetar HTML) */
@media (max-width:768px){
  /* Severidade (td 3) */
  #kcfpFlagsTable tbody tr td:nth-child(3)::before{
    content:"Severidade";
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:4px 0 6px;
    padding:6px 10px;
    border-radius:9999px;
    background:#fff;
    box-shadow:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.06);
    font-size:12px; line-height:1; font-weight:600; color:#334155;
  }
  /* Notas (td 5) */
  #kcfpFlagsTable tbody tr td:nth-child(5)::before{
    content:"Notas";
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:4px 0 6px;
    padding:6px 10px;
    border-radius:9999px;
    background:#fff;
    box-shadow:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.06);
    font-size:12px; line-height:1; font-weight:600; color:#334155;
  }
}

/* === EDITAR CRIANÇA — CONSENTIMENTOS (MOBILE) =======================
   Escopo super específico: apenas a tabela de consentimentos do Editar.
   Resultado: cada linha vira "card" (igual ao Adicionar) e o botão
   "Ver consentimento" fica 100% logo abaixo do rótulo.
   ------------------------------------------------------------------- */
@media (max-width: 768px){

  /* Cada linha como card suave */
  .kcfp-child-edit-active .kcfp-card .kcfp-form.kcfp-zebra-consents tbody tr{
    display:block !important;
    margin:16px 0 !important;
    padding:10px 8px !important;
    border-radius:12px !important;
    background:#fbfbfd !important;
    border:0 !important;
    box-shadow:none !important;
  }

  /* th/td empilhados e 100% */
  .kcfp-child-edit-active .kcfp-card .kcfp-form.kcfp-zebra-consents tbody th,
  .kcfp-child-edit-active .kcfp-card .kcfp-form.kcfp-zebra-consents tbody td{
    display:block !important;
    width:100% !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
  }

  /* Rótulo do consentimento */
  .kcfp-child-edit-active .kcfp-card .kcfp-form.kcfp-zebra-consents tbody th label{
    display:block !important;
    margin:4px 0 !important;
  }

  /* Área de ações + botão 100% */
  .kcfp-child-edit-active .kcfp-card .kcfp-form.kcfp-zebra-consents .kcfp-consent-actions{
    display:block !important;
    width:100% !important;
    margin:12px 0 4px 0 !important;
    text-align: initial !important;
  }
  .kcfp-child-edit-active .kcfp-card .kcfp-form.kcfp-zebra-consents .kcfp-consent-actions .button,
  .kcfp-child-edit-active .kcfp-card .kcfp-form.kcfp-zebra-consents .kcfp-consent-actions .button-small{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    text-align:center !important;
    /* (opcional) deixar com a mesma cara do Add */
    border:2px solid #c2185b !important;
    background:transparent !important;
    color:#c2185b !important;
    border-radius:20px !important;
    padding:14px 16px !important;
    font-size:18px !important;
  }

  /* Remove qualquer “…” que o tema possa injetar antes do botão */
  .kcfp-child-edit-active .kcfp-card .kcfp-form.kcfp-zebra-consents tbody td > span::before,
  .kcfp-child-edit-active .kcfp-card .kcfp-form.kcfp-zebra-consents tbody td > form::before{
    content:none !important;
  }

  /* Neutraliza widths inline que scripts possam ter colocado */
  .kcfp-child-edit-active .kcfp-card .kcfp-form.kcfp-zebra-consents tbody [style]{
    width:auto !important;
    max-width:100% !important;
  }
}

/* CONSENT — pills */
.kcfp-badge-required{
  display:inline-block; padding:6px 12px; border-radius:9999px;
  background:#FEF2F2; border:1px solid #FECACA; color:#B91C1C;
  font-weight:700; text-transform:uppercase; letter-spacing:.02em;
}
.kcfp-badge-optional{
  display:inline-block; padding:6px 12px; border-radius:9999px;
  background:#F3F4F6; border:1px solid #E5E7EB; color:#111827;
  font-weight:700; text-transform:uppercase; letter-spacing:.02em;
}
/* pequeno espaçamento quando vem logo abaixo do botão */
.kcfp-consents .kcfp-badge-required,
.kcfp-consents .kcfp-badge-optional{ margin-top:8px; }

/* === CONSENTIMENTOS: checkbox REDONDO com check grande === */
.kcfp-consents .kcfp-consent-row input[type="checkbox"]{
  appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important;
  position:relative;
  width:22px; height:22px; /* maior para comportar o check grande */
  margin:0; vertical-align:middle; cursor:pointer; box-shadow:none !important;
  border:2px solid #D1D5DB; background:#fff !important;
  border-radius:9999px !important; /* redondo */
}

/* ✔ fantasma (NÃO marcado) — maior e centralizado */
.kcfp-consents .kcfp-consent-row input[type="checkbox"]::after{
  content:""; position:absolute; pointer-events:none;
  /* centraliza dentro do círculo */
  left:50%; top:50%; transform:translate(-50%,-55%) rotate(-45deg);
  width:12px; height:8px;              /* check maior */
  border-left:3px solid #D1D5DB;       /* traços mais grossos */
  border-bottom:3px solid #D1D5DB;
  opacity:.45;                         /* clarinho no não marcado */
}

/* MARCADO — borda/fundo magenta + check forte */
.kcfp-consents .kcfp-consent-row input[type="checkbox"]:checked{
  border-color:#C2185B !important; background-color:#FDE7EF !important;
}
.kcfp-consents .kcfp-consent-row input[type="checkbox"]:checked::after{
  border-color:#C2185B; opacity:1;
}

/* Foco acessível */
.kcfp-consents .kcfp-consent-row input[type="checkbox"]:focus-visible{
  outline:2px solid rgba(194,24,91,.25); outline-offset:2px;
}

/* Remover o "pill" dos rótulos Severidade/Notas (ADD + EDIT) */
@media (max-width:768px){
  /* Rótulo real (quando existe .kcfp-mobile-label) */
  #kcfpFlagsTableNew tbody td .kcfp-mobile-label,
  #kcfpFlagsTable    .kcfp-mobile-label{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 4px 0 6px !important; /* mantém só o texto acima do campo */
  }
}

/* Maiuscular rótulos (reais e simulados) */
#kcfpFlagsTableNew .kcfp-mobile-label,
#kcfpFlagsTable    .kcfp-mobile-label,
#kcfpFlagsTableNew tbody td:nth-child(2)::before, /* Severidade (ADD) */
#kcfpFlagsTableNew tbody td:nth-child(3)::before, /* Notas (ADD) */
#kcfpFlagsTable    tbody td:nth-child(3)::before, /* Severidade (EDIT) */
#kcfpFlagsTable    tbody td:nth-child(5)::before  /* Notas (EDIT) */
{
  text-transform: uppercase !important;
}

/* ADD Criança — usa só o rótulo real; desliga os ::before */
@media (max-width:768px){
  #kcfpFlagsTableNew tbody td:nth-child(2)::before,
  #kcfpFlagsTableNew tbody td:nth-child(3)::before{
    display: none !important;
    content: none !important;
  }
}