/* Marcos: quatro sugestoes no desktop, com o radar proporcional ao card vizinho. */
@container (min-width: 680px) {
    .milestone-insights-grid {
        align-items: stretch;
    }

    .milestone-insights-grid > .milestone-top-suggestions,
    .milestone-insights-grid > .milestone-top-profile {
        align-self: stretch;
        height: auto;
    }

    .milestone-top-profile .compact-profile-chart,
    .milestone-top-profile .compact-profile-chart .profile-radar {
        height: 145px;
        min-height: 145px;
    }

    .milestone-top-profile .compact-profile-chart .profile-radar canvas {
        height: 145px !important;
        max-height: 145px;
    }
}

.suggestion-custom-button {
    background: var(--primary);
    background: color-mix(in srgb, var(--primary) 65%, #112343);
    border: 1px solid transparent;
    border-radius: 11px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    min-height: 40px;
    padding: 0 14px;
}

.suggestion-custom-button:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--primary) 55%, #112343);
    border-color: transparent;
    color: #fff;
}

.suggestion-custom-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 45%, #fff);
    outline-offset: 2px;
}

/* O filtro responde a largura real do card, nao a largura da janela inteira. */
.diary-main-panel {
    container-name: diary-main;
    container-type: inline-size;
}

.diary-tabs-row,
.diary-tabs-row .diary-filter-inline {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.diary-tabs-row .diary-filter-inline {
    width: 100%;
}

.diary-tabs-row .diary-filter-inline > * {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

@container diary-main (max-width: 760px) {
    .diary-tabs-row .diary-filter-inline {
        display: grid !important;
        gap: 8px !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px !important;
        height: auto !important;
    }

    .diary-tabs-row .diary-filter-inline :is(select, input, button) {
        box-sizing: border-box;
        height: 36px !important;
        min-height: 36px !important;
        min-width: 0;
        width: 100% !important;
    }

    .diary-tabs-row .diary-filter-inline select[name="period"] {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .diary-tabs-row .diary-filter-inline select[name="category"] {
        grid-column: 2 / 4 !important;
        grid-row: 1 !important;
    }

    .diary-tabs-row .diary-filter-inline .diary-filter-mood {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .diary-tabs-row .diary-filter-inline .diary-filter-search {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .diary-tabs-row .diary-filter-inline .diary-filter-submit {
        grid-column: 3 !important;
        grid-row: 2 !important;
        min-width: 38px !important;
        padding: 0 !important;
        width: 38px !important;
    }
}

@container diary-main (max-width: 450px) {
    .diary-tabs-row .diary-filter-inline {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .diary-tabs-row .diary-filter-inline select[name="category"] {
        grid-column: 2 !important;
    }

    .diary-tabs-row .diary-filter-inline .diary-filter-submit {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: 100% !important;
    }
}

/* Novo registro do Diario: grupos na ordem de preenchimento solicitada. */
.grid-form.diary-entry-form {
    column-gap: 12px;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

.diary-entry-form > .diary-entry-date {
    grid-column: 1 / 5 !important;
    grid-row: 1;
}

.diary-entry-form > .diary-entry-child {
    grid-column: 5 / 8 !important;
    grid-row: 1;
}

.diary-entry-form > .diary-entry-favorite {
    grid-column: 8 / -1 !important;
    grid-row: 1;
}

.diary-entry-form > .diary-entry-category,
.diary-entry-form > .diary-entry-mood {
    background: color-mix(in srgb, var(--primary) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--primary) 26%, #fff);
    border-radius: 11px;
    padding: 8px 10px;
}

.diary-entry-form > .diary-entry-category {
    grid-column: 1 / 7 !important;
    grid-row: 2;
}

.diary-entry-form > .diary-entry-mood {
    grid-column: 7 / -1 !important;
    grid-row: 2;
}

.diary-entry-form > .diary-entry-weather {
    grid-column: 1 / 4 !important;
    grid-row: 3;
}

.diary-entry-form > .diary-entry-title {
    grid-column: 4 / -1 !important;
    grid-row: 3;
}

.diary-entry-form > .diary-entry-story {
    grid-column: 1 / -1 !important;
    grid-row: 4;
}

.diary-entry-form > .diary-entry-photos {
    grid-column: 1 / -1 !important;
    grid-row: 5;
}

.diary-entry-form > .form-actions {
    grid-column: 1 / -1 !important;
    grid-row: 6;
}

.diary-entry-form > label {
    min-width: 0;
}

.diary-entry-form :is(input, select, textarea, .responsive-date-trigger) {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 620px) {
    .grid-form.diary-entry-form {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .diary-entry-form > .diary-entry-date {
        grid-column: 1 / 4 !important;
    }

    .diary-entry-form > .diary-entry-child {
        grid-column: 4 / -1 !important;
    }

    .diary-entry-form > .diary-entry-favorite {
        grid-column: 1 / -1 !important;
        grid-row: 2;
    }

    .diary-entry-form > .diary-entry-category,
    .diary-entry-form > .diary-entry-mood {
        grid-row: 3;
    }

    .diary-entry-form > .diary-entry-category {
        grid-column: 1 / 4 !important;
    }

    .diary-entry-form > .diary-entry-mood {
        grid-column: 4 / -1 !important;
    }

    .diary-entry-form > .diary-entry-weather {
        grid-column: 1 / 3 !important;
        grid-row: 4;
    }

    .diary-entry-form > .diary-entry-title {
        grid-column: 3 / -1 !important;
        grid-row: 4;
    }

    .diary-entry-form > .diary-entry-story {
        grid-row: 5;
    }

    .diary-entry-form > .diary-entry-photos {
        grid-row: 6;
    }

    .diary-entry-form > .form-actions {
        grid-row: 7;
    }

    .diary-entry-form .diary-entry-date :is(.responsive-date-trigger, input[type="datetime-local"]) {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* O titulo da listagem ocupa a linha ja reservada ao seletor de crianca. */
@media (min-width: 901px) {
    .app-topline:is(.diary-app-topline, .milestones-app-topline) {
        align-items: flex-start;
        gap: 20px;
        justify-content: space-between;
        margin-bottom: 6px;
    }

    :is(.diary-topline-heading, .milestones-topline-heading) {
        min-width: 0;
    }

    :is(.diary-topline-heading, .milestones-topline-heading) h1 {
        align-items: center;
        color: var(--ink);
        display: flex;
        font-size: 30px;
        font-weight: 900;
        gap: 10px;
        line-height: 1.15;
        margin: 0;
    }

    :is(.diary-topline-heading, .milestones-topline-heading) p {
        color: var(--muted);
        font-size: 15px;
        line-height: 1.4;
        margin: 5px 0 0;
    }

    .diary-page-head > div:first-child,
    .milestones-page-head > div:first-child {
        display: none;
    }

    .page-head.diary-page-head { display: none; }
    .page-head.milestones-page-head { justify-content: flex-end; margin-bottom: 12px; }

    /* As etiquetas ocupam a altura livre, liberando largura para a historia. */
    .diary-entry-row {
        grid-template-columns: 66px minmax(0, 1fr) minmax(76px, auto) 60px 100px !important;
    }

    .diary-row-tags {
        align-items: flex-end;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
        justify-content: center;
        justify-self: end;
        padding-right: 4px;
        text-align: right;
    }

    .diary-row-tags :is(.category-chip, .mood-chip) {
        max-width: 100%;
        white-space: nowrap;
    }

}

/* O cartao duplo so empilha quando as duas colunas realmente deixam de caber. */
@container (min-width: 680px) {
    .milestone-desktop-extra { display: grid; }
    .milestone-see-all--desktop { display: inline; }
    .milestone-see-all--mobile { display: none; }

    /* Um unico balao, com duas secoes independentes para teclado e leitores. */
    .milestone-insights-grid[data-paired-milestones] {
        background: color-mix(in srgb, var(--primary) 3%, #fff);
        border: 1px solid color-mix(in srgb, var(--primary) 16%, #e7edf3);
        border-radius: 18px;
        box-shadow: 0 14px 30px rgba(31, 55, 86, .05);
        gap: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
    }

    .milestone-insights-grid[data-paired-milestones] > details.panel {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        min-height: 58px;
        padding: 14px 18px 36px;
        position: relative;
    }

    .milestone-insights-grid[data-paired-milestones] > details.panel:not([open]) {
        padding-bottom: 14px;
    }

    .milestone-insights-grid[data-paired-milestones] > .milestone-top-profile {
        border-left: 0;
    }

    .milestone-insights-grid[data-paired-milestones] > .milestone-top-profile::before {
        background: color-mix(in srgb, var(--primary) 22%, #d4e1eb);
        content: "";
        position: absolute;
        left: 0;
        top: 16px;
        bottom: 16px;
        width: 1px;
    }

    .milestone-insights-grid[data-paired-milestones] :is(.milestone-see-all-footer, .milestone-profile-full-link) {
        bottom: 12px;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.2;
        margin: 0;
        position: absolute;
        right: 18px;
    }
}

@container (max-width: 679px) {
    .milestone-top-profile .compact-profile-chart,
    .milestone-top-profile .compact-profile-chart .profile-radar {
        margin-left: 0;
        margin-right: auto;
        max-width: min(100%, 360px);
    }
}

.milestone-create-row {
    flex-wrap: nowrap;
    min-height: 46px;
    padding: 8px 14px 8px 18px;
}

.milestone-create-row .milestone-records-create {
    flex: 0 0 auto;
}

.milestone-record-filters .milestone-filter-icon {
    grid-column: 4;
    height: 36px;
    justify-self: start;
    min-height: 36px;
    min-width: 36px;
    width: 36px;
}

.milestone-record-filters .milestone-filter-icon .mini-svg {
    height: 15px;
    width: 15px;
}

@media (max-width: 900px) {
    .milestone-record-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .milestone-record-filters input[name="q"] {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: start;
        width: calc(100% - 44px);
    }

    .milestone-record-filters .milestone-filter-icon {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
    }
}

@media (max-width: 560px) {
    .milestone-create-row { gap: 6px; padding: 8px 10px; }
    .milestone-create-row > h2 { font-size: 12.5px; }
    .milestone-create-row .milestone-records-create { font-size: 10px; min-height: 30px; padding: 0 9px; }
}

.diary-records-heading {
    align-items: center;
    border-bottom: 1px solid var(--line);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: -22px -22px 10px;
    min-height: 46px;
    padding: 8px 14px 8px 20px;
}

.diary-records-heading h2 {
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    margin: 0;
}

.diary-records-create.button {
    align-items: center;
    background: color-mix(in srgb, var(--primary) 67%, #102c40);
    border: 0;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    gap: 6px;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    white-space: nowrap;
}

.diary-records-create.button:hover,
.diary-records-create.button:focus-visible {
    background: color-mix(in srgb, var(--primary) 76%, #082132);
    color: #fff;
}

.diary-records-create .mini-svg {
    height: 13px;
    width: 13px;
}

.diary-records-create .create-label-short { display: none; }

.growth-records-toolbar {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
    min-height: 48px;
    padding: 8px 14px 8px 18px;
}

.growth-records-toolbar h2 {
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    margin: 0;
}

.growth-records-toolbar .growth-records-create { flex: 0 0 auto; }

@media (max-width: 900px) {
    .diary-records-heading { margin: -12px -12px 10px; padding: 8px 12px; }
}

@media (max-width: 560px) {
    .diary-records-heading { gap: 6px; margin: -12px -12px 10px; padding: 8px 10px; }
    .diary-records-heading h2 { font-size: 12.5px; }
    .diary-records-create.button { font-size: 10px; min-height: 30px; padding: 0 9px; }
    .diary-records-create .create-label-full { display: none; }
    .diary-records-create .create-label-short { display: inline; }
    .growth-records-toolbar { gap: 6px; padding: 8px 10px; }
    .growth-records-toolbar h2 { font-size: 12.5px; }
}

.milestone-create-row > h2 {
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    margin: 0;
}

.milestone-list-head {
    padding-top: 10px;
}

/* Titulo compartilhado das telas principais, junto ao seletor de crianca. */
@media (min-width: 901px) {
    .app-topline.module-app-topline {
        align-items: flex-start;
        gap: 20px;
        justify-content: space-between;
        margin-bottom: 6px;
    }
    .module-topline-heading { min-width: 0; }
    .module-topline-heading h1 {
        align-items: center;
        color: var(--ink);
        display: flex;
        font-size: 30px;
        font-weight: 900;
        gap: 10px;
        line-height: 1.15;
        margin: 0;
    }
    .module-topline-heading p {
        color: var(--muted);
        font-size: 15px;
        line-height: 1.4;
        margin: 5px 0 0;
    }
    .module-landing-page-head { display: none !important; }
}

/* A faixa de criacao pertence ao mesmo cartao dos filtros/registros. */
.module-records-heading {
    align-items: center;
    border-bottom: 1px solid var(--line, #dce8f3);
    display: flex;
    gap: 12px;
    grid-column: 1 / -1;
    justify-content: space-between;
    min-width: 0;
    padding: 0 0 10px;
}
.module-records-heading h2 {
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    margin: 0;
    min-width: 0;
}
.module-records-heading .diary-records-create { flex: 0 0 auto; }
.module-records-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.growth-reference-toolbar { flex-wrap: wrap; }
.growth-reference-toolbar > .module-records-heading { flex: 0 0 100%; }
.vaccine-filter-panel > .module-records-heading { grid-column: 1 / -1; }
.document-filter { max-width: none; }
.document-filter > .module-records-heading { grid-column: 1 / -1; grid-row: 1; }
.document-filter > input { grid-row: 2; }
.document-filter > .document-filter-button { grid-row: 2; }
.health-filter-panel > .module-records-heading { margin-bottom: 12px; }
.child-records-card > .module-records-heading { margin-bottom: 12px; }
.booklet-panel > .booklet-records-heading { margin: -20px -20px 16px; padding: 10px 20px; }
.routine-history-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.dental-history-panel .dental-consultation-add,
.dental-history-panel .dental-consultation-add:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--primary) 67%, #102c40);
    border-color: transparent;
    color: #fff;
}
.photo-folder-tools,
.photo-folder-tools.folder-tools-home { grid-template-columns: minmax(0, 1fr) max-content; }
.photo-folder-tools > form[data-folder-create-form] { grid-column: 1; grid-row: 1; min-width: 0; }
.photo-folder-tools .photo-create-action { align-self: center; grid-column: 2; grid-row: 1; justify-self: end; white-space: nowrap; }
.photo-folder-tools .photo-bulk-actions { grid-column: 1 / -1; }
.photo-folder-tools > form[data-folder-create-form] > input { min-width: 0; }
:is(.care-filter-form, .first-aid-filter-form) > .catalog-filter-submit {
    align-items: center;
    display: inline-flex;
    font-size: 0;
    inline-size: 38px;
    justify-content: center;
    justify-self: end;
    min-inline-size: 38px;
    padding: 0;
}
:is(.care-filter-form, .first-aid-filter-form) > .catalog-filter-submit .mini-svg { height: 16px; width: 16px; }
@media (min-width: 1101px) {
    .care-filter-form { grid-template-columns: minmax(200px, 1.6fr) minmax(130px, .8fr) minmax(145px, .85fr) minmax(105px, .55fr) 38px; }
    .first-aid-filter-form { grid-template-columns: minmax(200px, 1fr) minmax(160px, .55fr) minmax(105px, .4fr) 38px; }
}
.support-create-card .access-panel-heading { align-items: center; }
.support-submit-action { flex: 0 0 auto; }

@media (max-width: 900px) {
    .booklet-panel > .booklet-records-heading { margin: -15px -15px 14px; padding: 9px 15px; }
    .growth-reference-toolbar > .module-records-heading { flex: 0 0 auto; width: 100%; }
}
@media (max-width: 560px) {
    .module-records-heading { gap: 6px; }
    .module-records-heading h2 { font-size: 12.5px; }
    .module-records-actions .capacity-counter { display: none; }
    .vaccine-filter-panel { grid-template-columns: minmax(0, 1fr) auto; }
    .vaccine-filter-panel > input { grid-column: 1 / -1; }
    .vaccine-filter-panel > select { grid-column: 1; min-width: 0; }
    .vaccine-filter-panel > .vaccine-view-mode-control { grid-column: 2; }
    .photo-folder-tools, .photo-folder-tools.folder-tools-home { grid-template-columns: minmax(0, 1fr) max-content !important; }
    .photo-folder-tools > form[data-folder-create-form] { gap: 4px; min-width: 0; padding: 4px; }
    .photo-folder-tools > form[data-folder-create-form] > .small-button { font-size: 10px; padding-inline: 5px; white-space: nowrap; }
    .photo-folder-tools .photo-create-action { font-size: 10px; padding-inline: 7px; }
    .photo-folder-tools .photo-bulk-actions { grid-column: 1 / -1; }
    .routine-history-heading { align-items: center; flex-wrap: wrap; }
    .routine-history-actions { margin-left: auto; }
    .routine-history-actions .diary-records-create.button { padding-inline: 7px; }
    .support-create-card .access-panel-heading { flex-wrap: wrap; gap: 8px; }
    .support-submit-action { padding-inline: 8px; }
}