/* Geboorteplanner: bouwt verder op de k-klassen uit plannerke.css. */
:root { --pruim: #5b2a4c; --pruim-licht: #f7e6ee; --abrikoos: #fbeadc; --hout: #7a4a2b; }
.g-titel { color: var(--pruim); }
.k-stappen button.aan { background: var(--pruim); }
.g-paneel h2, .g-start h2, .g-familie h2 { color: var(--pruim); }
#geboorteapp .knop { background: var(--pruim); color: #fff; border: 0; cursor: pointer; }
#geboorteapp .knop.rustig { background: var(--pruim-licht); color: var(--pruim); }
#geboorteapp .g-wis { background: #fff; color: var(--koraal-2); border: 1.5px solid var(--koraal-2); }

.g-kop { background: var(--abrikoos); border-radius: 14px; padding: 14px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-bottom: 16px; }
.g-kop p { margin: 0; }
.g-teller { font-size: .92rem; color: var(--zacht); }
.g-geboren { margin-bottom: 18px; }
.g-fase { font-size: 1.2rem; color: var(--pruim); margin: 22px 0 8px; }

.g-form { display: grid; gap: 12px; margin-bottom: 8px; }
.g-veld { display: grid; gap: 4px; font-size: .88rem; font-weight: 700; flex: 1 1 170px; }
.g-veld input, .g-veld textarea { font: 1rem var(--f-tekst); color: var(--inkt); border: 1.5px solid var(--lijn); border-radius: 9px; padding: 9px 10px; width: 100%; background: #fff; }
.g-smal { flex: 0 1 90px; }
.g-vink { display: flex; gap: 10px; align-items: center; font-weight: 500; cursor: pointer; }
.g-vink input { accent-color: var(--pruim); width: 1.1rem; height: 1.1rem; }
.g-keuze { border: 1.5px solid var(--lijn); border-radius: 12px; padding: 10px 14px 12px; margin: 0; display: grid; gap: 7px; }
.g-keuze legend { font-weight: 700; font-size: .88rem; padding: 0 6px; }
.g-keuze label { display: flex; gap: 9px; align-items: center; cursor: pointer; }
.g-keuze input { accent-color: var(--pruim); flex: none; }
.g-rijform { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 12px 0; padding-top: 14px; border-top: 1px dashed var(--lijn); }
.g-privacy { margin-top: 14px; }
.g-disclaimer { margin-top: 18px; }
.g-rij { margin-bottom: 8px; }

.g-lijst { list-style: none; margin: 0; padding: 0; }
.g-taak { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 2px 8px; padding: 13px 0; border-bottom: 1px solid var(--lijn); }
.g-vinkvak { display: flex; justify-content: center; padding-top: 3px; cursor: pointer; }
.g-vinkvak input { width: 1.25rem; height: 1.25rem; accent-color: var(--pruim); }
.g-taakin { min-width: 0; }
.g-taakin h4 { font: 700 1.06rem/1.25 var(--f-titel); margin: 2px 0 3px; color: var(--inkt); }
.g-datum { margin: 0; font-size: .88rem; font-weight: 600; color: var(--pruim); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.g-uitleg { margin: 0 0 5px; font-size: .95rem; color: var(--zacht); }
.g-meta { margin: 0; font-size: .82rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.g-meta a { color: var(--pruim); }
.g-soort { padding: 1px 8px; border-radius: 99px; background: var(--vlak); color: var(--zacht); font-weight: 600; }
.g-soort.wet { background: var(--pruim); color: #fff; }
.g-soort.bron { background: var(--pruim-licht); color: var(--pruim); }
.g-vlag { padding: 1px 8px; border-radius: 99px; font-size: .78rem; font-weight: 700; }
.g-vlag.nu { background: var(--zon); color: #2a1f00; }
.g-vlag.laat { background: var(--koraal-licht); color: var(--koraal-2); }
.g-taak.klaar h4 { text-decoration: line-through; color: var(--zacht); }
.g-taak.klaar .g-uitleg, .g-taak.klaar .g-meta { display: none; }

.g-tabelvak { overflow-x: auto; margin-bottom: 14px; }
.g-tabel { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 500px; }
.g-tabel th { text-align: left; font-size: .8rem; color: var(--zacht); padding: 6px; }
.g-tabel td { padding: 7px 6px; border-top: 1px solid var(--lijn); vertical-align: middle; }
.g-tabel input:not([type=checkbox]) { display: block; width: 100%; border: 0; background: transparent; font: inherit; color: var(--inkt); padding: 2px 4px; border-radius: 5px; }
.g-tabel input[data-a=naam] { font-weight: 700; }
.g-tabel input[data-a=adres] { color: var(--zacht); font-size: .86rem; }
.g-tabel input:focus { outline: 2px solid var(--pruim); }
.g-mid { text-align: center; }
.g-mid input { accent-color: var(--pruim); width: 1.1rem; height: 1.1rem; }
.g-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.g-delen { background: var(--abrikoos); border-radius: 14px; padding: 16px; margin-top: 22px; }
.g-delen h3 { font-size: 1.2rem; color: var(--pruim); margin: 0 0 6px; }
.g-delen .k-uitleg { color: var(--inkt); }
.g-plak { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #d8b9a0; }
.g-bestand { display: inline-block; cursor: pointer; }
.g-bestand input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.g-bestand:focus-within { outline: 3px solid var(--pruim); outline-offset: 2px; }
.g-regels { margin: 0 0 14px; padding: 10px 14px; background: var(--abrikoos); border-radius: 10px; }
.g-antwoord { background: #dcf5e6; border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.g-antwoord p { margin: 0 0 4px; }
.g-antwoord .g-regels { margin: 8px 0 0; background: #fff; }

@media (max-width: 560px) {
  .g-rijform .knop { width: 100%; }
}
@media print {
  .g-geenprint, .g-geboren, .g-rijform, .g-delen, .k-weg { display: none !important; }
  .g-taak { break-inside: avoid; }
  .g-meta a { display: none; }
}
.g-betalabel { vertical-align: middle; font-family: var(--f-tekst); }
.g-betanoot { margin: 0 0 16px; }