/* Tema visual principal do Prontuario Infantil. Carregado apos app.css para evitar cache/legado. */
:root,
[data-theme="mint"] {
    --bg: #f5f8fc;
    --panel: #ffffff;
    --ink: #111a3b;
    --muted: #63708a;
    --line: #e4ebf4;
    --primary: #0f9a8f;
    --primary-dark: #08756d;
    --primary-rgb: 15, 154, 143;
    --primary-light: #86d9c9;
    --primary-soft: #e7f8f5;
    --page-start: #f9fbff;
    --page-end: #f2f7fc;
    --avatar-start: #dff6ef;
    --avatar-end: #b8e9df;
    --good: #15916f;
    --bad: #de3b45;
    --shadow: 0 18px 42px rgba(38, 52, 92, .08);
    --soft-shadow: 0 10px 26px rgba(38, 52, 92, .07);
}

/* Saúde bucal: módulo independente, odontograma FDI e histórico clínico factual. */
.page-head.dental-page-head {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.page-head.dental-page-head h1 {
    align-items: center;
    display: flex;
    gap: 9px;
    margin: 0;
}

.page-head.dental-page-head h1 .title-svg {
    color: var(--primary);
    height: 25px;
    width: 25px;
}

.page-head.dental-page-head p {
    margin: 5px 0 0;
}

.dental-primary-action {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
}

.panel.dental-chart-panel,
.panel.dental-history-panel,
.panel.dental-reference-panel,
.panel.dental-observation-history {
    margin-bottom: 14px;
    padding: 20px;
}

.dental-section-heading {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.dental-section-heading h2 {
    color: #073f70;
    font-size: 20px;
    margin: 2px 0 3px;
}

.dental-section-heading p {
    color: var(--muted);
    font-size: 12px;
    margin: 0;
}

.dental-step {
    color: var(--primary-dark);
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.dental-dentition-tabs {
    background: #f2f7f9;
    border: 1px solid var(--line);
    border-radius: 13px;
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 17px auto 14px;
    max-width: 430px;
    padding: 4px;
}

.dental-dentition-tabs button {
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--muted);
    min-height: 34px;
    padding: 6px 10px;
}

.dental-dentition-tabs button.is-active {
    background: var(--panel);
    box-shadow: 0 4px 12px rgba(18, 48, 77, .08);
    color: var(--primary-dark);
    font-weight: 700;
}

.dental-dentition-panel[hidden] {
    display: none;
}

.dental-view-tabs,
.dental-subtabs {
    background: #f2f7f9;
    border: 1px solid var(--line);
    border-radius: 13px;
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 17px auto 10px;
    max-width: 430px;
    padding: 4px;
}

.dental-subtabs {
    margin-top: 0;
    max-width: 310px;
}

.dental-view-tabs button,
.dental-subtabs button {
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--muted);
    font-size: 12px;
    min-height: 34px;
    padding: 6px 10px;
}

.dental-view-tabs button.is-active,
.dental-subtabs button.is-active {
    background: var(--panel);
    box-shadow: 0 4px 12px rgba(18, 48, 77, .08);
    color: var(--primary-dark);
    font-weight: 700;
}

.dental-view-panel[hidden],
.dental-arc-illustration[hidden],
.dental-selector-board[hidden] {
    display: none;
}

.dental-selector-intro {
    color: var(--muted);
    font-size: 11px;
    margin: 14px auto 10px;
    max-width: 680px;
    text-align: center;
}

.dental-selector-layout {
    display: grid;
    gap: 10px;
    margin: 0 auto;
    max-width: 700px;
}

.dental-illustration-pair {
    display: grid;
    gap: 10px;
    margin: 0 auto;
    max-width: 700px;
}

.dental-arc-illustration {
    align-items: center;
    background: #fbfcfe;
    border: 1px solid var(--line);
    border-radius: 16px;
    display: grid;
    justify-items: center;
    margin: 0;
    overflow: hidden;
    padding: 7px 12px 9px;
}

.dental-arc-illustration figcaption,
.dental-selector-arc-label {
    color: #073f70;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.dental-arc-illustration img {
    display: block;
    height: auto;
    max-height: 235px;
    object-fit: contain;
    width: min(100%, 390px);
}

.dental-selector-board {
    background: linear-gradient(180deg, #f9fcfd 0%, #fff 100%);
    border: 1px solid #dcebef;
    border-radius: 16px;
    display: grid;
    gap: 9px;
    padding: 11px;
}

.dental-selector-heading {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.dental-selector-heading strong {
    color: var(--primary-dark);
    font-size: 12px;
}

.dental-selector-heading span {
    color: var(--muted);
    font-size: 10px;
    text-align: right;
}

.dental-selector-arc {
    display: grid;
    gap: 5px;
}

.dental-selector-arc + .dental-selector-arc {
    border-top: 1px dashed #d9e5ea;
    padding-top: 9px;
}

.dental-selector-row {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 82px minmax(0, 1fr);
}

.dental-selector-row > span {
    color: var(--muted);
    font-size: 10px;
}

.dental-selector-tooth-row {
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(var(--dental-tooth-count), minmax(0, 1fr));
}

.dental-selector-row-10 .dental-selector-tooth-row { --dental-tooth-count: 10; }
.dental-selector-row-16 .dental-selector-tooth-row { --dental-tooth-count: 16; }

.dental-selector-tooth {
    align-items: center;
    appearance: none;
    background: #fff;
    border: 1px solid #dce7ed;
    border-radius: 7px;
    color: #7f91a5;
    cursor: pointer;
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    min-height: 42px;
    min-width: 0;
    padding: 2px 1px;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

.dental-selector-tooth svg {
    fill: #fff;
    height: 25px;
    max-width: 23px;
    overflow: visible;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 100%;
}

.dental-selector-tooth span {
    color: currentColor;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
}

.dental-selector-tooth:hover,
.dental-selector-tooth:focus-visible,
.dental-selector-tooth.is-selected {
    background: color-mix(in srgb, currentColor 10%, white);
    border-color: currentColor;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent);
    outline: none;
    transform: translateY(-1px);
}

.dental-selector-tooth[class*="dental-condition-"] svg {
    fill: color-mix(in srgb, currentColor 15%, white);
}

.dental-scroll-hint {
    color: var(--muted);
    font-size: 11px;
    margin: 0 0 7px;
    text-align: center;
}

.dental-mouth {
    background: linear-gradient(180deg, #fff 0%, #fff7f7 48%, #fff 100%);
    border: 1px solid #f0dfe1;
    border-radius: 80px 80px 30px 30px;
    margin: 0 auto;
    max-width: 850px;
    overflow-x: auto;
    padding: 17px 20px;
    scrollbar-color: rgba(var(--primary-rgb), .32) transparent;
    scrollbar-width: thin;
}

.dental-mouth-directions {
    color: #9a6d74;
    display: flex;
    font-size: 9px;
    font-weight: 700;
    justify-content: space-between;
    letter-spacing: .05em;
    margin: 0 5px 3px;
    min-width: inherit;
    text-transform: uppercase;
}

.dental-arch-block + .dental-arch-block {
    border-top: 1px dashed #efdadd;
    margin-top: 38px;
    padding-top: 38px;
}

.dental-arch-block > span {
    color: var(--muted);
    display: block;
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 6px;
    text-align: center;
    text-transform: uppercase;
}

.dental-arch {
    align-items: center;
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(var(--tooth-count), minmax(30px, 1fr));
    margin: 0 auto;
    min-width: 0;
    padding: 2px 10px 26px;
}

.dental-mouth-permanent .dental-arch {
    min-width: 660px;
}

.dental-tooth-slot {
    height: 65px;
    min-width: 0;
    position: relative;
    transform: translateY(var(--arch-shift, 0)) rotate(var(--tooth-tilt, 0deg));
    transform-origin: 50% 50%;
    transition: filter .16s ease, transform .16s ease;
}

.dental-arch-lower .dental-tooth-slot {
    transform: translateY(calc(0px - var(--arch-shift, 0px))) rotate(calc(0deg - var(--tooth-tilt, 0deg)));
}

.dental-tooth-slot.is-selected {
    filter: drop-shadow(0 3px 5px rgba(var(--primary-rgb), .2));
}

.dental-tooth {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: #8ca0b3;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 65px;
    inset: 0;
    min-width: 0;
    padding: 1px;
    position: absolute;
    transition: background .16s ease, color .16s ease, transform .16s ease;
    width: 100%;
}

.dental-tooth:hover,
.dental-tooth:focus-visible,
.dental-tooth.is-selected {
    background: rgba(var(--primary-rgb), .09);
    color: var(--primary-dark);
    outline: none;
}

.dental-tooth:focus-visible {
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .25);
}

.dental-tooth svg {
    fill: #fff;
    height: 43px;
    overflow: visible;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.35;
    width: 39px;
}

.dental-tooth .tooth-detail {
    fill: none;
    opacity: .62;
    stroke-width: 1;
}

.dental-tooth-kind-incisor .dental-tooth svg { width: 29px; }
.dental-tooth-kind-canine .dental-tooth svg { width: 32px; }
.dental-tooth-kind-premolar .dental-tooth svg { width: 36px; }
.dental-tooth-kind-molar .dental-tooth svg { width: 42px; }

.dental-tooth-code {
    background: rgba(255, 255, 255, .88);
    border-radius: 5px;
    color: #324f69;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    padding: 2px 3px;
    position: absolute;
    top: 44px;
    z-index: 5;
}

.dental-condition-observed { color: #7f91a5; }
.dental-condition-erupted { color: #0f9a79; }
.dental-condition-caries-recorded { color: #df4553; }
.dental-condition-restored { color: #337fc0; }
.dental-condition-extraction-indicated { color: #e68b24; }
.dental-condition-pulpotomy-endodontics { color: #875fc7; }
.dental-condition-treated { color: #0e9d9d; }
.dental-condition-missing-recorded { color: #56687c; }
.dental-condition-exfoliated { color: #d56b9a; }

.dental-tooth[class*="dental-condition-"] svg {
    fill: color-mix(in srgb, currentColor 15%, white);
    stroke-width: 1.8;
}

.dental-tooth-detail {
    align-items: center;
    background: #f5fafb;
    border: 1px solid #dcebef;
    border-radius: 14px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin: 14px auto 0;
    max-width: 850px;
    min-height: 69px;
    padding: 11px 13px;
}

.dental-detail-eyebrow {
    color: var(--primary-dark);
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.dental-tooth-detail strong {
    color: #073f70;
    display: block;
    font-size: 14px;
    margin: 2px 0;
}

.dental-tooth-detail p {
    color: var(--muted);
    font-size: 11px;
    margin: 0;
}

.dental-detail-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.dental-detail-new {
    align-items: center;
    display: inline-flex;
    gap: 5px;
    min-height: 34px;
    padding: 7px 11px;
}

.dental-detail-new.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.dental-legend {
    display: flex;
    gap: 7px 13px;
    justify-content: center;
    margin: 13px auto 0;
    max-width: 850px;
    flex-wrap: wrap;
}

.dental-legend span {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 10px;
    gap: 5px;
}

.dental-legend i {
    background: currentColor;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: inline-block;
    height: 9px;
    width: 9px;
}

.dental-legend i:not([class]) {
    background: #fff;
    color: #a8b6c4;
}

.dental-content-grid {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
}

/* Usa a largura útil da página — inclusive após recolher a barra lateral. */
@container (max-width: 880px) {
    .dental-content-grid {
        grid-template-columns: 1fr;
    }
}

.dental-history-list,
.dental-observation-list {
    border-top: 1px solid var(--line);
    margin-top: 14px;
}

.dental-history-row {
    align-items: flex-start;
    display: grid;
    gap: 13px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 13px 0;
}

.dental-history-row + .dental-history-row {
    border-top: 1px solid var(--line);
}

.dental-history-date strong {
    background: var(--primary-soft);
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 999px;
    color: var(--primary-dark);
    display: block;
    font-size: 11px;
    line-height: 1;
    padding: 6px 8px;
    white-space: nowrap;
}

.dental-history-date span {
    color: var(--muted);
    display: block;
    font-size: 10px;
    margin-top: 4px;
    white-space: nowrap;
}

.dental-history-topline {
    align-items: flex-start;
    display: flex;
    gap: 9px;
    min-width: 0;
}

.dental-history-professional {
    min-width: 0;
}

.dental-history-professional h3 {
    color: #073f70;
    font-size: 14px;
    margin: 0 0 2px;
}

.dental-history-professional > span {
    color: var(--muted);
    display: block;
    font-size: 11px;
}

.dental-history-details {
    margin-left: 0;
    margin-top: 5px;
}

.dental-history-details p {
    color: #4f6077;
    font-size: 11px;
    margin: 3px 0 0;
}

.dental-history-details p b {
    color: #27425e;
}

.dental-row-actions {
    align-items: center;
    display: flex;
    gap: 12px;
}

.dental-row-actions form {
    margin: 0;
}

.dental-eruption-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
}

.dental-eruption-grid > div {
    background: #f7fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
}

.dental-eruption-grid > div > strong {
    color: #073f70;
    display: block;
    font-size: 12px;
    margin-bottom: 7px;
}

.dental-eruption-grid span {
    color: var(--muted);
    display: flex;
    font-size: 10px;
    gap: 6px;
    justify-content: space-between;
    padding: 3px 0;
}

.dental-eruption-grid span b {
    color: #314e69;
    white-space: nowrap;
}

.dental-eruption-rows {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.dental-eruption-row {
    align-items: center;
    background: #fbfcfe;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 9px;
    grid-template-columns: minmax(128px, 260px) minmax(175px, 1fr);
    overflow: hidden;
    padding: 8px;
}

.dental-eruption-row > img {
    display: block;
    height: auto;
    justify-self: center;
    max-width: min(100%, 260px);
    width: 100%;
}

.dental-eruption-list {
    align-self: stretch;
    display: grid;
    grid-template-rows: auto repeat(5, minmax(0, 1fr));
    min-width: 0;
}

.dental-eruption-list > div {
    align-items: center;
    border-top: 1px solid #edf1f6;
    color: #53647a;
    display: grid;
    font-size: 10px;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
    line-height: 1.2;
    min-width: 0;
    padding: 4px 0;
}

.dental-eruption-list > div > span {
    min-width: 0;
}

.dental-eruption-list > div > b {
    color: #193f63;
    font-size: 10px;
    white-space: nowrap;
}

.dental-eruption-list > .dental-eruption-incisor { color: #83900d; }
.dental-eruption-list > .dental-eruption-canine { color: #e3424d; }
.dental-eruption-list > .dental-eruption-molar { color: #087fb0; }
.dental-eruption-list > :is(.dental-eruption-incisor, .dental-eruption-canine, .dental-eruption-molar) > b {
    color: currentColor;
    font-weight: 800;
}

.dental-eruption-list > .dental-eruption-list-head {
    border-top: 0;
    color: var(--primary-dark);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .02em;
    padding-top: 0;
    text-transform: uppercase;
}

.dental-eruption-list > .dental-eruption-list-head > span:last-child {
    text-align: right;
}

.dental-eruption-figure {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin: 14px 0 0;
    overflow: hidden;
}

.dental-eruption-figure img {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

.dental-eruption-figure figcaption {
    align-items: flex-start;
    border-top: 1px solid var(--line);
    color: var(--muted);
    display: flex;
    font-size: 10px;
    gap: 6px;
    line-height: 1.45;
    padding: 9px 10px;
}

.dental-eruption-figure figcaption svg {
    color: var(--primary);
    flex: 0 0 auto;
    margin-top: 1px;
}

.dental-reference-note {
    align-items: flex-start;
    color: var(--muted);
    display: flex;
    font-size: 10px;
    gap: 6px;
    line-height: 1.45;
    margin: 11px 0 0;
}

.dental-reference-note svg {
    color: var(--primary);
    flex: 0 0 auto;
    margin-top: 1px;
}

.dental-observation-list article {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    padding: 10px 0;
}

.dental-observation-list article + article {
    border-top: 1px solid var(--line);
}

.dental-observation-code {
    align-items: center;
    background: color-mix(in srgb, currentColor 12%, white);
    border: 1px solid color-mix(in srgb, currentColor 28%, white);
    border-radius: 10px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    height: 32px;
    justify-content: center;
    width: 36px;
}

.dental-observation-list strong {
    color: #073f70;
    display: block;
    font-size: 12px;
}

.dental-observation-list div > span {
    color: var(--muted);
    display: block;
    font-size: 10px;
    margin-top: 2px;
}

.dental-empty {
    color: var(--muted);
    font-size: 12px;
    margin: 14px 0 0;
}

.dental-editor-grid :is(input, select, textarea) {
    font-weight: 400 !important;
}

@media (max-width: 760px) {
    .page-head.dental-page-head {
        align-items: center;
    }

    .page-head.dental-page-head h1 {
        font-size: 25px;
    }

    .page-head.dental-page-head p {
        font-size: 12px;
    }

    .dental-primary-action {
        font-size: 11px;
        padding: 8px 10px;
    }

    .panel.dental-chart-panel,
    .panel.dental-history-panel,
    .panel.dental-reference-panel,
    .panel.dental-observation-history {
        padding: 14px;
    }

    .dental-section-heading h2 {
        font-size: 18px;
    }

    .dental-selector-intro {
        font-size: 10px;
        text-align: left;
    }

    .dental-arc-illustration,
    .dental-selector-board {
        border-radius: 12px;
        padding: 8px;
    }

    .dental-arc-illustration img {
        max-height: 190px;
        width: min(100%, 300px);
    }

    .dental-selector-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 1px;
    }

    .dental-selector-heading span {
        font-size: 9px;
        text-align: left;
    }

    .dental-selector-row {
        gap: 2px;
        grid-template-columns: 1fr;
    }

    .dental-selector-row > span {
        font-size: 9px;
    }

    .dental-selector-tooth {
        border-radius: 5px;
        min-height: 35px;
        padding: 1px 0;
    }

    .dental-selector-tooth svg {
        height: 20px;
        max-width: 17px;
    }

    .dental-selector-tooth span {
        font-size: 7px;
    }

    .dental-mouth {
        border-radius: 45px 45px 20px 20px;
        padding: 12px 8px;
    }

    .dental-arch {
        gap: 1px;
        grid-template-columns: repeat(var(--tooth-count), minmax(25px, 1fr));
        padding-inline: 2px;
    }

    .dental-tooth-slot,
    .dental-tooth {
        border-radius: 8px;
        height: 59px;
    }

    .dental-tooth svg {
        height: 37px;
    }

    .dental-tooth-kind-incisor .dental-tooth svg { width: 25px; }
    .dental-tooth-kind-canine .dental-tooth svg { width: 27px; }
    .dental-tooth-kind-premolar .dental-tooth svg { width: 30px; }
    .dental-tooth-kind-molar .dental-tooth svg { width: 33px; }

    .dental-tooth-code {
        font-size: 9px;
        top: 38px;
    }

    .dental-tooth-detail {
        align-items: flex-start;
    }

    .dental-detail-actions {
        gap: 8px;
    }

    .dental-detail-new {
        font-size: 10px;
        padding-inline: 8px;
    }

    .dental-legend {
        justify-content: flex-start;
    }

    .dental-content-grid {
        grid-template-columns: 1fr;
    }

    .dental-history-row {
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .dental-history-date strong {
        font-size: 11px;
    }

    .dental-row-actions {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .dental-eruption-row {
        gap: 7px;
        grid-template-columns: minmax(105px, .78fr) minmax(150px, 1.22fr);
        padding: 7px;
    }

    .dental-eruption-list > div,
    .dental-eruption-list > div > b {
        font-size: 9px;
    }

    .dental-eruption-list > .dental-eruption-list-head {
        font-size: 8px;
    }

    .booklet-form-grid.dental-editor-grid {
        gap: 10px 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booklet-form-grid.dental-editor-grid .wide-field {
        grid-column: 1 / -1;
    }

    .booklet-form-grid.dental-editor-grid :is(input, select, textarea) {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 390px) {
    .page-head.dental-page-head h1 {
        font-size: 22px;
    }

    .page-head.dental-page-head h1 .title-svg {
        display: none;
    }

    .dental-primary-action span {
        display: none;
    }

    .dental-tooth-detail {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 9px;
    }

    .dental-detail-new {
        font-size: 0;
        height: 34px;
        justify-content: center;
        padding: 7px;
        width: 34px;
    }

    .dental-detail-new svg {
        height: 16px;
        width: 16px;
    }

    .dental-eruption-grid {
        grid-template-columns: 1fr;
    }

}

/* Health form: compact clinical layout for new and edited appointments. */
.health-form-heading {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.health-form-heading h1 {
    margin: 0;
}

.health-form-heading p {
    margin: 5px 0 0;
}

.health-form-back {
    flex: 0 0 auto;
}

.health-editor {
    display: grid;
    gap: 18px;
    max-width: 880px;
    padding: 22px;
}

.health-form-grid {
    display: grid;
    gap: 14px 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.health-child-line {
    align-items: baseline;
    display: flex;
    gap: 5px;
    grid-column: 1 / -1;
    min-height: 20px;
}

.health-child-line > span {
    color: var(--muted, #61708c);
    font-size: 13px;
    font-weight: 700;
}

.health-child-line > strong {
    color: var(--primary, #009b8f);
    font-size: 14px;
    font-weight: 400;
}

.health-child-line label {
    display: grid;
    gap: 6px;
    width: min(100%, 300px);
}

.health-field,
.health-attachment-field,
.health-treatment-row label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.health-field > span,
.health-attachment-field > span,
.health-treatment-row label > span {
    color: var(--ink, #10234c);
    font-size: 12px;
    font-weight: 700;
}

.health-field input,
.health-field textarea,
.health-treatment-row input,
.health-editor select {
    font-weight: 400;
    min-width: 0;
}

.health-priority-field textarea,
.health-priority-field input {
    border-color: #1685ff;
    box-shadow: 0 0 0 1px rgba(22, 133, 255, .12);
}

.health-priority-field textarea:focus,
.health-priority-field input:focus {
    border-color: #0c6ee8;
    box-shadow: 0 0 0 3px rgba(22, 133, 255, .16);
}

.health-field textarea {
    min-height: 72px;
    resize: vertical;
}

.health-field-wide {
    grid-column: 1 / -1;
}

.health-treatment-editor {
    border-top: 1px solid #e4ebf4;
    padding-top: 16px;
}

.health-treatment-heading {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.health-treatment-heading h2 {
    font-size: 19px;
    margin: 0;
}

.health-add-treatment {
    font-size: 12px;
    min-height: 34px;
    padding: 6px 10px;
}

.health-treatment-list {
    display: grid;
    gap: 13px;
}

.health-treatment-row {
    align-items: end;
    border-bottom: 2px solid #15213c;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    padding: 0 0 13px;
}

.treatment-item { grid-column: 1 / span 5; grid-row: 1; }
.treatment-qty { grid-column: 6 / span 2; grid-row: 1; }
.treatment-frequency { grid-column: 8 / span 3; grid-row: 1; }
.treatment-start { grid-column: 1 / span 6; grid-row: 2; }
.treatment-period { grid-column: 7 / span 3; grid-row: 2; }

.treatment-remove {
    align-items: center;
    background: #fff4f5;
    border: 1px solid #ffc9cf;
    border-radius: 8px;
    color: #dc3f4e;
    cursor: pointer;
    display: inline-flex;
    font-size: 17px;
    font-weight: 800;
    grid-column: 10;
    grid-row: 2;
    height: 37px;
    justify-content: center;
    line-height: 1;
    margin-bottom: 0;
    padding: 0;
    min-width: 28px;
    width: 100%;
}

.treatment-remove:hover,
.treatment-remove:focus-visible {
    background: #ffe7ea;
    outline: 2px solid #ee7783;
    outline-offset: 2px;
}

.health-followup-fields {
    border-top: 1px solid #e4ebf4;
    padding-top: 16px;
}

.health-attachment-field {
    color: var(--muted, #61708c);
    font-size: 12px;
}

.health-attachment-field input[type="file"] {
    font-size: 12px;
    max-width: 100%;
    padding: 7px;
}

.health-form-actions {
    border-top: 1px solid #e4ebf4;
    margin-top: 0;
    padding-top: 16px;
}

@media (max-width: 720px) {
    .health-form-heading {
        align-items: center;
        margin-bottom: 12px;
    }

    .health-form-heading h1 {
        font-size: 23px;
    }

    .health-form-heading p {
        display: none;
    }

    .health-form-back {
        font-size: 12px;
        min-height: 33px;
        padding: 6px 10px;
    }

    .health-editor {
        gap: 15px;
        padding: 14px;
    }

    .health-form-grid {
        gap: 12px;
    }

    .health-child-line {
        margin-bottom: -2px;
    }

    .health-treatment-heading h2 {
        font-size: 18px;
    }

    .health-add-treatment {
        font-size: 11px;
        min-height: 31px;
    }

    .health-treatment-row {
        column-gap: 7px;
        grid-template-columns: repeat(10, minmax(0, 1fr));
        row-gap: 9px;
    }

    .treatment-item { grid-column: 1 / span 5; grid-row: 1; }
    .treatment-qty { grid-column: 6 / span 2; grid-row: 1; }
    .treatment-frequency { grid-column: 8 / span 3; grid-row: 1; }
    .treatment-start { grid-column: 1 / span 6; grid-row: 2; }
    .treatment-period { grid-column: 7 / span 3; grid-row: 2; }

    .treatment-remove {
        align-self: end;
        grid-column: 10;
        grid-row: 2;
        justify-self: end;
    }

    .health-treatment-row label > span {
        font-size: 11px;
    }

    .health-treatment-row input {
        font-size: 12px;
        min-height: 37px;
        padding: 7px 8px;
    }

    .health-attachment-field {
        grid-column: 1 / -1;
    }

    .health-form-actions {
        gap: 8px;
    }
}

[data-theme="blue"] {
    --bg: #f4f8fe;
    --primary: #2478d4;
    --primary-dark: #155799;
    --primary-rgb: 36, 120, 212;
    --primary-light: #9dd7ff;
    --primary-soft: #eaf4ff;
    --page-start: #fbfdff;
    --page-end: #eff6ff;
    --avatar-start: #e2f2ff;
    --avatar-end: #b8dcff;
}

[data-theme="rose"] {
    --bg: #fff7fa;
    --primary: #df5f8f;
    --primary-dark: #ad3767;
    --primary-rgb: 223, 95, 143;
    --primary-light: #ffd6e5;
    --primary-soft: #fff0f6;
    --page-start: #fffafd;
    --page-end: #f8f2fb;
    --avatar-start: #ffe5ef;
    --avatar-end: #ffc3d9;
}

[data-theme="lilac"] {
    --bg: #f7f5ff;
    --primary: #7b61d8;
    --primary-dark: #5740ad;
    --primary-rgb: 123, 97, 216;
    --primary-light: #dcd2ff;
    --primary-soft: #f1eeff;
    --page-start: #fcfbff;
    --page-end: #f3f7fc;
    --avatar-start: #eee9ff;
    --avatar-end: #cfc4ff;
}

[data-theme="sunny"] {
    --bg: #fffaf1;
    --primary: #d98919;
    --primary-dark: #986012;
    --primary-rgb: 217, 137, 25;
    --primary-light: #ffe3a3;
    --primary-soft: #fff6dd;
    --page-start: #fffdf8;
    --page-end: #f5f8f4;
    --avatar-start: #fff0c9;
    --avatar-end: #ffd47a;
}

body.modal-open {
    overflow: hidden;
}
.app-modal-overlay {
    align-items: center;
    background: rgba(15, 24, 50, .48);
    backdrop-filter: blur(4px);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 22px;
    position: fixed;
    z-index: 1000;
}
.app-modal-window {
    background: #fff;
    border: 1px solid rgba(226, 234, 246, .95);
    border-radius: 22px;
    box-shadow: 0 26px 70px rgba(18, 31, 62, .28);
    height: min(92vh, 760px);
    max-width: 980px;
    overflow: hidden;
    position: relative;
    width: min(96vw, 980px);
}
.app-modal-frame {
    border: 0;
    height: 100%;
    width: 100%;
}
.app-modal-close {
    align-items: center;
    background: #eef4f8;
    border: 0;
    border-radius: 999px;
    color: #1c2942;
    cursor: pointer;
    display: inline-flex;
    font-size: 24px;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 34px;
    z-index: 2;
}
.modal-document {
    background: #f5f8fc;
    min-height: 100vh;
}
.modal-document-shell {
    padding: 22px;
}
.modal-document .page-head {
    margin: 0 42px 14px 0;
}
.modal-document .page-head h1 {
    font-size: 24px;
}
.modal-document .grid-form {
    box-shadow: none;
    margin: 0;
}

.theme-picker {
    display: grid;
    gap: 10px;
    padding: 2px 0;
}
.theme-picker-head {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.theme-picker-head span {
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
}
.theme-picker-head small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.theme-choice-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.theme-choice {
    align-items: center;
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    gap: 9px;
    min-height: 56px;
    padding: 9px;
    position: relative;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.theme-choice:hover {
    border-color: rgba(var(--primary-rgb), .36);
    transform: translateY(-1px);
}
.theme-choice:has(input:checked) {
    background: var(--primary-soft);
    border-color: var(--primary);
    box-shadow: 0 10px 24px rgba(var(--primary-rgb), .12);
}
.theme-choice input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}
.theme-swatch {
    background: linear-gradient(135deg, var(--sw1) 0 34%, var(--sw2) 34% 68%, var(--sw3) 68% 100%);
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 5px 14px rgba(30, 42, 72, .12);
    flex: 0 0 28px;
    height: 28px;
    width: 28px;
}
.theme-choice-text {
    display: grid;
    gap: 1px;
    min-width: 0;
}
.theme-choice-text strong,
.theme-choice-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.theme-choice-text strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}
.theme-choice-text small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 760px) {
    .theme-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .theme-picker-head {
        align-items: flex-start;
        display: grid;
        gap: 2px;
    }
    .theme-choice {
        min-height: 50px;
        padding: 8px;
    }
    .theme-choice-text small {
        display: none;
    }
}

.diary-page-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}
.diary-page-head h1 {
    align-items: center;
    display: flex;
    gap: 10px;
}
.diary-title-icon {
    color: #f04d75;
}
.diary-new-button {
    border-radius: 14px;
    min-width: 104px;
}
.diary-child-switch {
    margin-bottom: 14px;
    padding: 10px 12px;
}
.diary-child-switch label {
    display: grid;
    gap: 6px;
    max-width: 320px;
}
.diary-profile-card {
    align-items: center;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--soft-shadow);
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(250px, 1fr) auto;
    margin-bottom: 18px;
    padding: 22px;
}
.diary-profile-main {
    align-items: center;
    display: flex;
    gap: 16px;
    min-width: 0;
}
.diary-profile-main .avatar {
    flex: 0 0 76px;
    height: 76px;
    width: 76px;
}
.diary-profile-main h2 {
    font-size: 24px;
    margin: 0 0 4px;
}
.diary-profile-main p {
    color: var(--muted);
    margin: 0;
}
.diary-profile-facts {
    display: flex;
    gap: 70px;
    justify-content: flex-end;
}
.diary-today-fact {
    align-items: center;
    display: grid;
    gap: 2px 10px;
    grid-template-columns: 38px minmax(110px, auto);
}
.diary-today-fact .mini-svg {
    background: #e8fbf4;
    border-radius: 999px;
    color: var(--primary);
    grid-row: span 2;
    height: 38px;
    padding: 9px;
    width: 38px;
}
.diary-today-fact.weather .mini-svg {
    background: #fff4d5;
    color: #ee9f18;
}
.diary-today-fact small {
    color: #596983;
    font-size: 12px;
    font-weight: 800;
}
.diary-today-fact strong {
    color: var(--ink);
    font-size: 14px;
}
.diary-stats-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 18px;
}
.diary-stat-card {
    align-items: center;
    border: 1px solid rgba(218, 226, 239, .78);
    border-radius: 18px;
    display: grid;
    gap: 2px 14px;
    grid-template-columns: 50px 1fr;
    min-height: 88px;
    padding: 14px;
}
.diary-stat-card .card-svg {
    border-radius: 50%;
    grid-row: span 3;
    height: 44px;
    padding: 11px;
    width: 44px;
}
.diary-stat-card span {
    color: #52637f;
    font-size: 12px;
    font-weight: 800;
}
.diary-stat-card strong {
    color: var(--ink);
    font-size: 26px;
    line-height: 1;
}
.diary-stat-card small {
    color: var(--muted);
    font-size: 12px;
}
.diary-stat-card.mint { background: linear-gradient(135deg, #edfff9, #f7fffc); }
.diary-stat-card.lilac { background: linear-gradient(135deg, #f4efff, #fbf9ff); }
.diary-stat-card.rose { background: linear-gradient(135deg, #fff0f3, #fff9fa); }
.diary-stat-card.gold { background: linear-gradient(135deg, #fff6db, #fffdf5); }
.diary-stat-card.sky { background: linear-gradient(135deg, #ecf8ff, #f8fcff); }
.diary-stat-card.mint .card-svg { background: #d9fbef; color: #119678; }
.diary-stat-card.lilac .card-svg { background: #e8dcff; color: #8062e9; }
.diary-stat-card.rose .card-svg { background: #ffe0e8; color: #ef4e72; }
.diary-stat-card.gold .card-svg { background: #ffe9a9; color: #db9612; }
.diary-stat-card.sky .card-svg { background: #dff3ff; color: #1687c7; }
.diary-top-strip {
    align-items: stretch;
    display: grid;
    gap: 10px;
    grid-template-columns: 132px minmax(225px, .95fr) minmax(205px, .85fr) minmax(230px, .9fr);
    margin: -2px 0 12px;
}
.diary-top-summary,
.diary-top-cloud,
.diary-top-categories,
.diary-quick-inline {
    min-height: 104px;
}
.diary-top-summary {
    background: #f8f9fd;
    border: 1px solid #d8dce6;
    border-radius: 14px;
    box-shadow: inset 0 0 0 2px rgba(16, 24, 44, .04);
    display: grid;
    gap: 8px;
    padding: 8px;
}
.diary-mini-stat {
    align-items: center;
    background: #fff;
    border-radius: 14px;
    display: grid;
    gap: 2px 7px;
    grid-template-columns: 26px auto 1fr;
    min-height: 40px;
    padding: 6px 8px;
}
.diary-mini-stat .mini-svg {
    border-radius: 999px;
    height: 24px;
    padding: 6px;
    width: 24px;
}
.diary-mini-stat strong {
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
}
.diary-mini-stat span {
    color: #52637f;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
}
.diary-mini-stat.lilac .mini-svg { background: #efe8ff; color: #8062e9; }
.diary-mini-stat.rose .mini-svg { background: #ffe8ee; color: #ef4e72; }
.diary-top-cloud,
.diary-top-categories {
    padding: 10px 12px;
}
.diary-top-cloud h2,
.diary-top-categories h2,
.diary-quick-inline h2 {
    font-size: 16px;
    line-height: 1.1;
    margin: 0;
}
.diary-top-cloud p {
    margin: 1px 0 0;
}
.diary-top-cloud .mood-cloud {
    justify-content: flex-start;
    padding-top: 8px;
}
.diary-top-categories .category-meter {
    gap: 7px;
    grid-template-columns: 22px 76px 1fr 20px;
    margin-top: 7px;
}
.diary-quick-inline {
    align-content: start;
    display: grid;
    gap: 8px;
    padding: 10px 0 0;
}
.diary-quick-inline-head {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr auto;
}
.diary-quick-inline-head button {
    border-radius: 14px;
    min-height: 38px;
    padding: 8px 14px;
}
.diary-quick-inline .quick-picks {
    grid-template-columns: 1fr 1fr;
}
.diary-quick-inline .quick-pick {
    background: #fff;
    min-height: 52px;
}
.diary-workspace {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 780px) minmax(180px, 1fr);
}
.diary-main-panel,
.diary-side-column .panel {
    border-radius: 20px;
}
.diary-tabs-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr auto;
    margin: -2px -2px 16px;
    padding: 0 0 12px;
}
.diary-tabs {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.diary-tabs a {
    color: #475775;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 850;
    padding: 10px 0;
    position: relative;
    text-decoration: none;
}
.diary-tabs a.is-active {
    color: var(--primary-dark);
}
.diary-tabs a.is-active::after {
    background: var(--primary);
    border-radius: 999px;
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    width: 100%;
}
.diary-filter-inline {
    align-items: center;
    display: flex;
    gap: 8px;
}
.diary-filter-inline select,
.diary-filter-inline input {
    border-radius: 12px;
    font-size: 12px;
    min-height: 36px;
    padding: 8px 10px;
}
.diary-filter-inline input {
    max-width: 150px;
}
.diary-filter-inline button {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    min-height: 36px;
    padding: 8px 12px;
}
.diary-list-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.diary-list-head h2,
.diary-side-column h2 {
    font-size: 18px;
    margin: 0;
}
.diary-list {
    display: grid;
    gap: 4px;
}
.diary-entry-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 14px;
    grid-template-columns: 70px minmax(0, 1fr) minmax(118px, auto) auto auto;
    min-height: 92px;
    padding: 11px 0;
}
.diary-date-pill {
    align-items: center;
    border-radius: 16px;
    display: grid;
    height: 62px;
    justify-items: center;
    line-height: 1;
    text-decoration: none;
    width: 62px;
}
.diary-date-pill strong {
    font-size: 24px;
}
.diary-date-pill span,
.diary-date-pill small {
    font-size: 11px;
    font-weight: 900;
}
.diary-date-pill.mint { background: #e3fbf2; color: #078070; }
.diary-date-pill.gold { background: #fff3d3; color: #d78b00; }
.diary-date-pill.rose { background: #ffe5ec; color: #e63260; }
.diary-date-pill.sky { background: #e4f3ff; color: #1478bf; }
.diary-date-pill.lilac { background: #eee7ff; color: #7559dc; }
.diary-row-main {
    color: inherit;
    display: grid;
    gap: 3px;
    min-width: 0;
    text-decoration: none;
}
.diary-row-main small {
    color: var(--muted);
    font-size: 12px;
}
.diary-row-main strong {
    color: var(--ink);
    font-size: 15px;
}
.diary-row-main span {
    color: #53617d;
    font-size: 13px;
    line-height: 1.35;
}
.diary-row-tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
}
.category-chip,
.mood-chip {
    background: #edf9f4;
    border-radius: 999px;
    color: var(--primary-dark);
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
    padding: 4px 9px;
}
.category-chip.green,
.mood-chip.green { background: #e8fbf1; color: #13936b; }
.category-chip.teal,
.mood-chip.teal { background: #ddfaf4; color: #078070; }
.category-chip.rose,
.mood-chip.rose { background: #ffe6ec; color: #df315c; }
.category-chip.gold { background: #fff3d4; color: #c98700; }
.category-chip.orange,
.mood-chip.orange { background: #fff1de; color: #db7e00; }
.category-chip.blue,
.mood-chip.blue { background: #e7f3ff; color: #1874bd; }
.category-chip.lilac,
.mood-chip.purple { background: #eee8ff; color: #6f56d9; }
.category-chip.muted,
.mood-chip.muted { background: #eef3f7; color: #667085; }
.diary-row-thumb {
    border-radius: 12px;
    display: block;
    height: 64px;
    overflow: hidden;
    width: 72px;
}
.diary-row-thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.diary-row-actions {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, 30px);
    justify-content: end;
}
.diary-row-actions form {
    display: contents;
}
.diary-row-actions .icon-action {
    height: 30px;
    margin-right: 0;
    width: 30px;
}
.diary-side-column {
    align-content: start;
    align-self: start;
    display: grid;
    gap: 14px;
}
.diary-quick-card {
    align-content: start;
    display: grid;
    gap: 9px;
    padding: 14px;
}
.quick-card-head {
    display: grid;
    gap: 3px;
}
.diary-quick-card p,
.diary-cloud-card p {
    color: var(--muted);
    font-size: 12px;
    margin: -4px 0 0;
}
.quick-picks {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}
.quick-pick {
    align-items: center;
    background: #fbfdff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 2px 8px;
    grid-template-columns: 26px 1fr;
    min-height: 58px;
    padding: 7px 9px;
}
.quick-pick span {
    color: #5a6883;
    font-size: 12px;
    font-weight: 850;
}
.quick-pick select {
    background: transparent;
    border: 0;
    grid-column: 2;
    min-height: 20px;
    padding: 0;
}
.quick-svg {
    border-radius: 50%;
    grid-row: span 2;
    height: 26px;
    padding: 6px;
    width: 26px;
}
.quick-pick.mood .quick-svg {
    background: #e7fbf0;
    color: #15916f;
}
.quick-pick.weather .quick-svg {
    background: #fff1cf;
    color: #f3a410;
}
.diary-quick-card button {
    min-height: 40px;
    padding: 9px 12px;
    width: 100%;
}
.diary-cloud-card {
    align-self: start;
    padding: 16px;
}
.mood-cloud {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
    justify-content: center;
    padding: 10px 2px 2px;
}
.mood-cloud span {
    color: var(--primary);
    font-size: var(--mood-size, 16px);
    font-weight: 900;
    line-height: 1.1;
}
.mood-cloud span.green { color: #12a36f; }
.mood-cloud span.blue { color: #2184d5; }
.mood-cloud span.orange { color: #f19a14; }
.mood-cloud span.purple { color: #7c5be1; }
.mood-cloud span.teal { color: #079486; }
.mood-cloud span.rose { color: #e84569; }
.mood-cloud span.muted { color: #7b879a; }
.category-meter {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 22px 78px 1fr 24px;
    margin-top: 10px;
}
.category-meter .category-meter-icon {
    align-items: center;
    border-radius: 7px;
    display: inline-flex;
    height: 22px;
    justify-content: center;
    width: 22px;
}
.category-meter .category-meter-icon .mini-svg {
    height: 14px;
    width: 14px;
}
.category-meter .category-meter-name,
.category-meter strong {
    color: #596983;
    font-size: 12px;
    font-weight: 850;
}
.category-meter i {
    background: #edf2f8;
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
}
.category-meter b {
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    display: block;
    height: 100%;
}
.category-meter.green .category-meter-icon { background: #e8fbf1; color: #13936b; }
.category-meter.green b { background: #94dfbc; }
.category-meter.mint .category-meter-icon,
.category-meter.teal .category-meter-icon { background: #ddfaf4; color: #078070; }
.category-meter.mint b,
.category-meter.teal b { background: #78d4c5; }
.category-meter.rose .category-meter-icon { background: #ffe6ec; color: #df315c; }
.category-meter.rose b { background: #f2a7b9; }
.category-meter.gold .category-meter-icon { background: #fff3d4; color: #c98700; }
.category-meter.gold b { background: #f2c765; }
.category-meter.orange .category-meter-icon { background: #fff1de; color: #db7e00; }
.category-meter.orange b { background: #f2b66b; }
.category-meter.blue .category-meter-icon { background: #e7f3ff; color: #1874bd; }
.category-meter.blue b { background: #91c8f0; }
.category-meter.lilac .category-meter-icon { background: #eee8ff; color: #6f56d9; }
.category-meter.lilac b { background: #b5a5f2; }
.category-meter.muted .category-meter-icon { background: #eef3f7; color: #667085; }
.category-meter.muted b { background: #b9c3d0; }

@media (max-width: 1180px) {
    .diary-top-strip {
        grid-template-columns: 128px minmax(190px, .95fr) minmax(185px, .8fr) minmax(205px, .85fr);
    }
    .diary-quick-inline {
        grid-column: auto;
        grid-template-columns: none;
        padding-top: 10px;
    }
    .diary-quick-inline .quick-picks {
        align-self: stretch;
    }
    .diary-workspace {
        grid-template-columns: 1fr;
    }
    .diary-side-column {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .diary-tabs-row {
        grid-template-columns: 1fr;
    }
    .diary-filter-inline {
        flex-wrap: wrap;
    }
}

@media (max-width: 760px) {
    .app-modal-overlay {
        align-items: stretch;
        padding: 10px;
    }
    .app-modal-window {
        border-radius: 18px;
        height: 94vh;
        width: 100%;
    }
    .modal-document-shell {
        padding: 14px;
    }
    .modal-document .page-head h1 {
        font-size: 20px;
    }
    .diary-page-head {
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }
    .diary-page-head h1 {
        font-size: 21px;
    }
    .diary-page-head p {
        display: none;
    }
    .diary-new-button {
        min-height: 36px;
        min-width: 82px;
        padding: 8px 12px;
    }
    .diary-top-strip {
        display: flex;
        gap: 8px;
        margin-bottom: 10px;
        overflow-x: auto;
        padding: 0 2px 7px;
        scroll-snap-type: x mandatory;
    }
    .diary-top-strip > * {
        flex: 0 0 244px;
        scroll-snap-align: start;
    }
    .diary-top-summary {
        flex-basis: 162px;
        min-height: 92px;
    }
    .diary-mini-stat {
        grid-template-columns: 24px auto 1fr;
        min-height: 36px;
        padding: 5px 7px;
    }
    .diary-mini-stat strong {
        font-size: 21px;
    }
    .diary-top-cloud,
    .diary-top-categories,
    .diary-quick-inline {
        min-height: 92px;
        padding: 9px;
    }
    .diary-top-cloud h2,
    .diary-top-categories h2,
    .diary-quick-inline h2 {
        font-size: 14px;
    }
    .diary-top-cloud p {
        font-size: 11px;
    }
    .diary-top-cloud .mood-cloud {
        gap: 4px 9px;
        padding-top: 6px;
    }
    .diary-top-categories .category-meter {
        grid-template-columns: 20px 72px 1fr 18px;
        margin-top: 5px;
    }
    .diary-quick-inline {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 16px;
    }
    .diary-quick-inline-head {
        gap: 8px;
    }
    .diary-quick-inline-head button {
        min-height: 34px;
        padding: 7px 11px;
    }
    .diary-quick-inline .quick-picks {
        gap: 7px;
    }
    .diary-quick-inline .quick-pick {
        grid-template-columns: 24px 1fr;
        min-height: 46px;
        padding: 6px 7px;
    }
    .diary-quick-inline .quick-pick span {
        font-size: 10px;
    }
    .diary-quick-inline .quick-pick select {
        font-size: 11px;
    }
    .diary-child-switch {
        padding: 8px;
    }
    .diary-profile-card {
        border-radius: 18px;
        gap: 12px;
        grid-template-columns: 1fr;
        margin-bottom: 12px;
        padding: 14px;
    }
    .diary-profile-main .avatar {
        flex-basis: 52px;
        height: 52px;
        width: 52px;
    }
    .diary-profile-main h2 {
        font-size: 18px;
    }
    .diary-profile-main p {
        font-size: 12px;
    }
    .diary-profile-facts {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
    }
    .diary-today-fact {
        background: #f8fbfd;
        border-radius: 14px;
        flex: 0 0 150px;
        grid-template-columns: 30px 1fr;
        padding: 8px;
    }
    .diary-today-fact .mini-svg {
        height: 30px;
        padding: 7px;
        width: 30px;
    }
    .diary-stats-grid {
        display: flex;
        gap: 10px;
        margin-bottom: 12px;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .diary-stat-card {
        flex: 0 0 118px;
        gap: 2px;
        grid-template-columns: 1fr;
        justify-items: start;
        min-height: 94px;
        padding: 12px;
    }
    .diary-stat-card .card-svg {
        height: 34px;
        padding: 8px;
        width: 34px;
    }
    .diary-stat-card strong {
        font-size: 20px;
    }
    .diary-main-panel {
        border-radius: 18px;
        padding: 14px;
    }
    .diary-tabs {
        gap: 18px;
    }
    .diary-tabs a {
        font-size: 12px;
        padding: 8px 0;
    }
    .diary-filter-inline {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .diary-filter-inline input,
    .diary-filter-inline button {
        grid-column: 1 / -1;
        max-width: none;
    }
    .diary-list-head h2 {
        font-size: 17px;
    }
    .diary-list-head .button {
        display: none;
    }
    .diary-entry-row {
        gap: 9px;
        grid-template-columns: 52px minmax(0, 1fr) 58px;
        min-height: 82px;
        padding: 10px 0;
    }
    .diary-date-pill {
        border-radius: 13px;
        height: 52px;
        width: 52px;
    }
    .diary-date-pill strong {
        font-size: 20px;
    }
    .diary-date-pill span,
    .diary-date-pill small {
        font-size: 9px;
    }
    .diary-row-main small {
        font-size: 11px;
    }
    .diary-row-main strong {
        font-size: 13px;
    }
    .diary-row-main span {
        display: none;
    }
    .diary-row-tags {
        align-self: start;
        grid-column: 2;
        justify-content: flex-start;
        margin-top: -16px;
    }
    .category-chip {
        display: none;
    }
    .mood-chip {
        font-size: 10px;
        padding: 3px 7px;
    }
    .diary-row-thumb {
        grid-column: 3;
        grid-row: 1 / span 2;
        height: 52px;
        width: 54px;
    }
    .diary-row-actions {
        display: none;
        grid-column: 2 / -1;
        justify-content: flex-end;
        margin-top: -4px;
    }
    .diary-side-column {
        display: none;
    }
}

html,
body {
    background: linear-gradient(180deg, var(--page-start) 0%, var(--page-end) 100%) !important;
    color: var(--ink);
    overflow-x: hidden;
}

button,
.button {
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(var(--primary-rgb), .14);
    min-height: 40px;
}
.ghost {
    background: var(--primary-soft) !important;
    box-shadow: none;
    color: var(--primary-dark);
}

.sidebar {
    background: #fff;
    border-right: 0;
    box-shadow: 14px 0 38px rgba(34, 53, 84, .05);
    gap: 14px;
    overflow: hidden;
    padding: 26px 18px;
    width: 250px;
}
.brand {
    color: var(--ink);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.1;
}
.brand-logo {
    border-radius: 14px;
    display: inline-block;
    height: 42px;
    width: 42px;
}
.brand-mark { display: none !important; }
.sidebar-head { margin-bottom: 18px; }
.sidebar-collapse-toggle {
    background: #f4f8fb;
    box-shadow: none;
    color: #50617e;
}
.app-nav {
    display: grid;
    gap: 5px;
    position: relative;
    z-index: 2;
}
.sidebar nav a {
    align-items: center;
    border-radius: 14px;
    color: #273657;
    display: flex !important;
    gap: 12px;
    min-height: 42px;
    padding: 10px 12px;
}
.sidebar nav a::before {
    content: none !important;
    display: none !important;
}
.nav-svg {
    background: #f8fbfd;
    border: 1px solid #dbe7f2;
    border-radius: 10px;
    color: #405679;
    flex: 0 0 27px;
    height: 27px;
    padding: 5px;
    width: 27px;
}
.sidebar nav a:hover,
.sidebar nav a.is-active {
    background: #dff6ef;
    color: var(--primary-dark);
}
.sidebar nav a.is-active .nav-svg {
    background: #c7f0e4;
    border-color: #c7f0e4;
    color: var(--primary-dark);
}
.sidebar-user {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    position: relative;
    z-index: 2;
}
.sidebar-user strong,
.sidebar-user small {
    display: block;
    line-height: 1.2;
}
.sidebar-user small {
    color: var(--muted);
    font-size: 12px;
}
.nav-section {
    display: grid;
    gap: 4px;
}
.nav-divider {
    background: var(--line);
    height: 1px;
    margin: 8px 10px;
}
.sidebar-account {
    border-top: 1px solid var(--line);
    margin-top: auto;
    padding-top: 12px;
    position: relative;
    z-index: 2;
}
.sidebar-account-toggle {
    align-items: center;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: none;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    gap: 10px;
    min-height: 48px;
    padding: 8px;
    text-align: left;
    width: 100%;
}
.sidebar-account-toggle .avatar {
    flex: 0 0 34px;
}
.account-name {
    min-width: 0;
}
.account-name strong,
.account-name small {
    display: block;
    line-height: 1.18;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-name small {
    color: var(--muted);
    font-size: 11px;
}
.account-chevron {
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 900;
    margin-left: auto;
    transition: transform .18s ease;
}
.sidebar-account.is-open .account-chevron {
    transform: rotate(180deg);
}
.sidebar-account-menu {
    display: none;
    gap: 4px;
    padding-top: 8px;
}
.sidebar-account.is-open .sidebar-account-menu {
    display: grid;
}
.sidebar-account-menu a {
    align-items: center;
    border-radius: 12px;
    color: #273657;
    display: flex;
    font-weight: 800;
    gap: 10px;
    min-height: 36px;
    padding: 7px 10px;
    text-decoration: none;
}
.sidebar-account-menu a:hover,
.sidebar-account-menu a.is-active {
    background: #dff6ef;
    color: var(--primary-dark);
}
.sidebar-account-menu form {
    margin: 4px 0 0;
}
.sidebar-account-menu .ghost.full {
    min-height: 36px;
}
.sidebar-garden {
    bottom: -4px;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 0;
}
.sidebar form {
    position: relative;
    z-index: 2;
}

body.sidebar-collapsed .sidebar {
    align-items: center;
    width: 82px !important;
}
body.sidebar-collapsed .shell {
    margin-left: 82px !important;
}
body.sidebar-collapsed .sidebar .brand span,
body.sidebar-collapsed .sidebar form,
body.sidebar-collapsed .sidebar-user,
body.sidebar-collapsed .sidebar-garden {
    display: none !important;
}
body.sidebar-collapsed .nav-divider {
    margin: 6px auto;
    width: 28px;
}
body.sidebar-collapsed .sidebar nav a {
    display: flex !important;
    justify-content: center;
    padding: 10px;
}
body.sidebar-collapsed .sidebar nav a span {
    display: none !important;
}
body.sidebar-collapsed .sidebar-account {
    border-top: 0;
    padding-top: 4px;
    width: 100%;
}
body.sidebar-collapsed .sidebar-account-toggle {
    background: transparent;
    border: 0;
    justify-content: center;
    padding: 6px;
}
body.sidebar-collapsed .account-name,
body.sidebar-collapsed .account-chevron,
body.sidebar-collapsed .sidebar-account-menu {
    display: none !important;
}
body.sidebar-collapsed .sidebar .brand {
    display: flex !important;
}
body.sidebar-collapsed .sidebar .brand-logo {
    display: inline-block !important;
}
body.sidebar-collapsed .sidebar-collapse-toggle {
    display: inline-flex !important;
}

.shell {
    container-type: inline-size;
    margin-left: 250px;
    max-width: 1280px;
    padding: 26px 34px 54px;
}
.app-topline {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}
.topline-actions {
    align-items: center;
    display: flex;
    gap: 14px;
}
.notification-bell {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--soft-shadow);
    height: 42px;
    position: relative;
    width: 42px;
}
.bell-svg {
    color: #23314f;
    height: 22px;
    left: 9px;
    position: absolute;
    top: 9px;
    width: 22px;
}
.notification-bell::after {
    background: #f03e55;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    content: "3";
    font-size: 10px;
    font-weight: 900;
    height: 18px;
    line-height: 15px;
    position: absolute;
    right: -4px;
    text-align: center;
    top: -5px;
    width: 18px;
}
.top-child-card {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--soft-shadow);
    color: var(--ink);
    display: flex;
    gap: 10px;
    min-width: 180px;
    padding: 10px 14px;
}
.top-child-card strong,
.top-child-card small {
    display: block;
    line-height: 1.2;
}
.top-child-select {
    border: 0;
    margin: 0;
}
.top-child-select select {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--ink);
    font-weight: 900;
    min-height: 24px;
    padding: 0 22px 0 0;
}
.top-child-card small {
    color: var(--muted);
    font-size: 12px;
}
.avatar {
    align-items: center;
    background: linear-gradient(180deg, var(--avatar-start) 0%, var(--avatar-end) 100%);
    border: 3px solid #fff;
    border-radius: 999px;
    box-shadow: 0 7px 18px rgba(var(--primary-rgb), .18);
    color: var(--primary-dark);
    display: inline-flex;
    flex: 0 0 46px;
    font-weight: 900;
    height: 46px;
    justify-content: center;
    width: 46px;
}
.child-photo-avatar {
    overflow: hidden;
}
.child-photo-avatar img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.avatar.small { flex-basis: 38px; height: 38px; width: 38px; }
.avatar.mini { border-width: 2px; flex-basis: 28px; height: 28px; width: 28px; }
.avatar.xl { flex-basis: 104px; font-size: 38px; height: 104px; width: 104px; }

.auth-card,
.panel,
.table-card,
.timeline {
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
}
.page-head {
    margin-bottom: 18px;
}
.page-head h1 {
    color: var(--ink);
    font-size: 30px;
    font-weight: 900;
}
.page-head p {
    color: #697690;
    font-size: 15px;
}
.dashboard-head {
    align-items: center;
}
.soft-select select,
.child-switcher select {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--soft-shadow);
    min-width: 190px;
}

.hero-child-card {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(280px, .9fr) 1.4fr;
    margin-bottom: 22px;
    padding: 22px;
}
.hero-child-main {
    align-items: center;
    display: flex;
    gap: 18px;
}
.hero-child-main h2 {
    font-size: 24px;
    margin-bottom: 4px;
}
.hero-child-main p {
    margin: 0 0 10px;
}
.active-dot {
    color: var(--good);
    font-size: 13px;
    font-weight: 800;
}
.active-dot::before {
    background: #29c48d;
    border-radius: 999px;
    content: "";
    display: inline-block;
    height: 8px;
    margin-right: 6px;
    width: 8px;
}
.hero-child-facts {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hero-child-facts > div {
    background: #f8fbfd;
    border-radius: 16px;
    padding: 16px;
}
.hero-child-facts span,
.metric span {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 850;
}
.hero-child-facts strong {
    display: block;
    margin-top: 5px;
}
.next-card {
    background: #fff6df !important;
}
.next-card small {
    color: var(--muted);
    display: block;
    margin-top: 4px;
}

.metric-grid { gap: 16px; }
.metric-grid.dashboard-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric {
    display: grid;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: 18px;
    box-shadow: var(--soft-shadow);
    color: var(--ink);
    min-height: 112px;
    padding: 18px;
}
.metric-icon {
    align-items: center;
    background: rgba(255,255,255,.58);
    border-radius: 999px;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    margin-bottom: 4px;
    width: 44px;
}
.card-svg { color: var(--primary); height: 24px; width: 24px; }
.metric strong {
    color: #0d7780;
    font-size: 28px;
}
.metric small {
    color: var(--muted);
    display: block;
    min-height: 16px;
}
.tone-mint { background: #eaf9f3; }
.tone-lilac { background: #f1edff; }
.tone-rose { background: #fff0f3; }
.tone-sky { background: #eaf6ff; }
.tone-gold { background: #fff6dd; }

.dashboard-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr);
    margin-bottom: 16px;
    min-width: 0;
    width: 100%;
}
.dashboard-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.section-head-inline {
    align-items: flex-start;
    gap: 12px;
}
.section-head-inline h2 {
    align-items: center;
    display: flex;
    gap: 8px;
    font-size: 18px;
}
.title-svg { color: var(--primary); height: 20px; width: 20px; }
.fact-icon { color: var(--primary); height: 22px; margin-bottom: 8px; width: 22px; }
.chart-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}
.chart-actions select {
    min-height: 34px;
    min-width: 92px;
    padding: 6px 26px 6px 10px;
}
.dashboard-chart-wrap {
    height: 280px;
    margin-top: 6px;
    min-width: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.growth-snapshot {
    align-items: center;
    background: linear-gradient(180deg, #f7fcfb 0%, #eefaf6 100%);
    border: 1px solid #d8f0e8;
    border-radius: 16px;
    display: flex;
    gap: 18px;
    min-height: 150px;
    padding: 22px;
}
.growth-snapshot strong {
    font-size: 38px;
}
.growth-snapshot span {
    color: var(--primary);
    font-size: 22px;
    font-weight: 900;
}
.growth-snapshot small {
    color: var(--muted);
}
.soft-list {
    display: grid;
    gap: 8px;
}
.soft-list-item {
    background: #fbfdff;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    display: grid;
    gap: 4px;
    padding: 13px 14px;
}
.soft-list-item time {
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
}
.soft-list-item span {
    color: var(--muted);
    font-size: 13px;
}
.dashboard-photo-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dashboard-photo-grid a,
.dashboard-photo-grid img {
    aspect-ratio: 1;
    border-radius: 14px;
    display: block;
    overflow: hidden;
    width: 100%;
}
.dashboard-photo-grid img {
    object-fit: cover;
}
.vaccine-preview-list {
    display: grid;
    gap: 10px;
}
.vaccine-preview-item {
    align-items: center;
    background: #f8fbfd;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--ink);
    display: grid;
    gap: 12px;
    grid-template-columns: 58px 1fr auto;
    padding: 12px;
}
.vaccine-preview-item time {
    align-items: center;
    background: #dff6ef;
    border-radius: 14px;
    color: var(--primary-dark);
    display: flex;
    flex-direction: column;
    font-weight: 900;
    height: 56px;
    justify-content: center;
    width: 52px;
}
.vaccine-preview-item time strong { font-size: 20px; line-height: 1; }
.vaccine-preview-item time span { font-size: 11px; }
.vaccine-preview-item span strong,
.vaccine-preview-item span small { display: block; }
.vaccine-preview-item span small { color: var(--muted); margin-top: 3px; }
.vaccine-preview-item em {
    background: #e8f3ff;
    border-radius: 999px;
    color: #2673b9;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    padding: 5px 9px;
}
.vaccine-preview-item.status-overdue {
    background: #fff5f5;
}
.vaccine-preview-item.status-overdue time {
    background: #ffe2e4;
    color: var(--bad);
}
.vaccine-preview-item.status-overdue em {
    background: #ffe2e4;
    color: var(--bad);
}
.icon-empty {
    align-items: center;
    color: var(--muted);
    display: flex;
    gap: 8px;
}
.empty-svg {
    color: var(--primary);
    height: 22px;
    width: 22px;
}

input,
select,
textarea {
    border-color: #d8e2ef;
    border-radius: 12px;
}
th {
    color: #65708a;
    font-size: 12px;
}
.vaccine-status,
.tag,
.template-status {
    border-radius: 999px;
}
.timeline {
    margin-top: 16px;
}
.timeline-item {
    border-left: 0;
    grid-template-columns: 108px 1fr;
}
.timeline-item time {
    background: #e9faf5;
    border-radius: 14px;
    color: var(--primary-dark);
    padding: 10px;
    text-align: center;
}

@media (max-width: 1100px) {
    .dashboard-grid,
    .dashboard-grid.three,
    .hero-child-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    body { background: #f3f7fb !important; }
    .diary-top-strip {
        grid-template-columns: 1fr 1fr;
    }
    .diary-top-summary {
        grid-template-columns: 1fr 1fr;
    }
    .diary-quick-inline {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1.2fr;
        padding-top: 0;
    }
    .mobile-topbar {
        border-bottom: 1px solid #e8eef6;
        box-shadow: 0 8px 22px rgba(31, 48, 80, .06);
        min-height: 66px;
        padding: 11px 18px;
    }
    .mobile-menu-icon {
        background: transparent !important;
        box-shadow: none !important;
        min-height: 36px;
        padding: 0;
        width: 36px;
    }
    .mobile-menu-icon::before {
        color: var(--primary);
        content: "=";
        font-size: 28px;
        font-weight: 900;
    }
    .mobile-topbar .brand {
        font-size: 15px;
        gap: 8px;
    }
    .mobile-topbar .brand-logo {
        height: 36px;
        width: 36px;
    }
    .mobile-child-pill {
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 14px;
        color: var(--ink);
        display: flex;
        font-size: 12px;
        font-weight: 850;
        gap: 6px;
        padding: 5px 8px;
    }
    .sidebar {
        border-radius: 0 0 22px 22px;
        box-shadow: 0 18px 40px rgba(31, 48, 80, .14);
        top: 66px;
        width: auto !important;
    }
    body.sidebar-collapsed .sidebar {
        align-items: stretch;
        width: auto !important;
    }
    body.sidebar-collapsed .sidebar .brand span,
    body.sidebar-collapsed .sidebar nav a span,
    body.sidebar-collapsed .account-name,
    body.sidebar-collapsed .account-chevron {
        display: inline-block !important;
    }
    body.sidebar-collapsed .sidebar-account.is-open .sidebar-account-menu {
        display: grid !important;
    }
    body.sidebar-collapsed .sidebar nav a {
        justify-content: flex-start;
        padding: 8px 10px;
    }
    body.sidebar-collapsed .sidebar-account-toggle {
        background: rgba(255, 255, 255, .92);
        border: 1px solid var(--line);
        justify-content: flex-start;
    }
    body.sidebar-collapsed .sidebar-account {
        border-top: 1px solid var(--line);
        width: auto;
    }
    body.sidebar-collapsed .nav-divider {
        margin: 4px 0;
        width: auto;
    }
    .sidebar .app-nav {
        gap: 8px;
    }
    .sidebar .nav-section {
        grid-template-columns: 1fr 1fr;
    }
    .sidebar nav a {
        min-height: 38px;
        padding: 8px 10px;
    }
    .sidebar .nav-divider {
        margin: 4px 0;
    }
    .sidebar-account {
        margin-top: 8px;
    }
    .sidebar-account-menu {
        grid-template-columns: 1fr 1fr;
    }
    .sidebar-account-menu form {
        grid-column: 1 / -1;
    }
    .sidebar-user,
    .sidebar-garden {
        display: none !important;
    }
    .shell {
        margin-left: 0 !important;
        padding: 18px 14px 86px;
    }
    .app-topline {
        display: none;
    }
    .page-head {
        align-items: center;
        flex-direction: row;
        gap: 10px;
        margin-bottom: 14px;
    }
    .page-head h1 {
        font-size: 22px;
        line-height: 1.12;
    }
    .page-head p {
        font-size: 12px;
        line-height: 1.25;
    }
    .page-head .button,
    .inline-actions .button {
        font-size: 12px;
        min-height: 36px;
        padding: 0 11px;
        white-space: nowrap;
    }
    .dashboard-head {
        display: none;
    }
    .hero-child-card {
        border-radius: 18px;
        padding: 16px;
    }
    .hero-child-main {
        gap: 12px;
    }
    .avatar.xl {
        flex-basis: 74px;
        font-size: 28px;
        height: 74px;
        width: 74px;
    }
    .hero-child-main h2 {
        font-size: 20px;
    }
    .hero-child-facts {
        gap: 8px;
        grid-template-columns: 1fr 1fr;
    }
    .hero-child-facts .next-card {
        grid-column: 1 / -1;
    }
    .metric-grid.dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .metric {
        min-height: 92px;
        padding: 14px;
    }
    .metric strong {
        font-size: 24px;
    }
    .dashboard-grid,
    .dashboard-grid.three {
        grid-template-columns: 1fr;
    }
    .panel,
    .table-card,
    .timeline {
        border-radius: 16px;
        padding: 16px;
    }
    .bottom-nav {
        background: rgba(255, 255, 255, .96);
        border: 1px solid var(--line);
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -12px 30px rgba(31, 48, 80, .08);
        display: grid !important;
        grid-template-columns: repeat(5, 1fr);
        left: 0;
        padding: 8px 10px 10px;
        position: fixed;
        right: 0;
    }
    .bottom-nav a {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 3px;
        border-radius: 14px;
        color: #53617d;
        font-size: 11px;
        font-weight: 800;
        padding: 8px 4px;
        text-align: center;
    }
    .bottom-nav a.is-active {
        background: #e7f8f4;
        color: var(--primary-dark);
    }
    .bottom-svg { height: 21px; width: 21px; }
    .dashboard-chart-wrap { height: 230px; }
    .chart-actions { gap: 6px; }
    .chart-actions .small-link { display: none; }
    .vaccine-preview-item { grid-template-columns: 52px 1fr auto; padding: 10px; }
}

/* Ajustes compactos do dashboard conforme o layout infantil atual. */
.shell {
    padding-top: 16px;
}
.app-topline {
    margin-bottom: 2px;
}
.dashboard-head {
    margin-bottom: 12px;
}
.dashboard-head h1 {
    font-size: 28px;
    margin: 0 0 4px;
}
.dashboard-head p {
    margin: 0;
}
.top-child-card {
    min-width: 146px;
    padding: 8px 11px;
}
.top-child-select select {
    font-size: 13px;
    min-width: 92px;
}
.top-child-select .avatar {
    flex-basis: 36px;
    height: 36px;
    width: 36px;
}
.notification-bell {
    height: 38px;
    width: 38px;
}
.bell-svg {
    height: 20px;
    left: 8px;
    top: 8px;
    width: 20px;
}
.nav-svg {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #405679;
    flex-basis: 21px;
    height: 21px;
    padding: 0;
    width: 21px;
}
.sidebar nav a.is-active .nav-svg,
.sidebar nav a:hover .nav-svg {
    background: transparent;
    border-color: transparent;
    color: var(--primary-dark);
}
.sidebar {
    padding-top: 22px;
}
.sidebar nav a {
    min-height: 40px;
}
.hero-child-card {
    grid-template-columns: minmax(250px, .78fr) 1fr auto;
    margin-bottom: 16px;
    padding: 16px 18px;
    min-width: 0;
}
.avatar.xl {
    flex-basis: 86px;
    font-size: 34px;
    height: 86px;
    width: 86px;
}
.hero-child-main h2 {
    font-size: 21px;
}
.hero-child-main p {
    font-size: 13px;
    margin-bottom: 7px;
}
.hero-child-info {
    align-content: center;
    display: grid;
    gap: 10px 24px;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    min-width: 0;
}
.compact-fact {
    align-items: center;
    display: grid;
    gap: 2px 8px;
    grid-template-columns: 24px 1fr;
}
.compact-fact .fact-icon {
    align-self: center;
    background: #e7fbf5;
    border-radius: 9px;
    color: var(--primary);
    grid-row: span 2;
    height: 24px;
    margin: 0;
    padding: 5px;
    width: 24px;
}
.compact-fact span {
    color: #778298;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.05;
}
.compact-fact strong {
    color: var(--ink);
    font-size: 12px;
    line-height: 1.1;
}
.next-appointment-card {
    align-self: stretch;
    background: #fff4d8;
    border: 1px solid #ffebba;
    border-radius: 16px;
    color: var(--ink);
    display: grid;
    gap: 4px;
    min-width: 156px;
    padding: 14px 16px;
}
.next-appointment-card .fact-icon {
    color: #9a6b00;
    height: 20px;
    margin: 0;
    width: 20px;
}
.next-appointment-card span {
    color: #6b5a35;
    font-size: 12px;
    font-weight: 800;
}
.next-appointment-card strong {
    font-size: 15px;
}
.next-appointment-card small {
    color: #6b5a35;
}
.metric-grid.dashboard-metrics {
    margin-bottom: 16px;
}
.metric {
    min-height: 96px;
    padding: 15px 18px;
}
.metric-icon {
    background: transparent;
    height: 26px;
    justify-content: flex-start;
    margin-bottom: 2px;
    width: 26px;
}
.card-svg {
    height: 24px;
    width: 24px;
}
.metric span {
    font-size: 11px;
}
.metric strong {
    font-size: 25px;
    line-height: 1.05;
}
.dashboard-chart-card,
.dashboard-vaccine-card,
.dashboard-grid.three .panel {
    box-shadow: 0 12px 30px rgba(38, 52, 92, .06);
}
.section-head-inline h2 {
    font-size: 17px;
}
.dashboard-chart-wrap {
    height: 245px;
}

@media (max-width: 1100px) {
    .hero-child-card {
        grid-template-columns: minmax(250px, .8fr) 1fr;
    }
    .next-appointment-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .mobile-topbar {
        min-height: 58px;
        padding: 9px 14px;
    }
    .mobile-topbar .brand {
        font-size: 14px;
    }
    .mobile-topbar .brand-logo {
        height: 34px;
        width: 34px;
    }
    .mobile-child-select {
        align-items: center;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        display: flex;
        gap: 5px;
        margin: 0;
        max-width: 112px;
        padding: 4px 6px;
    }
    .mobile-child-select select {
        background: transparent;
        border: 0;
        box-shadow: none;
        color: var(--ink);
        font-size: 12px;
        font-weight: 900;
        min-height: 24px;
        min-width: 52px;
        padding: 0 16px 0 0;
    }
    .mobile-child-pill {
        display: none;
    }
    .shell {
        padding-top: 12px;
    }
    .hero-child-card {
        gap: 13px;
        grid-template-columns: minmax(144px, auto) minmax(0, 1fr);
        margin-bottom: 13px;
        overflow: hidden;
        padding: 14px;
    }
    .hero-child-main {
        align-items: center;
        min-width: 0;
    }
    .avatar.xl {
        flex-basis: 72px;
        height: 72px;
        width: 72px;
    }
    .hero-child-info {
        align-self: center;
        display: flex;
        gap: 8px;
        grid-column: 2;
        margin-top: 0;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 7px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .hero-child-info::-webkit-scrollbar {
        height: 4px;
    }
    .hero-child-info::-webkit-scrollbar-track {
        background: #e8f0f8;
        border-radius: 999px;
    }
    .hero-child-info::-webkit-scrollbar-thumb {
        background: #9fc7c3;
        border-radius: 999px;
    }
    .compact-fact {
        background: #f8fbfd;
        border-radius: 12px;
        flex: 0 0 118px;
        padding: 9px;
    }
    .compact-fact .fact-icon {
        height: 22px;
        width: 22px;
    }
    .next-appointment-card {
        grid-column: 1 / -1;
        min-width: 0;
        padding: 12px;
    }
    .metric-grid.dashboard-metrics {
        display: none;
    }
    .dashboard-chart-wrap {
        height: 215px;
    }
    .dashboard-grid.main-row {
        gap: 12px;
    }
}

/* Cards de indicadores mais baixos, com numero na primeira linha. */
.metric-grid.dashboard-metrics {
    gap: 13px;
}
.metric-grid.dashboard-metrics .metric {
    align-content: center;
    gap: 5px;
    min-height: 74px;
    padding: 12px 15px;
}
.metric-top {
    align-items: center;
    display: grid !important;
    gap: 8px;
    grid-template-columns: 23px minmax(0, 1fr) auto;
}
.metric-grid.dashboard-metrics .metric-icon {
    background: transparent;
    border-radius: 0;
    height: 23px;
    justify-content: flex-start;
    margin: 0;
    width: 23px;
}
.metric-grid.dashboard-metrics .card-svg {
    height: 21px;
    width: 21px;
}
.metric-grid.dashboard-metrics .metric span {
    min-width: 0;
}
.metric-grid.dashboard-metrics .metric-top > span:not(.metric-icon) {
    color: #53617d;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.05;
    white-space: normal;
}
.metric-grid.dashboard-metrics .metric strong {
    color: #0d7780;
    font-size: 24px;
    line-height: 1;
    text-align: right;
}
.metric-grid.dashboard-metrics .metric small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.1;
    min-height: 12px;
    padding-left: 31px;
}

/* Refinamento do bloco da crianca no dashboard. */
.dashboard-hero {
    grid-template-columns: minmax(220px, .62fr) minmax(340px, 1fr) auto;
}
.dashboard-hero .avatar.xl {
    flex-basis: 74px;
    font-size: 31px;
    height: 74px;
    width: 74px;
}
.dashboard-hero .hero-child-main {
    gap: 14px;
}
.dashboard-hero .hero-child-main h2 {
    font-size: 20px;
    line-height: 1.08;
}
.dashboard-hero .hero-child-info {
    gap: 12px 20px;
    grid-template-columns: repeat(2, minmax(145px, 1fr));
}

@media (max-width: 900px) {
    .dashboard-hero {
        gap: 10px;
        grid-template-columns: minmax(96px, 118px) minmax(0, 1fr);
        padding: 12px;
        position: relative;
    }
    .dashboard-hero .avatar.xl {
        display: none;
    }
    .dashboard-hero .hero-child-main {
        align-self: center;
        gap: 0;
    }
    .dashboard-hero .hero-child-main h2 {
        font-size: 18px;
        margin-bottom: 5px;
        white-space: nowrap;
    }
    .dashboard-hero .hero-child-main p {
        font-size: 12px;
        margin: 0;
        white-space: nowrap;
    }
    .dashboard-hero .hero-child-info {
        grid-column: 2;
        padding-bottom: 10px;
        position: relative;
    }
    .dashboard-hero .compact-fact {
        flex-basis: 116px;
        padding: 8px;
    }
}

.mobile-dashboard-strip {
    display: none;
}
.scroll-hint {
    display: none;
}
.vaccine-preview-item time strong {
    font-size: 13px;
    line-height: 1.1;
    padding: 0 3px;
    text-align: center;
}
.vaccine-preview-item span small {
    display: inline;
}

@media (max-width: 900px) {
    .dashboard-hero {
        margin-bottom: 8px;
    }
    .hero-scroll-hint {
        display: block;
        grid-column: 2;
        margin: -7px 8px 0;
    }
    .scroll-hint {
        align-items: center;
        gap: 7px;
        height: 8px;
        position: relative;
    }
    .scroll-hint::before,
    .scroll-hint::after {
        color: #8e99a9;
        font-size: 11px;
        line-height: 1;
        position: absolute;
        top: -4px;
    }
    .scroll-hint::before {
        content: "‹";
        left: -1px;
    }
    .scroll-hint::after {
        content: "›";
        right: -1px;
    }
    .scroll-hint span {
        background: linear-gradient(90deg, #a7b0bd 0 10%, var(--primary) 18% 82%, #a7b0bd 90% 100%);
        border-radius: 999px;
        display: block;
        height: 3px;
        margin: 0 12px;
    }
    .mobile-dashboard-strip {
        display: block;
        margin: 0 0 12px;
    }
    .mobile-strip-scroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-strip-scroll::-webkit-scrollbar {
        display: none;
    }
    .mobile-summary-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 16px;
        color: var(--ink);
        display: grid;
        flex: 0 0 174px;
        gap: 4px;
        min-height: 92px;
        padding: 13px 14px;
    }
    .mobile-summary-card .summary-status {
        border-radius: 4px;
        display: block;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.15;
        padding: 2px 6px;
        width: fit-content;
    }
    .mobile-summary-card strong {
        font-size: 14px;
        line-height: 1.18;
    }
    .mobile-summary-card strong small {
        color: var(--muted);
        font-size: 11px;
        font-weight: 750;
    }
    .mobile-summary-card em {
        color: var(--muted);
        font-size: 12px;
        font-style: normal;
        font-weight: 750;
    }
    .mobile-summary-card.is-overdue .summary-status {
        background: #ffe2e4;
        color: var(--bad);
    }
    .mobile-summary-card.is-next .summary-status,
    .growth-alert .summary-status {
        background: #e1f7ef;
        color: var(--primary-dark);
    }
    .growth-alert {
        background: #f8fcfb;
    }
    .mobile-strip-hint {
        display: block;
        margin: -4px 4px 0;
    }
    .vaccine-preview-item {
        grid-template-columns: 64px minmax(0, 1fr) auto !important;
    }
    .vaccine-preview-item time {
        min-height: 54px;
        width: 60px;
    }
    .vaccine-preview-item time strong {
        font-size: 12px;
        max-width: 56px;
    }
    .vaccine-preview-item span strong,
    .vaccine-preview-item span small {
        display: inline;
    }
}

/* Dashboard desktop ajustado ao mock mais compacto. */
@media (min-width: 901px) {
    .dashboard-hero {
        gap: 18px;
        grid-template-columns: minmax(210px, .55fr) minmax(0, 1fr) auto;
        margin-bottom: 14px;
        padding: 11px 18px;
    }
    .dashboard-hero .avatar.xl {
        flex-basis: 56px;
        font-size: 24px;
        height: 56px;
        width: 56px;
    }
    .dashboard-hero .hero-child-main {
        gap: 12px;
    }
    .dashboard-hero .hero-child-main h2 {
        font-size: 18px;
        margin-bottom: 3px;
    }
    .dashboard-hero .hero-child-main p {
        font-size: 12px;
        margin: 0;
    }
    .dashboard-hero .hero-child-info {
        align-items: center;
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(3, minmax(118px, 1fr));
    }
    .dashboard-hero .compact-fact {
        gap: 1px 7px;
        grid-template-columns: 22px 1fr;
    }
    .dashboard-hero .compact-fact .fact-icon {
        height: 21px;
        padding: 5px;
        width: 21px;
    }
    .dashboard-hero .compact-fact span {
        font-size: 10.5px;
    }
    .dashboard-hero .compact-fact strong {
        font-size: 12px;
    }
    .metric-grid.dashboard-metrics {
        gap: 14px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-bottom: 14px;
    }
    .metric-grid.dashboard-metrics .metric {
        min-height: 54px;
        padding: 8px 14px;
    }
    .metric-grid.dashboard-metrics .metric-top {
        gap: 7px;
        grid-template-columns: auto 21px minmax(0, 1fr);
    }
    .metric-grid.dashboard-metrics .metric strong {
        font-size: 24px;
        min-width: 28px;
        text-align: left;
    }
    .metric-grid.dashboard-metrics .metric-icon {
        height: 21px;
        width: 21px;
    }
    .metric-grid.dashboard-metrics .card-svg {
        height: 19px;
        width: 19px;
    }
    .metric-grid.dashboard-metrics .metric-label {
        font-size: 10.5px !important;
        line-height: 1.02;
    }
    .metric-grid.dashboard-metrics .metric small {
        font-size: 10.5px;
        min-height: 10px;
        padding-left: 56px;
    }
    .dashboard-vaccine-card .section-head-inline h2 {
        font-size: 17px;
    }
    .dashboard-vaccine-card .section-head-inline p {
        font-size: 13px;
        line-height: 1.25;
    }
    .dashboard-vaccine-card .vaccine-preview-item {
        gap: 9px;
        grid-template-columns: 64px minmax(0, 1fr) auto;
        padding: 10px;
    }
    .dashboard-vaccine-card .vaccine-preview-item time {
        height: 52px;
        width: 58px;
    }
    .dashboard-vaccine-card .vaccine-preview-item time strong {
        font-size: 12px;
        line-height: 1.05;
    }
    .dashboard-vaccine-card .vaccine-preview-item span strong,
    .dashboard-vaccine-card .vaccine-preview-item span small {
        display: inline;
    }
    .dashboard-vaccine-card .vaccine-preview-item span strong {
        font-size: 14px;
    }
    .dashboard-vaccine-card .vaccine-preview-item span small {
        font-size: 12px;
        line-height: 1.2;
    }
    .dashboard-vaccine-card .vaccine-preview-item em {
        font-size: 10.5px;
        padding: 4px 8px;
    }
}

/* Rodape dos indicadores: usa a largura inteira do balao em telas intermediarias. */
.metric-grid.dashboard-metrics .metric small {
    font-size: 10px;
    line-height: 1.05;
    min-height: 11px;
    overflow: hidden;
    padding-left: 0 !important;
    text-overflow: clip;
    white-space: nowrap;
    width: 100%;
}
.dashboard-grid.main-row {
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .78fr);
    max-width: 100%;
    min-width: 0;
    width: 100%;
}
.dashboard-grid.main-row > .panel,
.dashboard-chart-card,
.dashboard-vaccine-card,
.dashboard-vaccine-card .vaccine-preview-list,
.dashboard-vaccine-card .vaccine-preview-item {
    min-width: 0;
}
.dashboard-chart-card {
    overflow: hidden;
}
.dashboard-chart-wrap canvas {
    display: block;
    max-width: 100% !important;
}
.dashboard-vaccine-card {
    overflow: hidden;
}
.dashboard-vaccine-card .vaccine-preview-item span {
    min-width: 0;
}
@container (max-width: 820px) {
    .dashboard-grid.main-row {
        grid-template-columns: 1fr;
    }
}

/* Marcos e Aprendizados */
.milestones-page-head h1 {
    align-items: center;
    display: flex;
    gap: 10px;
}
.milestone-child-select {
    margin-bottom: 14px;
}
.milestone-child-select label {
    max-width: 280px;
}
.milestone-hero-card {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--soft-shadow);
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(260px, .9fr) minmax(320px, 1fr);
    margin-bottom: 18px;
    padding: 18px;
}
.milestone-child-summary,
.milestone-hero-facts,
.milestone-hero-facts span {
    align-items: center;
    display: flex;
}
.milestone-child-summary {
    gap: 16px;
}
.milestone-child-summary .avatar.xl {
    flex: 0 0 78px;
    height: 78px;
    width: 78px;
}
.milestone-child-summary h2 {
    font-size: 22px;
    margin: 0 0 4px;
}
.milestone-child-summary p {
    color: var(--muted);
    margin: 0;
}
.milestone-hero-facts {
    gap: 24px;
    justify-content: space-around;
}
.milestone-hero-facts span {
    gap: 9px;
    min-width: 150px;
}
.milestone-hero-facts small,
.milestone-hero-facts strong {
    display: block;
}
.milestone-hero-facts small {
    color: var(--muted);
    font-size: 12px;
}
.milestone-hero-facts strong {
    font-size: 14px;
}
.milestone-summary-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
}
.milestone-summary-grid article {
    align-items: center;
    background: #fff;
    border: 1px solid #eadfcd;
    border-radius: 18px;
    display: grid;
    gap: 3px 12px;
    grid-template-columns: 42px 1fr;
    min-height: 74px;
    padding: 14px 16px;
}
.milestone-summary-grid small {
    color: var(--muted);
    font-weight: 800;
}
.milestone-summary-grid strong {
    font-size: 25px;
}
.milestone-badge,
.record-check,
.icon-action,
.suggested-mini-card span {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    justify-content: center;
}
.milestone-badge {
    grid-row: span 2;
    height: 38px;
    width: 38px;
}
.milestone-badge.mint,
.record-check.done,
.category-pill.mint,
.area-list i.mint { background: #dff8ef; color: #15916f; }
.milestone-badge.rose,
.category-pill.rose,
.area-list i.rose { background: #ffe8ef; color: #e34b73; }
.milestone-badge.gold,
.record-check.learning,
.category-pill.gold,
.area-list i.gold { background: #fff1ca; color: #d89000; }
.milestone-badge.lilac,
.record-check.progress { background: #efe9ff; color: #7a5bd8; }
.record-check.pending { background: #eef3f8; color: #64748b; }
.category-pill.sky,
.area-list i.sky { background: #e6f3ff; color: #1582c4; }
.category-pill.lilac,
.area-list i.lilac { background: #efe9ff; color: #7a5bd8; }
.milestone-workspace {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 330px;
}
.milestone-main-panel {
    padding: 0;
    overflow: hidden;
}
.milestone-tabs {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 26px;
    padding: 0 18px;
}
.milestone-tabs a {
    color: #394766;
    font-size: 13px;
    font-weight: 850;
    padding: 18px 0 13px;
    text-decoration: none;
}
.milestone-tabs a.is-active {
    border-bottom: 3px solid var(--primary);
    color: var(--primary-dark);
}
.milestone-list-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 18px 20px 6px;
}
.milestone-list-head h2 {
    font-size: 18px;
    margin: 0;
}
.milestone-inline-filter {
    margin-left: auto;
}
.milestone-inline-filter select {
    min-height: 36px;
    min-width: 170px;
}
.milestone-record-filters {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(150px, 1fr) minmax(118px, .75fr) minmax(150px, 1fr) minmax(112px, .56fr) auto;
    margin-left: auto;
    max-width: 910px;
    width: min(100%, 910px);
}
.milestone-record-filters select,
.milestone-record-filters input {
    border: 1px solid var(--line);
    border-radius: 14px;
    min-height: 38px;
    min-width: 0;
    padding: 0 12px;
    width: 100%;
}
.milestone-record-filters .filter-soft-button {
    align-items: center;
    background: #eef7f5;
    border: 0;
    border-radius: 14px;
    color: var(--primary-dark);
    display: inline-flex;
    font-weight: 900;
    gap: 6px;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    white-space: nowrap;
}
.milestone-record-filters .filter-soft-button .mini-svg {
    height: 13px;
    width: 13px;
}
.milestone-per-page-select {
    color: #52627b;
    font-size: 12px;
    font-weight: 850;
}
.milestone-pagination {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 14px 20px 18px;
}
.milestone-pagination p {
    color: #5d6c83;
    font-size: 12px;
    font-weight: 800;
    margin: 0;
}
.milestone-pagination nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}
.milestone-pagination a,
.milestone-pagination span {
    align-items: center;
    background: #f3f8f7;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--primary-dark);
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
    min-height: 34px;
    min-width: 34px;
    padding: 0 11px;
    text-decoration: none;
}
.milestone-pagination .pager-number.is-current {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 10px 22px rgba(0, 128, 128, .16);
}
.milestone-pagination .pager-control {
    min-width: 82px;
}
.milestone-pagination .pager-ellipsis {
    background: transparent;
    color: #8a97aa;
    min-width: 22px;
    padding: 0 4px;
}
.milestone-pagination .is-disabled {
    color: #9aa7b9;
    opacity: .55;
}
.compact-button {
    min-height: 36px;
    padding: 0 14px;
}
.milestone-record-table {
    padding: 0 20px 16px;
}
.milestone-record-table table {
    border-collapse: collapse;
    width: 100%;
}
.milestone-record-table th {
    font-size: 11px;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.milestone-record-table th,
.milestone-record-table td {
    border-bottom: 1px solid var(--line);
    padding: 13px 10px;
    vertical-align: middle;
}
.milestone-record-table td:first-child {
    align-items: center;
    display: flex;
    gap: 12px;
}
.record-check {
    flex: 0 0 30px;
    height: 30px;
    width: 30px;
}
.record-title-wrap strong,
.record-title-wrap small {
    display: block;
}
.record-title-wrap small {
    color: var(--muted);
    line-height: 1.35;
}
.record-title-wrap em {
    color: #60708c;
    display: block;
    font-size: 11px;
    font-style: normal;
    margin-top: 3px;
}
.record-title-wrap .record-timing {
    color: var(--primary-dark);
    font-weight: 800;
}
.record-title-wrap .record-timing.after {
    color: #966600;
}
.record-title-wrap .record-timing.early {
    color: #087a57;
}
.category-pill {
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 850;
    padding: 5px 11px;
}
.status-pill {
    border-radius: 999px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 850;
    padding: 5px 10px;
}
.status-pill.done { background: #dff8ef; color: #15916f; }
.status-pill.progress { background: #efe9ff; color: #7a5bd8; }
.status-pill.pending { background: #eef3f8; color: #64748b; }
.milestone-actions-cell {
    white-space: nowrap;
}
.milestone-actions-cell form {
    display: inline;
}
.icon-action {
    background: #f5fbfa;
    border: 1px solid #dcefeb;
    box-shadow: none;
    color: var(--primary-dark);
    height: 32px;
    margin-right: 6px;
    min-height: 0;
    padding: 0;
    width: 32px;
}
.icon-action.danger {
    background: #fff5f5;
    border-color: #ffd7d7;
    color: #c93030;
}
.mini-svg {
    height: 16px;
    width: 16px;
}
.milestone-side {
    display: grid;
    gap: 14px;
}
.milestone-side-card {
    padding: 16px;
}
.milestone-side-card h3 {
    font-size: 15px;
    margin: 0 0 12px;
}
.side-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.side-title h3 {
    margin: 0;
}
.side-title a,
.milestone-tip a,
.chart-toggle-button {
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}
.chart-toggle-button {
    background: #eef8f7;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    min-height: 30px;
    padding: 0 11px;
}
.suggested-mini-card {
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--ink);
    display: grid;
    gap: 2px 10px;
    grid-template-columns: 38px 1fr;
    margin-bottom: 9px;
    padding: 12px;
    text-decoration: none;
}
.suggested-mini-card span {
    background: #fff3d5;
    color: #e0a000;
    grid-row: span 3;
    height: 34px;
    width: 34px;
}
.suggested-mini-card small,
.suggested-mini-card em {
    color: var(--muted);
    font-size: 12px;
}
.suggested-mini-card em {
    font-style: normal;
    font-weight: 850;
}
.milestone-donut {
    background: conic-gradient(#15916f 0 25%, #1582c4 25% 47%, #7a5bd8 47% 63%, #e34b73 63% 82%, #f0ad28 82% 100%);
    border-radius: 50%;
    height: 126px;
    margin: 8px auto 16px;
    position: relative;
    width: 126px;
}
.milestone-donut::after {
    background: #fff;
    border-radius: 50%;
    content: "";
    inset: 32px;
    position: absolute;
}
.milestone-bars {
    display: none;
    gap: 8px;
}
.milestone-bars span {
    align-items: center;
    display: grid;
    font-size: 12px;
    gap: 7px;
    grid-template-columns: minmax(74px, .9fr) minmax(70px, 1fr) auto;
}
.milestone-bars em {
    color: #394766;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.milestone-bars i {
    background: var(--area-color, var(--primary));
    border-radius: 999px;
    display: block;
    height: 8px;
}
.milestone-chart[data-chart-mode="bars"] .milestone-donut {
    display: none;
}
.milestone-chart[data-chart-mode="bars"] .milestone-bars {
    display: grid;
}
.profile-chart {
    min-height: 156px;
}
.profile-radar {
    height: 170px;
}
.profile-radar canvas {
    max-height: 170px;
    max-width: 100%;
}
.profile-columns {
    display: none;
    gap: 9px;
}
.profile-columns span {
    align-items: center;
    display: grid;
    font-size: 12px;
    gap: 7px;
    grid-template-columns: minmax(96px, 1fr) minmax(76px, 1.1fr) auto;
}
.profile-columns em {
    color: #394766;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-columns i {
    background: var(--area-color, var(--primary));
    border-radius: 999px;
    display: block;
    height: 8px;
}
.profile-chart[data-chart-mode="columns"] .profile-radar {
    display: none;
}
.profile-chart[data-chart-mode="columns"] .profile-columns {
    display: grid;
}
.profile-more-link {
    color: var(--primary-dark);
    display: inline-flex;
    font-size: 12px;
    font-weight: 850;
    margin-top: 12px;
    text-decoration: none;
}
.profile-legend {
    margin-top: 10px;
}
.profile-page-head h1 {
    align-items: center;
    display: flex;
    gap: 10px;
}
.profile-child-card {
    grid-template-columns: minmax(260px, .9fr) minmax(330px, 1fr);
}
.profile-mini-stats {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.profile-mini-stats span {
    background: #f7fbfb;
    border-radius: 14px;
    padding: 12px 14px;
}
.profile-mini-stats small,
.profile-mini-stats strong {
    display: block;
}
.profile-mini-stats small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.profile-mini-stats strong {
    color: var(--primary-dark);
    font-size: 24px;
}
.profile-notice {
    align-items: center;
    border-left: 4px solid var(--primary);
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
}
.profile-notice p {
    color: #42516c;
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
}
.profile-timing-card {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 16px;
}
.profile-timing-card h2 {
    font-size: 16px;
    margin: 0 0 4px;
}
.profile-timing-card p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    margin: 0;
}
.profile-timing-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.timing-chip {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    display: grid;
    gap: 2px;
    min-width: 112px;
    padding: 9px 11px;
}
.timing-chip strong {
    color: var(--primary-dark);
    font-size: 20px;
    line-height: 1;
}
.timing-chip small {
    color: #40506c;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
}
.timing-chip.early {
    background: #e9faf3;
}
.timing-chip.expected {
    background: #eef7ff;
}
.timing-chip.after {
    background: #fff6df;
}
.timing-chip.unknown,
.timing-chip.future {
    background: #f7fbfb;
}
.development-profile-grid {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 330px;
    margin-bottom: 16px;
}
.development-profile-grid.profile-chart-only {
    grid-template-columns: minmax(0, 1fr);
}
.profile-side-column {
    display: grid;
    gap: 16px;
}
.profile-report-card h2 {
    font-size: 18px;
    margin: 0 0 12px;
}
.big-profile-chart {
    min-height: 300px;
}
.big-profile-chart .profile-radar {
    height: 300px;
}
.big-profile-chart .profile-radar canvas {
    max-height: 300px;
}
.profile-area-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 16px;
}
.profile-area-grid span {
    align-items: center;
    background: #f7fbfb;
    border: 1px solid var(--line);
    border-radius: 14px;
    display: grid;
    gap: 2px 8px;
    grid-template-columns: 10px minmax(0, 1fr) auto auto;
    padding: 8px 10px;
}
.profile-area-grid i {
    border-radius: 999px;
    height: 10px;
    width: 10px;
}
.profile-area-grid strong {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-area-grid em {
    color: var(--primary-dark);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}
.profile-area-grid .confidence-chip {
    grid-column: auto;
    justify-self: auto;
    margin: 0;
    padding: 4px 6px;
}
.confidence-chip {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    padding: 5px 8px;
    white-space: nowrap;
}
.confidence-chip.low {
    background: #fff2d8;
    color: #966600;
}
.confidence-chip.medium {
    background: #e8f2ff;
    color: #1766a6;
}
.confidence-chip.high {
    background: #dcf8ec;
    color: #087a57;
}
.profile-trend-item {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 1px 10px;
    grid-template-columns: 30px 1fr;
    padding: 10px 0;
}
.profile-trend-item:last-child {
    border-bottom: 0;
}
.profile-trend-item span {
    align-items: center;
    background: #fff3d5;
    border-radius: 999px;
    color: #e0a000;
    display: inline-flex;
    grid-row: span 2;
    height: 28px;
    justify-content: center;
    width: 28px;
}
.profile-trend-item strong {
    font-size: 13px;
}
.profile-trend-item small,
.suggestion-line {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}
.profile-rule-item {
    display: grid;
    gap: 5px 8px;
    grid-template-columns: 1fr auto;
    margin-bottom: 10px;
}
.profile-rule-item span {
    background: #edf3f7;
    border-radius: 999px;
    display: block;
    grid-column: 1 / -1;
    height: 8px;
    overflow: hidden;
}
.profile-rule-item b {
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: inherit;
    display: block;
    height: 100%;
}
.profile-rule-item strong {
    font-size: 12px;
}
.profile-rule-item small {
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 900;
}
.profile-rule-item > em {
    justify-self: end;
}
.suggestion-line {
    background: #f7fbfb;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin: 0 0 8px;
    padding: 10px 12px;
}
.profile-area-cards {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
}
.profile-text-card h2 {
    font-size: 16px;
    margin: 0 0 8px;
}
.profile-text-card p {
    color: #40506c;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 10px;
}
.profile-text-card small {
    color: var(--muted);
    display: block;
    font-size: 12px;
    line-height: 1.4;
}
.profile-competency-panel {
    margin-bottom: 24px;
}
.competency-groups {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.competency-group h3 {
    font-size: 14px;
    margin: 0 0 10px;
}
.competency-meter {
    align-items: center;
    display: grid;
    font-size: 12px;
    gap: 8px;
    grid-template-columns: minmax(110px, .9fr) minmax(92px, 1fr) 38px auto;
    margin-bottom: 8px;
}
.competency-meter span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.competency-meter i {
    background: #edf3f7;
    border-radius: 999px;
    display: block;
    height: 8px;
    overflow: hidden;
}
.competency-meter b {
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: inherit;
    display: block;
    height: 100%;
}
.competency-meter strong {
    color: var(--primary-dark);
    text-align: right;
}
.competency-meter em {
    justify-self: end;
}
.area-list {
    display: grid;
    gap: 8px;
}
.area-list span {
    align-items: center;
    color: #394766;
    display: grid;
    font-size: 13px;
    grid-template-columns: 12px 1fr auto;
    gap: 8px;
}
.area-list i {
    border-radius: 999px;
    height: 10px;
    width: 10px;
}
.milestone-tip p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}
.field-help {
    color: var(--muted);
    display: block;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 6px;
}
.important-form-note {
    background: #fff7f9;
    border: 1px solid #ffdbe4;
    border-radius: 12px;
    color: #9f2447;
    font-size: 12px;
    font-weight: 800;
    grid-column: 1 / -1;
    line-height: 1.35;
    margin: 0;
    padding: 10px 12px;
}
.is-important-field {
    background: linear-gradient(180deg, rgba(255, 247, 249, .58), rgba(255, 255, 255, 0));
    border-radius: 12px;
    padding: 2px;
}
.required-star {
    color: #db2f5d;
    display: inline-block;
    font-size: 14px;
    font-weight: 950;
    margin-left: 3px;
}
.field-label-row {
    align-items: baseline;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    line-height: 1.2;
}
.field-label-row .inline-help {
    display: inline;
    font-size: 11px;
    font-weight: 700;
    margin: 0;
    text-align: right;
}
.grid-form .form-field {
    color: #344054;
    display: grid;
    font-size: 14px;
    font-weight: 750;
    gap: 7px;
}
.suggested-date-field {
    background: #fff9e8;
    border: 1px solid #ffe2a8;
    border-radius: 14px;
    padding: 10px;
}
.suggested-date-field input {
    border-color: #f0bd62;
    box-shadow: 0 0 0 3px rgba(240, 189, 98, .14);
}
.grid-form label.inline-checkbox-field {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: flex-start;
    padding-top: 10px;
}
.grid-form label.inline-checkbox-field .field-label-row {
    flex: 0 1 auto;
}
.grid-form label.inline-checkbox-field input[type="checkbox"] {
    flex: 0 0 22px;
    height: 22px;
    min-height: 22px;
    width: 22px;
}

@media (max-width: 1100px) {
    .milestone-workspace {
        grid-template-columns: 1fr;
    }
    .milestone-side {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .development-profile-grid,
    .profile-area-cards {
        grid-template-columns: 1fr;
    }
    .profile-side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .competency-groups {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .suggestion-done {
        display: inline-flex;
        font-size: 9px;
        justify-content: flex-end;
        margin: 0;
    }
    .milestones-page-head {
        align-items: center;
        display: flex;
    }
    .milestones-page-head h1 {
        font-size: 20px;
    }
    .milestones-page-head p,
    .milestone-child-select {
        display: none;
    }
    .milestones-page-head .inline-actions .button.ghost {
        display: none;
    }
    .milestones-page-head .inline-actions .button {
        border-radius: 12px;
        min-height: 34px;
        padding: 0 12px;
    }
    .milestone-hero-card {
        display: none;
    }
    .milestone-summary-grid {
        gap: 8px;
        grid-template-columns: repeat(3, max-content);
        overflow-x: auto;
        padding-bottom: 7px;
    }
    .milestone-summary-grid article {
        border: 0;
        box-shadow: none;
        gap: 4px;
        grid-template-columns: 18px auto;
        min-height: 0;
        padding: 0;
        white-space: nowrap;
    }
    .milestone-badge {
        height: 18px;
        width: 18px;
    }
    .milestone-badge .card-svg {
        height: 13px;
        width: 13px;
    }
    .milestone-summary-grid small {
        font-size: 11px;
    }
    .milestone-summary-grid strong {
        font-size: 14px;
        grid-column: 2;
    }
    .milestone-main-panel {
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    .milestone-tabs {
        gap: 22px;
        overflow-x: auto;
        padding: 0 2px;
        white-space: nowrap;
    }
    .milestone-tabs a {
        font-size: 12px;
        padding: 12px 0 10px;
    }
    .milestone-list-head {
        align-items: stretch;
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr auto;
        padding: 10px 0 8px;
    }
    .milestone-list-head h2 {
        display: none;
    }
    .milestone-inline-filter {
        margin: 0;
    }
    .milestone-inline-filter select {
        min-height: 34px;
        min-width: 0;
        width: 100%;
    }
    .milestone-record-filters {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        max-width: none;
        width: 100%;
    }
    .milestone-record-filters input,
    .milestone-record-filters .filter-soft-button {
        grid-column: 1 / -1;
    }
    .milestone-record-filters .milestone-per-page-select {
        display: none;
    }
    .milestone-record-filters select,
    .milestone-record-filters input,
    .milestone-record-filters .filter-soft-button {
        min-height: 34px;
    }
    .milestone-pagination {
        align-items: stretch;
        border-top: 0;
        flex-direction: column;
        gap: 8px;
        padding: 12px 0 4px;
    }
    .milestone-pagination p {
        text-align: center;
    }
    .milestone-pagination nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        justify-content: stretch;
        width: 100%;
    }
    .milestone-pagination .pager-control {
        min-width: 0;
    }
    .milestone-pagination .pager-number:not(.is-current),
    .milestone-pagination .pager-ellipsis {
        display: none;
    }
    .compact-button {
        min-height: 34px;
        padding: 0 11px;
    }
    .milestone-record-table {
        padding: 0;
    }
    .milestone-record-table table,
    .milestone-record-table tbody,
    .milestone-record-table tr,
    .milestone-record-table td {
        display: block;
    }
    .milestone-record-table thead {
        display: none;
    }
    .milestone-record-table tr {
        align-items: center;
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 2px 10px;
        grid-template-columns: 34px 1fr 22px;
        padding: 12px 0;
    }
    .milestone-record-table td {
        border: 0;
        padding: 0;
    }
    .milestone-record-table td:first-child {
        display: contents;
    }
    .record-check {
        grid-row: span 2;
        height: 28px;
        width: 28px;
    }
    .record-title-wrap {
        min-width: 0;
    }
    .record-title-wrap strong {
        font-size: 13px;
    }
    .record-title-wrap small {
        color: var(--muted);
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .milestone-record-table td[data-label="Categoria"] {
        display: none;
    }
    .milestone-record-table td[data-label="Idade"],
    .milestone-record-table td[data-label="Status"] {
        color: var(--muted);
        font-size: 11px;
        grid-column: 2;
    }
    .status-pill {
        font-size: 10px;
        padding: 3px 8px;
    }
    .milestone-actions-cell {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
    .milestone-actions-cell form {
        display: none;
    }
    .icon-action {
        background: transparent;
        border: 0;
        height: 22px;
        margin: 0;
        width: 22px;
    }
    .icon-action::after {
        content: ">";
        font-size: 18px;
        font-weight: 900;
    }
    .icon-action .mini-svg {
        display: none;
    }
    .milestone-side {
        grid-template-columns: 1fr;
    }
    .milestone-tip {
        display: none;
    }
    .suggested-mini-card {
        grid-template-columns: 30px 1fr;
        padding: 10px;
    }
    .suggested-mini-card span {
        height: 28px;
        width: 28px;
    }
    .profile-page-head {
        align-items: center;
        display: flex;
    }
    .profile-page-head h1 {
        font-size: 20px;
    }
    .profile-page-head p {
        display: none;
    }
    .profile-page-head .inline-actions .button {
        border-radius: 12px;
        min-height: 34px;
        padding: 0 12px;
    }
    .profile-child-card {
        display: grid;
        grid-template-columns: 1fr;
    }
    .profile-mini-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    .profile-mini-stats span {
        padding: 9px 10px;
    }
    .profile-mini-stats small {
        font-size: 10px;
    }
    .profile-mini-stats strong {
        font-size: 18px;
    }
    .profile-notice {
        align-items: start;
        gap: 8px;
        padding: 12px;
    }
    .profile-timing-card {
        align-items: stretch;
        grid-template-columns: 1fr;
        padding: 14px;
    }
    .profile-timing-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }
    .timing-chip {
        min-width: 0;
        padding: 8px 10px;
    }
    .timing-chip strong {
        font-size: 18px;
    }
    .development-profile-grid,
    .profile-side-column,
    .profile-area-cards {
        grid-template-columns: 1fr;
    }
    .profile-report-card {
        padding: 14px;
    }
    .big-profile-chart,
    .big-profile-chart .profile-radar {
        min-height: 250px;
        height: 250px;
    }
    .big-profile-chart .profile-radar canvas {
        max-height: 250px;
    }
    .profile-area-grid {
        grid-template-columns: 1fr;
    }
    .profile-chart-card .profile-columns span {
        grid-template-columns: minmax(96px, 1fr) minmax(92px, 1.2fr) 38px;
    }
    .competency-meter {
        grid-template-columns: minmax(96px, 1fr) minmax(78px, 1fr) 34px;
    }
    .competency-meter .confidence-chip {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: -2px;
    }
    .field-label-row {
        align-items: flex-start;
        gap: 4px;
    }
    .field-label-row .inline-help {
        font-size: 10px;
        line-height: 1.25;
        max-width: 72%;
    }
}

/* Ajustes finais de responsividade premium: mantem os modulos estaveis ao redimensionar. */
.shell,
.panel,
.hero-child-card,
.dashboard-grid,
.dashboard-grid > *,
.diary-top-strip,
.diary-top-strip > *,
.diary-workspace,
.diary-main-panel,
.milestone-workspace,
.milestone-workspace > *,
.milestone-record-table,
.responsive-table {
    min-width: 0;
}

.shell {
    width: calc(100% - 250px);
}

body.sidebar-collapsed .shell {
    width: calc(100% - 82px);
}

.dashboard-grid.main-row,
.dashboard-grid.three {
    align-items: stretch;
}

.dashboard-chart-card,
.dashboard-vaccine-card {
    overflow: hidden;
}

.dashboard-chart-wrap {
    contain: layout size;
    max-width: 100%;
}

.dashboard-chart-wrap canvas {
    height: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Atalhos do painel de crescimento, sem interferir no seletor de metricas. */
.dashboard-growth-link {
    color: inherit;
    text-decoration: none;
}

.dashboard-growth-title-link {
    align-items: center;
    display: inline-flex;
    gap: 7px;
}

.dashboard-growth-title-link:hover {
    color: var(--accent, #009f96);
}

.dashboard-growth-chart-link {
    border-radius: 14px;
    cursor: pointer;
    display: block;
}

.dashboard-growth-chart-link:hover .dashboard-chart-wrap {
    box-shadow: 0 0 0 3px rgba(0, 159, 150, .13);
}

.dashboard-growth-chart-link:focus-visible {
    outline: 3px solid rgba(0, 159, 150, .45);
    outline-offset: 4px;
}

.dashboard-vaccine-card .vaccine-preview-item {
    min-width: 0;
}

.dashboard-vaccine-card .vaccine-preview-item span {
    min-width: 0;
}

.dashboard-vaccine-card .vaccine-preview-item span strong,
.dashboard-vaccine-card .vaccine-preview-item span small {
    overflow-wrap: anywhere;
}

.diary-top-strip {
    gap: 8px;
    grid-template-columns: 132px minmax(190px, 1fr) minmax(178px, .85fr) minmax(205px, .9fr);
    overflow: visible;
}

.diary-top-strip > * {
    min-height: 94px;
}

.diary-top-cloud,
.diary-top-categories,
.diary-quick-inline {
    overflow: hidden;
}

.diary-top-cloud h2,
.diary-top-categories h2,
.diary-quick-inline h2 {
    font-size: 15px;
}

.diary-workspace {
    display: block;
    max-width: 840px;
    width: 100%;
}

.diary-tabs-row {
    grid-template-columns: minmax(0, 1fr);
}

.diary-filter-inline {
    flex-wrap: wrap;
}

.diary-filter-inline input {
    max-width: 180px;
}

.milestone-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
}

.milestone-main-panel,
.milestone-side-card {
    overflow: hidden;
}

.milestone-record-table table {
    table-layout: auto;
}

@media (min-width: 901px) {
    .dashboard-grid.main-row {
        grid-template-columns: minmax(0, 1.35fr) minmax(236px, .78fr) !important;
    }

    .dashboard-grid.three {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .dashboard-hero {
        grid-template-columns: minmax(190px, .5fr) minmax(0, 1fr) auto !important;
    }

    .dashboard-hero .hero-child-info {
        grid-template-columns: repeat(3, minmax(112px, 1fr)) !important;
    }

    .metric-grid.dashboard-metrics {
        grid-template-columns: repeat(4, minmax(132px, 1fr));
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    .shell {
        padding-left: 26px;
        padding-right: 26px;
    }

    .dashboard-grid.main-row {
        grid-template-columns: minmax(0, 1.18fr) minmax(220px, .82fr) !important;
    }

    .dashboard-vaccine-card .vaccine-preview-item {
        gap: 8px;
        grid-template-columns: 56px minmax(0, 1fr) auto;
        padding: 9px;
    }

    .dashboard-vaccine-card .vaccine-preview-item time {
        min-width: 48px;
        width: 48px;
    }

    .dashboard-vaccine-card .vaccine-preview-item em {
        padding: 4px 7px;
    }

    .diary-top-strip {
        grid-template-columns: minmax(150px, .55fr) minmax(210px, 1fr);
    }

    .diary-quick-inline,
    .diary-top-categories {
        min-height: 94px;
    }

    .milestone-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    }
}

@container (max-width: 760px) {
    .dashboard-grid.main-row,
    .dashboard-grid.three {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 900px) {
    .shell {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        width: 100%;
    }

    .dashboard-hero {
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(128px, auto) minmax(0, 1fr);
        padding: 13px;
    }

    .dashboard-hero .hero-child-main {
        align-items: center;
        min-width: 0;
    }

    .dashboard-hero .hero-child-main h2 {
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dashboard-hero .hero-child-main p {
        font-size: 11px;
    }

    .dashboard-hero .hero-child-info {
        grid-column: 2;
        max-width: 100%;
        padding: 0 0 8px;
    }

    .dashboard-hero .compact-fact {
        flex: 0 0 112px;
        min-height: 54px;
        padding: 8px;
    }

    .dashboard-hero .compact-fact span {
        font-size: 10px;
    }

    .dashboard-hero .compact-fact strong {
        font-size: 11px;
        line-height: 1.05;
    }

    .hero-scroll-hint {
        grid-column: 2;
        margin-top: -5px;
    }

    .mobile-summary-card {
        flex-basis: 168px;
        min-height: 82px;
        padding: 11px 12px;
    }

    .dashboard-chart-card,
    .dashboard-vaccine-card,
    .dashboard-grid.three .panel {
        padding: 14px;
    }

    .dashboard-chart-wrap {
        height: 246px;
    }

    .dashboard-vaccine-card .vaccine-preview-list {
        gap: 8px;
    }

    .dashboard-vaccine-card .vaccine-preview-item {
        grid-template-columns: 56px minmax(0, 1fr) auto !important;
        min-height: 68px;
    }

    .diary-page-head {
        margin-bottom: 10px;
    }

    .diary-top-strip {
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr 1fr;
        margin-bottom: 10px;
        overflow: visible;
        padding: 0;
    }

    .diary-top-strip > * {
        flex: initial;
        min-height: 0;
        scroll-snap-align: unset;
    }

    .diary-top-summary {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
        padding: 8px;
    }

    .diary-mini-stat {
        min-height: 38px;
        padding: 6px 8px;
    }

    .diary-mini-stat strong {
        font-size: 21px;
    }

    .diary-top-cloud,
    .diary-top-categories {
        border-radius: 15px;
        padding: 10px;
    }

    .diary-top-cloud h2,
    .diary-top-categories h2 {
        font-size: 13px;
    }

    .diary-top-cloud p {
        display: none;
    }

    .diary-top-cloud .mood-cloud {
        gap: 4px 8px;
        padding-top: 6px;
    }

    .diary-top-cloud .mood-cloud span {
        font-size: clamp(12px, var(--mood-size), 19px) !important;
        line-height: 1.05;
    }

    .diary-top-categories .category-meter {
        grid-template-columns: 18px minmax(48px, 1fr) 44px 14px;
        gap: 5px;
        margin-top: 6px;
    }

    .diary-top-categories .category-meter-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .diary-quick-inline {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 10px;
    }

    .diary-quick-inline-head {
        grid-column: 1 / -1;
    }

    .diary-quick-inline .quick-picks {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
    }

    .diary-workspace {
        max-width: none;
    }

    .diary-main-panel {
        padding: 12px;
    }

    .diary-tabs-row {
        gap: 9px;
        margin-bottom: 10px;
    }

    .diary-tabs {
        gap: 16px;
    }

    .diary-filter-inline {
        grid-template-columns: 1fr 1fr;
    }

    .diary-entry-row {
        gap: 8px;
        grid-template-columns: 48px minmax(0, 1fr) 52px;
        min-height: 72px;
        padding: 9px 0;
    }

    .diary-date-pill {
        height: 48px;
        width: 48px;
    }

    .diary-row-main small,
    .diary-row-main strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .diary-row-tags {
        grid-column: 2;
        margin-top: 0;
    }

    .diary-row-thumb {
        height: 48px;
        width: 50px;
    }

    .milestone-summary-grid {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
    }

    .milestone-summary-grid article {
        border: 1px solid #eadfcd;
        border-radius: 14px;
        grid-template-columns: 20px minmax(0, 1fr);
        min-height: 54px;
        padding: 8px;
    }

    .milestone-summary-grid small {
        line-height: 1.05;
        white-space: normal;
    }

    .milestone-workspace {
        gap: 12px;
        grid-template-columns: 1fr;
    }

    .milestone-record-table tr {
        grid-template-columns: 30px minmax(0, 1fr) 26px;
        min-height: 58px;
        padding: 9px 0;
    }

    .record-title-wrap strong {
        line-height: 1.15;
    }

    .record-title-wrap small {
        max-width: 100%;
    }
}

@media (max-width: 430px) {
    .mobile-topbar {
        min-height: 56px;
        padding: 8px 12px;
    }

    .mobile-topbar .brand span {
        max-width: 92px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-child-select {
        max-width: 116px;
    }

    .dashboard-hero {
        grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
    }

    .dashboard-hero .compact-fact {
        flex-basis: 106px;
    }

    .dashboard-chart-wrap {
        height: 258px;
    }

    .vaccine-preview-item em {
        font-size: 10px;
        padding: 4px 6px;
    }

    .diary-top-strip {
        grid-template-columns: 1fr;
    }

    .diary-top-summary,
    .diary-quick-inline .quick-picks,
    .diary-filter-inline {
        grid-template-columns: 1fr 1fr;
    }

    .diary-top-cloud,
    .diary-top-categories {
        display: none;
    }

    .milestone-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Diario Afetivo: organizacao compacta e premium dos filtros/cards. */
.diary-stat-link {
    color: inherit;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.diary-stat-link:hover {
    background: #fff;
    box-shadow: 0 8px 18px rgba(31, 48, 80, .08);
    transform: translateY(-1px);
}

.diary-top-summary {
    border-color: #e0e7f0;
}

.diary-top-cloud,
.diary-top-categories,
.diary-quick-inline {
    border-color: #dde6f0;
}

.diary-filter-inline {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(126px, 1fr)) minmax(138px, .9fr) auto;
    width: 100%;
}

.diary-filter-inline select,
.diary-filter-inline input,
.diary-filter-inline button {
    min-width: 0;
    width: 100%;
}

.diary-filter-inline input {
    max-width: none;
}

.diary-filter-inline button {
    justify-content: center;
    min-width: 104px;
}

.diary-tabs-row {
    gap: 10px;
}

.diary-tabs {
    gap: 22px;
}

.diary-tabs a {
    padding-bottom: 9px;
}

@media (min-width: 901px) {
    .diary-top-strip {
        align-items: stretch;
        grid-template-columns: 158px minmax(230px, 1.05fr) minmax(196px, .9fr) minmax(250px, 1fr);
    }

    .diary-top-summary {
        box-shadow: 0 10px 24px rgba(31, 48, 80, .05);
        padding: 8px 9px;
    }

    .diary-mini-stat {
        gap: 2px 6px;
        grid-template-columns: 24px 34px minmax(0, 1fr);
        padding: 6px 7px;
    }

    .diary-mini-stat strong {
        font-size: 23px;
        text-align: right;
    }

    .diary-mini-stat span {
        font-size: 9px;
        line-height: 1;
        overflow: hidden;
    }

    .diary-quick-inline {
        align-content: center;
        padding-top: 0;
    }

    .diary-main-panel {
        max-width: 100%;
    }

    .diary-workspace {
        max-width: none;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    .diary-top-strip {
        grid-template-columns: minmax(134px, .52fr) minmax(220px, 1fr) minmax(210px, .9fr);
    }

    .diary-quick-inline {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(280px, auto);
        min-height: 74px;
        padding: 10px 12px;
    }

    .diary-quick-inline-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .diary-quick-inline .quick-picks {
        grid-template-columns: 1fr 1fr;
    }

    .diary-filter-inline {
        grid-template-columns: repeat(2, minmax(150px, 1fr)) minmax(132px, .75fr) auto;
    }
}

/* Diario em desktop 720/1080: usa melhor a area horizontal disponivel. */
@media (min-width: 901px) {
    .diary-workspace {
        max-width: none !important;
        width: 100%;
    }

    .diary-main-panel {
        width: 100%;
    }

    .diary-entry-row {
        grid-template-columns: 70px minmax(280px, 1fr) minmax(150px, auto) 64px 106px;
    }

    .diary-filter-inline {
        grid-template-columns: minmax(150px, .85fr) minmax(150px, .85fr) minmax(132px, .7fr) minmax(150px, .8fr) minmax(92px, auto);
    }
}

@media (min-width: 901px) and (max-width: 1260px) {
    .diary-entry-row {
        grid-template-columns: 66px minmax(240px, 1fr) minmax(128px, auto) 58px 100px;
    }

    .diary-filter-inline {
        grid-template-columns: repeat(3, minmax(132px, 1fr)) minmax(130px, .9fr) auto;
    }
}

.diary-row-actions .icon-action.favorite {
    background: #fffaf0;
    border-color: #f5e4b5;
    color: #d79a10;
    opacity: .72;
}

.diary-row-actions .icon-action.favorite:hover,
.diary-row-actions .icon-action.favorite.is-active {
    background: #fff1c7;
    border-color: #ffd978;
    color: #c68400;
    opacity: 1;
}

.diary-row-actions .icon-action.favorite:not(.is-active) .mini-svg {
    fill: none;
}

.diary-row-actions .icon-action.favorite.is-active .mini-svg {
    fill: currentColor;
}

@media (max-width: 900px) {
    .diary-page-head h1 {
        font-size: 20px;
    }

    .diary-top-strip {
        grid-template-columns: 1fr;
    }

    .diary-top-summary {
        grid-column: auto;
        grid-template-columns: 1fr 1fr;
        padding: 8px 10px;
    }

    .diary-mini-stat {
        gap: 4px 7px;
        grid-template-columns: 24px auto minmax(0, 1fr);
    }

    .diary-mini-stat span {
        font-size: 9.5px;
    }

    .diary-top-cloud,
    .diary-top-categories {
        display: none;
    }

    .diary-quick-inline {
        grid-column: auto;
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .diary-quick-inline-head {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .diary-quick-inline-head h2 {
        font-size: 14px;
        line-height: 1.15;
    }

    .diary-quick-inline-head button {
        min-height: 34px;
        padding: 6px 12px;
    }

    .diary-quick-inline .quick-picks {
        grid-template-columns: 1fr 1fr;
    }

    .diary-quick-inline .quick-pick {
        min-height: 50px;
    }

    .diary-tabs-row {
        border-bottom: 1px solid var(--line);
        gap: 8px;
        margin: 0 0 10px;
        padding-bottom: 10px;
    }

    .diary-tabs {
        gap: 18px;
        padding: 0;
    }

    .diary-tabs a {
        font-size: 11.5px;
        padding: 8px 0;
    }

    .diary-filter-inline {
        display: grid;
        gap: 7px;
        grid-template-columns: 1fr 1fr;
    }

    .diary-filter-inline input,
    .diary-filter-inline button {
        grid-column: auto;
        max-width: none;
    }

    .diary-filter-inline select,
    .diary-filter-inline input,
    .diary-filter-inline button {
        border-radius: 12px;
        font-size: 11.5px;
        min-height: 34px;
        padding: 7px 9px;
    }

    .diary-filter-inline button {
        min-width: 0;
    }
}

@media (max-width: 430px) {
    .diary-filter-inline {
        grid-template-columns: 1fr 1fr;
    }

    .diary-filter-inline input {
        grid-column: 1 / -1;
    }

    .diary-filter-inline button {
        grid-column: 1 / -1;
    }

    .diary-quick-inline .quick-picks {
        gap: 7px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .diary-quick-inline .quick-pick {
        gap: 5px;
        grid-template-columns: 22px minmax(0, 1fr);
        min-height: 48px;
        padding: 6px 7px;
    }

    .diary-quick-inline .quick-pick span {
        font-size: 9px;
        line-height: 1.05;
    }

    .diary-quick-inline .quick-pick select {
        font-size: 10.5px;
        min-width: 0;
    }
}

/* Diario Afetivo: tablet/desktop estreito sem quebrar linhas nem trocar icones por setas. */
@media (max-width: 900px) {
    .diary-main-panel {
        overflow: hidden;
    }

    .diary-entry-row {
        align-items: center;
        column-gap: 8px;
        display: grid;
        grid-template-areas:
            "date main thumb actions"
            "date tags thumb actions";
        grid-template-columns: 48px minmax(0, 1fr) 52px 66px;
        min-height: 74px;
        row-gap: 4px;
    }

    .diary-date-pill {
        grid-area: date;
    }

    .diary-row-main {
        grid-area: main;
    }

    .diary-row-tags {
        align-self: start;
        grid-area: tags;
        grid-column: auto;
        justify-content: flex-start;
        margin-top: 0 !important;
        min-width: 0;
    }

    .diary-row-tags .category-chip {
        display: none;
    }

    .diary-row-thumb {
        align-self: center;
        grid-area: thumb;
        grid-column: auto;
        grid-row: auto;
        height: 48px;
        width: 52px;
    }

    .diary-row-actions {
        align-self: center;
        display: grid !important;
        gap: 5px;
        grid-area: actions;
        grid-column: auto;
        grid-row: auto;
        grid-template-columns: repeat(2, 28px);
        justify-content: end;
        margin-top: 0 !important;
    }

    .diary-row-actions form {
        display: contents !important;
    }

    .diary-row-actions .icon-action {
        align-items: center;
        background: #f5fbfa;
        border: 1px solid #dcefeb;
        border-radius: 999px;
        color: var(--primary-dark);
        display: inline-flex;
        height: 28px;
        justify-content: center;
        margin: 0;
        width: 28px;
    }

    .diary-row-actions .icon-action::after {
        content: none !important;
    }

    .diary-row-actions .icon-action .mini-svg {
        display: block !important;
        height: 14px;
        width: 14px;
    }

    .diary-row-actions .icon-action.danger {
        background: #fff5f5;
        border-color: #ffd7d7;
        color: #c93030;
    }
}

@media (max-width: 560px) {
    .diary-entry-row {
        grid-template-columns: 48px minmax(0, 1fr) 46px 58px;
    }

    .diary-row-thumb {
        height: 46px;
        width: 46px;
    }

    .diary-row-actions {
        gap: 4px;
        grid-template-columns: repeat(2, 26px);
    }

    .diary-row-actions .icon-action {
        height: 26px;
        width: 26px;
    }

    .diary-row-actions .icon-action .mini-svg {
        height: 13px;
        width: 13px;
    }
}

/* Ajustes finais de responsividade, temas e gestão administrativa. */
[data-theme="mint"] { --surface-subtle: #f3fbf9; --surface-selected: #dff6ef; --surface-icon: #c7f0e4; }
[data-theme="blue"] { --surface-subtle: #f3f8ff; --surface-selected: #e2f1ff; --surface-icon: #cfe8ff; }
[data-theme="rose"] { --page-end: #fff0f5; --surface-subtle: #fff6f9; --surface-selected: #ffe5ef; --surface-icon: #ffd5e4; }
[data-theme="lilac"] { --surface-subtle: #f8f6ff; --surface-selected: #eee9ff; --surface-icon: #dfd7ff; }
[data-theme="sunny"] { --surface-subtle: #fffaf0; --surface-selected: #fff0cf; --surface-icon: #ffe4a4; }

html,
body {
    background: linear-gradient(180deg, var(--page-start) 0%, var(--page-end) 100%) !important;
}

.sidebar,
.mobile-topbar,
.sidebar-account-toggle {
    background: var(--panel);
}

.sidebar nav a:hover,
.sidebar nav a.is-active,
.sidebar-account-menu a:hover,
.sidebar-account-menu a.is-active {
    background: var(--surface-selected);
}

.sidebar nav a.is-active .nav-svg {
    background: var(--surface-icon);
    border-color: var(--surface-icon);
}

/* Em desktop e largura intermediária, esta é uma única área funcional e não
   uma coluna de uma grade de três cartões. */
.dashboard-routine-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

.dashboard-routine-head > div:first-child {
    min-width: 0;
}

@container (max-width: 720px) {
    .dashboard-routine-head {
        display: grid;
        gap: 10px;
    }

    .dashboard-routine-head p {
        max-width: none;
    }

    .dashboard-routine-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .dashboard-routine-actions a {
        flex: 1 1 0;
        justify-content: center;
    }
}

/* Marcos: indicadores alinhados, filtros no fluxo e controle móvel apenas. */
@media (min-width: 901px) {
    .milestones-page-head .inline-actions .button.ghost {
        display: none;
    }

    .milestone-top-suggestions > summary.side-title {
        cursor: default;
    }

    .milestone-suggestions-toggle {
        display: none;
    }

    .milestone-overview-card {
        gap: 11px;
        padding: 16px 18px;
    }

    .milestone-overview-item {
        gap: 4px 11px;
        grid-template-columns: 29px 42px minmax(0, 1fr);
    }

    .milestone-overview-item strong {
        align-self: center;
        min-width: 42px;
    }

    .milestone-overview-item small {
        align-self: center;
        line-height: 1.18;
    }

    .milestone-list-head {
        align-items: start;
        display: grid;
        gap: 12px;
        padding: 18px 20px 14px;
    }

    .milestone-inline-filter,
    .milestone-record-filters {
        margin-left: 0;
        max-width: none;
        width: 100%;
    }

    .milestone-record-filters {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .milestone-record-filters input {
        grid-column: span 2;
    }
}

@container (min-width: 761px) and (max-width: 1050px) {
    .milestone-record-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .milestone-record-filters input {
        grid-column: span 2;
    }
}

/* Caderneta: em telefone, a visão inicial preserva o estado essencial sem
   obrigar a percorrer toda a ficha neonatal antes de chegar aos demais blocos. */
.booklet-neonatal-details {
    border: 0;
    margin: 0;
}

.booklet-neonatal-details > summary {
    display: none;
}

@media (max-width: 640px) {
    .booklet-neonatal-details > summary {
        align-items: center;
        background: var(--surface-subtle);
        border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
        border-radius: 14px;
        cursor: pointer;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        list-style: none;
        min-height: 62px;
        padding: 10px 11px;
    }

    .booklet-neonatal-details > summary::-webkit-details-marker {
        display: none;
    }

    .booklet-neonatal-details > summary strong,
    .booklet-neonatal-details > summary small {
        display: block;
    }

    .booklet-neonatal-details > summary strong {
        color: var(--ink);
        font-size: 12px;
    }

    .booklet-neonatal-details > summary small {
        color: var(--muted);
        font-size: 10px;
        margin-top: 3px;
    }

    .booklet-neonatal-progress {
        color: var(--primary-dark);
        display: grid;
        font-size: 10px;
        justify-items: end;
        line-height: 1.15;
        white-space: nowrap;
    }

    .booklet-neonatal-progress b {
        font-size: 12px;
    }

    .booklet-neonatal-progress em {
        color: var(--primary);
        font-size: 9px;
        font-style: normal;
        font-weight: 850;
        margin-top: 3px;
    }

    .booklet-neonatal-details-body {
        margin-top: 10px;
    }

    #booklet-neonatal .booklet-fact-grid {
        gap: 7px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-top: 10px;
    }

    #booklet-neonatal .booklet-fact-grid div {
        min-height: 51px;
        padding: 8px;
    }

    #booklet-neonatal .booklet-fact-grid span {
        font-size: 9px;
    }

    #booklet-neonatal .booklet-fact-grid strong {
        font-size: 10.5px;
        line-height: 1.2;
    }

    #booklet-neonatal .booklet-subsection-heading {
        align-items: start;
        margin-top: 12px;
        padding-top: 11px;
    }

    #booklet-neonatal .booklet-subsection-heading h3 {
        font-size: 14px;
    }

    #booklet-neonatal .booklet-subsection-heading > span {
        font-size: 9px;
        max-width: 145px;
        text-align: right;
    }
}

/* Gestão de cobrança e perfil administrativo. */
.admin-billing-summary {
    display: grid;
    gap: 4px;
    min-width: 132px;
}

.admin-billing-summary small,
.admin-billing-summary em {
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
    line-height: 1.25;
}

.admin-billing-pill {
    border-radius: 999px;
    display: inline-flex;
    font-size: 10px;
    font-weight: 850;
    justify-self: start;
    padding: 4px 7px;
}

.admin-billing-pill.is-trial { background: #eee9ff; color: #6f56d9; }
.admin-billing-pill.is-active { background: #e3f8f0; color: #08775d; }
.admin-billing-pill.is-renewal_soon { background: #fff2d7; color: #a76700; }
.admin-billing-pill.is-scheduled_cancel { background: #e8f3ff; color: #1972b6; }
.admin-billing-pill.is-past_due { background: #fff0d9; color: #b55b00; }
.admin-billing-pill.is-suspended,
.admin-billing-pill.is-canceled { background: #fff0f1; color: #c13c4b; }
.admin-billing-pill.is-pending { background: #eef3f8; color: #586b80; }
.admin-billing-pill.is-lifetime { background: #e4f7f5; color: #087d74; }
.admin-billing-pill.is-none { background: #f1f4f7; color: #667085; }

.admin-billing-metrics {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 16px 0 12px;
}

.admin-billing-metrics article {
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 13px;
    min-width: 0;
    padding: 11px;
}

.admin-billing-metrics span,
.admin-billing-metrics strong {
    display: block;
}

.admin-billing-metrics span { color: var(--muted); font-size: 10px; font-weight: 800; }
.admin-billing-metrics strong { color: var(--primary-dark); font-size: 22px; margin-top: 4px; }

.admin-billing-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 8px 0 14px;
}

.admin-billing-toolbar label {
    color: #597188;
    display: grid;
    font-size: 10px;
    font-weight: 850;
    gap: 4px;
    min-width: 180px;
}

.admin-billing-toolbar select { min-height: 36px; }
.admin-billing-table { min-width: 720px; }
.admin-billing-table td > strong,
.admin-billing-table td > span,
.admin-billing-table td > small { display: block; }
.admin-billing-table td > span { color: var(--muted); font-size: 11px; margin-top: 2px; }
.admin-billing-table td > small { color: var(--muted); font-size: 10px; margin-top: 4px; }

.admin-detail-head { margin-bottom: 16px; }
.admin-detail-identity { align-items: center; display: grid; gap: 13px; grid-template-columns: 54px minmax(0, 1fr) auto; }
.admin-detail-avatar { align-items: center; background: var(--surface-selected); border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line)); border-radius: 50%; color: var(--primary-dark); display: flex; font-size: 19px; font-weight: 900; height: 52px; justify-content: center; width: 52px; }
.admin-detail-identity h2 { color: var(--ink); font-size: 21px; margin: 3px 0; }
.admin-detail-identity p { color: var(--muted); font-size: 12px; margin: 0; overflow-wrap: anywhere; }
.admin-detail-identity-meta { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.admin-detail-identity-meta div { display: grid; gap: 3px; min-width: 92px; }
.admin-detail-identity-meta dt { color: var(--muted); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.admin-detail-identity-meta dd { color: var(--ink); font-size: 11px; font-weight: 750; margin: 0; }
.admin-detail-stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0; }
.admin-detail-stat-grid article { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; min-width: 0; padding: 13px; }
.admin-detail-stat-grid span,
.admin-detail-stat-grid strong { display: block; }
.admin-detail-stat-grid span { color: var(--muted); font-size: 10px; font-weight: 800; }
.admin-detail-stat-grid strong { color: var(--primary-dark); font-size: 24px; margin-top: 5px; }
.admin-detail-grid { align-items: start; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.admin-detail-section { min-width: 0; padding: 17px; }
.admin-detail-section header { margin-bottom: 12px; }
.admin-detail-section header h2 { color: var(--ink); font-size: 18px; margin: 3px 0 0; }
.admin-detail-section header p { color: var(--muted); font-size: 11px; line-height: 1.35; margin: 5px 0 0; }
.admin-detail-family-list,
.admin-detail-timeline { display: grid; gap: 8px; }
.admin-detail-family-list article { background: var(--surface-subtle); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 8px; padding: 10px; }
.admin-detail-family-list strong,
.admin-detail-family-list small { display: block; }
.admin-detail-family-list strong { color: var(--ink); font-size: 13px; }
.admin-detail-family-list small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.admin-detail-family-list dl { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.admin-detail-family-list dl div { background: var(--panel); border-radius: 8px; padding: 6px; }
.admin-detail-family-list dt { color: var(--muted); font-size: 9px; font-weight: 800; }
.admin-detail-family-list dd { color: var(--primary-dark); font-size: 12px; font-weight: 900; margin: 2px 0 0; }
.admin-detail-billing { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.admin-detail-billing small { margin: 0; }
.admin-detail-shared-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.admin-detail-shared-meta > span:not(.admin-status-pill) { color: var(--muted); font-size: 10px; }
.admin-detail-timeline article { align-items: start; border-bottom: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: 86px minmax(0, 1fr) auto; padding: 9px 0; }
.admin-detail-timeline article:last-child { border-bottom: 0; }
.admin-detail-timeline time { color: var(--muted); font-size: 10px; font-weight: 800; }
.admin-detail-timeline strong,
.admin-detail-timeline span { display: block; }
.admin-detail-timeline strong { color: var(--ink); font-size: 12px; }
.admin-detail-timeline span { color: var(--muted); font-size: 10px; line-height: 1.35; margin-top: 2px; }
.admin-detail-timeline em { background: #eef3f8; border-radius: 999px; color: #586b80; font-size: 9px; font-style: normal; font-weight: 850; padding: 3px 6px; }

@media (max-width: 760px) {
    .admin-billing-metrics,
    .admin-detail-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-detail-grid { grid-template-columns: 1fr; }
    .admin-detail-identity { align-items: start; grid-template-columns: 46px minmax(0, 1fr); }
    .admin-detail-avatar { height: 46px; width: 46px; }
    .admin-detail-identity-meta { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .admin-user-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-users-table td:nth-child(7) { grid-template-columns: 78px minmax(0, 1fr); }
    .admin-billing-table,
    .admin-billing-table tbody { display: grid; gap: 9px; min-width: 0; width: 100%; }
    .admin-billing-table thead { display: none; }
    .admin-billing-table tr { background: var(--surface-subtle); border: 1px solid var(--line); border-radius: 12px; display: block; padding: 5px 10px; }
    .admin-billing-table td { align-items: start; border: 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: 82px minmax(0, 1fr); padding: 8px 0; }
    .admin-billing-table td:last-child { border-bottom: 0; }
    .admin-billing-table td::before { color: var(--muted); content: attr(data-label); font-size: 9px; font-weight: 850; text-transform: uppercase; }
    .admin-billing-table td:last-child::before { content: none; }
    .admin-billing-toolbar label { flex: 1 1 140px; min-width: 0; }
    .admin-detail-timeline article { grid-template-columns: 72px minmax(0, 1fr); }
    .admin-detail-timeline em { grid-column: 2; justify-self: start; }
}

/* Editor individual de Rotinas: grupos reais evitam que campos ocultos ocupem a grade. */
.routine-editor-fields {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr);
}

.routine-editor-fields [hidden] {
    display: none !important;
}

.routine-editor-basic,
.routine-editor-feeding-grid,
.routine-editor-diaper-grid {
    display: grid;
    gap: 12px;
    grid-column: 1 / -1;
    min-width: 0;
}

.routine-editor-basic {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .95fr);
}

.routine-editor-feeding-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.routine-editor-diaper-grid {
    grid-template-columns: minmax(0, 1fr);
}

.routine-editor-fields label,
.routine-editor-fields input,
.routine-editor-fields select,
.routine-editor-fields textarea {
    max-width: 100%;
    min-width: 0;
}

.routine-editor-fields input,
.routine-editor-fields select,
.routine-editor-fields textarea {
    font-weight: 400 !important;
    width: 100%;
}

.routine-editor-date,
.routine-editor-type,
.routine-editor-notes {
    grid-column: auto;
    grid-row: auto;
}

.routine-editor-notes {
    grid-column: 1 / -1;
}

.routine-editor-fields.is-diaper {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.65fr);
}

.routine-editor-fields.is-diaper .routine-editor-basic {
    grid-column: 1 / -1;
}

.routine-editor-fields.is-diaper .routine-editor-diaper-grid {
    grid-column: 1;
}

.routine-editor-fields.is-diaper .routine-editor-notes {
    grid-column: 2;
    grid-row: 2;
}

.routine-editor-notes textarea {
    min-height: 68px;
}

@media (max-width: 560px) {
    .routine-editor-fields {
        gap: 11px;
    }

    .routine-editor-basic,
    .routine-editor-feeding-grid,
    .routine-editor-diaper-grid {
        gap: 8px;
    }

    .routine-editor-basic {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr);
    }

    .routine-editor-feeding-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .routine-editor-fields input[type="datetime-local"] {
        font-size: 12px;
        letter-spacing: -.02em;
    }

    .routine-editor-fields.is-diaper {
        column-gap: 8px;
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.55fr);
    }

    .routine-editor-notes textarea {
        min-height: 68px;
    }

    .routine-editor-fields.is-diaper .routine-editor-notes textarea {
        min-height: 52px;
    }
}

/* Marcos e Aprendizados: ordem dos dados dentro do cartão no celular. */
.milestone-record-status-mobile {
    display: none;
}

@media (max-width: 900px) {
    .milestone-record-table tr {
        display: block;
        min-height: 0;
        padding: 11px;
        position: relative;
    }

    .milestone-record-table td:first-child {
        display: block;
    }

    .milestone-record-status-desktop {
        display: none !important;
    }

    .milestone-record-title-wrap {
        display: block;
        min-width: 0;
    }

    .milestone-record-title-line {
        align-items: center;
        display: flex;
        gap: 7px;
        min-height: 24px;
    }

    .milestone-record-title-line strong {
        display: block;
        flex: 0 1 auto;
        font-size: 13px;
        line-height: 1.18;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .milestone-record-title-line .mobile-age-pill {
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 9.5px;
        margin: 0;
        padding: 4px 7px;
    }

    .milestone-record-status-mobile {
        align-items: center;
        display: inline-flex;
        flex: 0 0 23px;
        height: 23px;
        justify-content: center;
        margin-left: auto;
        width: 23px;
    }

    .milestone-record-status-mobile .mini-svg {
        height: 12px;
        width: 12px;
    }

    .record-title-wrap small {
        display: block;
        font-size: 11px;
        line-height: 1.3;
        margin-top: 4px;
        overflow: visible;
        white-space: normal;
    }

    .record-title-wrap em:not(.record-timing) {
        display: none;
    }

    .milestone-record-table .record-title-wrap .record-timing {
        display: block;
        font-size: 10px;
        line-height: 1.22;
        margin-top: 4px;
    }

    .milestone-mobile-meta {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 7px 76px 0 0;
        min-height: 27px;
    }

    .milestone-mobile-meta .category-pill,
    .milestone-mobile-meta .status-pill {
        font-size: 9.5px;
        padding: 5px 8px;
    }

    .milestone-actions-cell {
        align-items: center;
        bottom: 11px;
        display: flex !important;
        gap: 11px;
        position: absolute;
        right: 11px;
    }

    .milestone-actions-cell .icon-action {
        height: 25px;
        width: 25px;
    }

    .milestone-actions-cell .icon-action .mini-svg {
        height: 12px;
        width: 12px;
    }
}

/* Camada final: prevalece sobre ajustes legados carregados acima. */
html,
body {
    background: linear-gradient(180deg, var(--page-start) 0%, var(--page-end) 100%) !important;
}

.dashboard-routine-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 901px) {
    .milestones-page-head .inline-actions .button.ghost,
    .milestone-suggestions-toggle {
        display: none;
    }

    .milestone-list-head {
        align-items: start;
        display: grid;
        gap: 12px;
    }

    .milestone-record-filters {
        margin-left: 0;
        max-width: none;
        width: 100%;
    }
}

@container (min-width: 1051px) {
    .milestone-record-filters { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .milestone-record-filters input { grid-column: span 2; }
}

@container (min-width: 761px) and (max-width: 1050px) {
    .milestone-record-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .milestone-record-filters input { grid-column: span 2; }
}

@media (max-width: 720px) {
    .dashboard-routine-head { display: grid; }
    .dashboard-routine-head p { max-width: none; }
    .dashboard-routine-actions { justify-content: flex-start; width: 100%; }
    .dashboard-routine-actions a { flex: 1 1 0; justify-content: center; }
}

@media (max-width: 640px) {
    .booklet-neonatal-details > summary {
        align-items: center;
        background: var(--surface-subtle);
        border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
        border-radius: 14px;
        cursor: pointer;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        list-style: none;
        min-height: 62px;
        padding: 10px 11px;
    }

    .booklet-neonatal-details > summary::-webkit-details-marker { display: none; }
    .booklet-neonatal-details > summary strong,
    .booklet-neonatal-details > summary small { display: block; }
    .booklet-neonatal-details > summary strong { color: var(--ink); font-size: 12px; }
    .booklet-neonatal-details > summary small { color: var(--muted); font-size: 10px; margin-top: 3px; }
    .booklet-neonatal-progress { color: var(--primary-dark); display: grid; font-size: 10px; justify-items: end; line-height: 1.15; white-space: nowrap; }
    .booklet-neonatal-progress b { font-size: 12px; }
    .booklet-neonatal-progress em { color: var(--primary); font-size: 9px; font-style: normal; font-weight: 850; margin-top: 3px; }
    .booklet-neonatal-details-body { margin-top: 10px; }
    #booklet-neonatal .booklet-fact-grid { gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 10px; }
    #booklet-neonatal .booklet-fact-grid div { min-height: 51px; padding: 8px; }
    #booklet-neonatal .booklet-fact-grid span { font-size: 9px; }
    #booklet-neonatal .booklet-fact-grid strong { font-size: 10.5px; line-height: 1.2; }
    #booklet-neonatal .booklet-subsection-heading { align-items: start; margin-top: 12px; padding-top: 11px; }
    #booklet-neonatal .booklet-subsection-heading h3 { font-size: 14px; }
    #booklet-neonatal .booklet-subsection-heading > span { font-size: 9px; max-width: 145px; text-align: right; }
    .admin-user-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.admin-platform-trial-form {
    align-items: end;
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 13px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 116px auto;
    margin: 15px 0 0;
    padding: 11px;
}

.admin-platform-trial-form span,
.admin-platform-trial-form span strong,
.admin-platform-trial-form span small {
    display: block;
}

.admin-platform-trial-form strong { color: var(--ink); font-size: 12px; }
.admin-platform-trial-form small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.admin-platform-trial-form label { color: var(--muted); display: grid; font-size: 9px; font-weight: 850; gap: 4px; }
.admin-platform-trial-form input { min-height: 34px; }

.admin-users-table { min-width: 1100px; }

@media (max-width: 640px) {
    .admin-platform-trial-form { align-items: stretch; grid-template-columns: minmax(0, 1fr) auto; }
    .admin-platform-trial-form > span { grid-column: 1 / -1; }
    .admin-users-table { min-width: 0; }
}

/* Camada final de estabilidade: Diário em desktop intermediário e menu móvel. */
@media (min-width: 901px) and (max-width: 1180px) {
    .diary-top-strip {
        align-items: stretch;
        grid-template-columns: minmax(128px, .52fr) minmax(0, 1fr) minmax(188px, .82fr);
    }

    .diary-top-cloud .mood-cloud {
        align-content: center;
        gap: 4px 10px;
        justify-content: flex-start;
        min-height: 0;
        padding: 6px 0 0;
    }

    .diary-top-cloud .mood-cloud span {
        font-size: clamp(12px, calc(var(--mood-size) * .82), 20px);
        line-height: 1;
        transform: none !important;
    }

    .diary-quick-inline {
        align-items: center;
        align-content: center;
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(226px, .72fr);
        grid-template-rows: auto;
        min-height: 74px;
        padding: 10px 12px;
    }

    .diary-quick-inline .diary-quick-fields {
        align-self: center;
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 900px) {
    .mobile-menu-scrim {
        top: 66px !important;
    }

    .sidebar,
    body.sidebar-collapsed .sidebar {
        align-items: stretch !important;
        bottom: 0 !important;
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        padding: 10px !important;
        top: 66px !important;
        width: min(320px, calc(100vw - 40px)) !important;
    }

    .sidebar .sidebar-head,
    body.sidebar-collapsed .sidebar .sidebar-head {
        align-items: center !important;
        display: grid !important;
        flex: 0 0 42px !important;
        flex-direction: row !important;
        gap: 8px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        justify-content: initial !important;
        margin: 0 !important;
        min-height: 42px !important;
        padding: 0 4px 8px !important;
    }

    .sidebar .sidebar-head .brand,
    body.sidebar-collapsed .sidebar .sidebar-head .brand,
    .sidebar .sidebar-collapse-toggle,
    body.sidebar-collapsed .sidebar .sidebar-collapse-toggle {
        display: none !important;
    }

    .sidebar .mobile-sidebar-title,
    body.sidebar-collapsed .sidebar .mobile-sidebar-title {
        display: block !important;
        margin: 0 !important;
    }

    .sidebar .mobile-sidebar-close {
        align-self: center;
        display: inline-flex !important;
        margin: 0 !important;
    }

    .sidebar .app-nav,
    body.sidebar-collapsed .sidebar .app-nav {
        align-content: start !important;
        display: grid !important;
        flex: 1 1 auto !important;
        gap: 5px !important;
        grid-auto-rows: min-content !important;
        grid-template-columns: 1fr !important;
        margin: 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 8px 2px !important;
    }

    .sidebar .nav-section,
    body.sidebar-collapsed .sidebar .nav-section {
        align-content: start;
        display: grid !important;
        gap: 2px !important;
        grid-template-columns: 1fr !important;
    }

    .sidebar .nav-section-title,
    body.sidebar-collapsed .sidebar .nav-section-title,
    .sidebar .nav-divider {
        display: none !important;
    }

    .sidebar nav a,
    body.sidebar-collapsed .sidebar nav a {
        font-size: 12px !important;
        min-height: 34px !important;
        padding: 4px 8px !important;
    }

    .sidebar .sidebar-account,
    body.sidebar-collapsed .sidebar .sidebar-account {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 8px 3px 0 !important;
        position: static !important;
        width: 100% !important;
    }

    .sidebar .sidebar-garden {
        display: none !important;
    }
}


/* Flatpickr — padrão único de data e hora, instalado localmente. */
.flatpickr-input-shell {
    display: block;
    min-width: 0;
    position: relative;
    width: 100%;
}

.flatpickr-alt-input {
    background: #fff !important;
    border: 1px solid #cfd7e5 !important;
    border-radius: 10px !important;
    box-sizing: border-box;
    color: var(--ink) !important;
    font: inherit !important;
    font-weight: 400 !important;
    min-height: 38px;
    padding: 8px 38px 8px 10px !important;
    width: 100% !important;
}

.flatpickr-alt-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(22, 107, 114, .15);
    outline: 0;
}

.flatpickr-field-icon {
    color: var(--primary);
    display: inline-flex;
    height: 18px;
    pointer-events: none;
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
}

.flatpickr-field-icon svg {
    fill: none;
    height: 100%;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 100%;
}

.flatpickr-calendar {
    border: 1px solid #d9e5ee !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 36px rgba(18, 31, 55, .18) !important;
    color: var(--ink);
    font-family: inherit;
    overflow: hidden;
}

.flatpickr-calendar:before,
.flatpickr-calendar:after {
    display: none !important;
}

.flatpickr-months {
    background: #f6fbfb;
    padding: 8px 4px 4px;
}

.flatpickr-current-month,
.flatpickr-monthDropdown-months,
.numInputWrapper span,
.flatpickr-weekday,
.flatpickr-day,
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    color: var(--ink) !important;
    font-family: inherit !important;
}

.flatpickr-current-month {
    font-size: 14px !important;
    font-weight: 800 !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--primary) !important;
    fill: var(--primary) !important;
}

.flatpickr-weekdays {
    background: #f6fbfb;
}

span.flatpickr-weekday {
    color: #62718a !important;
    font-size: 11px;
    font-weight: 800;
}

.flatpickr-day {
    border-radius: 50% !important;
    font-size: 13px;
    max-width: 36px;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: #e8f7f5 !important;
    border-color: #e8f7f5 !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.flatpickr-day.today {
    border-color: var(--primary) !important;
}

.flatpickr-time {
    background: #fff;
    border-top: 1px solid #e5edf3 !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    font-size: 15px;
    font-weight: 800;
}

@media (max-width: 560px) {
    .flatpickr-calendar {
        left: 16px !important;
        max-width: calc(100vw - 32px);
        right: 16px !important;
        width: auto !important;
    }

    .flatpickr-rContainer,
    .flatpickr-days,
    .dayContainer {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .flatpickr-day {
        max-width: 14.2857%;
    }
}

/* Diário Afetivo: ordem e pares de campos consistentes no formulário/modal. */
.diary-entry-form {
    column-gap: 12px;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
}

.diary-entry-form .diary-entry-date,
.diary-entry-form .diary-entry-child,
.diary-entry-form .diary-entry-mood {
    grid-column: 1;
    min-width: 0;
}

.diary-entry-form .diary-entry-favorite,
.diary-entry-form .diary-entry-category,
.diary-entry-form .diary-entry-weather {
    grid-column: 2;
    min-width: 0;
}

.diary-entry-form .diary-entry-date input[type="datetime-local"] {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

/* Seletor de data único: campo compacto, calendário próprio e horário sem estouro lateral. */
.responsive-date-field {
    display: block;
    min-width: 0;
}

.responsive-date-source {
    display: none !important;
}

.responsive-date-trigger {
    align-items: center;
    background: #fff;
    border: 1px solid #cfd7e5;
    border-radius: 10px;
    box-sizing: border-box;
    color: var(--ink);
    cursor: pointer;
    display: grid;
    font: inherit;
    font-weight: 400;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
    min-height: 38px;
    padding: 8px 10px;
    text-align: left;
    width: 100%;
}

.responsive-date-trigger:hover,
.responsive-date-trigger:focus-visible {
    border-color: var(--primary);
    outline: 3px solid rgba(22, 107, 114, .15);
}

.responsive-date-trigger.is-empty {
    color: #98a2b3;
}

.responsive-date-trigger.is-invalid {
    border-color: #db2f5d;
    outline: 3px solid rgba(219, 47, 93, .12);
}

.responsive-date-trigger-icon {
    color: var(--primary);
    display: inline-flex;
    height: 18px;
    width: 18px;
}

.responsive-date-trigger-icon svg {
    fill: none;
    height: 100%;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 100%;
}

.app-date-picker-layer {
    align-items: center;
    background: rgba(18, 31, 55, .42);
    box-sizing: border-box;
    display: grid;
    inset: 0;
    justify-items: center;
    padding: 16px;
    position: fixed;
    z-index: 10050;
}

.app-date-picker-layer[hidden] {
    display: none;
}

.app-date-picker-dialog {
    background: #fff;
    border: 1px solid #d9e5ee;
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(18, 31, 55, .24);
    box-sizing: border-box;
    color: var(--ink);
    max-width: 336px;
    padding: 14px;
    width: min(336px, calc(100vw - 32px));
}

.app-date-picker-header {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    margin-bottom: 10px;
    text-align: center;
}

.app-date-picker-header strong {
    font-size: 14px;
    text-transform: capitalize;
}

.app-date-picker-nav {
    background: #f3fbfb;
    border: 1px solid #d9eeee;
    border-radius: 9px;
    color: var(--primary);
    cursor: pointer;
    font-size: 23px;
    line-height: 28px;
    min-height: 30px;
    padding: 0;
}

.app-date-picker-weekdays,
.app-date-picker-calendar {
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.app-date-picker-weekdays {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 4px;
    text-align: center;
}

.app-date-picker-day {
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    min-height: 34px;
    padding: 0;
}

.app-date-picker-day:hover,
.app-date-picker-day:focus-visible {
    background: #e8f7f5;
    outline: 0;
}

.app-date-picker-day.is-selected {
    background: var(--primary);
    color: #fff;
    font-weight: 850;
}

.app-date-picker-time {
    align-items: end;
    border-top: 1px solid #e6edf4;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 74px 74px;
    margin-top: 12px;
    padding-top: 12px;
}

.app-date-picker-time > span,
.app-date-picker-time label > span {
    color: #55647b;
    display: block;
    font-size: 11px;
    font-weight: 800;
}

.app-date-picker-time > span {
    padding-bottom: 10px;
}

.app-date-picker-time label {
    display: grid;
    font-size: 11px;
    gap: 4px;
    min-width: 0;
}

.app-date-picker-time select {
    background: #fff;
    border: 1px solid #cfd7e5;
    border-radius: 9px;
    color: var(--ink);
    font: inherit;
    min-height: 36px;
    padding: 6px;
    width: 100%;
}

.app-date-picker-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 14px;
}

.app-date-picker-actions button {
    border-radius: 9px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    min-height: 34px;
    padding: 0 12px;
}

.app-date-picker-cancel {
    background: #fff;
    border: 1px solid #d6e0ea;
    color: #506078;
}

.app-date-picker-confirm {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
}

.app-date-picker-layer.is-desktop {
    background: transparent;
    display: block;
    padding: 0;
}

.app-date-picker-layer.is-desktop .app-date-picker-dialog {
    position: fixed;
}

.diary-entry-form .diary-entry-favorite {
    align-items: flex-start;
    display: block !important;
    justify-self: end;
    padding-top: 0 !important;
    width: max-content;
}

.diary-entry-form .diary-entry-favorite .field-label-row {
    display: contents;
}

.diary-entry-form .diary-entry-favorite .field-label-lines {
    display: contents;
}

.diary-entry-form .diary-entry-favorite .field-label-line {
    line-height: 1.25;
}

.diary-entry-form .diary-entry-favorite .field-label-line-top {
    display: block;
}

.diary-entry-form .diary-entry-favorite .field-label-line-bottom {
    display: inline-block;
    margin-top: 2px;
}

.diary-entry-form .diary-entry-favorite input[type="checkbox"] {
    display: inline-block;
    height: 22px;
    margin: 0 0 0 6px;
    min-height: 22px;
    vertical-align: middle;
    width: 22px;
}

.diary-entry-form .diary-entry-story textarea {
    min-height: 96px;
}

@media (max-width: 900px) {
    .grid-form.diary-entry-form {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
    }

    .diary-entry-form .diary-entry-date input[type="datetime-local"] {
        font-size: 12px;
        letter-spacing: -.025em;
    }
}

/* Galaxy S8+: a data ganha apenas o espaço necessário para exibir a hora completa. */
@media (max-width: 560px) {
    .diary-entry-form .diary-entry-date .responsive-date-trigger,
    .diary-entry-form .diary-entry-date input[type="datetime-local"] {
        font-size: 12px;
        letter-spacing: -.025em;
        max-width: calc(100% + 14px);
        width: calc(100% + 14px);
    }

    .app-date-picker-dialog {
        border-radius: 16px;
        padding: 12px;
    }

    .app-date-picker-day {
        min-height: 32px;
    }
}

/* Padrão definitivo para todas as ações textuais já convertidas. */
.standard-action-button.standard-action-button {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    height: 23px;
    justify-content: center;
    min-height: 23px;
    min-width: 69px;
    padding: 0 !important;
    width: 69px;
}

.standard-action-image {
    display: block;
    filter: none !important;
    height: 23px;
    max-width: none;
    width: 69px;
}

.button.ghost.app-return-button,
.app-return-button {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    flex: 0 0 72px;
    height: 23px;
    justify-content: center;
    min-height: 23px;
    min-width: 72px;
    padding: 0 !important;
    width: 72px;
}

.app-return-button::before {
    background-image: url('bt_voltar_72x23px.png?v=20260825c');
    filter: none !important;
    height: 23px;
    width: 72px;
}

/* Padrão único de ações com rótulo: PNG original, compacto e sem filtros. */
.standard-action-button.standard-action-button {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    height: 23px;
    justify-content: center;
    min-height: 23px;
    min-width: 69px;
    padding: 0 !important;
    width: 69px;
}

.standard-action-image {
    display: block;
    filter: none !important;
    height: 23px;
    max-width: none;
    width: 69px;
}

.button.ghost.app-return-button,
.app-return-button {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    flex: 0 0 72px;
    height: 23px;
    justify-content: center;
    min-height: 23px;
    min-width: 72px;
    padding: 0 !important;
    width: 72px;
}

.app-return-button::before {
    background-image: url('bt_voltar_72x23px.png?v=20260825c');
    filter: none !important;
    height: 23px;
    width: 72px;
}

/* Campos compactos: reduz somente a área visual, preservando as regras
   específicas de controles que já exigem altura própria. */
input,
select {
    min-height: 34px;
    padding: 6px 9px;
}

textarea {
    padding: 7px 9px;
}

label {
    gap: 5px;
}

/* Retorno coerente entre telas de visualização e edição. */
.app-return-button {
    align-items: center;
    border-color: #cfe1e5;
    box-shadow: 0 1px 2px rgba(18, 61, 104, .05);
    display: inline-flex;
    gap: 5px;
    justify-content: center;
    min-height: 32px;
    padding: 0 9px;
}

.app-return-button .mini-svg {
    height: 14px;
    stroke-width: 2.2;
    width: 14px;
}

.app-return-button:hover,
.app-return-button:focus-visible {
    border-color: #9ccfc8;
    box-shadow: 0 3px 9px rgba(17, 104, 104, .11);
}

/* Editor de Rotinas: linhas curtas, sem campos de mamada no registro de fralda. */
.routine-editor-fields {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.routine-editor-fields label {
    color: #344054;
    font-size: 12px;
    font-weight: 700;
    min-width: 0;
}

.routine-editor-fields input,
.routine-editor-fields select,
.routine-editor-fields textarea {
    font-weight: 500;
}

.routine-editor-type { grid-column: span 2; }
.routine-editor-date { grid-column: span 4; }
.routine-editor-feeding { grid-column: span 2; }
.routine-editor-diaper { grid-column: span 2; }
.routine-editor-notes { grid-column: 1 / -1; }
.routine-editor-notes textarea { min-height: 58px; resize: vertical; }
.routine-editor-help { margin: 9px 0 0; }

.routine-editor-actions {
    align-items: center;
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin: 10px 4px 0;
}

.routine-editor-delete-form {
    display: inline-flex;
    margin: 0;
}

.routine-editor-action {
    flex: 0 0 32px;
    height: 32px;
    min-height: 32px;
    min-width: 32px;
    padding: 0;
    width: 32px;
}

.routine-editor-action svg {
    height: 15px;
    stroke-width: 2.15;
    width: 15px;
}

.routine-editor-action.is-save {
    background: var(--primary, #0c9e91);
    border-color: var(--primary, #0c9e91);
    color: #fff;
}

.routine-editor-action.is-save:hover,
.routine-editor-action.is-save:focus-visible {
    background: var(--primary-dark, #087d73);
    border-color: var(--primary-dark, #087d73);
}

@media (max-width: 560px) {
    input,
    select {
        min-height: 32px;
        padding: 5px 8px;
    }

    textarea {
        padding: 6px 8px;
    }

    .app-return-button {
        min-height: 30px;
        padding: 0 8px;
    }

    .routine-editor-fields {
        gap: 8px;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .routine-editor-type { grid-column: 1 / span 4; }
    .routine-editor-date { grid-column: 5 / -1; }
    .routine-editor-feeding { grid-column: span 4; }
    .routine-editor-diaper { grid-column: 1 / span 4; }
    .routine-editor-notes { grid-column: 1 / -1; }
    .routine-editor-fields.is-diaper .routine-editor-notes { grid-column: 5 / -1; }
    .routine-editor-notes textarea { min-height: 48px; }
    .routine-editor-fields.is-diaper .routine-editor-notes textarea { min-height: 32px; }

    .routine-editor-actions {
        gap: 14px;
        margin-top: 9px;
    }

    .routine-editor-action {
        flex-basis: 30px;
        height: 30px;
        min-height: 30px;
        min-width: 30px;
        width: 30px;
    }
}

@media (max-width: 365px) {
    .routine-editor-fields.is-feeding .routine-editor-feeding {
        grid-column: span 6;
    }

    .routine-editor-fields.is-feeding .routine-editor-notes {
        grid-column: 1 / -1;
    }
}

/* Botões compactos fornecidos para ações de salvar, voltar e excluir. */
.standard-action-button.standard-action-button {
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: inline-flex;
    justify-content: center;
    margin: 0;
    min-height: 27px;
    min-width: 0;
    padding: 0;
}

.standard-action-image {
    display: block;
    height: 27px;
    max-width: 100%;
    width: auto;
}

.standard-action-button:hover .standard-action-image,
.standard-action-button:focus-visible .standard-action-image,
.app-return-button:hover::before,
.app-return-button:focus-visible::before {
    filter: brightness(.94) saturate(1.08);
}

.standard-action-button.standard-action-button:focus-visible,
.app-return-button:focus-visible {
    outline: 2px solid var(--primary, #0c9e91);
    outline-offset: 2px;
}

/* O voltar é o mesmo PNG em todas as telas de visualização e edição. */
.app-return-button {
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: 0;
    height: 27px;
    min-height: 27px;
    min-width: 100px;
    padding: 0;
    position: relative;
    width: 100px;
}

.app-return-button::before {
    background: center / 72px 23px no-repeat url('bt_voltar_72x23px.png?v=20260825c');
    content: '';
    height: 27px;
    inset: 0;
    position: absolute;
    width: 100%;
}

.app-return-button .mini-svg,
.app-return-button > span {
    display: none;
    font-size: 0;
    opacity: 0;
}

/* Editor de rotina: mesma ordem e proporção do modelo aprovado. */
.routine-editor-fields {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.routine-editor-date {
    grid-column: 1 / span 3;
    grid-row: 1;
}

.routine-editor-type {
    grid-column: 5 / -1;
    grid-row: 1;
}

.routine-editor-feeding {
    grid-column: span 2;
    grid-row: 2;
}

.routine-editor-diaper {
    grid-column: 1 / span 2;
    grid-row: 2;
}

.routine-editor-notes {
    grid-column: 1 / -1;
    grid-row: 3;
}

.routine-editor-fields.is-diaper .routine-editor-notes {
    grid-column: 3 / -1;
    grid-row: 2;
}

.routine-editor-notes textarea {
    min-height: 68px;
}

.routine-editor-actions {
    gap: 7px;
    margin: 8px 4px 0;
}

.routine-editor-action,
.routine-editor-action.is-save,
.routine-editor-action.is-delete {
    background: transparent;
    border: 0;
    flex: 0 0 auto;
    height: 27px;
    min-height: 27px;
    min-width: 0;
    padding: 0;
    width: auto;
}

@media (max-width: 560px) {
    .app-return-button {
        height: 27px;
        min-height: 27px;
        min-width: 100px;
        width: 100px;
    }

    .routine-editor-date {
        grid-column: 1 / span 6;
        grid-row: 1;
    }

    .routine-editor-type {
        grid-column: 8 / -1;
        grid-row: 1;
    }

    .routine-editor-feeding {
        grid-column: span 4;
        grid-row: 2;
    }

    .routine-editor-fields.is-feeding .routine-editor-feeding {
        grid-column: span 4;
    }

    .routine-editor-diaper {
        grid-column: 1 / span 4;
        grid-row: 2;
    }

    .routine-editor-notes,
    .routine-editor-fields.is-diaper .routine-editor-notes {
        grid-column: 5 / -1;
        grid-row: 2;
    }

    .routine-editor-fields.is-feeding .routine-editor-notes {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .routine-editor-notes textarea,
    .routine-editor-fields.is-diaper .routine-editor-notes textarea {
        min-height: 68px;
    }
}

@media (max-width: 365px) {
    .routine-editor-fields.is-feeding .routine-editor-feeding {
        grid-column: span 4;
    }
}

/* Diario Afetivo: refinamento mobile para recuperar leitura e manter acoes visiveis. */
@media (max-width: 900px) {
    body .shell {
        margin-left: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .diary-workspace,
    .diary-main-panel {
        max-width: none !important;
        width: 100%;
    }

    .diary-row-actions .icon-action::after {
        content: none !important;
    }

    .diary-row-actions .icon-action .mini-svg {
        display: block !important;
    }
}

@media (min-width: 561px) and (max-width: 900px) {
    .diary-entry-row {
        grid-template-columns: 54px minmax(0, 1fr) 58px 66px;
    }

    .diary-row-main strong {
        max-width: 100%;
    }
}

@media (max-width: 560px) {
    .diary-page-head {
        justify-content: flex-start;
        padding-left: 0;
    }

    .diary-main-panel {
        border-radius: 16px;
        padding: 10px;
    }

    .diary-entry-row {
        align-items: start;
        column-gap: 8px;
        grid-template-areas:
            "date main thumb"
            "date tags thumb"
            ". actions actions";
        grid-template-columns: 48px minmax(0, 1fr) 46px;
        min-height: 96px;
        padding: 11px 0;
        row-gap: 5px;
    }

    .diary-row-main {
        gap: 2px;
        min-width: 0;
    }

    .diary-row-main small {
        font-size: 10.5px;
        max-width: 100%;
    }

    .diary-row-main strong {
        font-size: 12.5px;
        max-width: 100%;
        white-space: normal;
    }

    .diary-row-tags {
        gap: 5px;
        max-width: 100%;
        overflow: hidden;
    }

    .diary-row-tags .category-chip {
        display: none !important;
    }

    .diary-row-tags .mood-chip {
        font-size: 9.5px;
        padding: 3px 7px;
    }

    .diary-row-thumb {
        border-radius: 12px;
        height: 44px;
        justify-self: end;
        width: 44px;
    }

    .diary-row-actions {
        display: flex !important;
        gap: 7px;
        grid-area: actions;
        justify-content: flex-end;
        margin-top: -2px !important;
    }

    .diary-row-actions form {
        display: inline-flex !important;
    }

    .diary-row-actions .icon-action {
        height: 25px;
        width: 25px;
    }

    .diary-row-actions .icon-action .mini-svg {
        height: 12.5px;
        width: 12.5px;
    }
}

/* Diario Afetivo: no mobile o menu recolhido nao pode deslocar o conteudo. */
@media (max-width: 900px) {
    body.sidebar-collapsed .shell,
    body .shell {
        box-sizing: border-box;
        margin-left: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden;
        width: 100% !important;
    }

    .diary-page-head,
    .diary-top-strip,
    .diary-workspace,
    .diary-main-panel,
    .diary-tabs-row,
    .diary-filter-inline,
    .diary-entry-row {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .diary-top-strip > *,
    .diary-quick-inline,
    .diary-filter-inline > *,
    .diary-row-main,
    .diary-row-tags {
        max-width: 100%;
        min-width: 0;
    }

    .diary-quick-inline-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .diary-quick-inline-head h2 {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 560px) {
    .shell {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .diary-page-head {
        justify-content: center;
        text-align: center;
    }

    .diary-top-strip {
        gap: 10px;
    }

    .diary-quick-inline {
        overflow: hidden;
    }

    .diary-quick-inline-head {
        align-items: center;
        gap: 8px;
    }

    .diary-quick-inline-head h2 {
        font-size: 13px;
    }

    .diary-quick-inline-head button {
        flex: 0 0 auto;
        min-width: 80px;
    }

    .diary-filter-inline {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .diary-filter-inline select,
    .diary-filter-inline input,
    .diary-filter-inline button {
        width: 100%;
    }
}

/* Diario Afetivo: mobile premium compacto, sem espacos quebrados. */
@media (max-width: 560px) {
    .diary-top-summary {
        border-radius: 16px;
        gap: 8px;
        padding: 8px;
    }

    .diary-mini-stat {
        min-height: 42px;
    }

    .diary-quick-inline {
        border-radius: 16px;
        gap: 9px;
        padding: 10px;
    }

    .diary-quick-inline-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .diary-quick-inline-head h2 {
        font-size: 13px;
        line-height: 1.15;
    }

    .diary-quick-inline-head button {
        border-radius: 12px;
        min-height: 34px;
        min-width: 78px;
        padding: 7px 11px;
    }

    .diary-quick-inline .quick-picks,
    .diary-filter-inline {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .diary-filter-inline input {
        grid-column: auto !important;
    }

    .diary-filter-inline button {
        grid-column: 1 / -1;
        min-height: 34px;
    }

    .diary-filter-inline select,
    .diary-filter-inline input,
    .diary-filter-inline button {
        font-size: 11px;
        min-height: 34px;
        padding: 7px 9px;
    }

    .diary-list-head {
        margin: 8px 0;
    }

    .diary-list-head h2 {
        font-size: 16px;
    }

    .diary-entry-row {
        align-items: center;
        grid-template-areas:
            "date main thumb"
            "date tags thumb";
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        min-height: 82px;
        padding: 10px 0;
        position: relative;
    }

    .diary-date-pill {
        border-radius: 12px;
        height: 44px;
        width: 44px;
    }

    .diary-date-pill strong {
        font-size: 18px;
    }

    .diary-date-pill span,
    .diary-date-pill small {
        font-size: 8.5px;
    }

    .diary-row-main small {
        font-size: 10px;
        line-height: 1.15;
    }

    .diary-row-main strong {
        display: -webkit-box;
        font-size: 12.5px;
        line-height: 1.18;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .diary-row-tags {
        align-self: start;
    }

    .diary-row-thumb {
        align-self: center;
        border-radius: 12px;
        grid-area: thumb;
        height: 44px;
        justify-self: end;
        width: 44px;
    }

    .diary-row-actions {
        align-self: end;
        display: flex !important;
        gap: 3px;
        grid-area: thumb;
        justify-self: end;
        margin: 0 !important;
        transform: translateY(18px);
        z-index: 2;
    }

    .diary-row-actions form {
        display: inline-flex !important;
    }

    .diary-row-actions .icon-action {
        background: rgba(255, 255, 255, .95);
        box-shadow: 0 4px 10px rgba(31, 48, 80, .08);
        height: 22px;
        width: 22px;
    }

    .diary-row-actions .icon-action .mini-svg {
        height: 11px;
        width: 11px;
    }
}

/* Diario Afetivo: mostrar o tipo de registro junto do humor no mobile. */
@media (max-width: 560px) {
    .diary-row-tags {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
    }

    .diary-row-tags .mood-chip {
        flex: 0 0 auto;
        order: 1;
    }

    .diary-row-tags .category-chip {
        display: inline-flex !important;
        flex: 0 1 auto;
        max-width: 86px;
        order: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Diario Afetivo: carrossel mobile para sentimentos e categorias sem ocupar duas linhas de cards. */
@media (max-width: 560px) {
    .diary-top-strip {
        display: grid;
        grid-template-areas:
            "summary"
            "insights"
            "quick";
        grid-template-columns: 1fr;
    }

    .diary-top-summary {
        grid-area: summary;
    }

    .diary-quick-inline {
        grid-area: quick;
    }

    .diary-top-cloud,
    .diary-top-categories {
        animation-duration: 16s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        display: grid !important;
        grid-area: insights;
        min-height: 82px;
        opacity: 0;
        overflow: hidden;
        padding: 10px 12px;
        pointer-events: none;
    }

    .diary-top-cloud {
        animation-name: diaryMobileCloud;
    }

    .diary-top-categories {
        animation-name: diaryMobileCategories;
    }

    .diary-top-cloud h2,
    .diary-top-categories h2 {
        font-size: 13px;
        line-height: 1.05;
    }

    .diary-top-cloud p {
        display: block;
        font-size: 10px;
        line-height: 1.05;
        margin: 1px 0 0;
    }

    .diary-top-cloud .mood-cloud {
        align-content: center;
        gap: 4px 8px;
        min-height: 38px;
        padding-top: 5px;
    }

    .diary-top-cloud .mood-cloud span {
        font-size: clamp(12px, var(--mood-size), 22px) !important;
        line-height: 1;
    }

    .diary-top-categories .category-meter {
        gap: 5px;
        grid-template-columns: 18px minmax(58px, .75fr) minmax(70px, 1fr) 14px;
        margin-top: 4px;
    }

    .diary-top-categories .category-meter-icon {
        height: 18px;
        width: 18px;
    }

    .diary-top-categories .category-meter-name {
        font-size: 10px;
    }
}

@keyframes diaryMobileCloud {
    0%, 44% {
        opacity: 1;
        transform: translateY(0);
    }
    49%, 94% {
        opacity: 0;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes diaryMobileCategories {
    0%, 44% {
        opacity: 0;
        transform: translateY(4px);
    }
    49%, 94% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(4px);
    }
}

/* Diario Afetivo: nuvem de sentimentos com composicao solta e controlada. */
.diary-top-cloud .mood-cloud {
    align-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 17px;
    justify-content: center;
    min-height: 58px;
    padding: 7px 12px 1px;
    text-align: center;
}

.diary-top-cloud .mood-cloud span {
    display: inline-flex;
    flex: 0 0 auto;
    font-size: clamp(13px, var(--mood-size), 26px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: .98;
    white-space: nowrap;
}

.diary-top-cloud .mood-cloud span:nth-child(1) { transform: translateY(-4px); }
.diary-top-cloud .mood-cloud span:nth-child(2) { transform: translateY(5px); }
.diary-top-cloud .mood-cloud span:nth-child(3) { transform: translateY(1px); }
.diary-top-cloud .mood-cloud span:nth-child(4) { transform: translateY(6px); }
.diary-top-cloud .mood-cloud span:nth-child(5) { transform: translateY(-2px); }
.diary-top-cloud .mood-cloud span:nth-child(6) { transform: translateY(-3px); }
.diary-top-cloud .mood-cloud span:nth-child(7) { transform: translateY(5px); }

@media (max-width: 560px) {
    .diary-top-cloud .mood-cloud {
        gap: 4px 12px;
        min-height: 46px;
        padding: 6px 4px 0;
    }

    .diary-top-cloud .mood-cloud span {
        font-size: clamp(12px, var(--mood-size), 21px) !important;
        line-height: .98;
    }

    .diary-top-cloud .mood-cloud span:nth-child(1) { transform: translateY(-2px); }
    .diary-top-cloud .mood-cloud span:nth-child(2) { transform: translateY(3px); }
    .diary-top-cloud .mood-cloud span:nth-child(3) { transform: translateY(0); }
    .diary-top-cloud .mood-cloud span:nth-child(4) { transform: translateY(3px); }
    .diary-top-cloud .mood-cloud span:nth-child(5) { transform: translateY(-1px); }
    .diary-top-cloud .mood-cloud span:nth-child(6) { transform: translateY(-2px); }
    .diary-top-cloud .mood-cloud span:nth-child(7) { transform: translateY(2px); }
}

/* Diario Afetivo: mais respiro para a nuvem alinhar com o card de categorias. */
.diary-top-cloud {
    min-height: 112px;
}

.diary-top-cloud .mood-cloud {
    gap: 8px 18px;
    min-height: 68px;
    padding-top: 10px;
}

@media (max-width: 560px) {
    .diary-top-cloud,
    .diary-top-categories,
    .diary-mobile-insight-hit {
        min-height: 96px;
    }

    .diary-top-cloud .mood-cloud {
        gap: 6px 13px;
        min-height: 56px;
        padding-top: 8px;
    }
}

/* Diario Afetivo: aba de indicadores por periodo. */
.diary-insight-card {
    cursor: pointer;
    position: relative;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.diary-insight-card:hover {
    border-color: rgba(20, 160, 150, .35);
    box-shadow: 0 16px 36px rgba(32, 63, 95, .09);
    transform: translateY(-1px);
}

.diary-card-cover {
    border-radius: inherit;
    inset: 0;
    position: absolute;
    z-index: 4;
}

.diary-insight-card > :not(.diary-card-cover) {
    position: relative;
    z-index: 1;
}

.diary-mobile-insight-hit {
    display: none;
}

.diary-insights-view {
    display: grid;
    gap: 14px;
}

.diary-insights-head {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 4px;
    padding-bottom: 12px;
}

.diary-insights-head h2 {
    font-size: 20px;
    line-height: 1.1;
    margin: 0;
}

.diary-insights-head p {
    color: #5c6b87;
    font-size: 13px;
    margin: 0;
}

.diary-insight-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.diary-period-card {
    background: linear-gradient(180deg, #fff, #fbfdff);
    border: 1px solid var(--line);
    border-radius: 18px;
    display: grid;
    gap: 13px;
    padding: 14px;
}

.diary-period-card header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.diary-period-card header div {
    display: grid;
    gap: 1px;
}

.diary-period-card header strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1;
}

.diary-period-card header span {
    color: #6a7892;
    font-size: 11px;
    font-weight: 750;
}

.diary-period-card header b {
    align-items: center;
    background: #e5faf5;
    border-radius: 999px;
    color: var(--primary-dark);
    display: inline-flex;
    font-size: 20px;
    justify-content: center;
    min-width: 42px;
    padding: 8px 10px;
}

.diary-period-section {
    display: grid;
    gap: 7px;
}

.diary-period-section h3 {
    color: #22304d;
    font-size: 13px;
    line-height: 1;
    margin: 0;
}

.diary-insight-meter {
    align-items: center;
    color: inherit;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(84px, .9fr) minmax(66px, 1fr) 22px;
    min-height: 26px;
    text-decoration: none;
}

.diary-insight-meter span {
    color: #44536f;
    font-size: 12px;
    font-weight: 850;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diary-insight-meter i {
    background: #eef3f7;
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
}

.diary-insight-meter i b {
    background: var(--primary);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.diary-insight-meter strong {
    color: var(--primary-dark);
    font-size: 12px;
    text-align: right;
}

.diary-insight-meter:hover span {
    color: var(--primary-dark);
}

.diary-insight-meter.green i b,
.diary-insight-meter.mint i b,
.diary-insight-meter.teal i b { background: #65d1bf; }
.diary-insight-meter.blue i b,
.diary-insight-meter.sky i b { background: #6bb8ee; }
.diary-insight-meter.orange i b,
.diary-insight-meter.gold i b { background: #f3b556; }
.diary-insight-meter.rose i b { background: #f49aae; }
.diary-insight-meter.purple i b,
.diary-insight-meter.lilac i b { background: #9b7cf0; }
.diary-insight-meter.muted i b { background: #a9b5c7; }

.diary-insight-empty {
    color: #72809a;
    font-size: 12px;
    margin: 0;
}

@media (max-width: 980px) {
    .diary-insight-grid {
        grid-template-columns: 1fr;
    }

    .diary-period-card {
        gap: 11px;
    }
}

@media (max-width: 560px) {
    .diary-mobile-insight-hit {
        border-radius: 15px;
        display: block;
        grid-area: insights;
        min-height: 82px;
        position: relative;
        z-index: 5;
    }

    .diary-tabs {
        gap: 13px;
    }

    .diary-tabs a {
        font-size: 11px;
    }

    .diary-insights-head {
        padding-bottom: 10px;
    }

    .diary-insights-head h2 {
        font-size: 17px;
    }

    .diary-insights-head p {
        font-size: 11px;
        line-height: 1.35;
    }

    .diary-period-card {
        border-radius: 16px;
        gap: 10px;
        padding: 12px;
    }

    .diary-period-card header strong {
        font-size: 15px;
    }

    .diary-period-card header b {
        font-size: 17px;
        min-width: 36px;
        padding: 7px 9px;
    }

    .diary-insight-meter {
        grid-template-columns: minmax(82px, 1fr) minmax(76px, 1fr) 18px;
    }

    .diary-insight-meter span,
    .diary-insight-meter strong {
        font-size: 11px;
    }
}

/* Diario Afetivo: indicadores em formato de painel, nao relatorio aberto. */
.diary-insights-view {
    gap: 16px;
}

.diary-insights-head {
    align-items: end;
    border-bottom: 0;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) minmax(330px, .95fr);
    padding-bottom: 0;
}

.diary-insights-head h2 {
    font-size: 22px;
}

.diary-insight-period-switch {
    background: #f3f8fa;
    border: 1px solid #dce8ef;
    border-radius: 18px;
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 5px;
}

.diary-insight-period-switch a {
    align-items: center;
    border-radius: 14px;
    color: #52607a;
    display: grid;
    gap: 1px;
    grid-template-columns: 1fr auto;
    min-height: 58px;
    padding: 9px 10px;
    text-decoration: none;
}

.diary-insight-period-switch a span {
    color: #263550;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.diary-insight-period-switch a strong {
    color: var(--primary-dark);
    font-size: 22px;
    grid-row: span 2;
    line-height: 1;
}

.diary-insight-period-switch a small {
    color: #697891;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.1;
}

.diary-insight-period-switch a.is-active {
    background: #fff;
    box-shadow: 0 8px 22px rgba(30, 61, 90, .08);
}

.diary-insight-period-switch a.is-active span {
    color: var(--primary-dark);
}

.diary-insight-focus {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(170px, .52fr) minmax(0, 1fr) minmax(0, 1fr);
}

.diary-insight-overview,
.diary-insight-panel {
    background: #fff;
    border: 1px solid #dce7ef;
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(31, 55, 86, .06);
}

.diary-insight-overview {
    align-content: start;
    background: linear-gradient(160deg, #f1fbf8, #fff);
    display: grid;
    gap: 12px;
    padding: 18px;
}

.diary-insight-overview div {
    display: grid;
    gap: 3px;
}

.diary-insight-overview span {
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.diary-insight-overview strong {
    color: var(--ink);
    font-size: 40px;
    line-height: .95;
}

.diary-insight-overview small {
    color: #566580;
    font-size: 12px;
    font-weight: 800;
}

.diary-insight-overview p {
    color: #5c6b87;
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}

.diary-insight-panel {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.diary-insight-panel header {
    align-items: start;
    display: flex;
    justify-content: space-between;
}

.diary-insight-panel h3 {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.1;
    margin: 0;
}

.diary-insight-panel p {
    color: #73819a;
    font-size: 11px;
    font-weight: 750;
    margin: 2px 0 0;
}

.diary-insight-list {
    display: grid;
    gap: 8px;
}

.diary-insight-row {
    align-items: center;
    background: #f8fbfd;
    border: 1px solid transparent;
    border-radius: 14px;
    color: inherit;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(96px, .85fr) minmax(90px, 1fr) 24px;
    min-height: 36px;
    padding: 8px 10px;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.diary-insight-row:hover {
    background: #fff;
    border-color: rgba(20, 160, 150, .25);
    transform: translateX(2px);
}

.diary-insight-name {
    align-items: center;
    color: #2e3d59;
    display: flex;
    font-size: 12px;
    font-weight: 900;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diary-insight-name i {
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 9px;
    height: 9px;
    width: 9px;
}

.diary-insight-bar {
    background: #e9f0f5;
    border-radius: 999px;
    display: block;
    height: 8px;
    overflow: hidden;
}

.diary-insight-bar b {
    background: var(--primary);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.diary-insight-row strong {
    color: var(--primary-dark);
    font-size: 12px;
    text-align: right;
}

.diary-insight-row.green .diary-insight-name i,
.diary-insight-row.green .diary-insight-bar b,
.diary-insight-row.mint .diary-insight-name i,
.diary-insight-row.mint .diary-insight-bar b,
.diary-insight-row.teal .diary-insight-name i,
.diary-insight-row.teal .diary-insight-bar b { background: #65d1bf; }
.diary-insight-row.blue .diary-insight-name i,
.diary-insight-row.blue .diary-insight-bar b,
.diary-insight-row.sky .diary-insight-name i,
.diary-insight-row.sky .diary-insight-bar b { background: #6bb8ee; }
.diary-insight-row.orange .diary-insight-name i,
.diary-insight-row.orange .diary-insight-bar b,
.diary-insight-row.gold .diary-insight-name i,
.diary-insight-row.gold .diary-insight-bar b { background: #f3b556; }
.diary-insight-row.rose .diary-insight-name i,
.diary-insight-row.rose .diary-insight-bar b { background: #f49aae; }
.diary-insight-row.purple .diary-insight-name i,
.diary-insight-row.purple .diary-insight-bar b,
.diary-insight-row.lilac .diary-insight-name i,
.diary-insight-row.lilac .diary-insight-bar b { background: #9b7cf0; }
.diary-insight-row.muted .diary-insight-name i,
.diary-insight-row.muted .diary-insight-bar b { background: #a9b5c7; }

@media (max-width: 1100px) {
    .diary-insights-head {
        grid-template-columns: 1fr;
    }

    .diary-insight-focus {
        grid-template-columns: 1fr 1fr;
    }

    .diary-insight-overview {
        align-items: center;
        grid-column: 1 / -1;
        grid-template-columns: auto minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .diary-insight-period-switch {
        border-radius: 16px;
        gap: 4px;
        padding: 4px;
    }

    .diary-insight-period-switch a {
        min-height: 50px;
        padding: 8px;
    }

    .diary-insight-period-switch a span {
        font-size: 11px;
    }

    .diary-insight-period-switch a strong {
        font-size: 18px;
    }

    .diary-insight-period-switch a small {
        display: none;
    }

    .diary-insight-focus {
        grid-template-columns: 1fr;
    }

    .diary-insight-overview {
        border-radius: 17px;
        gap: 8px;
        grid-template-columns: auto 1fr;
        padding: 12px;
    }

    .diary-insight-overview strong {
        font-size: 30px;
    }

    .diary-insight-overview p {
        font-size: 11px;
    }

    .diary-insight-panel {
        border-radius: 17px;
        gap: 10px;
        padding: 12px;
    }

    .diary-insight-panel h3 {
        font-size: 15px;
    }

    .diary-insight-row {
        border-radius: 12px;
        grid-template-columns: minmax(92px, 1fr) minmax(72px, .7fr) 20px;
        min-height: 34px;
        padding: 7px 9px;
    }
}

/* Marcos e Aprendizados: estabilizacao premium depois dos overrides globais. */
.milestone-mobile-meta {
    display: none;
}

.milestones-page-head {
    margin-bottom: 10px;
}

.milestones-page-head h1 {
    line-height: 1.05;
}

.milestones-page-head p {
    margin-top: 5px;
}

.milestone-summary-grid {
    margin-bottom: 12px;
}

@media (min-width: 1181px) {
    .milestone-workspace {
        align-items: start;
        display: grid;
        gap: 18px;
        grid-template-columns: minmax(640px, 1fr) minmax(280px, 330px) !important;
    }

    .milestone-side {
        display: grid;
        gap: 14px;
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 901px) {
    .milestone-main-panel {
        min-width: 0;
    }

    .milestone-record-table table {
        table-layout: fixed !important;
    }

    .milestone-record-table th:nth-child(1),
    .milestone-record-table td:nth-child(1) {
        width: 48%;
    }

    .milestone-record-table th:nth-child(2),
    .milestone-record-table td:nth-child(2) {
        width: 18%;
    }

    .milestone-record-table th:nth-child(3),
    .milestone-record-table td:nth-child(3) {
        width: 15%;
    }

    .milestone-record-table th:nth-child(4),
    .milestone-record-table td:nth-child(4) {
        width: 9%;
    }

    .milestone-record-table th:nth-child(5),
    .milestone-record-table td:nth-child(5) {
        width: 10%;
    }

    .record-title-wrap strong {
        font-size: 14px;
        line-height: 1.2;
    }

    .record-title-wrap small {
        line-height: 1.3;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    .milestone-workspace {
        display: grid;
        gap: 14px;
        grid-template-columns: 1fr !important;
    }

    .milestone-side {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
    }

    .milestone-side-card {
        min-width: 0;
    }
}

@media (min-width: 1050px) and (max-width: 1180px) {
    body.sidebar-collapsed .milestone-workspace {
        align-items: start;
        gap: 16px;
        grid-template-columns: minmax(610px, 1fr) minmax(270px, 310px) !important;
    }

    body.sidebar-collapsed .milestone-side {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 900px) {
    .milestones-page-head {
        margin-bottom: 9px;
    }

    .milestone-workspace {
        display: grid;
        gap: 12px;
        grid-template-columns: 1fr !important;
    }

    .milestone-main-panel {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: 0 14px 34px rgba(31, 55, 86, .06);
        overflow: hidden;
        padding: 0 12px 12px;
    }

    .milestone-tabs {
        gap: 18px;
        margin: 0 -12px;
        padding: 0 12px;
    }

    .milestone-list-head {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 10px 0;
    }

    .milestone-inline-filter select {
        border-radius: 13px;
    }

    .milestone-record-table table,
    .milestone-record-table tbody {
        display: block;
        width: 100%;
    }

    .milestone-record-table tr {
        background: #fff;
        border: 1px solid #dde8ef;
        border-radius: 16px;
        display: grid;
        gap: 7px 10px;
        grid-template-areas:
            "icon main actions"
            ". meta actions";
        grid-template-columns: 32px minmax(0, 1fr) auto;
        margin: 0 0 9px;
        min-height: 0;
        padding: 11px;
    }

    .milestone-record-table td,
    .milestone-record-table td:first-child {
        border: 0;
        padding: 0;
    }

    .milestone-record-table td::before {
        display: none !important;
    }

    .milestone-record-table td:first-child {
        display: contents;
    }

    .record-check {
        align-self: start;
        grid-area: icon;
        height: 30px;
        width: 30px;
    }

    .record-title-wrap {
        grid-area: main;
        min-width: 0;
    }

    .record-title-wrap strong {
        display: -webkit-box;
        font-size: 13px;
        line-height: 1.15;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .record-title-wrap small {
        display: -webkit-box;
        font-size: 11px;
        line-height: 1.25;
        margin-top: 2px;
        max-width: 100%;
        overflow: hidden;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .record-title-wrap em {
        display: none;
    }

    .milestone-record-table .record-title-wrap .record-timing {
        display: block;
        font-size: 10px;
        font-weight: 850;
        line-height: 1.22;
        margin-top: 4px;
        max-width: 100%;
        overflow: visible;
        white-space: normal;
    }

    .milestone-record-table .record-title-wrap .record-timing.after {
        color: #966600;
    }

    .milestone-record-table .record-title-wrap .record-timing.early {
        color: #087a57;
    }

    .milestone-mobile-meta {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 6px;
    }

    .milestone-mobile-meta .category-pill,
    .milestone-mobile-meta .status-pill,
    .mobile-age-pill {
        border-radius: 999px;
        font-size: 10px;
        font-weight: 850;
        line-height: 1;
        padding: 5px 8px;
    }

    .mobile-age-pill {
        background: #eef5f8;
        color: #52627b;
    }

    .milestone-record-table td[data-label="Categoria"],
    .milestone-record-table td[data-label="Status"],
    .milestone-record-table td[data-label="Idade"] {
        display: none !important;
    }

    .milestone-actions-cell {
        align-self: center;
        display: flex !important;
        gap: 5px;
        grid-area: actions;
        grid-column: auto;
        grid-row: auto;
    }

    .milestone-actions-cell form {
        display: inline-flex !important;
    }

    .milestone-actions-cell .icon-action {
        background: #f5fbfa;
        border: 1px solid #dcefeb;
        box-shadow: none;
        height: 26px;
        width: 26px;
    }

    .milestone-actions-cell .icon-action.danger {
        background: #fff5f5;
        border-color: #ffd7d7;
    }

    .milestone-actions-cell .icon-action::after {
        content: none !important;
    }

    .milestone-actions-cell .icon-action .mini-svg {
        display: block;
        height: 13px;
        width: 13px;
    }

    .milestone-record-table td[data-label="Acao"]:not(.milestone-actions-cell) {
        align-self: center;
        grid-area: actions;
    }

    .milestone-record-table td[data-label="Acao"] .suggestion-register-button {
        border-radius: 999px;
        font-size: 11px;
        min-height: 28px;
        padding: 0 10px;
        white-space: nowrap;
    }

    .milestone-side {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr !important;
    }

    .milestone-side-card {
        border-radius: 18px;
        padding: 13px;
    }
}

@media (max-width: 560px) {
    .milestones-page-head h1 {
        font-size: 20px;
        line-height: 1.1;
    }

    .milestone-summary-grid {
        display: grid !important;
        gap: 8px;
        grid-template-columns: 1fr 1fr !important;
        margin-bottom: 12px;
        overflow: visible;
    }

    .milestone-summary-grid article {
        background: #fff;
        border: 1px solid #eadfcd;
        border-radius: 15px;
        display: grid;
        gap: 3px 8px;
        grid-template-columns: 22px minmax(0, 1fr);
        min-height: 58px;
        padding: 9px;
        white-space: normal;
    }

    .milestone-summary-grid small {
        font-size: 10px;
        line-height: 1.05;
    }

    .milestone-summary-grid strong {
        font-size: 18px;
    }

    .milestone-tabs a {
        font-size: 11px;
    }

    .milestone-list-head {
        gap: 7px;
    }

    .compact-button {
        font-size: 12px;
        min-height: 36px;
        padding: 0 11px;
    }
}

/* Marcos e Aprendizados: listagem desktop em linhas premium, sem colunas esmagadas. */
@media (min-width: 901px) {
    .milestone-record-table.milestone-registered-table {
        padding: 0 18px 16px;
    }

    .milestone-registered-table table,
    .milestone-registered-table tbody {
        display: block;
        width: 100%;
    }

    .milestone-registered-table thead {
        display: none;
    }

    .milestone-registered-table tr {
        align-items: center;
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(240px, 1fr) 108px 106px 58px 70px;
        min-height: 92px;
        padding: 12px 0;
    }

    .milestone-registered-table td,
    .milestone-registered-table td:first-child {
        border: 0 !important;
        min-width: 0;
        padding: 0 !important;
        width: auto !important;
    }

    .milestone-registered-table td:first-child {
        align-items: center;
        display: flex;
        gap: 12px;
    }

    .milestone-registered-table .record-check {
        flex: 0 0 30px;
        height: 30px;
        width: 30px;
    }

    .milestone-registered-table .record-title-wrap {
        max-width: none;
        min-width: 0;
    }

    .milestone-registered-table .record-title-wrap strong {
        display: block;
        font-size: 14px;
        line-height: 1.16;
        margin-bottom: 3px;
        max-width: 100%;
        overflow-wrap: normal;
    }

    .milestone-registered-table .record-title-wrap small {
        color: #52627b;
        display: block;
        font-size: 12px;
        line-height: 1.28;
        max-width: min(520px, 100%);
        white-space: normal;
    }

    .milestone-registered-table .record-title-wrap em {
        display: block;
        font-size: 11px;
        line-height: 1.25;
        margin-top: 4px;
    }

    .milestone-registered-table .record-title-wrap em:not(.record-timing) {
        color: #52627b;
        font-style: normal;
        font-weight: 650;
    }

    .milestone-registered-table .category-pill,
    .milestone-registered-table .status-pill {
        justify-content: center;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .milestone-registered-table td[data-label="Idade"] {
        color: #17233d;
        font-size: 13px;
        font-weight: 850;
        line-height: 1.1;
        white-space: nowrap;
    }

    .milestone-registered-table .milestone-actions-cell {
        display: flex !important;
        gap: 6px;
        justify-content: flex-end;
    }

    .milestone-registered-table .milestone-actions-cell form {
        display: inline-flex !important;
    }

    .milestone-registered-table .icon-action {
        height: 30px;
        width: 30px;
    }

    .milestone-registered-table tr:hover {
        background: linear-gradient(90deg, rgba(222, 248, 241, .35), rgba(255, 255, 255, 0));
    }

    .milestone-side-card {
        padding: 15px;
    }

    .suggested-mini-card {
        gap: 10px;
        padding: 10px;
    }

    .suggested-mini-card span {
        height: 30px;
        width: 30px;
    }
}

@media (min-width: 1181px) {
    .milestone-registered-table tr {
        gap: 12px;
        grid-template-columns: minmax(280px, 1fr) 112px 112px 62px 74px;
    }
}

@media (min-width: 901px) and (max-width: 1320px) {
    body:not(.sidebar-collapsed) .milestone-workspace {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:not(.sidebar-collapsed) .milestone-side {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    }

    body:not(.sidebar-collapsed) .milestone-main-panel {
        overflow: hidden;
    }
}

@media (min-width: 901px) and (max-width: 1320px) {
    body:not(.sidebar-collapsed) .milestone-registered-table tr {
        grid-template-columns: minmax(260px, 1fr) 108px 108px 58px 72px;
    }
}

@media (min-width: 901px) and (max-width: 1080px) {
    .milestone-registered-table tr {
        gap: 9px;
        grid-template-columns: minmax(220px, 1fr) 96px 96px 54px 64px;
        min-height: 86px;
    }

    .milestone-registered-table .record-title-wrap small {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .milestone-registered-table .record-title-wrap em:not(.record-timing) {
        display: none;
    }

    .milestone-registered-table .category-pill,
    .milestone-registered-table .status-pill {
        font-size: 10px;
        padding: 6px 8px;
    }

    .milestone-registered-table td[data-label="Idade"] {
        font-size: 12px;
    }
}

/* Marcos e Aprendizados: faixa superior de insights e lista principal ampla. */
.milestone-workspace.milestone-workspace-single {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
}

.milestone-workspace-single .milestone-side {
    display: none !important;
}

.milestone-insights-grid {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(190px, .58fr) minmax(300px, .96fr) minmax(300px, .92fr);
    margin-bottom: 18px;
}

.milestone-overview-card,
.milestone-top-suggestions,
.milestone-top-profile {
    border-color: #eadfcd;
    box-shadow: 0 16px 34px rgba(31, 55, 86, .05);
    box-sizing: border-box;
    height: 154px;
    min-width: 0;
    overflow: hidden;
    padding: 13px 16px;
}

.milestone-overview-card {
    align-content: center;
    display: grid;
    gap: 9px;
}

.milestone-overview-item {
    align-items: center;
    display: grid;
    gap: 3px 10px;
    grid-template-columns: 28px 42px minmax(0, 1fr);
    min-width: 0;
}

.milestone-overview-item .milestone-badge {
    height: 28px;
    width: 28px;
}

.milestone-overview-item .milestone-badge .card-svg {
    height: 15px;
    width: 15px;
}

.milestone-overview-item strong {
    color: #071a3d;
    font-size: 24px;
    line-height: 1;
}

.milestone-overview-item small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.1;
}

.milestone-top-suggestions .side-title,
.milestone-top-profile .side-title {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 7px;
}

.milestone-top-suggestions .side-title h3,
.milestone-top-profile .side-title h3 {
    font-size: 15px;
    line-height: 1.1;
    margin: 0;
}

.milestone-top-suggestions .side-title a,
.milestone-top-profile .side-title a {
    color: var(--primary);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.milestone-top-suggestions > summary.side-title {
    cursor: pointer;
    list-style: none;
}

.milestone-top-suggestions > summary.side-title::-webkit-details-marker {
    display: none;
}

.milestone-top-list {
    display: grid;
    gap: 4px;
}

.milestone-top-suggestion {
    align-items: center;
    border-radius: 13px;
    color: inherit;
    display: grid;
    gap: 0 10px;
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 34px;
    padding: 3px 6px;
    text-decoration: none;
}

.milestone-top-suggestion:hover {
    background: #f8fbfd;
}

.milestone-top-suggestion span {
    align-items: center;
    background: #fff4cf;
    border-radius: 50%;
    color: #eca512;
    display: inline-flex;
    grid-row: 1 / span 2;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.milestone-top-suggestion strong {
    display: block;
    font-size: 13px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.milestone-top-suggestion small {
    color: var(--muted);
    display: block;
    font-size: 10px;
    font-weight: 850;
    grid-column: 2;
    line-height: 1.05;
}

.compact-empty {
    margin: 8px 0 0;
}

.compact-profile-chart {
    height: 116px;
    min-height: 116px;
}

.compact-profile-chart .profile-radar {
    height: 116px;
}

.compact-profile-chart .profile-radar canvas {
    height: 116px !important;
    max-height: 116px;
    width: 100% !important;
}

.milestone-workspace-single .milestone-main-panel {
    width: 100%;
}

@media (min-width: 901px) {
    .milestone-workspace-single .milestone-registered-table tr {
        grid-template-columns: minmax(300px, 1fr) 126px 122px 68px 74px;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    .milestone-insights-grid {
        align-items: stretch;
        grid-template-areas:
            "overview profile"
            "suggestions profile";
        grid-template-columns: minmax(310px, .95fr) minmax(280px, .8fr);
        grid-template-rows: 148px 148px;
    }

    .milestone-overview-card {
        grid-area: overview;
        height: auto;
    }

    .milestone-top-suggestions {
        grid-area: suggestions;
        height: auto;
    }

    .milestone-top-profile {
        grid-area: profile;
        grid-column: auto;
        height: auto;
        min-height: 0;
    }

    .milestone-top-profile .compact-profile-chart,
    .milestone-top-profile .compact-profile-chart .profile-radar {
        height: 260px;
        min-height: 260px;
    }

    .milestone-top-profile .compact-profile-chart .profile-radar canvas {
        height: 260px !important;
        max-height: 260px;
    }
}

@media (min-width: 901px) {
    body.sidebar-collapsed .milestone-workspace.milestone-workspace-single {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: none !important;
        width: 100% !important;
    }

    body.sidebar-collapsed .milestone-workspace-single .milestone-main-panel {
        grid-column: 1 / -1;
        max-width: none !important;
        width: 100% !important;
    }

    body.sidebar-collapsed .milestone-workspace-single .milestone-record-table,
    body.sidebar-collapsed .milestone-workspace-single .milestone-record-table table {
        max-width: none !important;
        width: 100% !important;
    }
}

@media (max-width: 900px) {
    .milestone-insights-grid {
        gap: 10px;
        grid-template-columns: 1fr;
        margin-bottom: 12px;
    }

    .milestone-overview-card {
        gap: 8px;
        height: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 10px;
    }

    .milestone-overview-item {
        background: #fff;
        border: 1px solid #edf3f6;
        border-radius: 14px;
        gap: 4px 7px;
        grid-template-columns: 24px minmax(0, 1fr);
        padding: 8px;
    }

    .milestone-overview-item .milestone-badge {
        height: 24px;
        width: 24px;
    }

    .milestone-overview-item strong {
        font-size: 18px;
    }

    .milestone-overview-item small {
        grid-column: 1 / -1;
        font-size: 10px;
    }

    .milestone-top-suggestions,
    .milestone-top-profile {
        height: auto;
        min-height: 0;
        padding: 12px;
    }

    .milestone-top-suggestion {
        padding: 5px 6px;
    }

    .compact-profile-chart,
    .compact-profile-chart .profile-radar {
        height: 110px;
        min-height: 110px;
    }

    .compact-profile-chart .profile-radar canvas {
        height: 110px !important;
        max-height: 110px;
    }
}

@media (max-width: 560px) {
    .milestone-overview-card {
        grid-template-columns: 1fr 1fr;
    }

    .milestone-overview-item:last-child {
        grid-column: 1 / -1;
    }
}

/* Marcos e Aprendizados: mobile compacto no padrao dos cards superiores. */
@media (max-width: 560px) {
    body.milestone-mobile-scroll-ui {
        --milestone-mobile-topbar-height: 66px;
        --milestone-mobile-head-height: 54px;
        --milestone-mobile-frozen-offset: calc(var(--milestone-mobile-topbar-height) + var(--milestone-mobile-head-height));
    }

    body.milestone-mobile-scroll-ui .mobile-topbar,
    body.milestone-mobile-scroll-ui .milestones-page-head {
        transition: transform .24s ease, opacity .18s ease, box-shadow .2s ease;
        will-change: transform, opacity;
    }

    body.milestone-mobile-scroll-ui .mobile-topbar {
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(221, 232, 239, .9);
        box-shadow: 0 10px 24px rgba(31, 48, 80, .08);
        left: 0;
        min-height: var(--milestone-mobile-topbar-height);
        position: fixed !important;
        right: 0;
        top: 0;
        z-index: 70;
    }

    body.milestone-mobile-scroll-ui .shell {
        padding-top: calc(var(--milestone-mobile-frozen-offset) + 12px) !important;
    }

    body.milestone-mobile-scroll-ui .milestones-page-head {
        backdrop-filter: blur(14px);
        background: linear-gradient(180deg, rgba(248, 251, 255, .98), rgba(242, 247, 251, .96));
        border-bottom: 1px solid rgba(221, 232, 239, .9);
        box-shadow: 0 12px 24px rgba(31, 48, 80, .06);
        left: 0;
        margin: 0;
        min-height: var(--milestone-mobile-head-height);
        padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
        position: fixed;
        right: 0;
        top: var(--milestone-mobile-topbar-height);
        z-index: 69;
    }

    body.milestone-mobile-chrome-hidden .mobile-topbar,
    body.milestone-mobile-chrome-hidden .milestones-page-head {
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(-1 * var(--milestone-mobile-frozen-offset) - 16px));
    }

    body.menu-open.milestone-mobile-scroll-ui .mobile-topbar,
    body.menu-open.milestone-mobile-scroll-ui .milestones-page-head {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .milestones-page-head {
        align-items: center;
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .milestones-page-head > div:first-child {
        min-width: 0;
    }

    .milestones-page-head h1 {
        align-items: center;
        display: flex;
        font-size: 19px;
        gap: 6px;
        line-height: 1.08;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .milestones-page-head p {
        display: none;
    }

    .milestones-page-head h1 .title-svg {
        flex: 0 0 15px;
        height: 15px;
        width: 15px;
    }

    .milestones-page-head .inline-actions {
        justify-content: flex-end;
        margin-left: 0;
    }

    .milestones-page-head .inline-actions .button {
        border-radius: 13px;
        font-size: 12px;
        min-height: 34px;
        padding: 0 12px;
    }

    .milestones-page-head .inline-actions .button.ghost {
        display: none;
    }

    .milestone-insights-grid {
        gap: 8px;
        margin-bottom: 10px;
    }

    .milestone-overview-card {
        border-radius: 17px;
        display: grid !important;
        gap: 7px;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        padding: 8px;
    }

    .milestone-overview-item,
    .milestone-overview-item:last-child {
        align-content: start;
        background: #fff;
        border: 1px solid #edf3f6;
        border-radius: 13px;
        display: grid;
        gap: 4px 6px;
        grid-column: auto !important;
        grid-template-columns: 22px minmax(0, 1fr);
        min-height: 60px;
        padding: 8px 7px;
    }

    .milestone-overview-item .milestone-badge {
        height: 22px;
        width: 22px;
    }

    .milestone-overview-item .milestone-badge .card-svg {
        height: 13px;
        width: 13px;
    }

    .milestone-overview-item strong {
        align-self: center;
        font-size: 17px;
        line-height: 1;
    }

    .milestone-overview-item small {
        color: #52627b;
        font-size: 9px;
        font-weight: 900;
        grid-column: 1 / -1;
        line-height: 1.05;
    }

    .milestone-top-suggestions,
    .milestone-top-profile {
        border-radius: 17px;
        padding: 11px;
    }

    .milestone-top-suggestions .side-title,
    .milestone-top-profile .side-title {
        margin-bottom: 8px;
    }

    .milestone-top-suggestions .side-title h3,
    .milestone-top-profile .side-title h3 {
        font-size: 13.5px;
        line-height: 1.1;
    }

    .milestone-top-suggestions .side-title a,
    .milestone-top-profile .side-title a {
        font-size: 10.5px;
    }

    .milestone-top-suggestions > summary.side-title {
        padding-right: 26px;
        position: relative;
    }

    .milestone-top-suggestions > summary.side-title::after {
        align-items: center;
        background: #eef8f7;
        border-radius: 999px;
        color: var(--primary-dark);
        content: "+";
        display: inline-flex;
        font-size: 16px;
        font-weight: 950;
        height: 22px;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
    }

    .milestone-top-suggestions[open] > summary.side-title {
        margin-bottom: 8px;
    }

    .milestone-top-suggestions[open] > summary.side-title::after {
        content: "-";
    }

    .milestone-top-suggestion {
        gap: 0 8px;
        grid-template-columns: 26px minmax(0, 1fr);
        min-height: 34px;
        padding: 3px 5px;
    }

    .milestone-top-suggestion span {
        height: 26px;
        width: 26px;
    }

    .milestone-top-suggestion strong {
        font-size: 12px;
    }

    .milestone-top-suggestion small {
        font-size: 9.5px;
    }

    .compact-profile-chart,
    .compact-profile-chart .profile-radar {
        height: 118px;
        min-height: 118px;
    }

    .compact-profile-chart .profile-radar canvas {
        height: 118px !important;
        max-height: 118px;
    }

    .milestone-main-panel {
        border-radius: 17px;
        padding: 0 10px 10px;
    }

    .milestone-tabs {
        gap: 16px;
        margin: 0 -10px;
        padding: 0 10px;
    }

    .milestone-tabs a {
        font-size: 10.5px;
        padding: 12px 0 9px;
    }

    .milestone-list-head {
        padding: 8px 0 7px;
    }

    .milestone-record-filters {
        gap: 7px;
    }

    .milestone-record-filters select,
    .milestone-record-filters input,
    .milestone-record-filters .filter-soft-button {
        border-radius: 13px;
        min-height: 33px;
    }
}

@media (max-width: 430px) {
    body.milestone-mobile-scroll-ui {
        --milestone-mobile-topbar-height: 56px;
        --milestone-mobile-head-height: 48px;
    }
}

.form-competency-summary {
    background: linear-gradient(135deg, #f8fbfd, #f3faf8);
    border: 1px solid #dce9ef;
    border-radius: 16px;
    display: grid;
    gap: 10px;
    padding: 12px;
}

.form-competency-summary div {
    display: grid;
    gap: 2px;
}

.form-competency-summary strong {
    color: #071a3d;
    font-size: 14px;
}

.form-competency-summary small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.form-competency-summary span {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.form-competency-summary em {
    background: #fff;
    border: 1px solid #d9f1eb;
    border-radius: 999px;
    color: #0f766e;
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
    padding: 6px 8px;
}

.admin-dev-head {
    align-items: flex-start;
}

.admin-dev-note {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
}

.admin-dev-note strong {
    color: #0f766e;
    white-space: nowrap;
}

.admin-dev-note span {
    color: #52627a;
    font-size: 13px;
}

.admin-dev-layout {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}

.admin-dev-filter {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-dev-filter label {
    display: grid;
    gap: 5px;
    font-size: 12px;
    font-weight: 850;
}

.admin-dev-filter .wide-field,
.admin-dev-filter button {
    grid-column: 1 / -1;
}

.admin-template-count {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
    margin: 14px 0 8px;
}

.admin-template-list {
    display: grid;
    gap: 8px;
    max-height: 720px;
    overflow: auto;
    padding-right: 4px;
}

.admin-template-item {
    background: #fff;
    border: 1px solid #dbe6f1;
    border-radius: 14px;
    color: inherit;
    display: grid;
    gap: 5px;
    padding: 11px;
    text-decoration: none;
}

.admin-template-item.is-active {
    border-color: var(--primary);
    box-shadow: 0 10px 24px rgba(var(--primary-rgb), .12);
}

.admin-template-item small {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.admin-template-item strong {
    color: #071a3d;
    font-size: 14px;
    line-height: 1.25;
}

.admin-template-item span {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.admin-template-item em {
    background: #f3faf8;
    border-radius: 999px;
    color: #0f766e;
    font-size: 10px;
    font-style: normal;
    font-weight: 850;
    padding: 4px 6px;
}

.admin-weight-title {
    border-bottom: 1px solid #e2eaf2;
    margin-bottom: 14px;
    padding-bottom: 12px;
}

.admin-weight-title small {
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
}

.admin-weight-title h2 {
    margin: 4px 0;
}

.admin-weight-title p {
    color: #52627a;
    margin: 0;
}

.weight-legend {
    background: #f8fbfd;
    border: 1px solid #e2eaf2;
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px;
}

.weight-legend span {
    color: #52627a;
    font-size: 12px;
    font-weight: 800;
}

.weight-legend strong {
    color: #0f766e;
}

.competency-editor-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.competency-group {
    background: #fff;
    border: 1px solid #e2eaf2;
    border-radius: 16px;
    padding: 12px;
}

.competency-group h3 {
    font-size: 15px;
    margin: 0 0 10px;
}

.competency-weight-row {
    align-items: center;
    border-top: 1px solid #eef3f8;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 64px;
    padding: 9px 0;
}

.competency-weight-row:first-of-type {
    border-top: 0;
}

.competency-weight-row span {
    display: grid;
    gap: 2px;
}

.competency-weight-row strong {
    font-size: 13px;
}

.competency-weight-row small {
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

.competency-weight-row select {
    min-height: 36px;
    padding: 6px 8px;
}

@media (max-width: 980px) {
    .admin-dev-layout {
        grid-template-columns: 1fr;
    }

    .admin-template-list {
        max-height: 360px;
    }

    .competency-editor-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .admin-dev-note {
        align-items: flex-start;
        display: grid;
        gap: 5px;
    }

    .admin-dev-filter {
        grid-template-columns: 1fr;
    }
}

/* Diario Afetivo: midia consistente, galeria multipla e indicadores avancados. */
.diary-entry-row {
    grid-template-areas: "date main tags media actions";
    grid-template-columns: 62px minmax(0, 1fr) minmax(118px, auto) 72px 66px;
    min-width: 0;
    overflow: hidden;
}

.diary-date-pill { grid-area: date; }
.diary-row-main { grid-area: main; }
.diary-row-tags { grid-area: tags; }
.diary-row-actions { grid-area: actions; }

.diary-entry-row > * {
    min-width: 0;
}

.diary-row-media {
    align-self: center;
    grid-area: media;
    height: 64px;
    justify-self: end;
    max-height: 64px;
    max-width: 72px;
    min-height: 64px;
    min-width: 72px;
    overflow: hidden;
    width: 72px;
}

.diary-row-mosaic {
    background: #eef4f7;
    border: 1px solid #e0e9f0;
    border-radius: 12px;
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.diary-row-mosaic img {
    display: block;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.diary-row-mosaic.photos-1 img {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.diary-row-mosaic.photos-2 img {
    grid-row: 1 / -1;
}

.diary-row-mosaic.photos-3 img:first-child {
    grid-row: 1 / -1;
}

.diary-row-photo-more {
    align-items: center;
    background: rgba(7, 26, 61, .72);
    border-radius: 999px;
    bottom: 3px;
    color: #fff;
    display: flex;
    font-size: 9px;
    font-weight: 900;
    height: 22px;
    justify-content: center;
    position: absolute;
    right: 3px;
    width: 22px;
}

.diary-row-no-photo {
    align-content: center;
    background: linear-gradient(145deg, #f7fafc, #eef4f7);
    border: 1px dashed #cbd9e4;
    border-radius: 12px;
    color: #8291a6;
    display: grid;
    gap: 3px;
    height: 100%;
    justify-items: center;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
}

.diary-row-no-photo .mini-svg {
    height: 18px;
    width: 18px;
}

.diary-row-no-photo small {
    font-size: 8px;
    font-weight: 850;
    line-height: 1;
}

.diary-insight-period-switch a em {
    color: #8291a6;
    display: block;
    font-size: 9px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.2;
    margin-top: 2px;
}

.diary-insight-filter {
    align-items: end;
    background: #f7fafc;
    border: 1px solid #e2eaf2;
    border-radius: 14px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(150px, 1.3fr) minmax(138px, 1fr) minmax(138px, 1fr) auto auto;
    margin: 12px 0 14px;
    padding: 10px;
}

.diary-insight-filter label {
    display: grid;
    gap: 4px;
    margin: 0;
}

.diary-insight-filter label > span {
    color: #52627a;
    font-size: 10px;
    font-weight: 850;
}

.diary-insight-filter select,
.diary-insight-filter input,
.diary-insight-filter button {
    border-radius: 10px;
    font-size: 11px;
    min-height: 36px;
    padding: 7px 9px;
    width: 100%;
}

.diary-insight-clear {
    align-items: center;
    color: #64748b;
    display: inline-flex;
    font-size: 11px;
    font-weight: 850;
    justify-content: center;
    min-height: 36px;
    padding: 7px 5px;
    text-decoration: none;
}

.diary-image-uploader {
    background: #f8fbfd;
    border: 1px solid #dbe6ef;
    border-radius: 14px;
    display: grid;
    gap: 10px;
    padding: 10px;
}

.diary-existing-images,
.diary-new-image-previews {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}

.diary-existing-images a,
.diary-new-image-item {
    aspect-ratio: 1;
    border: 1px solid #dbe6ef;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.diary-new-image-item {
    pointer-events: none;
}

.diary-existing-images img,
.diary-new-image-item img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.diary-new-image-item span {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, .72));
    bottom: 0;
    color: #fff;
    display: block;
    font-size: 9px;
    font-weight: 800;
    left: 0;
    overflow: hidden;
    padding: 12px 5px 4px;
    position: absolute;
    right: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diary-new-image-item .diary-remove-image-button {
    align-items: center;
    appearance: none;
    background: rgba(255, 255, 255, .94);
    border: 1px solid #ffd0d8;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(223, 49, 92, .13);
    box-sizing: border-box;
    color: #df315c;
    display: inline-flex;
    flex: 0 0 24px;
    font-size: 16px;
    height: 24px !important;
    justify-content: center;
    line-height: 1;
    margin: 0;
    max-height: 24px;
    max-width: 24px;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    position: absolute;
    pointer-events: auto;
    right: 4px;
    top: 4px;
    width: 24px !important;
    z-index: 2;
}

.diary-image-picker-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.diary-file-input-hidden {
    display: none !important;
}

.diary-image-add-button {
    align-items: center;
    background: var(--primary);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(var(--primary-rgb), .12);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 850;
    grid-column: auto !important;
    justify-content: center;
    min-height: 34px !important;
    min-width: 0 !important;
    padding: 0 13px !important;
    width: auto !important;
}

.diary-image-add-button:hover {
    background: var(--primary-dark);
}

.diary-image-picker-row span {
    color: #64748b;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 850;
}

.diary-image-helper {
    color: #64748b;
    flex: 1 0 100%;
    font-size: 11px;
    line-height: 1.35;
}

@media (max-width: 820px) {
    .diary-insight-filter {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .diary-insight-filter label:first-of-type {
        grid-column: 1 / -1;
    }

    .diary-insight-filter button {
        grid-column: 1 / 2;
    }
}

@media (min-width: 561px) and (max-width: 900px) {
    .diary-entry-row {
        gap: 7px 10px;
        grid-template-areas:
            "date main tags media actions";
        grid-template-columns: 54px minmax(0, 1fr) minmax(88px, auto) 58px 64px;
        min-height: 76px;
        padding: 8px 0;
    }

    .diary-row-media {
        height: 52px;
        max-height: 52px;
        max-width: 58px;
        min-height: 52px;
        min-width: 58px;
        width: 58px;
    }

    .diary-row-actions {
        display: grid !important;
        gap: 4px;
        grid-area: actions;
        grid-template-columns: repeat(2, 26px);
        justify-self: end;
        margin: 0 !important;
    }

    .diary-row-actions .icon-action {
        height: 26px;
        width: 26px;
    }
}

@media (max-width: 560px) {
    .diary-entry-row {
        gap: 6px 8px;
        grid-template-areas:
            "date main media"
            "date tags media"
            ". actions actions";
        grid-template-columns: 44px minmax(0, 1fr) 48px;
        min-height: 88px;
        padding: 9px 0;
    }

    .diary-row-media {
        height: 48px;
        max-height: 48px;
        max-width: 48px;
        min-height: 48px;
        min-width: 48px;
        width: 48px;
    }

    .diary-row-no-photo small {
        display: none;
    }

    .diary-row-actions {
        align-self: start;
        display: flex !important;
        gap: 4px;
        grid-area: actions;
        justify-self: end;
        margin: -2px 0 0 !important;
        transform: none;
    }

    .diary-row-actions form {
        display: inline-flex !important;
    }

    .diary-insight-period-switch a em {
        font-size: 8px;
    }

    .diary-insight-filter {
        gap: 7px;
        margin-top: 9px;
        padding: 9px;
    }

    .diary-insight-filter select,
    .diary-insight-filter input,
    .diary-insight-filter button,
    .diary-insight-clear {
        min-height: 34px;
    }

    .diary-existing-images,
    .diary-new-image-previews {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .diary-image-picker-row {
        align-items: stretch;
        display: grid;
        gap: 6px;
    }
}

.premium-photo-viewer.photo-viewer {
    background: transparent;
    color: var(--text, #071a3d);
    display: grid;
    gap: 14px;
    grid-template-rows: auto auto auto;
    margin: 0 auto;
    max-width: 1180px;
    min-height: auto;
    padding: 4px clamp(8px, 2vw, 20px) 28px;
    position: relative;
}

.premium-photo-top {
    align-items: center;
    backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(207, 220, 233, .9);
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(31, 56, 88, .08);
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 10px;
    position: sticky;
    top: 10px;
    z-index: 8;
}

.photo-back-button,
.premium-photo-actions .button {
    align-items: center;
    border-radius: 14px;
    display: inline-flex;
    font-weight: 900;
    gap: 6px;
    min-height: 42px;
    padding: 0 14px;
    text-decoration: none;
}

.photo-back-button {
    background: #eef8f6;
    color: var(--primary, #008b82);
}

.photo-back-button > span:first-child {
    font-size: 24px;
    line-height: 1;
    margin-top: -2px;
}

.premium-photo-title {
    display: grid;
    gap: 2px;
    justify-items: center;
    min-width: 0;
    text-align: center;
}

.premium-photo-title span {
    color: var(--muted, #50617f);
    font-size: 12px;
    font-weight: 800;
}

.premium-photo-title strong {
    color: var(--text, #071a3d);
    font-size: 18px;
}

.premium-photo-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.premium-photo-actions .button {
    box-shadow: none;
    min-width: 0;
}

.premium-photo-shell {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) 320px;
}

.premium-photo-stage {
    align-items: center;
    background:
        radial-gradient(circle at 20% 0%, rgba(148, 221, 212, .24), transparent 34%),
        linear-gradient(145deg, #f9fcff, #eef5fb);
    border: 1px solid rgba(207, 220, 233, .86);
    border-radius: 26px;
    box-shadow: 0 24px 60px rgba(20, 45, 78, .12);
    display: flex;
    justify-content: center;
    min-height: min(70vh, 660px);
    overflow: hidden;
    position: relative;
}

.premium-photo-stage figure {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0;
    padding: clamp(10px, 2vw, 20px);
    width: 100%;
}

.premium-photo-stage img {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 16px 46px rgba(7, 26, 61, .16);
    display: block;
    max-height: min(68vh, 620px);
    max-width: 100%;
    object-fit: contain;
}

.premium-photo-empty {
    align-items: center;
    color: var(--muted, #50617f);
    display: grid;
    font-weight: 850;
    gap: 8px;
    justify-items: center;
}

.premium-photo-viewer .photo-nav {
    align-items: center;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(207, 220, 233, .9);
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(7, 26, 61, .16);
    color: var(--primary, #008b82);
    display: flex;
    font-size: 36px;
    font-weight: 800;
    height: 48px;
    justify-content: center;
    line-height: 1;
    padding: 0 0 4px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .15s ease, background .15s ease;
    width: 48px;
    z-index: 5;
}

.premium-photo-viewer .photo-nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.04);
}

.premium-photo-viewer .photo-nav[hidden] {
    display: none;
}

.premium-photo-viewer .photo-nav-prev {
    left: 16px;
}

.premium-photo-viewer .photo-nav-next {
    right: 16px;
}

.premium-photo-info {
    align-self: start;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(207, 220, 233, .9);
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(31, 56, 88, .08);
    display: grid;
    gap: 12px;
    padding: 16px;
}

.premium-photo-info-head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.photo-viewer-chip {
    background: #e9fbf6;
    border-radius: 999px;
    color: var(--primary, #008b82);
    font-size: 11px;
    font-weight: 900;
    padding: 6px 10px;
}

.premium-photo-info-head strong {
    color: var(--text, #071a3d);
    font-size: 20px;
}

.premium-photo-location,
.premium-photo-people,
.premium-photo-description {
    color: var(--muted, #50617f);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.premium-photo-people strong {
    color: var(--text, #071a3d);
    font-weight: 900;
}

.premium-photo-description {
    border-top: 1px solid #edf2f7;
    padding-top: 12px;
}

.premium-photo-thumbs {
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(207, 220, 233, .7);
    border-radius: 18px;
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 9px;
    scrollbar-color: var(--primary, #008b82) transparent;
}

.premium-photo-thumb {
    border: 2px solid transparent;
    border-radius: 14px;
    display: block;
    flex: 0 0 76px;
    height: 64px;
    overflow: hidden;
    position: relative;
}

.premium-photo-thumb img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.premium-photo-thumb span {
    align-items: center;
    background: rgba(7, 26, 61, .72);
    border-radius: 999px;
    bottom: 4px;
    color: #fff;
    display: flex;
    font-size: 10px;
    font-weight: 900;
    height: 20px;
    justify-content: center;
    position: absolute;
    right: 4px;
    width: 20px;
}

.premium-photo-thumb.is-active {
    border-color: var(--primary, #008b82);
    box-shadow: 0 0 0 4px rgba(0, 139, 130, .12);
}

@media (max-width: 900px) {
    .premium-photo-shell {
        grid-template-columns: 1fr;
    }

    .premium-photo-info {
        align-self: stretch;
    }
}

@media (max-width: 640px) {
    .premium-photo-viewer.photo-viewer {
        gap: 10px;
        padding: 0 0 18px;
    }

    .premium-photo-top {
        border-radius: 16px;
        gap: 8px;
        grid-template-columns: auto 1fr;
        padding: 8px;
        top: 8px;
    }

    .premium-photo-title {
        align-items: center;
        justify-items: start;
        text-align: left;
    }

    .premium-photo-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .premium-photo-actions .button {
        flex: 1;
        justify-content: center;
        min-height: 38px;
        padding: 0 10px;
    }

    .photo-back-button {
        min-height: 38px;
        padding: 0 12px;
    }

    .premium-photo-stage {
        border-radius: 20px;
        min-height: 54vh;
    }

    .premium-photo-stage figure {
        padding: 8px;
    }

    .premium-photo-stage img {
        border-radius: 16px;
        max-height: 54vh;
    }

    .premium-photo-viewer .photo-nav {
        height: 40px;
        width: 40px;
    }

    .premium-photo-viewer .photo-nav-prev {
        left: 8px;
    }

    .premium-photo-viewer .photo-nav-next {
        right: 8px;
    }

    .premium-photo-info {
        border-radius: 18px;
        padding: 13px;
    }

    .premium-photo-thumbs {
        border-radius: 16px;
        padding: 7px;
    }

    .premium-photo-thumb {
        flex-basis: 64px;
        height: 54px;
    }
}

/* Photo viewer, media-first polish */
.premium-photo-viewer.photo-viewer {
    max-width: 1260px;
    padding-top: 0;
}

.premium-photo-top {
    border-radius: 18px;
    grid-template-columns: minmax(112px, auto) minmax(0, 1fr) minmax(230px, auto);
    padding: 8px;
}

.premium-photo-title strong {
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.premium-photo-title span {
    color: var(--text, #071a3d);
    font-size: 20px;
    line-height: 1.05;
}

.photo-back-button,
.premium-photo-actions .button {
    min-height: 40px;
}

.premium-photo-shell {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}

.premium-photo-stage {
    background: #101827;
    border-color: rgba(202, 218, 232, .82);
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(16, 35, 62, .16);
    min-height: auto;
    padding: 0;
}

.premium-photo-frame {
    align-items: center;
    background: #0d1624;
    box-sizing: border-box;
    display: flex;
    height: clamp(440px, calc(100vh - 260px), 700px);
    isolation: isolate;
    justify-content: center;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
}

.premium-photo-frame::before {
    background-image: var(--photo-bg);
    background-position: center;
    background-size: cover;
    content: "";
    filter: blur(34px) saturate(1.05);
    inset: -28px;
    opacity: .34;
    position: absolute;
    transform: scale(1.08);
    z-index: -2;
}

.premium-photo-frame::after {
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .08), transparent 34%),
        linear-gradient(180deg, rgba(8, 15, 28, .08), rgba(8, 15, 28, .38));
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
}

.premium-photo-stage img {
    background: transparent;
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
    height: 100%;
    max-height: none;
    object-fit: contain;
    padding: clamp(10px, 2vw, 22px);
    width: 100%;
}

.premium-photo-info {
    border-radius: 24px;
    min-height: 0;
    padding: 18px;
    position: sticky;
    top: 82px;
}

.premium-photo-detail-list {
    display: grid;
    gap: 12px;
}

.premium-photo-detail {
    background: #f7fbff;
    border: 1px solid #edf3f8;
    border-radius: 16px;
    display: grid;
    gap: 5px;
    padding: 12px;
}

.premium-photo-detail > span {
    color: var(--muted, #50617f);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.premium-photo-detail strong,
.premium-photo-detail .premium-photo-people,
.premium-photo-detail .premium-photo-description {
    color: var(--text, #071a3d);
    font-size: 14px;
}

.premium-photo-detail .premium-photo-description {
    border: 0;
    padding: 0;
}

.premium-photo-thumbs {
    border-radius: 20px;
    padding: 8px;
}

.premium-photo-thumb {
    flex-basis: 72px;
    height: 58px;
}

@media (min-width: 901px) and (max-width: 1120px) {
    .premium-photo-shell {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .premium-photo-frame {
        height: clamp(390px, calc(100vh - 260px), 620px);
    }
}

@media (max-width: 900px) {
    .premium-photo-info {
        position: static;
    }

    .premium-photo-frame {
        height: clamp(360px, 58vh, 620px);
    }
}

@media (max-width: 640px) {
    .premium-photo-top {
        grid-template-columns: auto 1fr;
    }

    .premium-photo-title {
        justify-items: end;
        text-align: right;
    }

    .premium-photo-title span {
        font-size: 17px;
    }

    .premium-photo-frame {
        height: min(62vh, 520px);
        min-height: 330px;
    }

    .premium-photo-stage img {
        border-radius: 14px;
        padding: 8px;
    }

    .premium-photo-info {
        padding: 14px;
    }

    .premium-photo-info-head strong {
        font-size: 18px;
    }
}

/* Album-style photo viewer */
.photo-album-viewer.premium-photo-viewer {
    display: grid;
    gap: 14px;
    margin: 0 auto;
    max-width: 1080px;
    padding: 0 clamp(8px, 2vw, 18px) 30px;
}

.photo-album-toolbar {
    align-items: center;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(207, 220, 233, .95);
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(31, 56, 88, .08);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(100px, auto) minmax(0, 1fr) minmax(190px, auto);
    padding: 8px 10px;
    position: sticky;
    top: 10px;
    z-index: 20;
}

.photo-album-toolbar-title {
    display: grid;
    justify-items: center;
    line-height: 1.1;
    min-width: 0;
    text-align: center;
}

.photo-album-toolbar-title strong {
    color: var(--muted, #52617c);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.photo-album-toolbar-title span {
    color: var(--text, #071a3d);
    font-size: 20px;
    font-weight: 900;
}

.photo-album-toolbar .premium-photo-actions {
    display: flex;
    gap: 8px;
    justify-content: end;
}

.photo-album-frame {
    background: #fff;
    border: clamp(10px, 2.2vw, 22px) solid #262626;
    box-shadow: 0 22px 54px rgba(7, 26, 61, .18);
    display: grid;
    gap: clamp(14px, 2.4vw, 24px);
    margin: 0 auto;
    padding: clamp(10px, 2vw, 22px);
    width: min(100%, 900px);
}

.photo-album-mosaic {
    display: grid;
    gap: clamp(5px, .9vw, 8px);
    width: 100%;
}

.photo-album-mosaic.count-1 {
    grid-template-columns: 1fr;
}

.photo-album-mosaic.count-2,
.photo-album-mosaic.count-3,
.photo-album-mosaic.is-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.photo-album-mosaic.count-5,
.photo-album-mosaic.count-6,
.photo-album-mosaic.count-7,
.photo-album-mosaic.count-8,
.photo-album-mosaic.is-nine {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.photo-album-tile {
    aspect-ratio: 1 / 1;
    background: #edf3f8;
    border: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    display: block;
    overflow: hidden;
    padding: 0;
    position: relative;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.photo-album-mosaic.count-1 .photo-album-tile {
    aspect-ratio: 16 / 10;
}

.photo-album-tile img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.photo-album-tile-glow {
    background: linear-gradient(180deg, rgba(0, 139, 130, 0), rgba(0, 139, 130, .18));
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity .16s ease;
}

.photo-album-tile:hover,
.photo-album-tile:focus-visible {
    border-color: var(--primary, #008b82);
    box-shadow: 0 12px 26px rgba(0, 139, 130, .18);
    outline: 0;
    transform: translateY(-1px);
}

.photo-album-tile:hover .photo-album-tile-glow,
.photo-album-tile:focus-visible .photo-album-tile-glow {
    opacity: 1;
}

.photo-album-caption {
    color: #737987;
    display: grid;
    gap: 7px;
    padding: 4px clamp(6px, 1.5vw, 18px) 0;
    text-align: center;
}

.photo-album-caption h1 {
    color: #071a3d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 500;
    letter-spacing: .035em;
    line-height: 1.08;
    margin: 0 auto 2px;
    max-width: 760px;
}

.photo-album-divider {
    background: #bfc5cc;
    height: 1px;
    margin: 2px auto 3px;
    width: min(100%, 760px);
}

.photo-album-caption p {
    font-size: 14px;
    line-height: 1.42;
    margin: 0 auto;
    max-width: 760px;
    text-align: left;
    width: 100%;
}

.photo-album-caption p strong {
    color: #5e6471;
}

.photo-album-people > strong,
.photo-album-caption p strong strong {
    color: var(--text, #071a3d);
}

.photo-album-modal[hidden] {
    display: none;
}

.photo-album-modal {
    align-items: center;
    background: rgba(4, 10, 22, .84);
    backdrop-filter: blur(10px);
    display: grid;
    inset: 0;
    justify-items: center;
    padding: clamp(14px, 3vw, 32px);
    position: fixed;
    z-index: 1200;
}

body.photo-album-modal-open {
    overflow: hidden;
}

.photo-album-modal-figure {
    display: grid;
    height: min(82vh, 820px);
    margin: 0;
    place-items: center;
    position: relative;
    width: min(1120px, 94vw);
}

.photo-album-modal-figure img {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
    display: block;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.photo-album-modal-caption {
    align-items: center;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 18px;
    bottom: 14px;
    box-shadow: 0 16px 34px rgba(7, 26, 61, .22);
    color: #52617c;
    display: grid;
    gap: 2px;
    left: 50%;
    max-width: min(760px, calc(100% - 30px));
    padding: 10px 14px;
    position: absolute;
    text-align: center;
    transform: translateX(-50%);
}

.photo-album-modal-caption strong {
    color: var(--text, #071a3d);
    font-size: 14px;
}

.photo-album-modal-caption span,
.photo-album-modal-caption small {
    font-size: 12px;
}

.photo-album-modal-caption-footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 4px;
}

.photo-album-modal-caption-footer a {
    align-items: center;
    background: rgba(0, 139, 130, .09);
    border: 1px solid rgba(0, 139, 130, .12);
    border-radius: 999px;
    color: var(--primary, #008b82);
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    gap: 5px;
    min-height: 28px;
    padding: 5px 10px;
    text-decoration: none;
}

.photo-album-modal-caption-footer a:hover,
.photo-album-modal-caption-footer a:focus-visible {
    background: rgba(0, 139, 130, .15);
    outline: 0;
}

.photo-album-modal-caption em {
    color: #6d7482;
    display: block;
    font-size: 12.5px;
    font-style: normal;
    line-height: 1.35;
    max-width: 680px;
}

.photo-album-modal-close,
.photo-album-modal-nav {
    align-items: center;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(207, 220, 233, .9);
    border-radius: 999px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
    color: var(--primary, #008b82);
    cursor: pointer;
    display: flex;
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    position: fixed;
    transition: transform .16s ease, background .16s ease;
    z-index: 1202;
}

.photo-album-modal-close {
    font-size: 24px;
    height: 46px;
    right: 18px;
    top: 18px;
    width: 46px;
}

.photo-album-modal-nav {
    font-size: 48px;
    height: 56px;
    padding-bottom: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
}

.photo-album-modal-nav.is-prev {
    left: 22px;
}

.photo-album-modal-nav.is-next {
    right: 22px;
}

.photo-album-modal-close:hover,
.photo-album-modal-nav:hover {
    background: #fff;
}

.photo-album-modal-nav:hover {
    transform: translateY(-50%) scale(1.04);
}

@media (max-width: 720px) {
    .photo-album-viewer.premium-photo-viewer {
        gap: 10px;
        padding: 0 0 22px;
    }

    .photo-album-toolbar {
        border-radius: 16px;
        grid-template-columns: auto 1fr;
        padding: 8px;
        top: 8px;
    }

    .photo-album-toolbar-title {
        justify-items: end;
        text-align: right;
    }

    .photo-album-toolbar .premium-photo-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .photo-album-toolbar .premium-photo-actions .button {
        flex: 1 1 0;
        min-height: 40px;
    }

    .photo-album-frame {
        border-width: 10px;
        gap: 14px;
        padding: 10px;
    }

    .photo-album-mosaic {
        gap: 5px;
    }

    .photo-album-caption {
        padding-inline: 4px;
    }

    .photo-album-caption h1 {
        font-size: clamp(24px, 8vw, 34px);
    }

    .photo-album-caption p {
        font-size: 12.5px;
    }

    .photo-album-modal {
        padding: 10px;
    }

    .photo-album-modal-figure {
        height: 86vh;
        width: 96vw;
    }

    .photo-album-modal-figure img {
        border-radius: 14px;
    }

    .photo-album-modal-caption {
        bottom: 10px;
        border-radius: 14px;
        padding: 8px 10px;
    }

    .photo-album-modal-nav {
        font-size: 38px;
        height: 44px;
        width: 44px;
    }

    .photo-album-modal-nav.is-prev {
        left: 10px;
    }

    .photo-album-modal-nav.is-next {
        right: 10px;
    }

    .photo-album-modal-close {
        height: 40px;
        right: 10px;
        top: 10px;
        width: 40px;
    }
}

/* Fixed 3x3 album page */
.photo-album-viewer.premium-photo-viewer {
    max-width: 780px;
}

.photo-album-frame {
    border: 0;
    gap: clamp(14px, 2vw, 18px);
    padding: clamp(12px, 2.2vw, 22px);
    width: min(100%, 660px);
}

.photo-album-caption {
    gap: 7px;
    padding: 0 2px;
    text-align: left;
}

.photo-album-caption h1 {
    font-size: clamp(30px, 5vw, 44px);
    letter-spacing: .05em;
    margin: 0 auto 2px;
    max-width: 580px;
    text-align: center;
}

.photo-album-divider {
    background: #b8b8b8;
    height: 2px;
    margin: 2px 0 4px;
    opacity: .9;
}

.photo-album-caption p {
    color: #707781;
    font-size: 14px;
    line-height: 1.32;
    max-width: none;
}

.photo-album-mosaic.is-fixed-nine {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(5px, .85vw, 7px);
}

.photo-album-mosaic.is-fixed-nine .photo-album-tile {
    aspect-ratio: 1 / 1;
    background: #fff;
}

.photo-album-mosaic.is-fixed-nine .photo-album-tile img {
    background: #fff;
    object-fit: contain;
}

.photo-album-tile.is-hidden-context {
    display: none;
}

.photo-album-overflow {
    align-items: center;
    background: rgba(7, 26, 61, .72);
    color: #fff;
    display: flex;
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 900;
    inset: 0;
    justify-content: center;
    position: absolute;
}

@media (max-width: 720px) {
    .photo-album-viewer.premium-photo-viewer {
        max-width: 100%;
        padding: 0 8px 22px;
    }

    .photo-album-frame {
        border-width: 10px;
        gap: 12px;
        padding: 10px;
        width: min(100%, 430px);
    }

    .photo-album-caption h1 {
        font-size: clamp(24px, 7.2vw, 34px);
        letter-spacing: .04em;
    }

    .photo-album-caption p {
        font-size: 12.5px;
    }
}

/* Gallery photo cards open an in-page viewer, not the album layout. */
.gallery-viewer {
    position: relative;
}

.photo-card-trigger {
    aspect-ratio: 4 / 3;
    background: #fff;
    border: 0;
    border-radius: 8px 8px 0 0;
    box-shadow: none;
    cursor: zoom-in;
    display: block;
    line-height: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    text-align: inherit;
    width: 100%;
}

.photo-card-trigger:hover,
.photo-card-trigger:focus-visible {
    background: #fff;
    box-shadow: none;
}

.photo-card-trigger img {
    height: 100%;
    transition: filter .18s ease, transform .18s ease;
}

.photo-card-trigger:hover img,
.photo-card-trigger:focus-visible img {
    filter: saturate(1.04);
    transform: scale(1.025);
}

.photo-card-trigger:focus-visible {
    outline: 3px solid rgba(20, 158, 150, .32);
    outline-offset: 3px;
}

.gallery-photo-modal .photo-album-modal-figure img {
    background: #fff;
}

/* Diario afetivo: controles compactos, indicadores e navegacao de registros. */
.diary-mobile-mood-meters {
    display: none;
}

.diary-quick-disclosure {
    width: 100%;
}

.diary-quick-disclosure > summary {
    align-items: center;
    color: #092452;
    cursor: pointer;
    display: flex;
    font-weight: 800;
    gap: 12px;
    justify-content: space-between;
    list-style: none;
}

.diary-quick-disclosure > summary::-webkit-details-marker {
    display: none;
}

.diary-quick-disclosure > summary b {
    align-items: center;
    background: #e6f7f2;
    border-radius: 999px;
    color: #078d82;
    display: inline-flex;
    flex: 0 0 30px;
    font-size: 22px;
    height: 30px;
    justify-content: center;
    line-height: 1;
    transition: transform .18s ease, background .18s ease;
    width: 30px;
}

.diary-quick-disclosure[open] > summary b {
    background: #d4f2ea;
    transform: rotate(45deg);
}

.diary-quick-fields {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    margin-top: 10px;
}

.diary-quick-fields .quick-picks {
    display: contents;
}

.diary-quick-fields .quick-pick {
    align-items: center;
    display: grid;
    gap: 2px 8px;
    grid-template-columns: 24px minmax(0, 1fr);
    min-width: 0;
}

.diary-quick-fields .quick-pick .quick-svg {
    grid-row: 1 / span 2;
    margin: 0;
}

.diary-quick-fields .quick-pick span,
.diary-quick-fields .quick-pick select {
    min-width: 0;
}

.diary-quick-fields > button {
    margin: 0;
    min-width: 100px;
    padding: 0 14px;
    white-space: nowrap;
}

.diary-tabs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.diary-tabs a {
    background: #f7fbfa;
    border: 1px solid #dfebe8;
    border-radius: 999px;
    min-height: 36px;
    padding: 8px 12px;
}

.diary-tabs a::after {
    display: none;
}

.diary-tabs a.is-active {
    background: #d9f3eb;
    border-color: #9adbc9;
    box-shadow: 0 6px 14px rgba(10, 151, 134, .12);
    color: #087e72;
}

.diary-insight-filter {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.diary-insight-filter label {
    align-items: center;
    display: flex;
    gap: 7px;
    margin: 0;
    min-width: 0;
    white-space: nowrap;
}

.diary-insight-filter label > span {
    margin: 0;
}

.diary-insight-filter label select,
.diary-insight-filter label input {
    min-width: 0;
}

.diary-pagination {
    align-items: center;
    border-top: 1px solid #e5efed;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
}

.diary-pagination-top {
    border-top: 0;
    justify-content: space-between;
    margin: 0 0 8px;
    padding-top: 0;
}

.diary-pagination-summary {
    color: #61718d;
    font-size: 12px;
    margin-right: auto;
}

.diary-pagination-links {
    align-items: center;
    display: flex;
    gap: 5px;
}

.diary-pagination a,
.diary-pagination-current {
    align-items: center;
    border: 1px solid #dceae6;
    border-radius: 8px;
    color: #087e72;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    min-width: 30px;
    padding: 0 8px;
}

.diary-pagination a:hover,
.diary-pagination a:focus-visible {
    background: #eef9f6;
}

.diary-pagination-current {
    background: #0c9d90;
    border-color: #0c9d90;
    color: #fff;
}

@media (max-width: 720px) {
    .diary-top-cloud .mood-cloud {
        display: none;
    }

    .diary-mobile-mood-meters {
        display: grid;
        gap: 6px;
        margin-top: 8px;
    }

    .diary-mobile-mood-meter {
        align-items: center;
        display: grid;
        gap: 7px;
        grid-template-columns: 72px minmax(0, 1fr) 18px;
    }

    .diary-mobile-mood-meter > span {
        color: #3c506e;
        font-size: 11px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .diary-mobile-mood-meter i {
        background: #edf3f2;
        border-radius: 999px;
        display: block;
        height: 6px;
        overflow: hidden;
    }

    .diary-mobile-mood-meter b {
        background: #55c7a5;
        border-radius: inherit;
        display: block;
        height: 100%;
    }

    .diary-mobile-mood-meter.blue b { background: #5daee7; }
    .diary-mobile-mood-meter.orange b { background: #f2b35d; }
    .diary-mobile-mood-meter.purple b { background: #9a78e7; }
    .diary-mobile-mood-meter.rose b { background: #eb8dab; }
    .diary-mobile-mood-meter.teal b { background: #55c7a5; }

    .diary-mobile-mood-meter strong {
        color: #41617b;
        font-size: 11px;
        text-align: right;
    }

    .diary-quick-inline {
        padding: 11px 12px;
    }

    .diary-quick-disclosure > summary {
        font-size: 13px;
    }

    .diary-quick-disclosure > summary b {
        flex-basis: 26px;
        font-size: 19px;
        height: 26px;
        width: 26px;
    }

    .diary-quick-fields {
        gap: 6px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        margin-top: 8px;
    }

    .diary-quick-fields .quick-pick {
        gap: 1px 5px;
        grid-template-columns: 18px minmax(0, 1fr);
        padding: 7px 8px;
    }

    .diary-quick-fields .quick-pick .quick-svg {
        height: 16px;
        width: 16px;
    }

    .diary-quick-fields .quick-pick span {
        font-size: 9px;
    }

    .diary-quick-fields .quick-pick select {
        font-size: 12px;
    }

    .diary-quick-fields > button {
        font-size: 12px;
        min-width: 80px;
        padding: 0 9px;
    }

    .diary-tabs {
        display: grid;
        gap: 6px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .diary-tabs a {
        align-items: center;
        display: flex;
        font-size: 11px;
        justify-content: center;
        line-height: 1.12;
        min-height: 38px;
        overflow: hidden;
        padding: 6px 5px;
        text-align: center;
    }

    .diary-insight-filter {
        display: grid;
        gap: 7px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .diary-insight-filter label {
        gap: 5px;
        overflow: hidden;
    }

    .diary-insight-filter label:first-of-type {
        grid-column: 1 / -1;
    }

    .diary-insight-filter label > span {
        color: #60708b;
        font-size: 10px;
        font-weight: 800;
    }

    .diary-insight-filter label select,
    .diary-insight-filter label input {
        flex: 1 1 0;
        font-size: 11px;
        width: 0;
    }

    .diary-insight-filter button,
    .diary-insight-clear {
        min-height: 34px;
    }

    .diary-pagination {
        justify-content: center;
        margin-top: 10px;
        padding-top: 10px;
    }

    .diary-pagination-top {
        justify-content: center;
    }

    .diary-pagination-summary {
        margin: 0;
        text-align: center;
        width: 100%;
    }

    .diary-pagination a,
    .diary-pagination-current {
        height: 28px;
        min-width: 28px;
        padding: 0 7px;
    }
}

@media (max-width: 380px) {
    .diary-quick-fields {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .diary-quick-fields > button {
        grid-column: 1 / -1;
        min-height: 36px;
    }
}

/* Documentos: listagem compacta e isolada dos componentes de outros modulos. */
.document-filter {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    max-width: 640px;
    padding: 8px;
}

.document-filter input {
    min-width: 0;
    width: 100%;
}

.document-filter .document-filter-button {
    align-items: center;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    margin: 0;
    min-height: 36px;
    min-width: 36px;
    padding: 0;
    width: 36px;
}

.document-filter-icon {
    height: 17px;
    width: 17px;
}

.document-list,
.document-download-list {
    display: grid;
    gap: 9px;
}

.document-order-toggle {
    align-items: center;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 6px 14px rgba(15, 157, 143, .22);
    color: #fff;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    min-height: 34px;
    min-width: 34px;
    padding: 0;
    width: 34px;
}

.document-order-toggle:hover {
    box-shadow: 0 8px 18px rgba(15, 157, 143, .3);
    transform: translateY(-1px);
}

.document-order-toggle:focus-visible {
    outline: 3px solid rgba(15, 157, 143, .24);
    outline-offset: 2px;
}

.document-order-icon {
    display: block;
    height: 17px;
    stroke-width: 2.5;
    width: 17px;
}

.document-order-icon-close {
    display: none;
}

.document-order-toggle.is-active {
    background: #dc4b5a;
    border-color: #dc4b5a;
    box-shadow: 0 6px 14px rgba(220, 75, 90, .24);
    color: #fff;
}

.document-order-toggle.is-active:hover {
    box-shadow: 0 8px 18px rgba(220, 75, 90, .32);
}

.document-order-toggle.is-active .document-order-icon-sort {
    display: none;
}

.document-order-toggle.is-active .document-order-icon-close {
    display: block;
}

.document-order-form {
    background: var(--primary-soft);
    border: 1px solid rgba(15, 157, 143, .2);
    border-radius: 10px;
    margin: 0 0 10px;
    padding: 7px 9px;
}

.document-order-toolbar {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.document-order-toolbar p {
    color: var(--muted);
    font-size: 11px;
    margin: 0;
}

.document-order-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

.document-order-action {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(15, 157, 143, .2);
    border-radius: 7px;
    color: var(--primary);
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    height: 30px;
    justify-content: center;
    line-height: 1;
    min-height: 30px;
    min-width: 30px;
    padding: 0 9px;
}

.document-order-action:hover {
    border-color: var(--primary);
}

.document-order-save {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.document-list.is-organizing .document-list-item {
    background: #fff;
    cursor: grab;
}

.document-list.is-organizing .document-list-item.is-dragging {
    background: #ddf8f1;
    border-color: var(--primary);
    box-shadow: 0 14px 30px rgba(15, 157, 143, .28);
    cursor: grabbing;
    opacity: 1;
    outline: 2px solid rgba(15, 157, 143, .32);
    outline-offset: 2px;
    transform: scale(1.01);
    z-index: 2;
}

.document-list.is-organizing .document-list-content {
    pointer-events: none;
}

.document-sort-position {
    align-items: center;
    background: var(--primary);
    border-radius: 999px;
    color: #fff;
    display: none;
    font-size: 11px;
    font-weight: 800;
    height: 24px;
    justify-content: center;
    line-height: 1;
    width: 24px;
}

.document-list.is-organizing .document-sort-position {
    display: inline-flex;
}

.document-drag-handle {
    align-items: center;
    background: var(--primary-soft);
    border: 1px solid rgba(15, 157, 143, .18);
    border-radius: 7px;
    color: var(--primary);
    cursor: grab;
    display: none;
    height: 32px;
    justify-content: center;
    padding: 0;
    touch-action: none;
    width: 32px;
}

.document-list.is-organizing .document-drag-handle {
    display: inline-flex;
}

.document-drag-handle:active {
    cursor: grabbing;
}

.document-drag-icon {
    height: 16px;
    width: 16px;
}

.document-list-item {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 11px 13px;
    width: 100%;
}

.document-list-item > * {
    min-width: 0;
}

.document-list-content {
    color: inherit;
    min-width: 0;
    text-decoration: none;
}

.document-list-content strong {
    display: block;
    font-size: 14px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.document-list-child {
    color: var(--muted);
    font-size: .86em;
    font-weight: 600;
    white-space: nowrap;
}

.document-list-meta {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 3px 10px;
    margin-top: 3px;
}

/* Acoes diretas e detalhes: arquivos primeiro, informacoes complementares depois. */
.document-filter {
    grid-template-columns: minmax(0, 1fr) 38px;
    max-width: 720px;
}

.document-filter > input {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

.document-filter > .document-filter-button {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    width: 38px;
}

.document-list-item {
    grid-template-columns: minmax(0, 1fr) auto;
}

.document-list-actions,
.document-file-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.document-row-action,
.document-file-action {
    align-items: center;
    border: 1px solid rgba(15, 157, 143, .2);
    border-radius: 8px;
    color: var(--primary);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    min-height: 34px;
    min-width: 34px;
    padding: 0;
    width: 34px;
}

.document-row-download,
.document-file-download {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.document-row-action:hover,
.document-file-action:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.document-row-action-icon,
.document-file-action-icon {
    height: 16px;
    stroke-width: 2.2;
    width: 16px;
}

.document-list.is-organizing .document-list-item {
    grid-template-columns:26px minmax(0, 1fr) 34px;
}

.document-list.is-organizing .document-list-actions {
    display: none;
}

.document-list.is-organizing .document-drag-handle {
    grid-column: 3;
    grid-row: 1;
}

.document-files-panel {
    padding: 18px;
}

.document-files-panel .section-head-inline {
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
}

.document-download-all {
    align-items: center;
    display: inline-flex;
    gap: 7px;
    white-space: nowrap;
}

.document-file-list {
    display: grid;
    gap: 9px;
}

.document-file-row {
    align-items: center;
    background: #fbfefd;
    border: 1px solid var(--line);
    border-radius: 10px;
    display: grid;
    gap: 11px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    min-width: 0;
    padding: 10px 11px;
}

.document-file-number {
    align-items: center;
    background: var(--primary-soft);
    border-radius: 50%;
    color: var(--primary);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.document-download-name {
    min-width: 0;
}

.document-download-name strong,
.document-download-name small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-download-name strong {
    font-size: 13px;
}

.document-download-name small {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

.document-info-panel {
    overflow: hidden;
    padding: 0;
}

.document-info-row,
.document-info-notes {
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
}

.document-info-row:last-child,
.document-info-notes:last-child {
    border-bottom: 0;
}

.document-info-row {
    align-items: baseline;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.document-info-row > span,
.document-info-notes > span {
    color: var(--muted);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.document-info-row strong {
    text-align: right;
}

.document-info-notes p {
    line-height: 1.55;
    margin: 7px 0 0;
}

.document-danger-zone {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: 14px 0 0;
    padding: 0;
}

.document-danger-zone summary {
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 14px;
}

.document-danger-zone > div {
    border-top: 1px solid var(--line);
    padding: 12px 14px;
}

.document-danger-zone p {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 10px;
}

@media (max-width: 700px) {
    .document-filter {
        gap: 7px;
        padding: 8px;
    }

    .document-filter input,
    .document-filter .document-filter-button {
        font-size: 12px;
        min-height: 34px;
    }

    .document-filter .document-filter-button {
        height: 34px;
        min-width: 34px;
        width: 34px;
    }

    .document-list {
        gap: 7px;
    }

    .document-order-toolbar p {
        line-height: 1.35;
    }

    .document-order-actions {
        flex-wrap: nowrap;
    }

    .document-order-action {
        font-size: 11px;
        height: 29px;
        min-height: 29px;
    }

    .document-sort-position {
        font-size: 10px;
        height: 22px;
        width: 22px;
    }

    .document-drag-handle {
        height: 30px;
        width: 30px;
    }

    .document-list-content strong {
        font-size: 13px;
    }

    .document-list-meta {
        font-size: 11px;
        gap: 2px 7px;
    }

    .document-filter {
        grid-template-columns: minmax(0, 1fr) 34px;
        max-width: none;
    }

    .document-filter > input {
        grid-column: 1;
        grid-row: 1;
    }

    .document-filter > .document-filter-button {
        grid-column: 2;
        grid-row: 1;
        width: 34px;
    }

    .document-list-item {
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 58px;
        padding: 9px 10px;
    }

    .document-list.is-organizing .document-list-item {
        grid-template-columns: 23px minmax(0, 1fr) 30px;
    }

    .document-list-actions,
    .document-file-actions {
        gap: 4px;
    }

    .document-row-action,
    .document-file-action {
        border-radius: 7px;
        height: 30px;
        min-height: 30px;
        min-width: 30px;
        width: 30px;
    }

    .document-row-action-icon,
    .document-file-action-icon {
        height: 14px;
        width: 14px;
    }

    .document-files-panel {
        padding: 13px;
    }

    .document-files-panel .section-head-inline {
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .document-download-all {
        font-size: 11px;
        min-height: 32px;
        padding: 0 10px;
    }

    .document-file-row {
        gap: 8px;
        grid-template-columns: 25px minmax(0, 1fr) auto;
        padding: 9px;
    }

    .document-file-number {
        font-size: 10px;
        height: 25px;
        width: 25px;
    }

    .document-download-name strong {
        font-size: 12px;
    }

    .document-download-name small {
        font-size: 10px;
    }

    .document-info-row,
    .document-info-notes {
        padding: 12px;
    }

    .document-info-row {
        gap: 10px;
    }

    .document-info-row strong {
        font-size: 13px;
    }
}

/* The document detail needs compact, reliably aligned actions at every width. */
.document-detail-head {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: unset;
}

.document-detail-head > div:first-child {
    min-width: 0;
}

.document-detail-head .inline-actions {
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: flex-end;
}

@media (max-width: 560px) {
    .document-detail-head {
        gap: 8px;
        margin-bottom: 12px;
    }

    .document-detail-head h1 {
        font-size: 20px;
        line-height: 1.14;
        overflow-wrap: anywhere;
    }

    .document-detail-head .inline-actions {
        gap: 5px;
    }

.document-detail-head .inline-actions .button {
        font-size: 12px;
        min-height: 34px;
        padding: 0 10px;
    }
}

/* Visualizador exclusivo da galeria: uma foto por vez, sem reutilizar o album do Diario. */
.photo-single-viewer {
    margin: 20px auto 36px;
    max-width: 1180px;
}

.photo-single-toolbar,
.photo-single-details,
.photo-single-stage,
.photo-single-thumbnails {
    background: rgba(255, 255, 255, .96);
    border: 1px solid #d8e5f2;
    box-shadow: 0 14px 34px rgba(18, 54, 84, .08);
}

.photo-single-toolbar {
    align-items: center;
    border-radius: 18px;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    margin-bottom: 16px;
    padding: 10px 12px;
}

.photo-single-back {
    align-items: center;
    color: var(--primary, #0d9189);
    display: inline-flex;
    font-weight: 800;
    gap: 5px;
    text-decoration: none;
}

.photo-single-back span { font-size: 25px; line-height: .6; }

.photo-single-position { color: #64748b; font-size: 12px; text-align: center; }
.photo-single-position span { display: block; font-weight: 700; text-transform: uppercase; }
.photo-single-position strong { color: #10234b; display: block; font-size: 17px; }

.photo-single-actions { align-items: center; display: flex; gap: 8px; justify-content: flex-end; }
.photo-single-actions .button { min-height: 38px; }

.photo-single-layout {
    align-items: stretch;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .42fr);
}

.photo-single-stage {
    align-items: center;
    background: linear-gradient(135deg, #eaf6f7, #f5f9ff);
    border-radius: 22px;
    display: flex;
    justify-content: center;
    margin: 0;
    min-height: 480px;
    overflow: hidden;
    padding: 22px;
    position: relative;
}

.photo-single-stage img {
    border-radius: 13px;
    box-shadow: 0 16px 34px rgba(15, 44, 71, .18);
    display: block;
    height: auto;
    max-height: min(66vh, 610px);
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.photo-single-nav {
    align-items: center;
    background: rgba(255, 255, 255, .95);
    border: 1px solid #d7e5f0;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(15, 42, 67, .16);
    color: #087f78;
    cursor: pointer;
    display: flex;
    font-size: 34px;
    height: 48px;
    justify-content: center;
    line-height: 1;
    padding: 0 0 4px;
    position: absolute;
    top: calc(50% - 24px);
    transition: transform .18s ease, background .18s ease;
    width: 48px;
}

.photo-single-nav:hover { background: #fff; transform: scale(1.06); }
.photo-single-nav.is-prev { left: 18px; }
.photo-single-nav.is-next { right: 18px; }
.photo-single-nav[hidden] { display: none; }

.photo-single-details {
    border-radius: 18px;
    padding: 24px;
}

.photo-single-eyebrow {
    color: var(--primary, #0d9189);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.photo-single-details h1 { color: #10234b; font-size: 28px; line-height: 1.16; margin: 7px 0 8px; overflow-wrap: anywhere; }
.photo-single-meta { border-bottom: 1px solid #e5edf5; color: #58708e; margin: 0 0 17px; padding-bottom: 17px; }
.photo-single-detail-row { border-bottom: 1px solid #e5edf5; padding: 14px 0; }
.photo-single-detail-row:last-child { border-bottom: 0; }
.photo-single-detail-row strong { color: #254367; font-size: 12px; }
.photo-single-detail-row p { color: #516b8d; line-height: 1.55; margin: 5px 0 0; }
.photo-single-detail-row b { color: #10234b; }

.photo-single-thumbnails {
    align-items: center;
    border-radius: 16px;
    display: flex;
    gap: 10px;
    margin-top: 16px;
    min-height: 94px;
    overflow-x: auto;
    padding: 10px;
    scrollbar-color: #8acfc8 transparent;
}

.photo-single-thumbnails a {
    border: 2px solid transparent;
    border-radius: 11px;
    display: block;
    flex: 0 0 70px;
    height: 70px;
    overflow: hidden;
    position: relative;
}

.photo-single-thumbnails a:hover,
.photo-single-thumbnails a:focus-visible,
.photo-single-thumbnails a.is-active { border-color: var(--primary, #0d9189); outline: 0; }
.photo-single-thumbnails img { display: block; height: 100%; object-fit: cover; width: 100%; }
.photo-single-thumbnails span { background: #10234b; border-radius: 50%; bottom: 3px; color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; position: absolute; right: 3px; text-align: center; width: 17px; }

@media (max-width: 800px) {
    .photo-single-viewer { margin: 10px auto 24px; }
    .photo-single-toolbar { border-radius: 14px; grid-template-columns: 1fr auto; padding: 9px; }
    .photo-single-position { display: none; }
    .photo-single-actions .button { font-size: 12px; min-height: 34px; padding: 0 9px; }
    .photo-single-actions .button svg { height: 14px; width: 14px; }
    .photo-single-layout { grid-template-columns: 1fr; }
    .photo-single-stage { border-radius: 17px; min-height: min(67vh, 460px); padding: 12px; }
    .photo-single-stage img { max-height: 58vh; }
    .photo-single-nav { height: 40px; width: 40px; }
    .photo-single-nav.is-prev { left: 10px; }
    .photo-single-nav.is-next { right: 10px; }
    .photo-single-details { border-radius: 15px; padding: 17px; }
    .photo-single-details h1 { font-size: 22px; }
    .photo-single-thumbnails { margin-top: 12px; min-height: 79px; padding: 7px; }
    .photo-single-thumbnails a { flex-basis: 58px; height: 58px; }
}

@media (max-width: 430px) {
    .photo-single-toolbar { gap: 7px; }
    .photo-single-back { font-size: 12px; }
    .photo-single-back span { font-size: 21px; }
    .photo-single-actions { gap: 5px; }
    .photo-single-actions .button { font-size: 0; min-width: 34px; padding: 0 8px; }
    .photo-single-actions .button svg { margin: 0; }
}

/* Galeria: modal proprio, com composicao inspirada em visualizadores de fotos. */
.gallery-photo-modal {
    --gallery-modal-ink: #10234b;
    --gallery-modal-muted: #64748b;
    --gallery-modal-border: #d8e5f2;
    background: rgba(5, 14, 29, .82);
    padding: clamp(16px, 4vw, 44px);
}

.gallery-photo-modal .photo-album-modal-figure {
    background: #f7fafc;
    border: 1px solid rgba(226, 236, 246, .9);
    border-radius: 20px;
    box-shadow: 0 28px 74px rgba(0, 0, 0, .38);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    height: min(80vh, 720px);
    overflow: hidden;
    place-items: stretch;
    width: min(1120px, 92vw);
}

.gallery-photo-modal .photo-album-modal-figure img {
    background: #0a1426;
    border-radius: 0;
    box-shadow: none;
    height: 100%;
    max-height: none;
    max-width: none;
    min-height: 0;
    object-fit: contain;
    width: 100%;
}

.gallery-photo-modal .photo-album-modal-caption {
    align-items: flex-start;
    background: #fff;
    border: 0;
    border-radius: 0;
    bottom: auto;
    color: var(--gallery-modal-muted);
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
    left: auto;
    max-width: none;
    padding: 28px 24px 24px;
    position: static;
    text-align: left;
    transform: none;
    width: auto;
}

.gallery-photo-modal .photo-album-modal-caption strong {
    color: var(--gallery-modal-ink);
    font-size: 20px;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.gallery-photo-modal .photo-album-modal-caption span {
    border-bottom: 1px solid #e5edf5;
    color: #52708f;
    font-size: 13px;
    line-height: 1.5;
    padding-bottom: 17px;
    width: 100%;
}

.gallery-photo-modal .photo-album-modal-caption em {
    color: #526b88;
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    max-width: none;
    overflow-y: auto;
    width: 100%;
}

.gallery-photo-modal .photo-album-modal-caption-footer {
    align-items: center;
    border-top: 1px solid #e5edf5;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 16px;
    width: 100%;
}

.gallery-photo-modal .photo-album-modal-caption-footer small {
    color: #6b7f98;
    font-size: 12px;
    font-weight: 700;
}

.gallery-photo-modal .photo-album-modal-caption-footer a {
    background: rgba(13, 145, 137, .1);
    border-color: rgba(13, 145, 137, .17);
    border-radius: 9px;
    color: #087f78;
    font-weight: 800;
    min-height: 34px;
    padding: 6px 11px;
}

.gallery-photo-modal .photo-album-modal-close,
.gallery-photo-modal .photo-album-modal-nav {
    background: rgba(255, 255, 255, .96);
    border-color: rgba(215, 229, 240, .95);
    color: #0a837c;
}

.gallery-photo-modal .photo-album-modal-close:hover,
.gallery-photo-modal .photo-album-modal-nav:hover {
    background: #fff;
    color: #066c66;
}

@media (max-width: 760px) {
    .gallery-photo-modal {
        padding: 10px;
    }

    .gallery-photo-modal .photo-album-modal-figure {
        border-radius: 16px;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        height: min(88vh, 690px);
        width: min(100%, 520px);
    }

    .gallery-photo-modal .photo-album-modal-figure img {
        min-height: 0;
    }

    .gallery-photo-modal .photo-album-modal-caption {
        gap: 5px;
        max-height: 31vh;
        padding: 13px 14px 12px;
    }

    .gallery-photo-modal .photo-album-modal-caption strong {
        font-size: 16px;
    }

    .gallery-photo-modal .photo-album-modal-caption span {
        font-size: 12px;
        padding-bottom: 7px;
    }

    .gallery-photo-modal .photo-album-modal-caption em {
        font-size: 12px;
        line-height: 1.4;
    }

    .gallery-photo-modal .photo-album-modal-caption-footer {
        padding-top: 9px;
    }

    .gallery-photo-modal .photo-album-modal-caption-footer a {
        min-height: 30px;
        padding: 4px 8px;
    }

    .gallery-photo-modal .photo-album-modal-nav {
        height: 42px;
        width: 42px;
    }

    .gallery-photo-modal .photo-album-modal-nav.is-prev { left: 14px; }
    .gallery-photo-modal .photo-album-modal-nav.is-next { right: 14px; }
}

/* Saude e prontuario: listagem propria, sem os cabecalhos da tabela generica. */
.health-page-head {
    align-items: center;
    margin-bottom: 16px;
}

.health-create-button {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    white-space: nowrap;
}

.health-create-icon,
.health-search-icon,
.health-record-edit-icon {
    height: 17px;
    width: 17px;
}

.health-filter-panel,
.health-records-card {
    background: rgba(255, 255, 255, .94);
    border: 1px solid #dce8f3;
    border-radius: 16px;
    box-shadow: 0 12px 26px rgba(34, 53, 84, .05);
}

.health-filter-panel {
    margin-bottom: 16px;
    padding: 14px 16px;
}

.health-filter-primary {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 1.35fr) minmax(145px, .8fr) minmax(145px, .8fr);
}

.health-filter-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.health-filter-field > span {
    color: #526583;
    font-size: 12px;
    font-weight: 800;
}

.health-filter-field input,
.health-filter-field select,
.health-filter-search input {
    box-sizing: border-box;
    height: 40px;
    margin: 0;
    min-width: 0;
    width: 100%;
}

.health-filter-search {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 40px;
    margin-top: 10px;
    max-width: 680px;
}

.health-filter-search .sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.health-search-submit {
    align-items: center;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    min-height: 40px;
    padding: 0;
    width: 40px;
}

.health-records-card {
    padding: 16px;
}

.health-records-header {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.health-records-header h2 {
    color: var(--ink);
    font-size: 19px;
    margin: 0;
}

.health-records-header p {
    color: #667895;
    font-size: 13px;
    margin: 3px 0 0;
}

.health-record-list {
    border-top: 1px solid #e7eef5;
}

.health-record {
    align-items: center;
    border-bottom: 1px solid #e7eef5;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 74px;
    padding: 12px 4px;
}

.health-record-main {
    color: inherit;
    display: grid;
    gap: 5px;
    min-width: 0;
    text-decoration: none;
}

.health-record-main:hover strong {
    color: var(--primary-dark);
}

.health-record-meta {
    align-items: center;
    color: #647592;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 7px;
}

.health-record-meta time {
    color: #354965;
    font-weight: 800;
}

.health-record-meta span::before {
    color: #9ba9ba;
    content: "|";
    margin-right: 7px;
}

.health-record-main strong {
    color: #13294e;
    font-size: 15px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-record-edit {
    align-items: center;
    background: #f2fbf9;
    border: 1px solid #cceee8;
    box-shadow: none;
    color: var(--primary-dark);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    min-height: 34px;
    padding: 0;
    width: 34px;
}

.health-pagination {
    align-items: center;
    display: flex;
    gap: 4px;
}

.health-pagination a,
.health-pagination span {
    align-items: center;
    border-radius: 8px;
    color: #536783;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    justify-content: center;
    min-height: 30px;
    padding: 0 9px;
    text-decoration: none;
}

.health-pagination a:hover,
.health-pagination .is-current {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.health-pagination-bottom {
    justify-content: center;
    margin-top: 14px;
}

@media (max-width: 760px) {
    .health-page-head {
        margin-bottom: 12px;
    }

    .health-page-head h1 {
        font-size: 24px;
    }

    .health-page-head p {
        display: none;
    }

    .health-create-button {
        min-height: 36px;
        padding: 7px 10px;
    }

    .health-create-button span {
        font-size: 12px;
    }

    .health-create-icon {
        display: none;
    }

    .health-filter-panel,
    .health-records-card {
        border-radius: 14px;
    }

    .health-filter-panel {
        padding: 12px;
    }

    .health-filter-primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .health-filter-doctor {
        grid-column: 1 / -1;
    }

    .health-filter-field > span {
        font-size: 11px;
    }

    .health-filter-search {
        max-width: none;
    }

    .health-records-card {
        padding: 12px;
    }

    .health-records-header {
        margin-bottom: 10px;
    }

    .health-records-header h2 {
        font-size: 17px;
    }

    .health-pagination-top {
        display: none;
    }

    .health-record-list {
        border-top: 0;
        display: grid;
        gap: 9px;
    }

    .health-record {
        background: #fff;
        border: 1px solid #dce8f3;
        border-radius: 12px;
        min-height: 0;
        padding: 11px;
    }

    .health-record-main {
        gap: 4px;
    }

    .health-record-main strong {
        display: -webkit-box;
        font-size: 14px;
        overflow: hidden;
        text-overflow: clip;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .health-record-meta {
        font-size: 11px;
        gap: 5px;
    }

.health-record-meta span::before {
        margin-right: 5px;
    }
}

/* Dashboard: resumos compactos no padrao das listas do Diario e dos Marcos. */
.dashboard-feed-card {
    padding: 18px;
}

.dashboard-feed-card .section-head-inline {
    margin-bottom: 8px;
}

.dashboard-feed-card .section-head-inline h2 {
    font-size: 18px;
}

.dashboard-feed-list {
    display: grid;
}

.dashboard-diary-row,
.dashboard-milestone-row {
    border-bottom: 1px solid var(--line);
    color: inherit;
    min-width: 0;
    padding: 11px 0;
    text-decoration: none;
}

.dashboard-diary-row:last-child,
.dashboard-milestone-row:last-child {
    border-bottom: 0;
}

.dashboard-diary-row {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 54px;
}

.dashboard-diary-row.no-photo {
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-diary-content,
.dashboard-milestone-content {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.dashboard-diary-content > small,
.dashboard-milestone-content > small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
}

.dashboard-diary-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.dashboard-diary-meta time {
    background: #e3fbf2;
    color: #078070;
    font-size: 10px;
    font-weight: 850;
    padding: 2px 4px;
}

.dashboard-diary-meta .dashboard-diary-tags {
    margin-top: 0;
}

.dashboard-diary-content > strong,
.dashboard-milestone-title strong {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.25;
}

.dashboard-diary-tags,
.dashboard-milestone-tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.dashboard-diary-tags .category-chip,
.dashboard-diary-tags .mood-chip,
.dashboard-milestone-tags .category-pill,
.dashboard-milestone-tags .status-pill {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    font-size: 10px;
    font-style: normal;
    font-weight: 850;
    justify-content: center;
    line-height: 1;
    min-height: 24px;
    padding: 0 9px;
    white-space: nowrap;
}

.dashboard-diary-photo {
    border: 1px solid #e0e9f0;
    border-radius: 12px;
    height: 54px;
    object-fit: cover;
    width: 54px;
}

.dashboard-milestone-row {
    align-items: start;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 30px;
}

.dashboard-milestone-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dashboard-milestone-title em {
    background: #eef3f8;
    border-radius: 999px;
    color: #64748b;
    font-size: 10px;
    font-style: normal;
    font-weight: 850;
    padding: 3px 7px;
}

.dashboard-milestone-timing {
    color: var(--primary-dark);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.25;
}

.dashboard-milestone-timing.after { color: #966600; }
.dashboard-milestone-timing.early { color: #087a57; }

.dashboard-milestone-status {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.dashboard-milestone-status.done { background: #dff8ef; color: #15916f; }
.dashboard-milestone-status.progress { background: #efe9ff; color: #7a5bd8; }
.dashboard-milestone-status.pending { background: #eef3f8; color: #64748b; }
.dashboard-milestone-status .mini-svg { height: 14px; width: 14px; }

@media (max-width: 900px) {
    /* A seta pertence ao menu lateral de desktop; separadores nao fazem sentido no menu de duas colunas. */
    .sidebar .sidebar-collapse-toggle,
    .sidebar .nav-divider {
        display: none !important;
    }
}

@media (max-width: 560px) {
    .dashboard-feed-card { padding: 14px; }
    .dashboard-feed-card .section-head-inline h2 { font-size: 17px; }
    .dashboard-diary-row { gap: 8px; grid-template-columns: minmax(0, 1fr) 48px; padding: 10px 0; }
    .dashboard-diary-row.no-photo { grid-template-columns: minmax(0, 1fr); }
    .dashboard-diary-photo { height: 48px; width: 48px; }
    .dashboard-diary-content > small { font-size: 10px; }
    .dashboard-diary-content > strong,
    .dashboard-milestone-title strong { font-size: 13px; }
    .dashboard-diary-tags .category-chip,
    .dashboard-diary-tags .mood-chip,
    .dashboard-milestone-tags .category-pill,
    .dashboard-milestone-tags .status-pill { font-size: 9px; min-height: 22px; padding: 0 8px; }
    .dashboard-milestone-row { gap: 8px; padding: 10px 0; }
}

/* Ajustes finais: Diário, Dashboard e preferências pessoais. */
.diary-quick-inline {
    align-content: stretch;
    background: #fff;
    border: 1px solid #dcebe7;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(24, 74, 92, .05);
    display: grid;
    gap: 9px;
    grid-template-rows: auto 1fr;
    min-height: 104px;
    padding: 12px;
}

.diary-quick-head {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.diary-quick-head > span {
    align-items: center;
    background: #e6f8f3;
    border-radius: 999px;
    color: #078d82;
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.diary-quick-head .quick-heading-icon {
    height: 15px;
    width: 15px;
}

.diary-quick-head div {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.diary-quick-head strong {
    color: #092452;
    font-size: 13px;
    line-height: 1.15;
}

.diary-quick-head small {
    color: #61718d;
    font-size: 10px;
    line-height: 1.2;
}

.diary-quick-inline .diary-quick-fields {
    align-items: stretch;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    margin: 0;
}

.diary-quick-inline .diary-quick-fields .quick-pick {
    background: #f8fcfb;
    border: 1px solid #dcebe7;
    border-radius: 10px;
    display: grid;
    gap: 1px;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 5px 7px;
}

.diary-quick-inline .diary-quick-fields .quick-pick span {
    color: #60708b;
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
}

.diary-quick-inline .diary-quick-fields .quick-pick select {
    background: transparent;
    border: 0;
    color: #15335d;
    font-size: 11px;
    font-weight: 800;
    grid-column: auto;
    min-height: 20px;
    padding: 0 16px 0 0;
}

.diary-quick-inline .diary-quick-fields > button {
    align-self: stretch;
    font-size: 11px;
    margin: 0;
    min-height: 0;
    min-width: 82px;
    padding: 0 10px;
}

.dashboard-grid.dashboard-feed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-vaccine-list {
    background: #fff;
    display: grid;
}

.dashboard-vaccine-card,
.dashboard-vaccine-row {
    background: #fff;
}

.dashboard-vaccine-row {
    border-bottom: 1px solid var(--line);
    color: inherit;
    display: block;
    margin: 0;
    padding: 11px 0;
    text-decoration: none;
}

.dashboard-vaccine-row:last-child {
    border-bottom: 0;
}

.dashboard-vaccine-row:hover strong,
.dashboard-vaccine-row:focus-visible strong {
    color: var(--primary-dark);
}

.dashboard-vaccine-content {
    display: grid;
    gap: 3px;
}

.dashboard-vaccine-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 7px;
    min-width: 0;
}

.dashboard-vaccine-line time {
    background: #e3fbf2;
    color: #078070;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 850;
    padding: 2px 4px;
}

.dashboard-vaccine-row.status-overdue .dashboard-vaccine-line time {
    background: #ffe7e9;
    color: #ce3454;
}

.dashboard-vaccine-row.status-future,
.dashboard-vaccine-row.status-done,
.dashboard-vaccine-row.status-special {
    background: #fff;
}

.dashboard-vaccine-row.status-soon {
    background: #eff8ff;
}

.dashboard-vaccine-row.status-overdue {
    background: #fff1f3;
}

.dashboard-vaccine-line strong {
    color: var(--ink);
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1.25;
}

.dashboard-vaccine-line em {
    color: var(--muted);
    flex: 0 1 auto;
    font-size: 11px;
    font-style: normal;
    line-height: 1.2;
}

.dashboard-growth-latest {
    align-items: center;
    border-top: 1px solid #e2ecea;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 10px;
    padding-top: 10px;
}

.dashboard-growth-latest span {
    color: #60708b;
    font-size: 11px;
    font-weight: 800;
}

.dashboard-growth-latest strong {
    color: #15335d;
    font-size: 13px;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .dashboard-chart-card .chart-actions select {
        max-width: 108px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Resumo da criança: faixa única, leve e contínua no Dashboard. */
.dashboard-child-ticker {
    background: rgba(255, 255, 255, .82);
    border-bottom: 1px solid #dcebe9;
    border-top: 1px solid #edf4f5;
    margin: 0 0 14px;
    overflow: hidden;
    padding: 9px 0;
    position: relative;
}

.dashboard-child-ticker::before,
.dashboard-child-ticker::after {
    content: '';
    inset-block: 0;
    pointer-events: none;
    position: absolute;
    width: 24px;
    z-index: 1;
}

.dashboard-child-ticker::before {
    background: linear-gradient(90deg, #f7fafc, transparent);
    left: 0;
}

.dashboard-child-ticker::after {
    background: linear-gradient(270deg, #f7fafc, transparent);
    right: 0;
}

.dashboard-child-ticker-track {
    display: flex;
    width: max-content;
    animation: dashboard-child-ticker-scroll 28s linear infinite;
    will-change: transform;
}

.dashboard-child-ticker-content {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 18px;
    padding-right: 42px;
}

.dashboard-child-ticker-item {
    align-items: baseline;
    background: transparent;
    display: inline-flex;
    font-size: 12px;
    gap: 4px;
    letter-spacing: .01em;
    white-space: nowrap;
}

.dashboard-child-ticker-item > span {
    color: #65738a;
    font-weight: 650;
}

.dashboard-child-ticker-item strong {
    color: currentColor;
    font-size: inherit;
    font-weight: 850;
}

.dashboard-child-ticker-item::after {
    color: #c5d5d9;
    content: '•';
    font-size: 9px;
    margin-left: 14px;
}

.dashboard-child-ticker-item:last-child::after {
    content: none;
}

.dashboard-child-ticker-item.tone-teal { color: #009a8f; }
.dashboard-child-ticker-item.tone-blue { color: #2780dc; }
.dashboard-child-ticker-item.tone-mint { color: #0b9e78; }
.dashboard-child-ticker-item.tone-lilac { color: #7a61c9; }
.dashboard-child-ticker-item.tone-gold { color: #b67900; }

.dashboard-child-ticker:hover .dashboard-child-ticker-track,
.dashboard-child-ticker:focus-within .dashboard-child-ticker-track {
    animation-play-state: paused;
}

@keyframes dashboard-child-ticker-scroll {
    to { transform: translateX(-50%); }
}

@media (max-width: 560px) {
    .dashboard-child-ticker {
        margin-bottom: 10px;
        padding: 8px 0;
    }

    .dashboard-child-ticker-item {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-child-ticker {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .dashboard-child-ticker-track {
        animation: none;
    }
}

/* Navegação compacta: drawer modal de uma coluna para telefones. */
.mobile-sidebar-title,
.mobile-sidebar-close,
.mobile-menu-scrim,
.nav-section-title {
    display: none;
}

@media (max-width: 900px) {
    body.menu-open {
        overflow: hidden;
    }

    .mobile-topbar {
        position: sticky;
        z-index: 90;
    }

    .mobile-menu-icon {
        align-items: center;
        background: transparent !important;
        box-shadow: none !important;
        display: inline-flex;
        justify-content: center;
        min-height: 38px;
        padding: 0;
        width: 38px;
    }

    .mobile-menu-icon::before {
        content: '☰';
        font-size: 23px;
        font-weight: 800;
        line-height: 1;
    }

    body.menu-open .mobile-menu-icon::before {
        content: '×';
        font-size: 28px;
        font-weight: 500;
    }

    .mobile-menu-scrim {
        background: rgba(10, 27, 53, .34);
        border: 0;
        bottom: 0;
        cursor: default;
        display: block;
        left: 0;
        opacity: 0;
        padding: 0;
        pointer-events: none;
        position: fixed;
        right: 0;
        top: 58px;
        transition: opacity .22s ease, visibility .22s ease;
        visibility: hidden;
        width: 100%;
        z-index: 75;
    }

    body.menu-open .mobile-menu-scrim {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    .sidebar,
    body.sidebar-collapsed .sidebar {
        background: #fff;
        border: 0;
        border-radius: 0 24px 24px 0;
        bottom: 0 !important;
        box-shadow: 18px 0 40px rgba(17, 35, 67, .20);
        display: flex !important;
        gap: 0;
        left: 0;
        opacity: 0;
        overflow: hidden;
        padding: 14px 12px 12px;
        pointer-events: none;
        position: fixed;
        right: auto !important;
        top: 58px !important;
        transform: translateX(calc(-100% - 18px));
        transition: transform .24s ease, opacity .2s ease, visibility .24s ease;
        visibility: hidden;
        width: min(344px, calc(100vw - 28px)) !important;
        z-index: 80;
    }

    body.menu-open .sidebar {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        visibility: visible;
    }

    .sidebar .sidebar-head {
        align-items: center;
        border-bottom: 1px solid #e4ecef;
        display: flex;
        flex: 0 0 auto;
        justify-content: space-between;
        margin: 0;
        min-height: 42px;
        padding: 0 4px 10px;
    }

    .sidebar .sidebar-head .brand,
    .sidebar .sidebar-collapse-toggle {
        display: none !important;
    }

    .mobile-sidebar-title {
        color: #0b2855;
        display: block;
        font-size: 16px;
        font-weight: 850;
    }

    .mobile-sidebar-close {
        align-items: center;
        background: #f2f7f8 !important;
        border: 1px solid #dcebea;
        border-radius: 10px;
        box-shadow: none !important;
        color: #507084;
        display: inline-flex;
        font-size: 24px;
        font-weight: 400;
        height: 34px;
        justify-content: center;
        min-height: 34px;
        padding: 0 0 2px;
        width: 34px;
    }

    .sidebar .app-nav {
        flex: 1 1 auto;
        gap: 13px;
        margin: 0 -5px;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 12px 5px 8px;
        scrollbar-width: thin;
    }

    .sidebar .nav-section {
        display: grid;
        gap: 3px;
        grid-template-columns: 1fr !important;
    }

    .sidebar .nav-section-title {
        color: #77869b;
        display: block;
        font-size: 10px;
        font-weight: 850;
        letter-spacing: .08em;
        margin: 2px 10px 6px;
        text-transform: uppercase;
    }

    .sidebar .nav-divider {
        display: none !important;
    }

    .sidebar nav a,
    body.sidebar-collapsed .sidebar nav a {
        align-items: center;
        border-radius: 12px;
        color: #263a5d;
        display: flex !important;
        font-size: 14px;
        font-weight: 780;
        gap: 12px;
        justify-content: flex-start;
        min-height: 48px;
        padding: 10px 12px;
    }

    .sidebar nav a span,
    body.sidebar-collapsed .sidebar nav a span {
        display: inline !important;
    }

    .sidebar nav a .nav-svg {
        background: transparent;
        border: 0;
        border-radius: 0;
        color: #4c6688;
        flex: 0 0 22px;
        height: 22px;
        padding: 0;
        width: 22px;
    }

    .sidebar nav a:hover,
    .sidebar nav a.is-active {
        background: #e4f7f2;
        color: #087d72;
    }

    .sidebar nav a.is-active .nav-svg {
        background: transparent;
        border-color: transparent;
        color: #009c8e;
    }

    .sidebar .sidebar-account,
    body.sidebar-collapsed .sidebar-account {
        border-top: 1px solid #e4ecef;
        flex: 0 0 auto;
        margin: 0;
        padding: 10px 4px 0;
        position: static;
        width: 100%;
    }

    .sidebar .sidebar-account-toggle {
        border-radius: 12px;
        min-height: 52px;
        padding: 8px 10px;
    }

    .sidebar .sidebar-account-menu {
        gap: 4px;
        grid-template-columns: 1fr;
    }

    .sidebar .sidebar-account-menu form {
        display: block !important;
    }

    .sidebar .sidebar-garden {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-scrim,
    .sidebar {
        transition: none !important;
    }
}

/* Crescimento: medidas nunca extrapolam a largura do cartão em telas estreitas. */
@media (max-width: 560px) {
    .growth-records-table .growth-measure-list {
        gap: 7px 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .growth-records-table .growth-measure {
        min-width: 0;
        padding: 5px 6px;
    }

    .growth-records-table .growth-measure:nth-child(3) {
        grid-column: 1 / -1;
    }

    .growth-records-table .growth-measure small,
    .growth-records-table .growth-measure strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.profile-data-form,
.profile-preferences-form {
    margin-bottom: 16px;
}

.profile-section-intro h2,
.sidebar-shortcuts-head h3 {
    color: #092452;
    font-size: 18px;
    margin: 0;
}

.profile-section-intro p,
.sidebar-shortcuts-head p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    margin: 4px 0 0;
}

.profile-preferences-form {
    display: grid;
    gap: 20px;
}

.profile-preferences-form .theme-picker {
    margin: 0;
}

.sidebar-shortcuts-settings {
    border-top: 1px solid #e3eeeb;
    display: grid;
    gap: 12px;
    padding-top: 18px;
}

.sidebar-shortcuts-head {
    align-items: start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.sidebar-shortcuts-count {
    background: #e7f8f3;
    border-radius: 999px;
    color: #087e72;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    padding: 5px 8px;
}

.sidebar-shortcuts-list,
.sidebar-shortcuts-available ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-shortcuts-list {
    display: grid;
    gap: 7px;
}

.sidebar-shortcuts-list li,
.sidebar-shortcuts-available li {
    align-items: center;
    background: #fbfefd;
    border: 1px solid #dcebe7;
    border-radius: 12px;
    display: grid;
    gap: 8px;
    grid-template-columns: 28px 20px minmax(0, 1fr) auto;
    min-height: 48px;
    padding: 7px 8px;
}

.sidebar-shortcuts-list li {
    background: #f5fcfa;
}

.shortcut-position {
    align-items: center;
    background: #dff5ee;
    border-radius: 999px;
    color: #087e72;
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.shortcut-icon {
    color: #55708b;
    height: 18px;
    width: 18px;
}

.sidebar-shortcuts-list strong,
.sidebar-shortcuts-available strong {
    color: #17335c;
    font-size: 13px;
    min-width: 0;
}

.shortcut-actions {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

.shortcut-actions[aria-hidden="true"] {
    display: none;
}

.shortcut-actions button,
.shortcut-add {
    align-items: center;
    background: #fff;
    border: 1px solid #d9e9e5;
    border-radius: 8px;
    box-shadow: none;
    color: #087e72;
    display: inline-flex;
    font-size: 14px;
    font-weight: 850;
    height: 28px;
    justify-content: center;
    min-height: 28px;
    padding: 0;
    width: 28px;
}

.shortcut-actions button:hover,
.shortcut-actions button:focus-visible,
.shortcut-add:hover,
.shortcut-add:focus-visible {
    background: #e8f8f3;
    border-color: #a7dfd0;
}

.shortcut-actions button:disabled,
.shortcut-add:disabled {
    cursor: not-allowed;
    opacity: .4;
}

.shortcut-remove {
    color: #df4964 !important;
}

.shortcut-add {
    font-size: 11px;
    padding: 0 9px;
    width: auto;
}

.sidebar-shortcuts-list .shortcut-add,
.sidebar-shortcuts-available .shortcut-position {
    display: none;
}

.sidebar-shortcuts-available {
    display: grid;
    gap: 7px;
}

.sidebar-shortcuts-available > span {
    color: #5f718e;
    font-size: 11px;
    font-weight: 850;
}

.sidebar-shortcuts-available ul {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sidebar-shortcuts-available li {
    grid-template-columns: 20px minmax(0, 1fr) auto;
}

@media (max-width: 900px) {
    .dashboard-grid.dashboard-feed-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .diary-quick-inline {
        min-height: 0;
        padding: 10px;
    }

    .diary-quick-head strong {
        font-size: 12px;
    }

    .diary-quick-inline .diary-quick-fields > button {
        min-width: 74px;
        padding: 0 8px;
    }

    .profile-preferences-form {
        gap: 16px;
    }

    .profile-section-intro h2,
    .sidebar-shortcuts-head h3 {
        font-size: 17px;
    }

    .sidebar-shortcuts-list li {
        gap: 6px;
        grid-template-columns: 26px 18px minmax(0, 1fr) auto;
        padding: 6px;
    }

    .shortcut-position {
        height: 26px;
        width: 26px;
    }

    .shortcut-actions {
        gap: 3px;
    }

    .shortcut-actions button {
        height: 26px;
        min-height: 26px;
        width: 26px;
    }

    .sidebar-shortcuts-list strong,
    .sidebar-shortcuts-available strong {
        font-size: 12px;
    }

    .sidebar-shortcuts-available ul {
        grid-template-columns: 1fr;
    }

    /* Crescimento: o bloco de medidas fica logo abaixo da idade e das ações. */
    .growth-records-table tr {
        gap: 4px 12px;
        padding: 8px 8px 7px;
    }
}

/* Diário afetivo: a ação principal fica compacta junto ao título do lançamento. */
.diary-quick-head .diary-quick-submit {
    align-items: center;
    background: #e6f8f3;
    border: 1px solid #cfeee6;
    border-radius: 10px;
    color: #078d82;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    line-height: 1;
    margin-left: auto;
    min-height: 32px;
    padding: 0;
    width: 32px;
}

.diary-quick-submit-icon {
    height: 17px;
    stroke-width: 2.35;
    width: 17px;
}

/* Ações: um único padrão para adicionar, editar, visualizar, baixar e excluir.
   As ações usuais usam a paleta escolhida; a exclusão permanece vermelha. */
.action-icon-control,
.icon-action:is([aria-label^="Editar"], [aria-label^="Visualizar"], [aria-label^="Baixar"], [aria-label^="Adicionar"], [aria-label^="Registrar"]),
.icon-button:is([aria-label^="Editar"], [aria-label^="Visualizar"], [aria-label^="Baixar"], [aria-label^="Adicionar"], [aria-label^="Registrar"]),
.doctor-record-edit[aria-label^="Editar"] {
    align-items: center;
    background: color-mix(in srgb, var(--primary) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, #fff);
    border-radius: 999px;
    box-shadow: 0 2px 7px color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--primary);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    min-height: 32px;
    min-width: 32px;
    padding: 0;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
    width: 32px;
}

.action-icon-control:hover,
.action-icon-control:focus-visible,
.icon-action:is([aria-label^="Editar"], [aria-label^="Visualizar"], [aria-label^="Baixar"], [aria-label^="Adicionar"], [aria-label^="Registrar"]):hover,
.icon-action:is([aria-label^="Editar"], [aria-label^="Visualizar"], [aria-label^="Baixar"], [aria-label^="Adicionar"], [aria-label^="Registrar"]):focus-visible,
.icon-button:is([aria-label^="Editar"], [aria-label^="Visualizar"], [aria-label^="Baixar"], [aria-label^="Adicionar"], [aria-label^="Registrar"]):hover,
.icon-button:is([aria-label^="Editar"], [aria-label^="Visualizar"], [aria-label^="Baixar"], [aria-label^="Adicionar"], [aria-label^="Registrar"]):focus-visible,
.doctor-record-edit[aria-label^="Editar"]:hover,
.doctor-record-edit[aria-label^="Editar"]:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 5px 12px color-mix(in srgb, var(--primary) 23%, transparent);
    color: #fff;
    outline: 0;
    transform: translateY(-1px);
}

.icon-action:is(.danger, [aria-label^="Excluir"]),
.icon-button:is(.booklet-delete-button, [aria-label^="Excluir"]) {
    background: #fff6f6;
    border-color: #ffd8dc;
    box-shadow: 0 2px 7px rgba(201, 48, 71, .08);
    color: #d53d56;
}

.icon-action:is(.danger, [aria-label^="Excluir"]):hover,
.icon-action:is(.danger, [aria-label^="Excluir"]):focus-visible,
.icon-button:is(.booklet-delete-button, [aria-label^="Excluir"]):hover,
.icon-button:is(.booklet-delete-button, [aria-label^="Excluir"]):focus-visible {
    background: #d53d56;
    border-color: #d53d56;
    box-shadow: 0 5px 12px rgba(201, 48, 71, .22);
    color: #fff;
    outline: 0;
}

.action-icon-control svg,
.icon-action:is([aria-label^="Editar"], [aria-label^="Visualizar"], [aria-label^="Baixar"], [aria-label^="Adicionar"], [aria-label^="Registrar"], .danger) svg,
.icon-button:is([aria-label^="Editar"], [aria-label^="Visualizar"], [aria-label^="Baixar"], [aria-label^="Adicionar"], [aria-label^="Registrar"], .booklet-delete-button, [aria-label^="Excluir"]) svg {
    height: 15px;
    stroke-width: 2.15;
    width: 15px;
}

.diary-quick-head .diary-quick-submit.action-icon-control {
    background: color-mix(in srgb, var(--primary) 10%, #fff);
    border-color: color-mix(in srgb, var(--primary) 20%, #fff);
    color: var(--primary);
}

.diary-quick-head .diary-quick-submit.action-icon-control:hover,
.diary-quick-head .diary-quick-submit.action-icon-control:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    outline: none;
}

/* Diário afetivo: em desktop intermediário, o formulário compacto não pode
   conservar uma segunda linha vazia. Os três indicadores continuam legíveis
   e a ação fica na mesma faixa dos seus dois campos. */
@media (min-width: 901px) and (max-width: 1180px) {
    .diary-top-strip {
        align-items: stretch;
        grid-template-columns: minmax(128px, .52fr) minmax(0, 1fr) minmax(188px, .82fr);
    }

    .diary-top-cloud .mood-cloud {
        align-content: center;
        gap: 4px 10px;
        justify-content: flex-start;
        min-height: 0;
        padding: 6px 0 0;
    }

    .diary-top-cloud .mood-cloud span {
        font-size: clamp(12px, calc(var(--mood-size) * .82), 20px);
        line-height: 1;
        transform: none !important;
    }

    .diary-quick-inline {
        align-items: center;
        align-content: center;
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(226px, .72fr);
        grid-template-rows: auto;
        min-height: 74px;
        padding: 10px 12px;
    }

    .diary-quick-inline .diary-quick-fields {
        align-self: center;
        grid-column: 2;
        grid-row: 1;
    }
}

/* Menu móvel: a gaveta reaproveita o estado recolhido do desktop sem herdar
   o cabeçalho vertical daquele estado. */
@media (max-width: 900px) {
    .mobile-menu-scrim {
        top: 66px !important;
    }

    .sidebar,
    body.sidebar-collapsed .sidebar {
        align-items: stretch !important;
        bottom: 0 !important;
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        padding: 10px !important;
        top: 66px !important;
        width: min(320px, calc(100vw - 40px)) !important;
    }

    .sidebar .sidebar-head,
    body.sidebar-collapsed .sidebar .sidebar-head {
        align-items: center !important;
        display: grid !important;
        flex: 0 0 42px !important;
        flex-direction: row !important;
        gap: 8px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        justify-content: initial !important;
        margin: 0 !important;
        min-height: 42px !important;
        padding: 0 4px 8px !important;
    }

    .sidebar .sidebar-head .brand,
    body.sidebar-collapsed .sidebar .sidebar-head .brand,
    .sidebar .sidebar-collapse-toggle,
    body.sidebar-collapsed .sidebar .sidebar-collapse-toggle {
        display: none !important;
    }

    .sidebar .mobile-sidebar-title,
    body.sidebar-collapsed .sidebar .mobile-sidebar-title {
        display: block !important;
        margin: 0 !important;
    }

    .sidebar .mobile-sidebar-close {
        align-self: center;
        display: inline-flex !important;
        margin: 0 !important;
    }

    .sidebar .app-nav,
    body.sidebar-collapsed .sidebar .app-nav {
        align-content: start !important;
        display: grid !important;
        flex: 1 1 auto !important;
        gap: 5px !important;
        grid-auto-rows: min-content !important;
        grid-template-columns: 1fr !important;
        margin: 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 8px 2px !important;
    }

    .sidebar .nav-section,
    body.sidebar-collapsed .sidebar .nav-section {
        align-content: start;
        display: grid !important;
        gap: 2px !important;
        grid-template-columns: 1fr !important;
    }

    .sidebar .nav-section-title,
    body.sidebar-collapsed .sidebar .nav-section-title,
    .sidebar .nav-divider {
        display: none !important;
    }

    .sidebar nav a,
    body.sidebar-collapsed .sidebar nav a {
        font-size: 12px !important;
        min-height: 34px !important;
        padding: 4px 8px !important;
    }

    .sidebar .sidebar-account,
    body.sidebar-collapsed .sidebar .sidebar-account {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 8px 3px 0 !important;
        position: static !important;
        width: 100% !important;
    }

    .sidebar .sidebar-garden {
        display: none !important;
    }
}

/* Diário afetivo: filtros e registros compactos, sem área vazia no celular. */
.diary-list-head > .diary-pagination-top {
    margin: 0 0 0 auto;
}

@media (max-width: 560px) {
    .diary-filter-inline {
        align-items: center;
        gap: 6px;
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) 32px;
    }

    .diary-filter-inline select[name="period"] {
        grid-column: 1;
        grid-row: 1;
    }

    .diary-filter-inline select[name="category"] {
        grid-column: 2 / -1;
        grid-row: 1;
    }

    .diary-filter-inline .diary-filter-mood {
        grid-column: 1;
        grid-row: 2;
    }

    .diary-filter-inline .diary-filter-search {
        grid-column: 2;
        grid-row: 2;
    }

    .diary-filter-inline .diary-filter-submit {
        grid-column: 3;
        grid-row: 2;
        height: 32px;
        min-height: 32px;
        min-width: 32px;
        padding: 0;
        width: 32px;
    }

    .diary-filter-inline .diary-filter-submit .mini-svg {
        height: 15px;
        width: 15px;
    }

    .diary-list-head {
        align-items: center;
        gap: 8px;
        margin: 7px 0;
    }

    .diary-list-head > .diary-pagination-top {
        align-items: center;
        flex: 0 0 auto;
        margin: 0 0 0 auto;
    }

    .diary-list-head > .diary-pagination-top .diary-pagination-summary {
        display: none;
    }

    .diary-list-head > .diary-pagination-top .diary-pagination-links {
        gap: 4px;
    }

    .diary-entry-row {
        min-height: 0;
        padding: 9px 0;
        row-gap: 4px;
    }

    .diary-row-tags {
        gap: 6px;
        overflow: visible;
    }

    .diary-row-tags .category-chip,
    .diary-row-tags .mood-chip {
        align-items: center;
        box-sizing: border-box;
        display: inline-flex !important;
        justify-content: center;
        min-height: 22px;
        min-width: 64px;
        padding: 0 8px;
    }

    .diary-row-actions {
        gap: 8px;
        margin-top: 0 !important;
    }

    .diary-row-actions .icon-action {
        height: 28px;
        min-height: 28px;
        min-width: 28px;
        width: 28px;
    }

    .diary-row-actions .icon-action .mini-svg {
        height: 13px;
        width: 13px;
    }
}

/* Menu móvel: gaveta vertical única, compacta e rolável. */
@media (max-width: 900px) {
    .mobile-menu-scrim { top: 66px; }

    .sidebar,
    body.sidebar-collapsed .sidebar {
        border-radius: 0 18px 18px 0;
        padding: 10px 10px 9px;
        top: 66px !important;
        width: min(320px, 80vw) !important;
    }

    .sidebar .sidebar-head {
        min-height: 38px;
        padding: 0 3px 8px;
    }

    .mobile-sidebar-title {
        font-size: 14px;
        letter-spacing: .01em;
    }

    .mobile-sidebar-close {
        border-radius: 9px;
        font-size: 21px;
        height: 30px;
        min-height: 30px;
        width: 30px;
    }

    .sidebar .app-nav {
        align-content: start;
        display: grid;
        gap: 0;
        grid-auto-rows: min-content;
        grid-template-columns: 1fr !important;
        margin: 0 -3px;
        padding: 7px 3px;
    }

    .sidebar .nav-section {
        align-content: start;
        gap: 0;
    }
    .sidebar .nav-section-title { display: none; }

    /* Delimita os atalhos escolhidos sem desperdiçar a altura da gaveta. */
    .sidebar .nav-section-featured + .nav-divider + .nav-section-secondary {
        border-top: 1px solid #e4ecef;
        margin-top: 5px;
        padding-top: 5px;
    }

    .sidebar nav a,
    body.sidebar-collapsed .sidebar nav a {
        border-radius: 10px;
        font-size: 12px;
        gap: 9px;
        min-height: 32px;
        padding: 2px 8px;
    }

    .sidebar nav a .nav-svg {
        flex-basis: 17px;
        height: 17px;
        width: 17px;
    }

    .sidebar .sidebar-account,
    body.sidebar-collapsed .sidebar-account { padding: 8px 3px 0; }

    .sidebar .sidebar-account-toggle {
        background: #fff;
        border-color: #dcebea;
        border-radius: 11px;
        min-height: 40px;
        padding: 6px 8px;
    }

    .sidebar .sidebar-account.is-open .sidebar-account-toggle {
        background: #effaf7;
        border-color: #bde8df;
    }

    .sidebar .sidebar-account.is-open .sidebar-account-menu {
        gap: 6px;
        grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
        padding-top: 6px;
    }

    .sidebar .sidebar-account-menu a {
        align-items: center;
        flex-direction: column;
        font-size: 9px;
        font-weight: 800;
        gap: 3px;
        justify-content: center;
        min-height: 44px;
        padding: 5px 3px;
        text-align: center;
    }

    .sidebar .sidebar-account-menu a .nav-svg {
        flex: 0 0 16px;
        height: 16px;
        width: 16px;
    }

    .sidebar .account-nav-label-desktop { display: none; }
    .sidebar .account-nav-label-mobile { display: inline; }

    .sidebar .sidebar-account-menu form {
        grid-column: 1 / -1;
        margin: 0;
    }

    .sidebar .sidebar-account-menu .ghost.full {
        font-size: 11px;
        min-height: 32px;
        padding: 5px 8px;
    }
}

@media (max-width: 560px) {
    .diary-row-tags .category-chip,
    .diary-row-tags .mood-chip {
        font-size: 9px !important;
        font-weight: 800;
        height: 22px;
        line-height: 1;
        max-width: 116px;
        min-height: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .diary-row-actions {
        gap: 18px;
    }

    .diary-row-actions .icon-action {
        height: 24px;
        min-height: 24px;
        min-width: 24px;
        width: 24px;
    }

    .diary-row-actions .icon-action .mini-svg {
        height: 12px;
        width: 12px;
    }
}

/* Auditoria de controles: ações equivalentes usam o mesmo componente, sem
   depender do texto do aria-label (que pode estar em qualquer idioma). */
.editable-person-chip .action-icon-control,
.milestone-actions-cell .action-icon-control,
.booklet-panel .action-icon-control,
.booklet-visit-panel .action-icon-control,
.routine-history-actions .action-icon-control,
.growth-record-action-buttons .action-icon-control,
.vaccine-history-row .action-icon-control,
.doctor-record-edit.action-icon-control {
    align-items: center;
    background: color-mix(in srgb, var(--primary) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, #fff);
    border-radius: 999px;
    box-shadow: 0 2px 7px color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--primary);
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    min-height: 32px;
    min-width: 32px;
    padding: 0;
    width: 32px;
}

.editable-person-chip .action-icon-control:is(:hover, :focus-visible),
.milestone-actions-cell .action-icon-control:is(:hover, :focus-visible),
.booklet-panel .action-icon-control:is(:hover, :focus-visible),
.booklet-visit-panel .action-icon-control:is(:hover, :focus-visible),
.routine-history-actions .action-icon-control:is(:hover, :focus-visible),
.growth-record-action-buttons .action-icon-control:is(:hover, :focus-visible),
.vaccine-history-row .action-icon-control:is(:hover, :focus-visible),
.doctor-record-edit.action-icon-control:is(:hover, :focus-visible) {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 5px 12px color-mix(in srgb, var(--primary) 23%, transparent);
    color: #fff;
    outline: 0;
    transform: translateY(-1px);
}

.editable-person-chip .action-icon-control:is(.danger, .booklet-delete-button),
.milestone-actions-cell .action-icon-control.danger,
.booklet-panel .action-icon-control.booklet-delete-button,
.routine-history-actions .action-icon-control.booklet-delete-button,
.growth-record-action-buttons .action-icon-control.danger,
.vaccine-history-row .action-icon-control.danger {
    background: #fff6f6 !important;
    border-color: #ffd8dc !important;
    box-shadow: 0 2px 7px rgba(201, 48, 71, .08);
    color: #d53d56 !important;
}

.editable-person-chip .action-icon-control:is(.danger, .booklet-delete-button):is(:hover, :focus-visible),
.milestone-actions-cell .action-icon-control.danger:is(:hover, :focus-visible),
.booklet-panel .action-icon-control.booklet-delete-button:is(:hover, :focus-visible),
.routine-history-actions .action-icon-control.booklet-delete-button:is(:hover, :focus-visible),
.growth-record-action-buttons .action-icon-control.danger:is(:hover, :focus-visible),
.vaccine-history-row .action-icon-control.danger:is(:hover, :focus-visible) {
    background: #d53d56 !important;
    border-color: #d53d56 !important;
    box-shadow: 0 5px 12px rgba(201, 48, 71, .22);
    color: #fff !important;
}

.editable-person-chip .action-icon-control svg,
.milestone-actions-cell .action-icon-control svg,
.booklet-panel .action-icon-control svg,
.booklet-visit-panel .action-icon-control svg,
.routine-history-actions .action-icon-control svg,
.growth-record-action-buttons .action-icon-control svg,
.vaccine-history-row .action-icon-control svg,
.doctor-record-edit.action-icon-control svg {
    height: 15px;
    stroke-width: 2.15;
    width: 15px;
}

.editable-person-chip {
    align-items: center;
    gap: 8px;
}

.person-edit-form {
    min-width: 0;
}

.person-edit-form .person-save-button,
.person-delete-form .person-delete-button {
    margin: 0;
}

.person-delete-form,
.milestone-actions-cell form,
.booklet-record-actions form,
.routine-history-actions form,
.growth-record-action-buttons form,
.vaccine-history-row .inline-delete-form {
    display: inline-flex;
    margin: 0;
}

.shortcut-remove .mini-svg,
.treatment-remove .mini-svg,
.booklet-routine-remove .mini-svg {
    height: 13px;
    stroke-width: 2.2;
    width: 13px;
}

.mobile-sidebar-close .mini-svg {
    height: 17px;
    stroke-width: 2.2;
    width: 17px;
}

/* Rotinas do bebê: grade móvel compacta, sem reservar espaço vazio para
   remover uma linha. A ação ocupa uma terceira coluna somente no topo. */
@media (max-width: 700px) {
    .routine-module-sheet .booklet-routine-sheet-head {
        display: block;
        margin-bottom: 8px;
        min-height: 42px;
        position: relative;
    }

    .routine-module-sheet .booklet-routine-sheet-head > span {
        position: absolute;
        right: 0;
        top: 0;
    }

    .routine-module-sheet .booklet-routine-sheet-head h2 {
        min-height: 18px;
        padding-right: 74px;
    }

    .routine-module-sheet .booklet-routine-sheet-head p {
        font-size: 10px;
        letter-spacing: -.01em;
        line-height: 1.25;
        white-space: nowrap;
    }

    .routine-module-sheet .booklet-routine-sheet tbody {
        gap: 7px;
    }

    .routine-module-sheet .booklet-routine-sheet tbody tr {
        gap: 6px;
        grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr) 28px;
        padding: 8px;
    }

    .routine-module-sheet .booklet-routine-sheet td {
        min-width: 0;
        width: auto;
    }

    .routine-module-sheet .booklet-routine-sheet td::before {
        font-size: 8px;
        line-height: 1;
        margin-bottom: 3px;
    }

    .routine-module-sheet .booklet-routine-sheet td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .routine-module-sheet .booklet-routine-sheet td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .routine-module-sheet .booklet-routine-sheet td:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    .routine-module-sheet .booklet-routine-sheet td:nth-child(4) {
        grid-column: 2 / -1;
        grid-row: 2;
    }

    .routine-module-sheet .booklet-routine-sheet td:nth-child(5) {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .routine-module-sheet .booklet-routine-sheet td.booklet-routine-remove-cell {
        align-self: end;
        grid-column: 3;
        grid-row: 1;
        position: static;
        width: 28px;
    }

    .routine-module-sheet .booklet-routine-sheet tbody tr.is-diaper td:nth-child(4) {
        display: none;
    }

    .routine-module-sheet .booklet-routine-sheet tbody tr.is-diaper td:nth-child(5) {
        grid-column: 2 / -1;
        grid-row: 2;
    }

    .routine-module-sheet .booklet-routine-sheet input,
    .routine-module-sheet .booklet-routine-sheet select {
        font-size: 10.5px;
        min-height: 31px;
        padding: 4px 6px;
    }

    .routine-module-sheet .booklet-routine-remove {
        height: 28px;
        min-height: 28px;
        width: 28px;
    }

    .routine-module-sheet .booklet-routine-sheet-actions {
        margin-top: 8px;
    }

    .routine-module-sheet .booklet-routine-sheet-actions button {
        font-size: 11px;
        min-height: 33px;
        padding: 0 10px;
    }
}

.milestone-actions-cell,
.booklet-record-actions,
.routine-history-actions,
.growth-record-action-buttons {
    gap: 10px;
}

@media (max-width: 560px) {
    .editable-person-chip .action-icon-control,
    .milestone-actions-cell .action-icon-control,
    .booklet-panel .action-icon-control,
    .booklet-visit-panel .action-icon-control,
    .routine-history-actions .action-icon-control,
    .growth-record-action-buttons .action-icon-control,
    .vaccine-history-row .action-icon-control,
    .doctor-record-edit.action-icon-control {
        flex-basis: 30px;
        height: 30px;
        min-height: 30px;
        min-width: 30px;
        width: 30px;
    }

    .milestone-actions-cell,
    .booklet-record-actions,
    .routine-history-actions,
    .growth-record-action-buttons {
        gap: 9px;
    }
}

/* Padrão definitivo para todas as ações textuais já convertidas. */
.standard-action-button.standard-action-button {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    height: 23px;
    justify-content: center;
    min-height: 23px;
    min-width: 69px;
    padding: 0 !important;
    width: 69px;
}

.standard-action-image {
    display: block;
    filter: none !important;
    height: 23px;
    max-width: none;
    width: 69px;
}

.button.ghost.app-return-button,
.app-return-button {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    flex: 0 0 72px;
    height: 23px;
    justify-content: center;
    min-height: 23px;
    min-width: 72px;
    padding: 0 !important;
    width: 72px;
}

.app-return-button::before {
    background-image: url('bt_voltar_72x23px.png?v=20260825c');
    filter: none !important;
    height: 23px;
    width: 72px;
}

/* Formulários: texto de preenchimento e rótulos em peso regular. */
form label,
form legend,
form .booklet-label,
form .booklet-form-child > span,
form .booklet-routine-sheet th,
form .booklet-routine-sheet td::before {
    font-weight: 400 !important;
}

form input,
form select,
form textarea,
form output,
form input::placeholder,
form textarea::placeholder {
    font-weight: 400 !important;
}

/* Ações de formulário: imagens originais, com medidas fixas e independentes do tema. */
.standard-action-button.standard-action-back {
    flex: 0 0 72px;
    min-width: 72px;
    width: 72px;
}

.standard-action-button.standard-action-back .standard-action-image {
    height: 23px;
    width: 72px;
}

.button.ghost.app-return-button,
.app-return-button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    flex: 0 0 72px;
    height: 23px;
    min-height: 23px;
    min-width: 72px;
    padding: 0 !important;
    width: 72px;
}

.app-return-button::before {
    background: center / 72px 23px no-repeat url('bt_voltar_72x23px.png?v=20260825c') !important;
    filter: none !important;
    height: 23px;
    width: 72px;
}

.standard-action-button:hover .standard-action-image,
.standard-action-button:focus-visible .standard-action-image,
.app-return-button:hover::before,
.app-return-button:focus-visible::before {
    filter: none !important;
}

.edit-action-bar {
    align-items: center;
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    width: 100%;
}

.edit-action-left,
.edit-action-right {
    align-items: center;
    display: flex;
    gap: 6px;
}

.edit-action-hidden {
    display: none !important;
}

/* Referência visual aprovada — editor individual de Rotina do bebê. */
.booklet-form-heading > div {
    min-width: 0;
}

.booklet-form-heading .button.ghost.app-return-button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    flex: 0 0 72px;
    height: 23px;
    min-height: 23px;
    min-width: 72px;
    padding: 0 !important;
    width: 72px;
}

.booklet-form-heading .app-return-button::before {
    height: 23px;
    width: 72px;
}

.routine-editor-fields {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr);
}

.routine-editor-fields [hidden] {
    display: none !important;
}

.routine-editor-fields .routine-editor-basic,
.routine-editor-fields .routine-editor-feeding-grid,
.routine-editor-fields .routine-editor-diaper-grid {
    display: grid;
    gap: 12px;
    grid-column: 1 / -1;
    min-width: 0;
}

.routine-editor-fields .routine-editor-basic {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr);
}

.routine-editor-fields .routine-editor-feeding-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.routine-editor-fields .routine-editor-diaper-grid {
    grid-template-columns: minmax(0, 1fr);
}

.routine-editor-fields .routine-editor-date,
.routine-editor-fields .routine-editor-type,
.routine-editor-fields .routine-editor-notes {
    grid-column: auto;
    grid-row: auto;
}

.routine-editor-fields label,
.routine-editor-fields input,
.routine-editor-fields select,
.routine-editor-fields textarea {
    max-width: 100%;
    min-width: 0;
}

.routine-editor-fields input,
.routine-editor-fields select,
.routine-editor-fields textarea {
    font-weight: 400 !important;
    width: 100%;
}

.routine-editor-fields .routine-editor-notes {
    grid-column: 1 / -1;
}

.routine-editor-fields.is-diaper {
    column-gap: 12px;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.65fr);
}

.routine-editor-fields.is-diaper .routine-editor-basic {
    grid-column: 1 / -1;
}

.routine-editor-fields.is-diaper .routine-editor-diaper-grid {
    grid-column: 1;
}

.routine-editor-fields.is-diaper .routine-editor-notes {
    grid-column: 2;
    grid-row: 2;
}

.routine-editor-notes textarea {
    min-height: 68px;
}

.routine-editor-actions {
    gap: 5px;
    margin: 8px 4px 0;
}

.routine-editor-action,
.routine-editor-action.is-save,
.routine-editor-action.is-delete {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    flex: 0 0 69px;
    height: 23px;
    min-height: 23px;
    min-width: 69px;
    padding: 0 !important;
    width: 69px;
}

.routine-editor-action .standard-action-image {
    height: 23px;
    width: 69px;
}

@media (max-width: 560px) {
    .booklet-form-heading p {
        font-size: 11px !important;
        letter-spacing: -.015em;
        line-height: 1.25;
        white-space: nowrap;
    }

    .routine-editor-fields {
        gap: 11px;
    }

    .routine-editor-fields .routine-editor-basic,
    .routine-editor-fields .routine-editor-feeding-grid,
    .routine-editor-fields .routine-editor-diaper-grid {
        gap: 8px;
    }

    .routine-editor-fields .routine-editor-basic {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr);
    }

    .routine-editor-fields .routine-editor-feeding-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .routine-editor-fields input[type="datetime-local"] {
        font-size: 12px;
        letter-spacing: -.02em;
    }

    .routine-editor-fields.is-diaper {
        column-gap: 8px;
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.55fr);
    }

    .routine-editor-notes textarea {
        min-height: 68px;
    }

    .routine-editor-fields.is-diaper .routine-editor-notes textarea {
        min-height: 52px;
    }
}

/* Marcos e Aprendizados: cartões de indicadores e registros no fluxo compacto. */
.milestone-overview-item small > span {
    display: block;
}

.milestone-suggestions-controls {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 14px;
}

.milestone-suggestions-toggle {
    align-items: center;
    background: #eef8f7;
    border: 1px solid #d9eeea;
    border-radius: 50%;
    color: var(--primary-dark);
    display: inline-flex;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.milestone-suggestions-toggle .mini-svg {
    height: 14px;
    transition: transform .18s ease;
    width: 14px;
}

.milestone-record-title-line {
    align-items: baseline;
    display: flex;
    gap: 7px;
    min-width: 0;
}

.milestone-record-title-line strong {
    min-width: 0;
}

.milestone-record-title-line .mobile-age-pill {
    display: none;
}

@media (max-width: 900px) {
    .milestone-record-table tr {
        grid-template-areas:
            "icon main ."
            ". meta actions";
    }

    .milestone-record-title-line {
        align-items: center;
    }

    .milestone-record-title-line .mobile-age-pill {
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 10px;
        margin: 0;
        padding: 4px 7px;
    }

    .milestone-actions-cell {
        align-self: center;
        justify-self: end;
    }
}

@media (max-width: 560px) {
    .milestone-top-suggestions > summary.side-title {
        padding-right: 0;
    }

    .milestone-top-suggestions > summary.side-title::after {
        content: none !important;
    }

    .milestone-suggestions-controls {
        gap: 12px;
    }

    .milestone-suggestions-toggle {
        height: 23px;
        width: 23px;
    }

    .milestone-record-table tr {
        gap: 6px 8px;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        padding: 10px;
    }

    .record-check {
        height: 28px;
        width: 28px;
    }

    .milestone-record-title-line {
        gap: 6px;
    }

    .milestone-record-title-line strong {
        -webkit-line-clamp: 1;
    }

    .milestone-record-title-line .mobile-age-pill {
        font-size: 9.5px;
        padding: 4px 6px;
    }

    .milestone-mobile-meta {
        gap: 5px;
        margin-top: 5px;
    }

    .milestone-mobile-meta .category-pill,
    .milestone-mobile-meta .status-pill {
        font-size: 9.5px;
        padding: 5px 8px;
    }

    .milestone-actions-cell {
        gap: 10px;
    }

    .milestone-actions-cell .icon-action {
        height: 27px;
        width: 27px;
    }
}

/* Caderneta: resumo neonatal essencial, sem navegação e indicadores redundantes. */
#booklet-neonatal .booklet-fact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    #booklet-neonatal .booklet-fact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #booklet-neonatal .booklet-screening-grid {
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #booklet-neonatal .booklet-screening-card {
        align-items: flex-start;
        gap: 5px;
        min-height: 64px;
        padding: 9px;
    }

    #booklet-neonatal .booklet-screening-card strong {
        font-size: 11px;
        line-height: 1.2;
    }

    #booklet-neonatal .booklet-screening-card span,
    #booklet-neonatal .booklet-screening-card small {
        font-size: 9.5px;
        line-height: 1.2;
    }

    #booklet-neonatal .booklet-screening-card .action-icon-control {
        flex: 0 0 26px;
        height: 26px;
        width: 26px;
    }

    #booklet-neonatal .booklet-screening-card .action-icon-control svg {
        height: 12px;
        width: 12px;
    }
}

/* Cadastro de Marcos e Aprendizados: pares compactos como no Diário Afetivo. */
.grid-form.milestone-learning-form {
    column-gap: 12px;
    row-gap: 10px;
    grid-template-columns: minmax(0, .95fr) minmax(0, .85fr);
}

.milestone-learning-form .is-important-field {
    background: none;
    padding: 0;
}

.milestone-learning-form .milestone-entry-child,
.milestone-learning-form .milestone-entry-type {
    grid-column: 1;
}

.milestone-learning-form .milestone-entry-date,
.milestone-learning-form .milestone-entry-category {
    grid-column: 2;
}

.milestone-learning-form .milestone-entry-stage,
.milestone-learning-form .milestone-entry-context,
.milestone-learning-form .milestone-entry-title,
.milestone-learning-form .milestone-entry-description,
.milestone-learning-form .milestone-diary-toggle,
.milestone-learning-form .milestone-diary-text,
.milestone-learning-form .milestone-diary-photo {
    grid-column: 1 / -1;
}

.milestone-learning-form label {
    gap: 5px;
}

.milestone-learning-form .field-label-row {
    font-size: 13px;
}

.milestone-learning-form input,
.milestone-learning-form select {
    min-height: 34px;
}

.milestone-learning-form .milestone-entry-date .flatpickr-input-shell,
.milestone-learning-form .milestone-entry-date .flatpickr-alt-input {
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.milestone-learning-form .milestone-entry-category .field-help {
    display: none;
}

.milestone-learning-form .milestone-entry-category.is-awaiting-type .field-label-row > span:first-child {
    color: #7d8ca2;
}

.milestone-learning-form .milestone-entry-category.is-awaiting-type select:disabled {
    background: #f3f6f8;
    border-color: #e0e7ee;
    box-shadow: none;
    color: #8a98ab;
    cursor: not-allowed;
    opacity: 1;
}

.milestone-learning-form .milestone-entry-category.is-awaiting-type .field-help {
    color: #7d8ca2;
    display: block;
    font-size: 10.5px;
    line-height: 1.25;
    margin-top: 1px;
}

/* Cadastro personalizado: a integração opcional com o Diário é uma etapa
   separada do marco, reconhecível sem transformar campos opcionais em alerta. */
.milestone-learning-form .milestone-diary-toggle {
    align-items: center;
    border-top: 1px solid #dce8f3;
    color: #075dc7;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 2px;
    padding-top: 11px;
}

.milestone-learning-form .milestone-diary-toggle .field-label-row {
    color: #075dc7;
    flex: 1 1 auto;
}

.milestone-learning-form .milestone-diary-toggle input[type="checkbox"] {
    accent-color: #075dc7;
    flex: 0 0 auto;
    height: 18px;
    margin: 0;
    width: 18px;
}

.milestone-learning-form .milestone-diary-text .field-label-row,
.milestone-learning-form .milestone-diary-photo .field-label-row {
    color: #075dc7;
}

.milestone-learning-form .milestone-diary-text textarea {
    min-height: 48px;
}

/* Ação secundária da lista de sugestões: abre o cadastro livre somente quando
   o usuário decide que não há uma sugestão adequada. */
.suggestions-list-heading {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 3px;
}

.suggestions-list-heading h2 {
    margin: 0;
}

.suggestion-custom-button {
    align-items: center;
    background: #eef8f7;
    border: 1px solid #cde9e4;
    border-radius: 999px;
    color: var(--primary-dark);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    min-height: 30px;
    padding: 0 11px;
    text-decoration: none;
    white-space: nowrap;
}

.suggestion-custom-button:is(:hover, :focus-visible) {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    outline: 0;
}

/* Quatro filtros de situação mantêm uma leitura em duas linhas no desktop e
   duas colunas no celular, sem comprimir os rótulos de cada seleção. */
@media (min-width: 901px) {
    .milestone-record-filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: 760px;
    }

    .milestone-record-filters input {
        grid-column: 1 / span 2;
    }

    .milestone-record-filters .milestone-per-page-select {
        grid-column: 3;
    }

    .milestone-record-filters .filter-soft-button {
        grid-column: 4;
    }
}

@media (max-width: 560px) {
    .grid-form.milestone-learning-form {
        column-gap: 11px;
        row-gap: 9px;
        grid-template-columns: minmax(0, .95fr) minmax(0, .85fr);
    }

    .milestone-learning-form .field-label-row {
        font-size: 12.5px;
    }

    .milestone-learning-form select,
    .milestone-learning-form input,
    .milestone-learning-form .flatpickr-alt-input {
        font-size: 12px;
    }

    .milestone-learning-form .milestone-entry-date .flatpickr-alt-input {
        letter-spacing: -.02em;
    }

    .milestone-learning-form .milestone-diary-toggle {
        padding-top: 9px;
    }

    .suggestions-list-heading {
        gap: 9px;
    }

    .suggestion-custom-button {
        font-size: 11px;
        min-height: 28px;
        padding: 0 10px;
    }
}

/* Diário afetivo e menu: regras finais de responsividade, depois de todos os
   estilos legados do tema para evitar que um breakpoint antigo as sobrescreva. */
@media (min-width: 901px) and (max-width: 1180px) {
    .diary-top-strip {
        align-items: stretch;
        grid-template-columns: minmax(128px, .52fr) minmax(0, 1fr) minmax(188px, .82fr);
    }

    .diary-top-cloud .mood-cloud {
        align-content: center;
        gap: 4px 10px;
        justify-content: flex-start;
        min-height: 0;
        padding: 6px 0 0;
    }

    .diary-top-cloud .mood-cloud span {
        font-size: clamp(12px, calc(var(--mood-size) * .82), 20px);
        line-height: 1;
        transform: none !important;
    }

    .diary-quick-inline {
        align-items: center;
        align-content: center;
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(226px, .72fr);
        grid-template-rows: auto;
        min-height: 74px;
        padding: 10px 12px;
    }

    .diary-quick-inline .diary-quick-fields {
        align-self: center;
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 900px) {
    .mobile-menu-scrim {
        top: 66px !important;
    }

    .sidebar,
    body.sidebar-collapsed .sidebar {
        align-items: stretch !important;
        bottom: 0 !important;
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        padding: 10px !important;
        top: 66px !important;
        width: min(320px, calc(100vw - 40px)) !important;
    }

    .sidebar .sidebar-head,
    body.sidebar-collapsed .sidebar .sidebar-head {
        align-items: center !important;
        display: grid !important;
        flex: 0 0 42px !important;
        flex-direction: row !important;
        gap: 8px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        justify-content: initial !important;
        margin: 0 !important;
        min-height: 42px !important;
        padding: 0 4px 8px !important;
    }

    .sidebar .sidebar-head .brand,
    body.sidebar-collapsed .sidebar .sidebar-head .brand,
    .sidebar .sidebar-collapse-toggle,
    body.sidebar-collapsed .sidebar .sidebar-collapse-toggle {
        display: none !important;
    }

    .sidebar .mobile-sidebar-title,
    body.sidebar-collapsed .sidebar .mobile-sidebar-title {
        display: block !important;
        margin: 0 !important;
    }

    .sidebar .mobile-sidebar-close {
        align-self: center;
        display: inline-flex !important;
        margin: 0 !important;
    }

    .sidebar .app-nav,
    body.sidebar-collapsed .sidebar .app-nav {
        align-content: start !important;
        display: grid !important;
        flex: 1 1 auto !important;
        gap: 5px !important;
        grid-auto-rows: min-content !important;
        grid-template-columns: 1fr !important;
        margin: 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 8px 2px !important;
    }

    .sidebar .nav-section,
    body.sidebar-collapsed .sidebar .nav-section {
        align-content: start;
        display: grid !important;
        gap: 2px !important;
        grid-template-columns: 1fr !important;
    }

    .sidebar .nav-section-title,
    body.sidebar-collapsed .sidebar .nav-section-title,
    .sidebar .nav-divider {
        display: none !important;
    }

    .sidebar nav a,
    body.sidebar-collapsed .sidebar nav a {
        font-size: 12px !important;
        min-height: 34px !important;
        padding: 4px 8px !important;
    }

    .sidebar .sidebar-account,
    body.sidebar-collapsed .sidebar .sidebar-account {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 8px 3px 0 !important;
        position: static !important;
        width: 100% !important;
    }

    .sidebar .sidebar-garden {
        display: none !important;
    }
}

/* Cabeçalhos separados eliminam a disputa entre o menu recolhido do desktop
   e a gaveta móvel. */
.sidebar-mobile-head {
    display: none;
}

@media (max-width: 900px) {
    .sidebar .sidebar-head,
    body.sidebar-collapsed .sidebar .sidebar-head {
        display: none !important;
    }

    .sidebar .sidebar-mobile-head,
    body.sidebar-collapsed .sidebar .sidebar-mobile-head {
        align-items: center !important;
        border-bottom: 1px solid #e4ecef;
        display: grid !important;
        flex: 0 0 42px !important;
        gap: 8px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        margin: 0 !important;
        min-height: 42px !important;
        padding: 0 4px 8px !important;
    }

    .sidebar .sidebar-mobile-head .mobile-sidebar-title,
    body.sidebar-collapsed .sidebar .sidebar-mobile-head .mobile-sidebar-title {
        display: block !important;
        margin: 0 !important;
    }

    .sidebar .sidebar-mobile-head .mobile-sidebar-close {
        align-items: center;
        display: inline-flex !important;
        justify-content: center;
        margin: 0 !important;
    }
}

/* Conta da barra lateral: um único rótulo por contexto e expansão isolada. */
.account-nav-label-desktop {
    display: inline;
}

.account-nav-label-mobile {
    display: none;
}

@media (min-width: 901px) {
    .sidebar-account {
        isolation: isolate;
    }

    .sidebar-account.is-open .sidebar-account-menu {
        background: #fff;
        border: 1px solid #dce9e7;
        border-radius: 14px;
        bottom: calc(100% + 8px);
        box-shadow: 0 12px 28px rgba(31, 48, 80, .16);
        display: grid;
        left: 0;
        max-height: min(260px, calc(100vh - 150px));
        overflow-y: auto;
        padding: 6px;
        position: absolute;
        right: 0;
        z-index: 4;
    }

    .sidebar-account-menu a {
        background: #fff;
    }

    /* A ilustração é decorativa no estado fechado. Ao abrir a conta, o menu
       ocupa esse mesmo espaço visual com fundo sólido e sem sobreposição. */
    .sidebar-account.is-open ~ .sidebar-garden {
        opacity: 0;
        visibility: hidden;
    }
}

@media (max-width: 900px) {
    .sidebar .account-nav-label-desktop {
        display: none !important;
    }

    .sidebar .account-nav-label-mobile {
        display: inline !important;
    }
}

/* Caderneta: contexto do M-CHAT-R/F sem reproduzir o instrumento externo. */
.booklet-mchat-guide {
    display: grid;
    gap: 11px;
    margin: 0 0 12px;
}

.booklet-mchat-intro {
    background: linear-gradient(135deg, #effbf8, #f7fcff);
    border: 1px solid #cdebe4;
    border-radius: 14px;
    padding: 14px;
}

.booklet-mchat-kicker {
    color: #087e72;
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.booklet-mchat-intro h3 {
    color: #073d74;
    font-size: 16px;
    line-height: 1.2;
    margin: 0;
}

.booklet-mchat-intro p,
.booklet-mchat-facts p,
.booklet-mchat-note {
    color: #526b84;
    font-size: 12px;
    line-height: 1.48;
}

.booklet-mchat-intro p {
    margin: 6px 0 0;
}

.booklet-mchat-facts {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.booklet-mchat-facts article {
    background: #fbfdfd;
    border: 1px solid #e0eaed;
    border-radius: 12px;
    min-width: 0;
    padding: 11px;
}

.booklet-mchat-facts strong {
    color: #0b4d7a;
    display: block;
    font-size: 12px;
}

.booklet-mchat-facts p {
    margin: 4px 0 0;
}

.booklet-mchat-note {
    background: #fff9e9;
    border: 1px solid #f2dfaa;
    border-radius: 12px;
    color: #735d20;
    margin: 0;
    padding: 10px 12px;
}

.booklet-mchat-note strong {
    color: #5f4c1a;
}

.booklet-mchat-external-link {
    align-items: center;
    background: #0b9d91;
    border: 1px solid #0b9d91;
    border-radius: 11px;
    box-shadow: 0 7px 15px rgba(11, 157, 145, .18);
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 850;
    gap: 7px;
    justify-self: start;
    min-height: 38px;
    padding: 8px 13px;
    text-decoration: none;
}

.booklet-mchat-external-link:hover,
.booklet-mchat-external-link:focus-visible {
    background: #087d72;
    border-color: #087d72;
    color: #fff;
    outline: 0;
}

@media (max-width: 760px) {
    .booklet-mchat-facts {
        grid-template-columns: 1fr;
    }
}

/* Saúde bucal: visão geral antes da interação do odontograma. */
.dental-overview-grid {
    align-items: stretch;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .96fr);
    margin-top: 14px;
}

.dental-overview-card {
    background: linear-gradient(145deg, #fbfdff, #f7fbfc);
    border: 1px solid #dcebef;
    border-radius: 16px;
    min-width: 0;
    padding: 14px;
}

.dental-overview-heading {
    min-width: 0;
}

.dental-overview-kicker {
    color: var(--primary-dark);
    display: block;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.dental-overview-heading h3 {
    color: #073f70;
    font-size: 17px;
    line-height: 1.2;
    margin: 3px 0 4px;
}

.dental-overview-heading p {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
    margin: 0;
}

.dental-overview-card .dental-eruption-rows {
    margin-top: 12px;
}

.dental-overview-card .dental-reference-note {
    margin-top: 10px;
}

.dental-illustration-reference .dental-illustration-pair {
    margin-top: 12px;
    max-width: none;
}

.dental-illustration-reference .dental-arc-illustration {
    background: #fff;
}

.dental-illustration-reference .dental-arc-illustration img {
    max-height: 206px;
    width: min(100%, 350px);
}

@container (max-width: 920px) {
    .dental-overview-grid {
        grid-template-columns: 1fr;
    }

    .dental-illustration-reference .dental-illustration-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .dental-overview-card {
        border-radius: 13px;
        padding: 11px;
    }

    .dental-overview-heading h3 {
        font-size: 16px;
    }

    .dental-illustration-reference .dental-illustration-pair {
        grid-template-columns: 1fr;
    }
}

/* Acessos: leitura clara de perfis, convites e membros em qualquer largura. */
.sharing-profile-help {
    align-self: end;
    position: relative;
}

.sharing-profile-help .profile-help-popover {
    background: #fff;
    border: 1px solid #cce9e5;
    border-radius: 13px;
    box-shadow: 0 14px 28px rgba(20, 53, 77, .16);
    color: #4d6078;
    display: none;
    gap: 6px;
    line-height: 1.4;
    padding: 11px 12px;
    width: min(345px, calc(100vw - 42px));
    z-index: 65;
}

.sharing-profile-help.is-open .profile-help-popover {
    display: grid;
}

.sharing-profile-help-popover strong {
    color: #073f70;
    font-size: 12px;
}

.sharing-profile-help-popover span {
    display: block;
    font-size: 11px;
}

.sharing-profile-help-popover b {
    color: #0b4d7a;
}

.sharing-contact-value {
    display: grid;
    gap: 2px;
}

.sharing-empty-cell {
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

@media (max-width: 640px) {
    .sharing-profile-help {
        align-self: start;
        grid-column: 1;
    }

    .sharing-profile-help .profile-help-popover {
        bottom: calc(100% + 10px);
        left: 0;
        right: auto;
        top: auto;
    }

    .sharing-table-card .sharing-responsive-table {
        overflow: visible;
    }

    .sharing-table-card .sharing-table,
    .sharing-table-card .sharing-table tbody {
        display: grid;
        gap: 10px;
        width: 100%;
    }

    .sharing-table-card .sharing-table thead {
        display: none;
    }

    .sharing-table-card .sharing-table tr {
        background: #fbfdfe;
        border: 1px solid #dcebef;
        border-radius: 13px;
        display: block;
        padding: 4px 10px;
    }

    .sharing-table-card .sharing-table td {
        align-items: start;
        border: 0;
        border-bottom: 1px solid #e5edf2;
        display: grid;
        gap: 8px;
        grid-template-columns: 82px minmax(0, 1fr);
        min-width: 0;
        padding: 8px 0;
    }

    .sharing-table-card .sharing-table td:last-child {
        border-bottom: 0;
    }

    .sharing-table-card .sharing-table td::before {
        color: #5e7188;
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 850;
        letter-spacing: .02em;
        line-height: 1.25;
        text-transform: uppercase;
    }

    .sharing-table-card .sharing-cell-value,
    .sharing-table-card .sharing-table .inline-actions {
        color: #1f3855;
        font-size: 12px;
        grid-column: 2;
        line-height: 1.4;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .sharing-table-card .sharing-table td[data-label="Ações"] .inline-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .sharing-table-card .sharing-table td[data-label="Ações"] .inline-actions form {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .sharing-table-card .sharing-table .sharing-empty-cell {
        border: 0;
        display: block;
        padding: 10px 2px;
        text-align: left;
    }

    .sharing-table-card .sharing-table .sharing-empty-cell::before {
        content: none;
        display: none;
    }
}

/* Admin global: painel de gestão com prioridades, filtros e ações por usuário. */
.admin-management-head {
    align-items: flex-start;
}

.admin-management-kicker,
.admin-section-kicker {
    color: var(--primary-dark);
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-management-head h1 {
    margin: 3px 0 4px;
}

.admin-overview-metrics {
    gap: 12px;
    margin-bottom: 16px;
}

.admin-overview-metric {
    background: linear-gradient(145deg, #fff, #f5fbfa);
    border-color: #dbece9;
    box-shadow: none;
    min-height: 112px;
    padding: 16px;
}

.admin-overview-metric span {
    color: #5d738a;
    font-size: 10px;
    letter-spacing: .03em;
}

.admin-overview-metric strong {
    color: #073f70;
    font-size: 27px;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.admin-table-card {
    margin-bottom: 16px;
}

.admin-table-heading {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.admin-table-heading h2 {
    color: #073f70;
    font-size: 20px;
    line-height: 1.15;
    margin: 3px 0 4px;
}

.admin-table-heading p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

.admin-table-total {
    align-items: baseline;
    background: #eef9f7;
    border: 1px solid #ccebe5;
    border-radius: 999px;
    color: #527082;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    gap: 4px;
    padding: 7px 10px;
}

.admin-table-total strong {
    color: var(--primary-dark);
    font-size: 15px;
}

.admin-user-toolbar {
    align-items: end;
    border-bottom: 1px solid #e1eaf0;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(210px, 1.55fr) minmax(140px, .75fr) minmax(170px, .95fr);
    margin-top: 16px;
    padding: 0 0 14px;
}

.admin-user-toolbar label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.admin-user-toolbar label > span {
    color: #60758a;
    font-size: 10px;
    font-weight: 850;
}

.admin-user-toolbar :is(input, select) {
    background: #fbfdfe;
    border: 1px solid #d6e4ec;
    border-radius: 10px;
    color: #193d5f;
    font-size: 12px;
    min-height: 37px;
    min-width: 0;
    padding: 7px 10px;
    width: 100%;
}

.admin-filter-empty,
.admin-empty-copy {
    color: var(--muted);
    font-size: 12px;
    margin: 14px 0 0;
}

.admin-responsive-table {
    margin-top: 10px;
}

.admin-users-table {
    min-width: 920px;
}

.admin-users-table th {
    color: #5b7087;
    font-size: 10px;
    letter-spacing: .03em;
}

.admin-users-table td {
    color: #304e6a;
    font-size: 12px;
    line-height: 1.35;
}

.admin-user-identity strong {
    color: #073f70;
    display: block;
    font-size: 13px;
}

.admin-user-identity .tag {
    font-size: 9px;
    margin-top: 5px;
}

.admin-cell-value,
.admin-contact-value {
    display: grid;
    gap: 2px;
    overflow-wrap: anywhere;
}

.admin-link-stats {
    display: grid;
    gap: 3px;
}

.admin-link-stats span {
    color: #63768a;
    font-size: 11px;
    white-space: nowrap;
}

.admin-link-stats b {
    color: #0d567b;
}

.admin-status-detail {
    display: grid;
    gap: 5px;
    justify-items: start;
}

.admin-status-detail small {
    color: #75869a;
    font-size: 10px;
    white-space: nowrap;
}

.admin-status-pill {
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    padding: 4px 7px;
}

.admin-status-active { background: #e3f8f0; color: #08775d; }
.admin-status-inactive { background: #f2f5f8; color: #5a6d80; }
.admin-status-blocked { background: #fff0f1; color: #c13c4b; }

.admin-user-actions {
    display: grid;
    gap: 7px;
    min-width: 250px;
}

.admin-user-classification-form,
.admin-user-status-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.admin-user-classification-form select {
    background: #fbfdfe;
    border: 1px solid #d8e4eb;
    border-radius: 8px;
    color: #274862;
    font-size: 10px;
    min-height: 29px;
    min-width: 0;
    padding: 4px 6px;
    width: min(136px, 100%);
}

.admin-user-classification-form .standard-action-button {
    flex: 0 0 auto;
}

.admin-user-status-form .small-button {
    font-size: 10px;
    min-height: 28px;
    padding: 4px 7px;
}

.admin-empty-cell {
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.admin-support-grid {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-summary-card {
    min-width: 0;
}

.admin-invite-list,
.admin-family-list {
    display: grid;
    gap: 9px;
    margin-top: 15px;
}

.admin-invite-list article,
.admin-family-list article {
    background: #fbfdfe;
    border: 1px solid #e0eaf0;
    border-radius: 12px;
    min-width: 0;
    padding: 11px;
}

.admin-invite-primary,
.admin-family-primary {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.admin-invite-primary strong,
.admin-family-primary strong {
    color: #073f70;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.admin-invite-primary > span,
.admin-family-primary > span,
.admin-invite-list small {
    color: #697c91;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.admin-invite-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.admin-invite-meta span {
    background: #eef7f6;
    border-radius: 999px;
    color: #167b73;
    font-size: 10px;
    padding: 3px 6px;
}

.admin-invite-list small {
    display: block;
    margin-top: 7px;
}

.admin-family-list dl {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 10px 0 0;
}

.admin-family-list dl div {
    background: #fff;
    border: 1px solid #edf1f5;
    border-radius: 8px;
    min-width: 0;
    padding: 6px;
}

.admin-family-list dt {
    color: #75869a;
    font-size: 9px;
    font-weight: 750;
}

.admin-family-list dd {
    color: #0d567b;
    font-size: 12px;
    font-weight: 850;
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}

@container (max-width: 1040px) {
    .admin-support-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .admin-management-head {
        align-items: center;
    }

    .admin-management-head .inline-actions .button {
        font-size: 11px;
        padding-inline: 9px;
    }

    .admin-overview-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-overview-metric {
        min-height: 86px;
        padding: 12px;
    }

    .admin-overview-metric strong {
        font-size: 22px;
    }

    .admin-user-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-toolbar-search {
        grid-column: 1 / -1;
    }

    .admin-family-list dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .admin-table-card {
        padding: 14px;
    }

    .admin-table-heading {
        gap: 9px;
    }

    .admin-table-heading h2 {
        font-size: 18px;
    }

    .admin-table-heading p {
        font-size: 11px;
    }

    .admin-table-total {
        font-size: 10px;
        padding: 6px 8px;
    }

    .admin-table-total strong {
        font-size: 13px;
    }

    .admin-user-toolbar {
        gap: 8px;
        margin-top: 13px;
        padding-bottom: 11px;
    }

    .admin-responsive-table {
        overflow: visible;
    }

    .admin-users-table,
    .admin-users-table tbody {
        display: grid;
        gap: 10px;
        min-width: 0;
        width: 100%;
    }

    .admin-users-table thead {
        display: none;
    }

    .admin-users-table tr {
        background: #fbfdfe;
        border: 1px solid #dbe8ef;
        border-radius: 13px;
        display: block;
        padding: 5px 10px;
    }

    .admin-users-table td {
        align-items: start;
        border: 0;
        border-bottom: 1px solid #e7eef3;
        display: grid;
        gap: 8px;
        grid-template-columns: 78px minmax(0, 1fr);
        min-width: 0;
        padding: 8px 0;
    }

    .admin-users-table td:last-child {
        border-bottom: 0;
    }

    .admin-users-table td::before {
        color: #5f7288;
        content: attr(data-label);
        display: block;
        font-size: 9px;
        font-weight: 850;
        letter-spacing: .02em;
        line-height: 1.25;
        text-transform: uppercase;
    }

    .admin-users-table :is(.admin-user-identity, .admin-cell-value, .admin-link-stats, .admin-status-detail, .admin-user-actions) {
        grid-column: 2;
        min-width: 0;
    }

    .admin-user-actions {
        min-width: 0;
    }

    .admin-user-classification-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .admin-user-classification-form select {
        width: 100%;
    }

    .admin-user-status-form {
        gap: 5px;
    }

    .admin-users-table .admin-empty-cell {
        border: 0;
        display: block;
        padding: 10px 2px;
        text-align: left;
    }

    .admin-users-table .admin-empty-cell::before {
        content: none;
        display: none;
    }
}

@media (max-width: 430px) {
    .admin-user-toolbar {
        grid-template-columns: 1fr;
    }

    .admin-toolbar-search {
        grid-column: auto;
    }

    .admin-user-classification-form {
        grid-template-columns: 1fr auto;
    }

    .admin-user-classification-form select {
        grid-column: 1;
    }

    .admin-user-classification-form .standard-action-button {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* Acessos: gestão por família no mesmo padrão funcional do Admin global. */
.admin-workspace { display: grid; gap: 14px; }
.admin-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px; }
.admin-tabs button { align-items: center; background: #f4f8fa; border: 1px solid #d7e6ed; border-radius: 999px; color: #38536e; display: inline-flex; font: inherit; font-size: 12px; font-weight: 800; gap: 7px; justify-content: center; min-height: 39px; padding: 8px 14px; white-space: nowrap; }
.admin-tabs button span { align-items: center; background: #e2eef3; border-radius: 999px; display: inline-flex; font-size: 10px; justify-content: center; min-width: 20px; padding: 2px 6px; }
.admin-tabs button.is-active { background: #def6f0; border-color: #9cdecf; color: #006f68; }
.admin-tabs button.is-active span { background: #fff; color: #007a72; }
.admin-create-user { background: #f7fbfc; border: 1px solid #dcebef; border-radius: 13px; margin-top: 16px; }
.admin-create-user summary { align-items: center; color: #075078; cursor: pointer; display: flex; font-size: 12px; font-weight: 850; gap: 8px; list-style: none; padding: 12px 14px; }
.admin-create-user summary::-webkit-details-marker { display: none; }
.admin-create-user-form { border-top: 1px solid #e0ecf0; display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 13px; }
.admin-create-user-form label { color: #5b7087; display: grid; font-size: 10px; font-weight: 800; gap: 5px; min-width: 0; }
.admin-create-user-form :is(input, select) { background: #fff; border: 1px solid #d2e2e9; border-radius: 9px; color: #183d5c; min-height: 36px; min-width: 0; padding: 7px 9px; width: 100%; }
.admin-create-user-form button { align-self: end; min-height: 36px; }
.admin-readonly-action { color: #718094; font-size: 11px; line-height: 1.35; }
.child-record-primary { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }
.child-access-source { border-radius: 999px; font-size: 9px; font-weight: 850; letter-spacing: .01em; padding: 3px 7px; white-space: nowrap; }
.child-access-source.is-owned { background: #ddf6ef; color: #00786c; }
.child-access-source.is-shared { background: #e6f0ff; color: #2a6499; }
.child-record-item.is-shared-child { border-color: #cce0f5; }
.top-child-select.is-owned-child, .mobile-child-select.is-owned-child { box-shadow: inset 3px 0 0 #20a98c; }
.top-child-select.is-shared-child, .mobile-child-select.is-shared-child { box-shadow: inset 3px 0 0 #4389c8; }
.top-child-select.is-shared-child select, .mobile-child-select.is-shared-child select { color: #285f96; }
.profile-owner-upgrade-card { align-items: center; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr); }
.profile-owner-upgrade-card h2 { color: #073f70; font-size: 17px; margin: 0 0 5px; }
.profile-owner-upgrade-card p { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 0; }
.inline-owner-upgrade-form { align-items: end; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; }
.inline-owner-upgrade-form label { color: #587088; display: grid; font-size: 10px; font-weight: 800; gap: 5px; }
.inline-owner-upgrade-form input { min-height: 38px; }
.billing-admin-settings { align-items: end; display: flex; gap: 20px; justify-content: space-between; }
.billing-admin-settings h2 { margin: 2px 0 5px; }
.billing-admin-settings p { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 0; max-width: 680px; }
.billing-admin-settings form { align-items: end; display: flex; flex: 0 0 auto; gap: 8px; }
.billing-admin-settings label { color: #597188; display: grid; font-size: 10px; font-weight: 850; gap: 5px; }
.billing-admin-settings input { min-height: 38px; width: 94px; }
.sharing-permission-editor { border: 1px solid #d7e7ed; border-radius: 13px; margin: 4px 0; padding: 13px; }
.sharing-permission-editor legend { color: #074d74; font-size: 13px; font-weight: 900; padding: 0 5px; }
.sharing-permission-editor > p { color: #62778d; font-size: 11px; margin: 0 0 10px; }
.sharing-permission-grid { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sharing-permission-row { align-items: center; background: #f8fbfc; border: 1px solid #e0ebf0; border-radius: 9px; display: grid; gap: 6px; grid-template-columns: minmax(120px, 1fr) auto auto; padding: 8px 9px; }
.sharing-permission-row strong { color: #284d6d; font-size: 11px; }
.sharing-permission-row label { color: #547087; font-size: 10px; white-space: nowrap; }

@media (max-width: 900px) {
    .admin-create-user-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-create-user-form button { justify-self: start; }
    .profile-owner-upgrade-card { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .admin-tabs { margin-inline: -2px; }
    .admin-tabs button { font-size: 11px; padding-inline: 11px; }
    .admin-create-user-form { grid-template-columns: 1fr; }
    .admin-create-user-form button { width: 100%; }
    .inline-owner-upgrade-form { grid-template-columns: 1fr; }
    .inline-owner-upgrade-form button { width: 100%; }
    .billing-admin-settings { align-items: stretch; display: grid; }
    .billing-admin-settings form { display: grid; grid-template-columns: 1fr; }
    .billing-admin-settings input { width: 100%; }
    .sharing-permission-grid { grid-template-columns: 1fr; }
    .sharing-permission-row { grid-template-columns: minmax(0, 1fr) auto auto; }
}

/* Acessos: gestão por família no mesmo padrão funcional do Admin global. */
.access-management-head {
    align-items: flex-start;
}

.access-management-kicker,
.access-section-kicker {
    color: var(--primary-dark);
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.access-management-head h1 {
    margin: 3px 0 4px;
}

.access-overview-metrics {
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
}

.access-overview-metric {
    background: linear-gradient(145deg, #fff, #f5fbfa);
    border-color: #dbece9;
    box-shadow: none;
    min-height: 106px;
    padding: 16px;
}

.access-overview-metric span {
    color: #5d738a;
    font-size: 10px;
    letter-spacing: .03em;
}

.access-overview-metric strong {
    color: #073f70;
    font-size: 27px;
    line-height: 1.1;
}

.access-operations-grid {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(360px, 1.15fr) minmax(300px, .85fr);
    margin-bottom: 16px;
}

.access-invite-panel,
.access-direct-panel,
.access-summary-card,
.access-table-card {
    min-width: 0;
}

.access-operations-grid .access-summary-card { grid-column: 1 / -1; }

.access-panel-heading {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.access-panel-heading h2 {
    color: #073f70;
    font-size: 20px;
    line-height: 1.15;
    margin: 3px 0 4px;
}

.access-panel-heading p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

.access-panel-total {
    align-items: baseline;
    background: #eef9f7;
    border: 1px solid #ccebe5;
    border-radius: 999px;
    color: #527082;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    gap: 4px;
    padding: 7px 10px;
}

.access-panel-total strong {
    color: var(--primary-dark);
    font-size: 15px;
}

.access-invite-form {
    margin-top: 16px;
}

.access-invite-form > button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 40px;
}

.access-invite-list {
    display: grid;
    gap: 9px;
    margin-top: 15px;
}

.access-invite-list article {
    background: #fbfdfe;
    border: 1px solid #e0eaf0;
    border-radius: 12px;
    min-width: 0;
    padding: 11px 42px 11px 11px;
    position: relative;
}

.access-invite-primary {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.access-invite-primary strong {
    color: #073f70;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.access-invite-primary span,
.access-empty-copy {
    color: #697c91;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.access-invite-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.access-invite-meta span {
    background: #eef7f6;
    border-radius: 999px;
    color: #167b73;
    font-size: 10px;
    padding: 3px 6px;
}

.access-invite-delete {
    margin: 0;
    position: absolute;
    right: 9px;
    top: 9px;
}

.access-empty-copy,
.access-filter-empty {
    margin: 14px 0 0;
}

.access-table-card {
    margin-bottom: 16px;
}

.access-members-toolbar {
    align-items: end;
    border-bottom: 1px solid #e1eaf0;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(210px, 1.55fr) minmax(140px, .75fr) minmax(170px, .95fr);
    margin-top: 16px;
    padding: 0 0 14px;
}

.access-members-toolbar label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.access-members-toolbar label > span {
    color: #60758a;
    font-size: 10px;
    font-weight: 850;
}

.access-members-toolbar :is(input, select) {
    background: #fbfdfe;
    border: 1px solid #d6e4ec;
    border-radius: 10px;
    color: #193d5f;
    font-size: 12px;
    min-height: 37px;
    min-width: 0;
    padding: 7px 10px;
    width: 100%;
}

.access-filter-empty {
    color: var(--muted);
    font-size: 12px;
}

.access-responsive-table {
    margin-top: 10px;
}

.access-members-table {
    min-width: 950px;
}

.access-members-table th {
    color: #5b7087;
    font-size: 10px;
    letter-spacing: .03em;
}

.access-members-table td {
    color: #304e6a;
    font-size: 12px;
    line-height: 1.35;
}

.access-cell-value,
.access-contact-value {
    display: grid;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.access-member-name {
    color: #073f70;
    font-size: 13px;
    font-weight: 850;
}

.access-role-pill,
.access-status-pill {
    border-radius: 999px;
    display: inline-flex;
    font-size: 10px;
    font-weight: 850;
    padding: 4px 7px;
}

.access-role-pill {
    background: #edf7f5;
    color: #167b73;
}

.access-status-active { background: #e3f8f0; color: #08775d; }
.access-status-inactive { background: #f2f5f8; color: #5a6d80; }
.access-status-blocked { background: #fff0f1; color: #c13c4b; }

.access-member-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 230px;
}

.access-member-actions form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.access-member-actions .small-button {
    font-size: 10px;
    min-height: 28px;
    padding: 4px 7px;
}

.access-empty-cell {
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

@container (max-width: 980px) {
    .access-operations-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .access-management-head {
        align-items: center;
    }

    .access-overview-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .access-overview-metric {
        min-height: 82px;
        padding: 11px;
    }

    .access-overview-metric strong {
        font-size: 22px;
    }

    .access-members-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .access-toolbar-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .access-invite-panel,
    .access-summary-card,
    .access-table-card {
        padding: 14px;
    }

    .access-panel-heading {
        gap: 9px;
    }

    .access-panel-heading h2 {
        font-size: 18px;
    }

    .access-panel-heading p {
        font-size: 11px;
    }

    .access-panel-total {
        font-size: 10px;
        padding: 6px 8px;
    }

    .access-panel-total strong {
        font-size: 13px;
    }

    .access-members-toolbar {
        gap: 8px;
        margin-top: 13px;
        padding-bottom: 11px;
    }

    .access-responsive-table {
        overflow: visible;
    }

    .access-members-table,
    .access-members-table tbody {
        display: grid;
        gap: 10px;
        min-width: 0;
        width: 100%;
    }

    .access-members-table thead {
        display: none;
    }

    .access-members-table tr {
        background: #fbfdfe;
        border: 1px solid #dbe8ef;
        border-radius: 13px;
        display: block;
        padding: 5px 10px;
    }

    .access-members-table td {
        align-items: start;
        border: 0;
        border-bottom: 1px solid #e7eef3;
        display: grid;
        gap: 8px;
        grid-template-columns: 78px minmax(0, 1fr);
        min-width: 0;
        padding: 8px 0;
    }

    .access-members-table td:last-child {
        border-bottom: 0;
    }

    .access-members-table td::before {
        color: #5f7288;
        content: attr(data-label);
        display: block;
        font-size: 9px;
        font-weight: 850;
        letter-spacing: .02em;
        line-height: 1.25;
        text-transform: uppercase;
    }

    .access-members-table :is(.access-cell-value, .access-role-pill, .access-status-pill, .access-member-actions) {
        grid-column: 2;
        min-width: 0;
    }

    .access-member-actions {
        min-width: 0;
    }

    .access-members-table .access-empty-cell {
        border: 0;
        display: block;
        padding: 10px 2px;
        text-align: left;
    }

    .access-members-table .access-empty-cell::before {
        content: none;
        display: none;
    }
}

@media (max-width: 430px) {
    .access-overview-metrics {
        grid-template-columns: 1fr;
    }

    .access-members-toolbar {
        grid-template-columns: 1fr;
    }

    .access-toolbar-search {
        grid-column: auto;
    }
}

/* Marcos e Aprendizados: ordem da referência para cartões em tela móvel. */
.milestone-record-status-mobile {
    display: none;
}

@media (max-width: 900px) {
    .milestone-record-table tr {
        display: block;
        min-height: 0;
        padding: 11px;
        position: relative;
    }

    .milestone-record-table td:first-child {
        display: block;
    }

    .milestone-record-status-desktop {
        display: none !important;
    }

    .milestone-record-title-wrap {
        display: block;
        min-width: 0;
    }

    .milestone-record-title-line {
        align-items: center;
        display: flex;
        gap: 7px;
        min-height: 24px;
    }

    .milestone-record-title-line strong {
        display: block;
        flex: 0 1 auto;
        font-size: 13px;
        line-height: 1.18;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .milestone-record-title-line .mobile-age-pill {
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 9.5px;
        margin: 0;
        padding: 4px 7px;
    }

    .milestone-record-status-mobile {
        align-items: center;
        display: inline-flex;
        flex: 0 0 23px;
        height: 23px;
        justify-content: center;
        margin-left: auto;
        width: 23px;
    }

    .milestone-record-status-mobile .mini-svg {
        height: 12px;
        width: 12px;
    }

    .record-title-wrap small {
        display: block;
        font-size: 11px;
        line-height: 1.3;
        margin-top: 4px;
        overflow: visible;
        white-space: normal;
    }

    .record-title-wrap em:not(.record-timing) {
        display: none;
    }

    .milestone-record-table .record-title-wrap .record-timing {
        display: block;
        font-size: 10px;
        line-height: 1.22;
        margin-top: 4px;
    }

    .milestone-mobile-meta {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 7px 76px 0 0;
        min-height: 27px;
    }

    .milestone-mobile-meta .category-pill,
    .milestone-mobile-meta .status-pill {
        font-size: 9.5px;
        padding: 5px 8px;
    }

    .milestone-actions-cell {
        align-items: center;
        bottom: 11px;
        display: flex !important;
        gap: 11px;
        position: absolute;
        right: 11px;
    }

    .milestone-actions-cell .icon-action {
        height: 25px;
        width: 25px;
    }

    .milestone-actions-cell .icon-action .mini-svg {
        height: 12px;
        width: 12px;
    }
}