:root {
    --app-font-family: "Outfit", "Segoe UI", sans-serif;
    --app-color-text-primary: #1f2d3d;
    --app-color-text-muted: #6f7f92;
    --app-color-text-on-brand: #ffffff;
    --app-color-link: #2d91c9;
    --app-color-surface: #ffffff;
    --app-color-surface-soft: #f3f5f8;
    --app-color-surface-muted: #eef5fa;
    --app-color-border: #d3dde8;
    --app-color-border-strong: #aec1d4;
    --app-color-focus: #51b3de;
    --app-surface-shadow: 0 0.9rem 2rem rgba(28, 58, 94, 0.08);

    --app-sidebar-gradient-start: #3fa8d8;
    --app-sidebar-gradient-end: #1d5b9d;
    --app-sidebar-link: #eff8ff;
    --app-sidebar-link-hover: rgba(255, 255, 255, 0.14);
    --app-sidebar-link-active: rgba(255, 255, 255, 0.24);

    --app-auth-background-start: #53add8;
    --app-auth-background-mid: #6abde1;
    --app-auth-background-end: #f3f5f8;
    --app-auth-glow: rgba(255, 255, 255, 0.2);
    --app-auth-accent-soft: rgba(93, 185, 226, 0.1);
    --app-auth-accent-soft-strong: rgba(69, 164, 210, 0.1);
    --app-auth-card-bg: #ffffff;
    --app-auth-card-bg-strong: #ffffff;
    --app-auth-card-border: #cfe2ef;
    --app-auth-input-bg: #ffffff;
    --app-auth-input-border: #b7dcee;
    --app-auth-input-border-focus: #58b6df;
    --app-auth-input-icon: #64b6df;
    --app-auth-placeholder: #8ba0b3;
    --app-auth-link-hover: #238ec8;

    --app-button-height: 2.75rem;
    --app-button-radius: 0.55rem;
    --app-button-shadow: none;
    --app-button-accept-bg: #4ba9d7;
    --app-button-accept-border: #4ba9d7;
    --app-button-accept-text: #ffffff;
    --app-button-secondary-bg: #eef6fb;
    --app-button-secondary-border: #b7d8ea;
    --app-button-secondary-text: #235e8c;

    --app-input-height: 2.75rem;
    --app-input-radius: 0.5rem;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: var(--app-font-family);
    color: var(--app-color-text-primary);
    background-color: var(--app-color-surface-soft);
}

main {
    width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea {
    min-height: var(--app-input-height);
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--app-color-border);
    border-radius: 0.5rem;
    background: #ffffff;
    color: var(--app-color-text-primary);
    font-family: inherit;
    font-size: 0.92rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

textarea {
    min-height: 8rem;
    resize: vertical;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--app-color-focus);
    box-shadow: 0 0 0 2px rgba(81, 179, 222, 0.1);
}

input[type="date"],
input[type="datetime-local"],
input[type="time"] {
    appearance: none;
    padding-right: 2.8rem;
    color-scheme: light;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    width: 1.1rem;
    height: 1.1rem;
    margin-left: 0.65rem;
    padding: 0.2rem;
    border-radius: 999px;
    background-color: #e8f4fb;
    cursor: pointer;
    opacity: 0.9;
    transition: background-color 150ms ease, opacity 150ms ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    background-color: #d6ebf7;
    opacity: 1;
}

a,
.btn-link {
    color: var(--app-color-link);
    text-decoration: none;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus {
    box-shadow: 0 0 0 0.12rem white, 0 0 0 0.28rem rgba(81, 179, 222, 0.28);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmb3c9ImhpZGRlbiI+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMCI+PHJlY3QgeD0iMjM1IiB5PSI1MSIgd2lkdGg9IjU2IiBoZWlnaHQ9IjQ5Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIzNSAtNTEpIj48cGF0aCBkPSJNMjYzLjUwNiA1MUMyNjQuNzE3IDUxIDI2NS44MTMgNTEuNDgzNyAyNjYuNjA2IDUyLjI2NThMMjY3LjA1MiA1Mi43OTg3IDI2Ny41MzkgNTMuNjI4MyAyOTAuMTg1IDkyLjE4MzEgMjkwLjU0NSA5Mi43OTUgMjkwLjY1NiA5Mi45OTZDMjkwLjg3NyA5My41MTMgMjkxIDk0LjA4MTUgMjkxIDk0LjY3ODIgMjkxIDk3LjA2NTEgMjg5LjAzOCA5OSAyODYuNjE3IDk5TDI0MC4zODMgOTlDMjM3Ljk2MyA5OSAyMzYgOTcuMDY1MSAyMzYgOTQuNjc4MiAyMzYgOTQuMzc5OSAyMzYuMDMxIDk0LjA4ODYgMjM2LjA4OSA5My44MDcyTDIzNi4zMzggOTMuMDE2MiAyMzYuODU4IDUyLjEzMTQgMjU5LjQ3MyA1My42Mjk0IDI1OS45NjEgNTIuNzk4NSAyNjAuNDA3IDUyLjI2NThDMjYxLjIgNTEuNDgzNyAyNjIuMjk2IDUxIDI2My41MDYgNTFaTTI2My41ODYgNjYuMDE4M0MyNjAuNzM3IDY2LjAxODMgMjU5LjMxMyA2Ny4xMjQ1IDI1OS4zMTMgNjkuMzM3IDI1OS4zMTMgNjkuNjEwMiAyNTkuMzMyIDY5Ljg2MDggMjU5LjM3MSA3MC4wODg3TDI2MS43OTUgODQuMDE2MSAyNjUuMzggODQuMDE2MSAyNjcuODIxIDY5Ljc0NzVDMjY3Ljg2IDY5LjczMDkgMjY3Ljg3OSA2OS41ODc3IDI2Ny44NzkgNjkuMzE3OSAyNjcuODc5IDY3LjExODIgMjY2LjQ0OCA2Ni4wMTgzIDI2My41ODYgNjYuMDE4M1pNMjYzLjU3NiA4Ni4wNTQ3QzI2MS4wNDkgODYuMDU0NyAyNTkuNzg2IDg3LjMwMDUgMjU5Ljc4NiA4OS43OTIxIDI1OS43ODYgOTIuMjgzNyAyNjEuMDQ5IDkzLjUyOTUgMjYzLjU3NiA5My41Mjk1IDI2Ni4xMTYgOTMuNTI5NSAyNjcuMzg3IDkyLjI4MzcgMjY3LjM4NyA4OS43OTIxIDI2Ny4zODcgODcuMzAwNSAyNjYuMTE2IDg2LjA1NDcgMjYzLjU3NiA4Ni4wNTQ3WiIgZmlsbD0iI0ZGRTUwMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.app-view {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.app-grid {
    display: grid;
    gap: 0.85rem;
}

.app-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.app-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.app-toolbar--form-actions {
    margin-top: 0.75rem;
}

.app-inline-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--app-button-height);
    padding: 0 1rem;
    border-radius: var(--app-button-radius);
    border: 1px solid var(--app-button-accept-border);
    background: var(--app-button-accept-bg);
    color: var(--app-button-accept-text);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.app-inline-action:hover {
    background: #3c9cc8;
    border-color: #3c9cc8;
    color: #ffffff;
}

.app-inline-action--ghost {
    border-color: var(--app-button-secondary-border);
    background: var(--app-button-secondary-bg);
    color: var(--app-button-secondary-text);
}

.app-inline-action--ghost:hover {
    background: #e3f0f8;
    border-color: #a6cde1;
    color: #1f557f;
}

.app-inline-action--compact {
    min-height: 2rem;
    padding: 0 0.8rem;
    font-size: 0.82rem;
}

.app-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.8rem;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-weight: 700;
}

.app-pill--brand {
    background: #ebf6fc;
    border-color: #b5dff2;
    color: #2a82bc;
}

.app-pill--success {
    background: #edf8f1;
    border-color: #b9dec5;
    color: #2d7f4d;
}

.app-pill--warning {
    background: #fff6e7;
    border-color: #f0d7a7;
    color: #9a6b14;
}

.app-pill--danger {
    background: #fff0f0;
    border-color: #efc3c3;
    color: #aa3c3c;
}

.app-form-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.app-field--full {
    grid-column: 1 / -1;
}

.app-field label,
.app-filter-field label {
    color: var(--app-color-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-filter-grid {
    display: grid;
    gap: 0.75rem;
    align-items: end;
    grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(9rem, 1fr));
}

.app-filter-grid--4 {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(9rem, 1fr));
}

.app-filter-grid--3 {
    grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(9rem, 1fr));
}

.app-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.app-search-inline {
    display: flex;
    gap: 0.6rem;
}

.app-search-inline--wide {
    width: min(100%, 38rem);
}

.app-search-inline input {
    flex: 1;
}

.app-checkbox-line {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--app-color-text-primary);
    font-size: 0.92rem;
}

.app-checkbox-line input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--app-color-focus);
}

.app-table-shell {
    border: 1px solid var(--app-color-border);
    border-radius: 0.7rem;
    overflow: hidden;
    background: #ffffff;
}

.app-table-scroll {
    max-height: 30rem;
    overflow: auto;
}

.app-table-scroll table {
    min-width: 100%;
}

.app-data-table {
    width: 100%;
    border-collapse: collapse;
}

.app-data-table th,
.app-data-table td {
    padding: 0.68rem 0.75rem;
    border-bottom: 1px solid #e6edf4;
    text-align: left;
    vertical-align: middle;
}

.app-data-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #e9f2fa;
    color: #255271;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.app-data-table td {
    color: var(--app-color-text-primary);
    font-size: 0.92rem;
}

.reportes-mode-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.95rem;
}

.reportes-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reportes-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--app-color-border);
    border-radius: 0.7rem;
    background: #ffffff;
}

.reportes-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 0.9rem;
}

.reportes-table-scroll {
    max-height: 34rem;
}

.reportes-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.app-data-table tbody tr:hover td {
    background: #f8fbff;
}

.app-data-table tr:last-child td {
    border-bottom: 0;
}

.app-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.app-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--app-color-border);
    border-radius: 0.7rem;
    background: #ffffff;
}

.app-list-item__copy {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.app-list-item__title {
    color: var(--app-color-text-primary);
    font-weight: 700;
}

.app-list-item__meta,
.app-list-item__description {
    color: var(--app-color-text-muted);
    font-size: 0.9rem;
}

.app-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.app-summary-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.app-meta-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--app-color-border);
    border-radius: 0.7rem;
    background: #ffffff;
}

.app-meta-item__label {
    color: var(--app-color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-meta-item__value {
    color: var(--app-color-text-primary);
    font-size: 0.92rem;
}

.app-code-block {
    display: block;
    padding: 1rem 1.1rem;
    border: 1px solid var(--app-color-border);
    border-radius: 0.75rem;
    background: #f8fbfe;
    color: #1f2d3d;
    font-family: Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    overflow-x: auto;
}

.app-note {
    margin: 0;
    color: var(--app-color-text-muted);
    font-size: 0.88rem;
}

.app-compose-grid {
    display: grid;
    gap: 0.85rem;
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 12rem;
}

.app-compose-grid__body {
    grid-column: 1 / -1;
}

.app-compose-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.app-carnet-preview {
    overflow: hidden;
    border: 1px solid var(--app-color-border);
    border-radius: 1.4rem;
    background: #ffffff;
    box-shadow: var(--app-surface-shadow);
}

.app-carnet-preview__brand {
    padding: 1.25rem 1.25rem 1rem;
    background: linear-gradient(180deg, #4eaeda 0%, #68bfe4 100%);
    text-align: center;
    color: #ffffff;
}

.app-carnet-preview__brand img {
    width: 5.4rem;
    height: 5.4rem;
    padding: 0.45rem;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 0.85rem 1.8rem rgba(22, 61, 98, 0.18);
    object-fit: contain;
}

.app-carnet-preview__brand h3 {
    margin: 0.85rem 0 0;
    font-size: 1.55rem;
}

.app-carnet-preview__brand p {
    margin: 0.2rem 0 0;
    font-size: 0.92rem;
}

.app-carnet-preview__holder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 1rem 0;
    padding: 0.85rem 1rem;
    border: 1px solid #bde0ef;
    border-radius: 0.95rem;
}

.app-carnet-preview__holder-name {
    font-weight: 700;
}

.app-carnet-preview__holder-meta {
    color: var(--app-color-text-muted);
    font-size: 0.9rem;
}

.app-carnet-preview__status {
    color: var(--app-color-link);
    font-size: 1.2rem;
}

.app-carnet-preview__qr {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.25rem 1rem 1.5rem;
}

.app-carnet-preview__qr--empty {
    min-height: 14rem;
    color: var(--app-color-text-muted);
    font-weight: 600;
}

.app-carnet-preview__qr-image {
    display: block;
    width: min(100%, 26rem);
    max-width: 100%;
    aspect-ratio: 1;
    height: auto;
    object-fit: contain;
    image-rendering: crisp-edges;
}

.app-carnet-preview__meta {
    padding: 1rem;
}

.app-logout-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: linear-gradient(180deg, #53add8 0%, #f3f5f8 90%);
}

.app-logout-screen__card {
    padding: 2rem 2.2rem;
    border-radius: 1.2rem;
    background: #ffffff;
    text-align: center;
    box-shadow: var(--app-surface-shadow);
    border: 1px solid var(--app-color-border);
}

.app-logout-screen__card h1,
.app-logout-screen__card p {
    margin: 0;
}

.app-logout-screen__card h1 {
    margin-bottom: 0.35rem;
    font-size: 1.35rem;
}

.app-logout-screen__card p {
    color: var(--app-color-text-muted);
}

/* Shared modal shell used by confirmation and editor dialogs. */
.app-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.5rem;
    background: rgba(12, 27, 38, 0.62);
    backdrop-filter: blur(6px);
}

.app-modal-card {
    display: flex;
    flex-direction: column;
    width: min(100%, 34rem);
    max-height: calc(100vh - 3rem);
    overflow: hidden;
    border: 1px solid rgba(102, 149, 176, 0.22);
    border-radius: 1.15rem;
    background: linear-gradient(180deg, #f9fcfe 0%, #eef5f9 100%);
    box-shadow: 0 1.5rem 4rem rgba(8, 32, 48, 0.28);
    color: #173244;
}

.app-modal-card__header,
.app-modal-card__body,
.app-modal-card__footer {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}

.app-modal-card__header {
    flex: 0 0 auto;
    padding-top: 1.35rem;
    padding-bottom: 0.8rem;
}

.app-modal-card__header h3 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.2;
}

.app-modal-card__eyebrow {
    margin: 0 0 0.3rem;
    color: #4d7187;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-modal-card__body {
    min-height: 0;
    overflow-y: auto;
    padding-top: 0.3rem;
    padding-bottom: 1rem;
}

.app-modal-card__section + .app-modal-card__section {
    margin-top: 0.9rem;
}

.app-modal-card__label {
    margin: 0 0 0.45rem;
    color: #33576d;
    font-size: 0.86rem;
    font-weight: 700;
}

.app-modal-card__list {
    margin: 0;
    padding-left: 1.15rem;
    color: #28495d;
}

.app-modal-card__list li + li {
    margin-top: 0.35rem;
}

.app-modal-card__footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    padding-top: 0.9rem;
    padding-bottom: 1.25rem;
    border-top: 1px solid rgba(102, 149, 176, 0.18);
    background: rgba(249, 252, 254, 0.9);
}

@media (max-width: 1180px) {
    .app-filter-grid,
    .app-filter-grid--4,
    .app-filter-grid--3,
    .app-compose-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .app-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .app-grid--2,
    .app-grid--3,
    .app-grid--4,
    .app-form-grid,
    .app-filter-grid,
    .app-filter-grid--4,
    .app-filter-grid--3,
    .app-compose-grid,
    .app-meta-grid {
        grid-template-columns: 1fr;
    }

    .app-page-header,
    .app-panel__header,
    .app-summary-row,
    .app-list-item,
    .app-carnet-preview__holder {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-carnet-preview__brand {
        padding: 1.4rem 1rem 1rem;
    }

    .app-carnet-preview__holder {
        margin: 0.9rem 0.9rem 0;
    }

    .app-carnet-preview__qr {
        padding: 1rem 0.65rem 1.25rem;
    }

    .app-carnet-preview__qr-image {
        width: min(100%, calc(100vw - 5rem));
        max-width: 28rem;
    }

    .app-page-header__actions,
    .app-panel__actions,
    .app-summary-row__actions,
    .app-compose-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .app-table-scroll {
        max-height: none;
    }

    .app-modal-backdrop {
        place-items: end center;
        padding: 0.75rem;
    }

    .app-modal-card {
        max-height: calc(100vh - 1.5rem);
        border-radius: 1rem;
    }

    .app-modal-card__header,
    .app-modal-card__body,
    .app-modal-card__footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .app-modal-card__footer {
        flex-direction: column-reverse;
    }
}