/* Shared application UI. Kept separate from the generated Tailwind bundle. */
.es-app {
    --ux-accent: #0284c7;
    --ux-focus: #38bdf8;
    --ux-radius: .875rem;
    --ux-fast: 160ms;
    --ux-ease: cubic-bezier(.2, .7, .2, 1);
    font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-tap-highlight-color: transparent;
}
.es-app, .es-app *, .es-app *::before, .es-app *::after { box-sizing: border-box; }
.es-app :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--ux-focus);
    outline-offset: 3px;
}
.es-app :where(button, a, input, select, textarea, summary) {
    transition: background-color var(--ux-fast) ease, border-color var(--ux-fast) ease,
        color var(--ux-fast) ease, box-shadow var(--ux-fast) ease, transform var(--ux-fast) var(--ux-ease);
}
.es-app :where(button, input[type="submit"]):disabled { cursor: wait; opacity: .6; }
.es-app :where(img, video, canvas, iframe) { max-width: 100%; }
.ux-skip-link {
    position: fixed; top: .75rem; left: .75rem; z-index: 1500;
    padding: .8rem 1rem; border-radius: .65rem; background: #075985; color: #fff;
    transform: translateY(-180%);
}
.ux-skip-link:focus { transform: translateY(0); }
.ux-content { min-width: 0; min-height: 0; scrollbar-gutter: stable; overscroll-behavior: contain; }
.ux-content > * { min-width: 0; max-width: 100%; flex-shrink: 0; }
.ux-content :where(.grid, form, dl) > * { min-width: 0; }
.ux-content .grid > div { overflow-wrap: break-word; }
.ux-content :where(h1, h2, h3) { text-wrap: balance; line-height: 1.3; }
.ux-content :where(p, dd, .break-words) { overflow-wrap: anywhere; }
.ux-content :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
    max-width: 100%; min-width: 0; min-height: 2.75rem; border-radius: .65rem;
}
.ux-content :where(textarea) { min-height: 6rem; resize: vertical; }
.ux-content :where(input, select, textarea)[aria-invalid="true"] { border-color: #e11d48; }
.ux-content :where(button, input[type="submit"], input[type="button"], summary) {
    min-height: 2.75rem; touch-action: manipulation;
}
.ux-content :where(button, .btn) { font-weight: 600; }
.ux-content :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ux-accent); }
.ux-check-target { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; cursor: pointer; }
.ux-content :where(input[type="file"]) { padding: .5rem; font-size: .875rem; }
.ux-content :where(input[type="file"])::file-selector-button {
    margin-right: .75rem; padding: .5rem .75rem; border: 0; border-radius: .5rem;
    background: #e0f2fe; color: #075985; font-weight: 600; cursor: pointer;
}
.ux-content :where(.flex.flex-wrap, .ux-actions) { row-gap: .6rem; }
.ux-page-header { align-items: center; }
.ux-page-header h1 { font-size: clamp(1.25rem, 1.1rem + .65vw, 1.8rem); }
.ux-page-header a { min-height: 2.75rem; justify-content: center; }
.ux-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ux-stat { border-radius: var(--ux-radius); font-variant-numeric: tabular-nums; }
.ux-stat > :last-child { overflow-wrap: anywhere; font-size: clamp(1.35rem, 1.1rem + .75vw, 1.75rem); }
.ux-filters { overflow: clip; border-radius: var(--ux-radius); }
.ux-filters summary { gap: 1rem; }
.ux-filters summary::after {
    content: ""; width: .55rem; height: .55rem; flex-shrink: 0;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform var(--ux-fast) ease;
}
.ux-filters[open] summary::after { transform: rotate(225deg); }
.ux-filters[open] form { animation: ux-reveal 180ms var(--ux-ease); }
.ux-pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; }
.ux-pagination a, .ux-pagination [aria-current] {
    min-height: 2.75rem; min-width: 2.75rem; display: inline-flex;
    align-items: center; justify-content: center; border-radius: .65rem;
}
.ux-table-region { position: relative; max-width: 100%; overflow: auto; overscroll-behavior-x: contain; border-radius: var(--ux-radius); }
.ux-table-region table { width: 100%; font-variant-numeric: tabular-nums; }
.ux-table-region th { text-align: left; white-space: nowrap; font-weight: 600; }
.ux-table-region :where(th, td) { padding: .85rem 1rem; vertical-align: middle; }
.ux-table-region td:not([colspan]) { overflow-wrap: break-word; }
.ux-table-region td.flex { display: table-cell; }
.ux-table-region td.flex > :is(a, button) { display: inline-flex; align-items: center; margin: .2rem .4rem .2rem 0; }
.ux-table-region td :where(a, button) { min-height: 2.5rem; align-items: center; }
.ux-table-region tbody tr { transition: background-color var(--ux-fast) ease; }
.ux-table-region tbody tr:focus-within { box-shadow: inset 3px 0 var(--ux-accent); }
.ux-table-hint { color: #64748b; font-size: .75rem; line-height: 1.5; margin: .5rem 0; }
.es-client .ux-table-hint { color: #94a3b8; }
.ux-table-hint[hidden] { display: none; }
.ux-content > :not(script, style, audio, .fixed, [hidden]) { animation: ux-reveal 220ms var(--ux-ease) backwards; }
.ux-content > :nth-child(2) { animation-delay: 25ms; }
.ux-content > :nth-child(3) { animation-delay: 50ms; }
.ux-content > :nth-child(4) { animation-delay: 75ms; }
@keyframes ux-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ux-loading { cursor: progress; }
.ux-loading button[type="submit"] { opacity: .7; }
.ux-loading button[type="submit"]::after {
    content: ""; display: inline-block; width: .85rem; height: .85rem; margin-left: .5rem;
    vertical-align: middle; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: ux-spin .8s linear infinite;
}
@keyframes ux-spin { to { transform: rotate(360deg); } }

/* Internal central: one scroll container and an accessible tablet/mobile drawer. */
.es-central { height: 100vh; height: 100dvh; overflow: hidden; }
.es-central .ux-shell { height: 100%; min-height: 0; }
.es-central .ux-workspace { min-height: 0; }
.es-central .ux-content { padding: clamp(1rem, 2.1vw, 2rem); padding-bottom: calc(5rem + env(safe-area-inset-bottom)); background: #f8fafc; }
.es-central .ux-content > :is(form, .bg-white) { border-radius: var(--ux-radius); }
.es-central .ux-sidebar { width: 17rem; padding-top: env(safe-area-inset-top); }
.ux-sidebar nav a { min-height: 2.75rem; }
.ux-sidebar nav a[aria-current="page"] { background: #0c4a6e; border-color: #38bdf84d; color: #fff; }
.ux-mobile-header { gap: .75rem; padding: .65rem 1rem; padding-top: max(.65rem, env(safe-area-inset-top)); }
.ux-mobile-header h1 { min-width: 0; margin: 0; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.ux-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: .65rem; }
.ux-icon-button:hover { background: #ffffff14; }
.ux-drawer-close { position: absolute; top: .65rem; right: .65rem; }
.ux-sidebar-overlay { background: #0206179c; backdrop-filter: blur(3px); }
.es-central.ux-drawer-open .pwa-controls { visibility: hidden; pointer-events: none; }
@media (min-width: 1024px) {
    .es-central .ux-workspace { margin-left: 17rem; }
    .es-central .ux-sidebar { transform: translateX(0); }
    .ux-mobile-header, .ux-drawer-close { display: none; }
    .ux-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
    .es-central .ux-workspace { margin-left: 0; }
    .es-central .ux-sidebar { transform: translateX(-100%); width: min(20rem, calc(100vw - 3rem)); visibility: hidden; }
    .es-central .ux-sidebar.is-open { transform: translateX(0); visibility: visible; }
    .ux-mobile-header { display: flex; }
    .ux-sidebar nav { min-height: 0; }
    .ux-sidebar > header { padding-top: 1rem; padding-bottom: .75rem; }
    .ux-sidebar > header img { width: 5rem; margin-bottom: .5rem; }
    .ux-sidebar footer { padding: .75rem 1rem; }
}

/* Customer portal: readable desktop measure, independent scrolling, safe-area navigation. */
.es-client { height: 100vh; height: 100dvh; width: 100%; overflow: hidden; }
.ux-client-shell, .ux-client-frame { height: 100%; min-height: 0; width: 100%; }
.ux-client-frame { max-width: 90rem; margin-inline: auto; }
.es-client .ux-content { overflow-y: auto; padding: 1.25rem clamp(1rem, 3vw, 2rem) calc(7.5rem + env(safe-area-inset-bottom)); }
.ux-client-header { padding-inline: clamp(1rem, 3vw, 2rem); }
.ux-client-identity { min-width: 0; flex: 1; }
.ux-client-identity > div { min-width: 0; }
.ux-client-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-client-header a { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
.ux-client-header a[aria-label] { min-width: 2.75rem; }
.ux-client-nav { width: 100%; max-width: 90rem; }
.ux-client-nav a { min-height: 3.5rem; transition: background-color var(--ux-fast), color var(--ux-fast); }
.ux-client-nav a[aria-current="page"] { box-shadow: inset 0 2px #38bdf8; }
.es-client .ux-content > form { width: 100%; }
.es-client .pwa-controls { bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
.es-client .ux-content .text-textMuted { color: #cbd5e1; }
.es-client .ux-content :where(.grid > a) { min-height: 5rem; }
.es-client .page-card { border: 1px solid #334155; border-radius: var(--ux-radius); padding: clamp(1rem, 3vw, 1.5rem); background: #0f172a; }
.es-client .page-header { margin-bottom: 1.5rem; }
.es-client .page-header h1 { font-size: 1.25rem; font-weight: 600; }
.es-client .page-header p { color: #94a3b8; margin-top: .5rem; }
.es-client .detalhes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.es-client .detalhe-box, .es-client .pagamento-metodo { padding: 1rem; border: 1px solid #334155; border-radius: .75rem; min-width: 0; }
.es-client .detalhe-box h3, .es-client .pagamento-metodo h3 { font-weight: 600; margin-bottom: .75rem; }
.es-client .valor-destaque { font-size: 1.5rem; color: #6ee7b7; }
.es-client .pagamento-box { display: grid; gap: 1rem; margin-block: 1.5rem; }
.es-client .pagamento-box h2 { font-weight: 600; font-size: 1.125rem; }
.es-client .codigo-box { overflow-wrap: anywhere; font-family: monospace; padding: .75rem; background: #020617; border-radius: .5rem; margin-bottom: .75rem; user-select: all; }
.es-client .pix-qrcode { width: min(100%, 15rem); margin-top: 1rem; background: white; padding: .75rem; border-radius: .75rem; }
.es-client .page-footer { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; }
.es-client :is(.btn-primary, .btn-secondary, .btn-voltar) { display: inline-flex; justify-content: center; align-items: center; padding: .75rem 1rem; border-radius: .65rem; min-height: 2.75rem; background: #075985; color: #fff; }

/* Login and account recovery remain usable with a small screen or virtual keyboard. */
.es-auth { min-height: 100vh; min-height: 100dvh; height: auto; }
.es-auth .ux-content { min-height: 100vh; min-height: 100dvh; }
.es-auth .ux-content > .min-h-screen { min-height: 100vh; min-height: 100dvh; padding-block: 2rem; }
.es-auth .ux-content form input { font-size: 1rem; }
.es-auth .ux-content .shadow-md { border: 1px solid #e2e8f0; border-radius: 1.25rem; box-shadow: 0 16px 45px #0f172a0d; }
.es-auth .pwa-controls { bottom: max(.75rem, env(safe-area-inset-bottom)); }

/* Dialogs stay within the visual viewport, including landscape and virtual keyboards. */
.es-app :is([data-ux-dialog], [id^="modal-"]) { padding: 1rem; overflow-y: auto; overscroll-behavior: contain; z-index: 100; }
.es-app :is([data-ux-dialog], [id^="modal-"]) > div { max-height: calc(100dvh - 2rem); overflow-y: auto; margin-block: auto; }
.es-app [data-ux-dialog]:not(.hidden) > div { animation: ux-reveal 180ms var(--ux-ease); }
.es-app #preview-modal > div { display: flex; flex-direction: column; height: 90dvh; }
.es-app #preview-modal iframe { min-height: 0; flex: 1; }
.ux-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid #e2e8f0; }
.es-app [id$="toast-container"] { max-width: calc(100vw - 2rem); }
.es-app [id$="toast-container"] > * { animation: ux-reveal 180ms ease; }
.es-app .pwa-controls { right: max(.75rem, env(safe-area-inset-right)); }
.es-central .pwa-controls { bottom: max(.75rem, env(safe-area-inset-bottom)); }
.es-app .pwa-action { min-height: 2.75rem; }
.es-app .codex-editor button { min-height: unset; }
.es-app #contract-content-section.is-fullscreen { inset: max(.5rem, env(safe-area-inset-top)) .5rem max(.5rem, env(safe-area-inset-bottom)); }
.es-app.editor-fullscreen-open #formModeloContrato { animation: none; transform: none; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ux-stat:hover, .es-client .ux-content .grid > a:hover { transform: translateY(-2px); box-shadow: 0 6px 20px #0f172a10; }
    .ux-help-card:hover { border-color: #7dd3fc; transform: translateY(-2px); box-shadow: 0 6px 20px #0f172a10; }
    .ux-sidebar nav a:hover { transform: translateX(2px); }
    .ux-content button:not(:disabled):active { transform: translateY(1px); }
}
@media (max-width: 639px) {
    .es-app #editor-container { padding-inline: 1rem; }
    .es-app .placeholder-inline { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
    .ux-content :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 1rem; }
    .ux-table-region :where(th, td) { padding: .75rem; }
    .ux-pagination { justify-content: center; }
    .ux-page-header { align-items: stretch; }
    .ux-page-header > a { width: 100%; }
    .ux-mobile-records, .ux-mobile-records tbody { display: block; }
    .ux-mobile-records thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
    .ux-mobile-records .ux-record-row { display: block; padding: .5rem; border-bottom: 1px solid #334155; }
    .ux-mobile-records .ux-record-row td {
        display: grid; grid-template-columns: minmax(5.5rem, .7fr) minmax(0, 1.3fr);
        gap: .75rem; padding: .55rem .5rem; align-items: start; text-align: left;
    }
    .ux-mobile-records .ux-record-row td::before { content: attr(data-label); font-size: .75rem; color: #94a3b8; font-weight: 500; }
    .ux-mobile-records .ux-record-row td > .ux-cell-content { min-width: 0; }
    .ux-mobile-records .ux-record-row td a { margin: .15rem .25rem .15rem 0; }
    .ux-mobile-records tr:not(.ux-record-row) td[colspan] { display: block; width: 100%; padding: 2rem 1rem; }
    .ux-mobile-records tfoot, .ux-mobile-records tfoot tr { display: block; }
    .ux-mobile-records tfoot td { display: inline-block; }
    .es-client .ux-content > form.flex { flex-wrap: wrap; }
    .es-client .ux-content > form.flex select { width: 100%; flex: 1 1 100%; }
    .es-client .ux-content > form.flex button { width: 100%; }
    .es-auth .ux-content .p-8 { padding: 1.5rem; }
    .es-app :is([data-ux-dialog], [id^="modal-"]) { padding: .5rem; }
    .es-app :is([data-ux-dialog], [id^="modal-"]) > div { max-height: calc(100dvh - 1rem); }
}
@media (prefers-reduced-motion: reduce) {
    .es-app *, .es-app *::before, .es-app *::after {
        animation-duration: .01ms !important; animation-delay: 0ms !important;
        animation-iteration-count: 1 !important; transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
@media print {
    .ux-skip-link, .ux-mobile-header, .ux-sidebar, .ux-client-nav, .pwa-controls, .ux-table-hint { display: none !important; }
    .es-app, .ux-content, .ux-client-shell, .ux-client-frame { height: auto; overflow: visible; }
    .es-central .ux-workspace { margin-left: 0; }
    .ux-table-region { overflow: visible; }
}