:root {
  --background: #f8f5f6;
  --surface: #ffffff;
  --text: #2e2529;
  --muted: #766b70;
  --primary: #a94f72;
  --primary-dark: #873b59;
  --border: #eadde2;
  --success: #287a52;
  --error: #a5303d;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--background);
}

* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
body { margin: 0; min-height: 100vh; background: var(--background); }
button, input, select, textarea { font: inherit; }
button { border: 0; border-radius: 9px; padding: .72rem 1.05rem; color: #fff; background: var(--primary); cursor: pointer; font-weight: 650; }
button:hover:not(:disabled) { background: var(--primary-dark); }
button:disabled { cursor: not-allowed; opacity: .55; }
input, select, textarea { width: 100%; margin-top: .38rem; padding: .72rem .78rem; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--text); }
input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--primary); }
input:focus, select:focus, textarea:focus { outline: 2px solid #dca8bb; border-color: var(--primary); }
textarea { resize: vertical; }
label, .field-label { color: var(--muted); font-size: .9rem; font-weight: 650; }
h1, h2, h3, p { margin-top: 0; }

.login-page { display: grid; place-items: center; padding: 1.2rem; background: radial-gradient(circle at top, #f3dfe7, var(--background) 48%); }
.login-card { width: min(100%, 410px); padding: 2rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 48px rgba(72, 35, 50, .1); }
.brand { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.8rem; }
.brand h1 { margin: 0; font-size: 1.5rem; }
.brand p { margin: .15rem 0 0; color: var(--muted); }
.brand-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: white; font-weight: 800; }
.stack { display: grid; gap: 1rem; }
.stack[hidden] { display: none; }
.active-session p { margin-bottom: .25rem; color: var(--muted); line-height: 1.55; }
.active-session strong { color: var(--text); overflow-wrap: anywhere; }
.reset-card h1 { margin-bottom: .45rem; }
.reset-intro { margin-bottom: 1.5rem; color: var(--muted); }
.text-button { padding: .25rem; color: var(--primary); background: transparent; }
.text-button:hover:not(:disabled) { color: var(--primary-dark); background: transparent; text-decoration: underline; }
.back-link { display: block; margin-top: 1rem; color: var(--primary); text-align: center; font-weight: 650; text-decoration: none; }
.back-link:hover { color: var(--primary-dark); text-decoration: underline; }

.admin-page { background: var(--background); }
.app-sidebar { position: fixed; z-index: 900; inset: 0 auto 0 0; width: 250px; padding: 1.25rem 1rem; border-right: 1px solid var(--border); background: #fff9fb; }
.sidebar-brand { display: flex; align-items: center; gap: .8rem; padding: .2rem .45rem 1.4rem; border-bottom: 1px solid var(--border); }
.sidebar-brand > div { display: flex; min-width: 0; flex-direction: column; }
.sidebar-brand strong { font-size: 1.05rem; }
.sidebar-brand span:not(.brand-mark) { color: var(--muted); font-size: .78rem; }
.sidebar-brand .brand-mark { width: 42px; height: 42px; flex: 0 0 auto; }
.sidebar-nav { display: grid; gap: .4rem; margin-top: 1.2rem; }
.sidebar-link { display: flex; width: 100%; align-items: center; gap: .7rem; padding: .72rem .8rem; color: var(--muted); background: transparent; text-align: left; }
.sidebar-link:hover:not(:disabled) { color: var(--primary-dark); background: #f7e9ee; }
.sidebar-link.is-active { color: #fff; background: var(--primary); box-shadow: 0 6px 16px rgba(169, 79, 114, .18); }
.sidebar-link[hidden] { display: none; }
.sidebar-link span { width: 1.25rem; text-align: center; }
.sidebar-site-link { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; padding: .72rem .8rem; border-top: 1px solid var(--border); color: var(--primary-dark); font-size: .88rem; font-weight: 700; text-decoration: none; }
.sidebar-site-link span { width: 1.25rem; text-align: center; }
.sidebar-site-link:hover { color: var(--primary); background: #f7e9ee; }
.app-shell { min-width: 0; max-width: 100%; min-height: 100vh; margin-left: 250px; }
.app-topbar { position: sticky; z-index: 100; top: 0; display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem max(1.2rem, calc((100% - 1180px) / 2)); border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); }
.page-title-area { display: flex; align-items: center; gap: .8rem; }
.page-title-area h1 { margin: 0; font-size: 1.35rem; }
.sidebar-toggle { display: none; padding: .45rem .65rem; color: var(--primary); background: #f7e9ee; font-size: 1.15rem; }
.app-content { width: min(1180px, calc(100% - 2.4rem)); min-width: 0; max-width: 100%; margin: 1.4rem auto 3rem; }
.app-section { display: none; min-width: 0; max-width: 100%; }
.app-section.is-active { display: block; }
.sidebar-backdrop { display: none; }
.app-toast { position: fixed; z-index: 3000; top: 1rem; right: 1rem; display: flex; width: min(390px, calc(100vw - 2rem)); align-items: flex-start; justify-content: space-between; gap: .9rem; padding: .9rem 1rem; border: 1px solid transparent; border-radius: 12px; color: #fff; box-shadow: 0 16px 40px rgba(35, 24, 29, .24); animation: toast-in .18s ease-out; }
.app-toast[hidden] { display: none; }
.app-toast-success { background: #287a52; border-color: #1f6844; }
.app-toast-error { background: #a5303d; border-color: #842631; }
.app-toast-info { background: #315f88; border-color: #274d70; }
.app-toast span { overflow-wrap: anywhere; line-height: 1.4; }
.app-toast button { flex: 0 0 auto; padding: 0 .15rem; color: inherit; background: transparent; font-size: 1.25rem; line-height: 1; opacity: .8; }
.app-toast button:hover:not(:disabled) { background: transparent; opacity: 1; }
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.working-hours-toolbar { display: grid; max-width: 420px; margin-bottom: 1rem; }
.working-hours-toolbar label, .working-time-field { display: grid; gap: .4rem; color: var(--muted); font-size: .78rem; font-weight: 750; }
.working-hours-content { min-width: 0; }
.working-hours-week { display: grid; gap: .7rem; }
.working-day-card { overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: #fff; box-shadow: 0 7px 20px rgba(60, 37, 47, .05); }
.working-day-card > header { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .9rem; }
.working-day-card.is-open > header { border-bottom: 1px solid var(--border); background: #fff8fa; }
.working-day-card h3 { margin: 0 0 .15rem; font-size: .98rem; }
.working-day-card header p { margin: 0; color: var(--muted); font-size: .72rem; }
.working-day-toggle { display: flex; min-height: 40px; align-items: center; gap: .5rem; padding: .45rem .65rem; border-radius: 999px; color: var(--muted); background: #f2edef; cursor: pointer; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.working-day-toggle:has(input:checked) { color: #287a52; background: #e7f5ed; }
.working-day-toggle input { width: 18px; height: 18px; margin: 0; accent-color: #287a52; }
.working-periods { display: grid; gap: .6rem; padding: .8rem .9rem .6rem; }
.working-period { display: grid; grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr) auto; align-items: end; gap: .55rem; padding: .7rem; border: 1px solid var(--border); border-radius: 12px; }
.working-time-field input { width: 100%; min-height: 42px; }
.working-time-field input.invalid { border-color: var(--error); background: #fff2f3; }
.working-time-separator { align-self: center; padding-top: 1.15rem; color: var(--muted); font-size: .8rem; }
.working-period-remove { min-height: 42px; padding: .65rem .75rem; color: var(--error); background: #fff0f1; font-size: .74rem; }
.working-period-remove:hover:not(:disabled) { color: #fff; background: var(--error); }
.working-period-add { width: calc(100% - 1.8rem); min-height: 42px; margin: 0 .9rem .9rem; border: 1px dashed #d9b5c3; color: var(--primary-dark); background: #fff; }
.working-hours-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.working-hours-actions button { min-width: 190px; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem max(1rem, calc((100% - 1180px) / 2)); border-bottom: 1px solid var(--border); background: var(--surface); }
.topbar > div:first-child { display: flex; flex-direction: column; }
.topbar span { color: var(--muted); font-size: .9rem; }
.user-area { display: flex; align-items: center; gap: .8rem; }
.button-secondary { color: var(--primary); background: #f7e9ee; }
.button-secondary:hover:not(:disabled) { color: #fff; }
.container { width: min(1180px, calc(100% - 2rem)); margin: 1.5rem auto 3rem; }
.panel { min-width: 0; max-width: 100%; margin-bottom: 1.5rem; padding: 1.4rem; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.section-heading p { color: var(--muted); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(160px, 230px)) auto; align-items: end; gap: 1rem; margin-bottom: 1.3rem; }
.agenda-grid { display: grid; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1rem; }
.appointment-card { padding: 1rem; border: 1px solid var(--border); border-radius: 12px; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .9rem; }
.card-heading h3 { margin: 0; font-size: 1.05rem; }
.status-badge { padding: .3rem .55rem; border-radius: 999px; background: #f6e5ec; color: var(--primary-dark); font-size: .76rem; font-weight: 750; }
.card-details { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.card-details div { display: flex; flex-direction: column; }
.card-details span { color: var(--muted); font-size: .76rem; }
.card-details strong { overflow-wrap: anywhere; font-size: .9rem; }
.appointment-procedures { margin-bottom: .85rem; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.appointment-procedures-title { display: block; margin-bottom: .5rem; color: var(--muted); font-size: .74rem; font-weight: 750; text-transform: uppercase; }
.appointment-procedures-list { display: grid; gap: .55rem; }
.appointment-procedures-list article { display: flex; min-width: 0; flex-direction: column; padding-bottom: .55rem; border-bottom: 1px solid var(--border); }
.appointment-procedures-list article:last-child { padding-bottom: 0; border-bottom: 0; }
.appointment-procedures-list span { color: var(--muted); font-size: .8rem; }
.card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.card-action-button { flex: 1 1 auto; padding: .55rem .7rem; font-size: .82rem; }
.action-confirm { background: var(--primary); }
.action-complete { color: #374151; background: #e5e7eb; }
.action-complete:hover:not(:disabled) { color: #fff; background: #4b5563; }
.action-cancel { background: var(--error); }
.action-cancel:hover:not(:disabled) { background: #842631; }
.action-no-show { color: #68430a; background: #f5c96a; }
.action-no-show:hover:not(:disabled) { color: #fff; background: #9a6812; }
.card-whatsapp-actions { display: flex; margin-top: .65rem; }
.card-whatsapp-actions .card-action-button { flex: 0 1 auto; }
.action-whatsapp { color: #176b45; background: #e6f5ed; border: 1px solid #addbc4; }
.action-whatsapp:hover:not(:disabled) { color: #fff; background: #20865a; }
.appointment-closed { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem; font-weight: 700; }
.modal-open { overflow: hidden; }
.modal-overlay { position: fixed; z-index: 2000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(35, 24, 29, .62); }
.modal-overlay[hidden] { display: none; }
.completion-modal { width: min(620px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.5rem; border-radius: 16px; background: var(--surface); box-shadow: 0 24px 70px rgba(35, 24, 29, .3); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.modal-heading h2 { margin-bottom: .35rem; }
.modal-heading p { color: var(--muted); }
.modal-close { flex: 0 0 auto; padding: .15rem .55rem; color: var(--muted); background: transparent; font-size: 1.7rem; line-height: 1; }
.modal-close:hover:not(:disabled) { color: var(--text); background: #f3edef; }
.completion-summary { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: .8rem; margin: .5rem 0 1rem; padding: .85rem 1rem; border-radius: 10px; background: #faf6f7; }
.completion-summary div { display: flex; min-width: 0; flex-direction: column; }
.completion-summary span { color: var(--muted); font-size: .76rem; }
.completion-summary strong { overflow-wrap: anywhere; font-size: .9rem; }
.completion-summary select { margin-top: .25rem; padding: .5rem; }
.completion-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 1rem; }
.modal-full-width { grid-column: 1 / -1; }
.modal-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.2rem; }
.modal-secondary-button { color: var(--primary); background: #f7e9ee; }
.modal-secondary-button:hover:not(:disabled) { color: #fff; }
.action-modal { width: min(540px, 100%); }
.action-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: .4rem 0 1rem; padding: .9rem 1rem; border-radius: 10px; background: #faf6f7; }
.action-summary div { display: flex; min-width: 0; flex-direction: column; }
.action-summary span { color: var(--muted); font-size: .76rem; }
.action-summary strong { overflow-wrap: anywhere; font-size: .9rem; }
.appointment-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: end; }
.finance-section[hidden] { display: none; }
.commissions-section[hidden] { display: none; }
.finance-filters { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) auto; align-items: end; gap: 1rem; margin-bottom: 1.2rem; }
.commissions-filters { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); align-items: end; gap: 1rem; margin-bottom: 1.2rem; }
.commissions-filter-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: .7rem; }
.commission-row-actions { display: flex; align-items: center; gap: .45rem; }
.commission-row-actions button { padding: .45rem .65rem; white-space: nowrap; font-size: .76rem; }
.commission-adjust-button { color: var(--primary); background: #f7e9ee; border: 1px solid #e7bdcd; }
.commission-adjust-button:hover:not(:disabled) { color: #fff; }
.commission-pay-button { background: var(--success); }
.commission-pay-button:hover:not(:disabled) { background: #1f6040; }
.commission-state { font-size: .78rem; font-weight: 700; white-space: nowrap; }
.commission-state-paga { color: var(--success); }
.commission-state-cancelada { color: var(--error); }
.commission-notes { max-width: 240px; white-space: normal; }
.finance-card-grid { display: grid; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1.5rem; }
.finance-card { display: flex; min-width: 0; min-height: 90px; flex-direction: column; justify-content: space-between; gap: .7rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: #fffafb; }
.finance-card span { color: var(--muted); font-size: .8rem; font-weight: 650; }
.finance-card strong { overflow-wrap: anywhere; color: var(--text); font-size: 1.3rem; }
.finance-card-value { border-color: #e5c5d1; background: #fcf3f6; }
.finance-card-value strong, .finance-money { color: var(--primary-dark); font-weight: 750; }
.finance-empty-state { margin-bottom: 1rem; padding: 1rem; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); text-align: center; }
.finance-table-section { min-width: 0; max-width: 100%; margin-top: 1.4rem; }
.finance-table-section h3 { margin-bottom: .7rem; font-size: 1rem; }
.finance-table-wrapper { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.finance-table { width: 100%; min-width: 680px; border-collapse: collapse; white-space: nowrap; font-size: .82rem; }
.commission-table { min-width: 1500px; }
.finance-table th, .finance-table td { padding: .7rem .75rem; border-bottom: 1px solid var(--border); text-align: left; }
.finance-table th { color: var(--muted); background: #faf6f7; font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; }
.finance-table tbody tr:last-child td { border-bottom: 0; }
.finance-table tbody tr:hover { background: #fffafb; }
.finance-table-empty { margin: 0; padding: 1rem; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); }
.table-actions, .card-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.table-action-button { width: auto; min-height: 34px; padding: .4rem .65rem; font-size: .78rem; white-space: nowrap; }
.mobile-list { display: none; }
.data-mobile-list { gap: .75rem; }
.mobile-data-card { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: .9rem; border: 1px solid var(--border); border-radius: 10px; background: #fffafb; }
.mobile-data-card > div:not(.commission-row-actions) { display: flex; min-width: 0; flex-direction: column; }
.mobile-data-card span { color: var(--muted); font-size: .72rem; }
.mobile-data-card strong { overflow-wrap: anywhere; font-size: .84rem; }
.mobile-card-actions { grid-column: 1 / -1; flex-wrap: wrap; padding-top: .25rem; }
.compact-mobile-card { display: block; }
.compact-card-heading { display: flex !important; min-width: 0; align-items: center; justify-content: space-between; flex-direction: row !important; gap: .6rem; margin-bottom: .7rem; padding-bottom: .55rem; border-bottom: 1px solid var(--border); }
.compact-card-heading > strong { min-width: 0; overflow-wrap: anywhere; font-size: .92rem; }
.compact-status-badge { flex: 0 0 auto; max-width: 48%; padding: .25rem .48rem; border-radius: 999px; color: var(--primary-dark) !important; background: #f6e5ec; font-size: .68rem !important; font-weight: 750; overflow-wrap: anywhere; text-align: center; }
.compact-card-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); flex-direction: initial !important; gap: .55rem .75rem; }
.compact-card-field { display: flex; min-width: 0; flex-direction: column; }
.compact-card-field span { font-size: .68rem; }
.compact-card-field strong { font-size: .8rem; line-height: 1.3; }
.compact-mobile-card .mobile-card-actions { display: flex !important; margin-top: .7rem; padding-top: .65rem; border-top: 1px solid var(--border); }
.management-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.management-heading p { margin-bottom: 0; color: var(--muted); }
.management-search { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: .8rem; margin-bottom: 1rem; }
.management-table { min-width: 960px; }
.management-actions { display: flex; align-items: center; gap: .4rem; }
.management-actions button { padding: .45rem .65rem; white-space: nowrap; font-size: .76rem; }
.services-management-content { min-width: 0; max-width: 100%; }
.services-management-content .finance-table-wrapper { max-width: 100%; }
.services-management-content .management-table { width: 100%; min-width: 0; table-layout: fixed; white-space: normal; }
.services-management-content .management-table th,
.services-management-content .management-table td { min-width: 0; overflow-wrap: anywhere; }
.services-management-content .management-table th:nth-child(1) { width: 14%; }
.services-management-content .management-table th:nth-child(2) { width: 10%; }
.services-management-content .management-table th:nth-child(3) { width: 26%; }
.services-management-content .management-table th:nth-child(4) { width: 8%; }
.services-management-content .management-table th:nth-child(5) { width: 9%; }
.services-management-content .management-table th:nth-child(6) { width: 6%; }
.services-management-content .management-table th:nth-child(7) { width: 9%; }
.services-management-content .management-table th:nth-child(8) { width: 7%; }
.services-management-content .management-table th:nth-child(9) { width: 11%; }
.services-management-content .management-actions { flex-wrap: wrap; }
.management-edit-button { color: var(--primary); background: #f7e9ee; }
.management-edit-button:hover:not(:disabled) { color: #fff; }
.management-disable-button { background: var(--error); }
.management-enable-button { background: var(--success); }
.management-mobile-card .mobile-card-actions { display: flex; grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; padding-top: .55rem; border-top: 1px solid var(--border); }
.registration-modal { width: min(760px, 100%); }
.registration-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem 1rem; }
.registration-fields[hidden] { display: none; }
.registration-full-width { grid-column: 1 / -1; }
.checkbox-label { display: flex; align-items: center; gap: .5rem; min-height: 42px; padding-top: 1.3rem; }
.settings-form { display: grid; gap: 1rem; }
.settings-group { min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: #fffafb; }
.settings-group legend { padding: 0 .4rem; color: var(--primary-dark); font-weight: 750; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.settings-grid-small { grid-template-columns: repeat(2, minmax(180px, 320px)); }
.closed-days-area { margin-top: 1rem; }
.closed-days-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; margin-top: .5rem; }
.closed-days-grid .checkbox-label { min-height: auto; padding: .55rem .65rem; border-radius: 8px; background: #faf6f7; }
.settings-messages-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.template-help { margin-bottom: 1rem; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.template-help code { display: inline-block; padding: .08rem .3rem; border-radius: 4px; color: var(--primary-dark); background: #f7e9ee; }
.payment-fees-note { margin-top: .8rem; color: var(--muted); font-size: .82rem; }
.settings-actions { display: flex; justify-content: flex-end; }
.services-fieldset { margin: .4rem 0 0; padding: .9rem; border: 1px solid var(--border); border-radius: 10px; }
.services-fieldset legend { padding: 0 .35rem; color: var(--muted); font-size: .86rem; font-weight: 700; }
.services-checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.service-checkbox { min-height: auto; padding: .55rem .65rem; border-radius: 8px; background: #faf6f7; }
.full-width { grid-column: 1 / -1; }
.time-section { align-self: stretch; }
.time-buttons { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .55rem; min-height: 42px; align-items: center; }
.time-buttons[hidden] { display: none; }
.time-button { padding: .55rem .8rem; color: var(--primary); background: #f7e9ee; border: 1px solid #e7bdcd; }
.time-button.selected { color: #fff; background: var(--primary); }
.selected-time-summary { display: flex; max-width: 440px; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .65rem; padding: .65rem .75rem; border: 1px solid #e7bdcd; border-radius: 10px; background: #fff8fa; }
.selected-time-summary[hidden] { display: none; }
.selected-time { margin: 0; color: var(--primary-dark); font-weight: 700; }
.selected-time-summary button { flex: 0 0 auto; padding: .5rem .7rem; }
.message { display: none; margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 9px; }
.message:not(:empty) { display: block; }
.message.error { color: var(--error); background: #fdebed; }
.message.success { color: var(--success); background: #e8f5ee; }
.message.info { color: #315f88; background: #eaf3fb; }
.muted, .empty-state { color: var(--muted); }
.empty-state { grid-column: 1 / -1; margin: 0; padding: 1.5rem; text-align: center; border: 1px dashed var(--border); border-radius: 10px; }
.appointment-flow-switch { display: inline-flex; gap: .35rem; margin: 0 0 1.2rem; padding: .3rem; border: 1px solid var(--border); border-radius: 11px; background: #faf6f7; }
.appointment-flow-switch button { padding: .55rem .85rem; }
.appointment-flow-switch button.is-active { color: #fff; background: var(--primary); }
#v2-appointment-panel[hidden], #legacy-appointment-panel[hidden] { display: none; }
.v2-appointment-form { display: grid; gap: 1rem; }
.booking-step { min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: 13px; background: #fffafb; }
.booking-step-heading { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.booking-step-heading h3, .booking-step-heading p { margin: 0; }
.booking-step-heading h3 { font-size: 1rem; }
.booking-step-heading p, .booking-help { color: var(--muted); font-size: .8rem; }
.booking-step-number { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-size: .78rem; font-weight: 800; }
.v2-client-search-row, .v2-add-procedure-row, .v2-schedule-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: .75rem; }
.v2-client-results { display: grid; gap: .4rem; margin-top: .65rem; }
.v2-client-result { display: flex; width: 100%; align-items: flex-start; flex-direction: column; gap: .15rem; padding: .65rem .75rem; color: var(--text); background: #fff; border: 1px solid var(--border); text-align: left; }
.v2-client-result:hover { color: var(--primary-dark); background: #fff5f8; }
.v2-client-result span { color: var(--muted); font-size: .78rem; }
.v2-selected-client { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; padding: .75rem; border: 1px solid #b9dccb; border-radius: 10px; background: #eef8f3; }
.v2-selected-client[hidden] { display: none; }
.v2-selected-client > div { display: flex; min-width: 0; flex-direction: column; }
.v2-selected-client span { color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.v2-selected-client-details { gap: .22rem; }
.v2-selected-client-name { margin-bottom: .15rem; font-size: 1rem; }
.v2-selected-client-actions { display: flex !important; flex: 0 0 auto; flex-direction: row !important; gap: .45rem; }
.v2-selected-client-actions button { padding: .5rem .7rem; }
.v2-missing-contact { color: #8b6316 !important; font-weight: 650; }
.v2-procedure-list { display: grid; gap: .65rem; margin-top: .85rem; }
.v2-procedure-card { display: grid; grid-template-columns: auto minmax(150px, 1fr) minmax(180px, .8fr) auto; align-items: end; gap: .75rem; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.v2-procedure-order { display: grid; width: 30px; height: 30px; align-self: center; place-items: center; border-radius: 50%; color: var(--primary-dark); background: #f7e9ee; font-weight: 800; }
.v2-procedure-info { display: flex; align-self: center; flex-direction: column; }
.v2-procedure-info span { color: var(--muted); font-size: .76rem; }
.v2-procedure-actions { display: flex; align-items: center; gap: .35rem; }
.v2-procedure-actions button { padding: .5rem .6rem; }
.v2-remove-procedure { color: #fff; background: var(--error); }
.v2-estimate { display: flex; justify-content: flex-end; gap: 1.2rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--border); font-size: .84rem; }
.v2-estimate strong { margin-left: .25rem; color: var(--primary-dark); }
.booking-help { margin: .5rem 0 0; }
.v2-booking-summary { display: grid; gap: .45rem; margin-bottom: .8rem; padding: .8rem; border-radius: 10px; background: #faf6f7; }
.v2-booking-summary > span { color: var(--muted); font-size: .8rem; }
.v2-summary-client { display: flex; flex-direction: column; padding-bottom: .65rem; border-bottom: 1px solid var(--border); }
.v2-summary-client span, .v2-summary-section-title { color: var(--muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.v2-summary-client strong { margin-top: .15rem; }
.v2-summary-section-title { margin-top: .3rem; }
.v2-summary-procedures { display: grid; gap: .45rem; }
.v2-summary-procedures article { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .65rem; padding: .6rem; border: 1px solid var(--border); border-radius: 9px; background: #fff; }
.v2-summary-procedures article > div { display: flex; min-width: 0; flex-direction: column; }
.v2-summary-procedures article span { color: var(--muted); font-size: .76rem; }
.v2-summary-order { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: var(--primary-dark) !important; background: #f7e9ee; font-weight: 800; }
.v2-summary-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .35rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.v2-summary-totals > div { display: flex; min-width: 0; flex-direction: column; }
.v2-summary-totals span { color: var(--muted); font-size: .72rem; }
.v2-summary-totals strong { overflow-wrap: anywhere; font-size: .84rem; }
.v2-date-picker { position: relative; display: grid; gap: .45rem; }
.v2-date-navigation { display: grid; grid-template-columns: auto auto auto minmax(145px, 1fr); gap: .4rem; }
.v2-date-navigation button { min-width: 44px; padding: .52rem .7rem; }
.v2-date-navigation button:nth-child(2) { min-width: 76px; }
.v2-date-calendar-button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; }
.v2-date-formatted { display: flex; min-height: 3rem; flex-direction: column; justify-content: center; color: var(--text); text-transform: capitalize; }
.v2-date-formatted strong { font-size: 1rem; }
.v2-date-formatted span { color: var(--muted); font-size: .84rem; }
.v2-date-controller { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.v2-create-action { display: flex; justify-content: flex-end; }
.v2-create-action button { min-width: 220px; }
.legacy-flow-notice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: .75rem; border: 1px solid #ead5a8; border-radius: 10px; color: #735718; background: #fff9e9; }
.legacy-flow-notice span { font-size: .8rem; }
:root[data-theme="dark"] .appointment-flow-switch,
:root[data-theme="dark"] .booking-step,
:root[data-theme="dark"] .v2-procedure-card,
:root[data-theme="dark"] .v2-client-result,
:root[data-theme="dark"] .v2-booking-summary,
:root[data-theme="dark"] .v2-summary-procedures article {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface);
}
:root[data-theme="dark"] .booking-step-heading h3,
:root[data-theme="dark"] .v2-procedure-info strong,
:root[data-theme="dark"] .v2-selected-client-name,
:root[data-theme="dark"] .v2-booking-summary strong,
:root[data-theme="dark"] .v2-date-formatted { color: var(--text); }
:root[data-theme="dark"] .booking-step-heading p,
:root[data-theme="dark"] .booking-help,
:root[data-theme="dark"] .field-label,
:root[data-theme="dark"] .v2-procedure-info span,
:root[data-theme="dark"] .v2-client-result span,
:root[data-theme="dark"] .v2-summary-procedures article span,
:root[data-theme="dark"] .v2-summary-totals span,
:root[data-theme="dark"] .v2-selected-client span { color: var(--muted); }
:root[data-theme="dark"] .v2-client-result:hover { color: var(--text); background: var(--surface-soft); }
:root[data-theme="dark"] .v2-selected-client { color: var(--text); border-color: #356c53; background: var(--success-soft); }
:root[data-theme="dark"] .v2-missing-contact { color: #f1c777 !important; }
:root[data-theme="dark"] .v2-procedure-order,
:root[data-theme="dark"] .v2-summary-order { color: var(--primary-dark) !important; background: var(--primary-soft); }
:root[data-theme="dark"] .v2-estimate strong { color: var(--primary-dark); }
:root[data-theme="dark"] .selected-time-summary { color: var(--text); border-color: var(--border); background: var(--primary-soft); }
:root[data-theme="dark"] .legacy-flow-notice { color: #f1d18c; border-color: #69542c; background: #392f1d; }
:root[data-theme="dark"] #v2-appointment-message.message.error { color: #ffabb4; background: var(--danger-soft); }
:root[data-theme="dark"] #v2-appointment-message.message.success { color: #8ee0b8; background: var(--success-soft); }
:root[data-theme="dark"] #v2-appointment-message.message.info { color: #b6d7f3; background: #233848; }

@media (max-width: 768px) {
  .compact-mobile-card .card-actions { grid-column: 1 / -1; }
  .compact-mobile-card .table-action-button { flex: 1 1 150px; }
  .app-sidebar { z-index: 1100; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 12px 0 36px rgba(46, 37, 41, .14); }
  .sidebar-open .app-sidebar { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; z-index: 1000; inset: 0; background: rgba(35, 24, 29, .45); }
  .sidebar-open .sidebar-backdrop { display: block; }
  .app-shell { margin-left: 0; }
  .app-topbar { position: fixed; z-index: 900; top: 0; right: 0; left: 0; width: 100%; align-items: center; padding: .7rem .8rem; box-shadow: 0 4px 14px rgba(46, 37, 41, .07); }
  .sidebar-toggle { display: inline-flex; }
  .app-content { width: 100%; max-width: 100%; margin: 0 0 2rem; padding: calc(72px + .8rem) .65rem 0; }
  .panel { margin-bottom: .8rem; padding: .8rem; border-radius: 12px; }
  .section-heading h1, .section-heading h2 { margin-bottom: .3rem; }
  .section-heading p { margin-bottom: .8rem; font-size: .86rem; }
  .page-title-area { min-width: 0; }
  .page-title-area h1 { overflow: hidden; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
  .app-topbar .user-area span { display: none; }
  .topbar { align-items: flex-start; }
  .user-area { flex-direction: column; align-items: flex-end; text-align: right; }
  .form-row, .appointment-form, .finance-filters, .commissions-filters { grid-template-columns: 1fr; }
  .management-heading { align-items: stretch; flex-direction: column; }
  .management-heading button { width: 100%; }
  .management-search, .registration-fields { grid-template-columns: 1fr; }
  .registration-full-width { grid-column: auto; }
  .settings-grid, .settings-grid-small, .settings-messages-grid { grid-template-columns: 1fr; }
  .settings-group { padding: .8rem; }
  .closed-days-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-actions button { width: 100%; }
  .services-checkbox-grid { grid-template-columns: 1fr; }
  .checkbox-label { padding-top: .5rem; }
  .finance-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-bottom: 1rem; }
  .finance-card { min-height: 76px; gap: .4rem; padding: .7rem; }
  .finance-card span { font-size: .72rem; }
  .finance-card strong { font-size: 1.05rem; }
  .finance-table { min-width: 640px; }
  .commission-table { min-width: 1450px; }
  .desktop-table { display: none; }
  .mobile-list { display: grid; }
  .data-mobile-list { gap: .55rem; }
  .mobile-data-card { padding: .7rem; }
  .finance-table-section { margin-top: .9rem; }
  .finance-table-section h3 { margin-bottom: .5rem; }
  .modal-overlay { padding: .5rem; }
  .completion-modal { width: min(92vw, 620px); max-width: 92vw; max-height: 90vh; padding: 1rem; overflow-y: auto; }
  .completion-summary, .completion-fields, .action-summary { grid-template-columns: 1fr; gap: .6rem; }
  .modal-full-width { grid-column: auto; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions button { width: 100%; }
  .full-width { grid-column: auto; }
  .form-row button, .form-action button, .full-width button { width: 100%; }
  .selected-time-summary { width: 100%; max-width: none; align-items: stretch; flex-direction: column; }
  .selected-time-summary button { width: 100%; }
  .appointment-flow-switch { display: flex; }
  .appointment-flow-switch button { flex: 1; }
  .v2-client-search-row, .v2-add-procedure-row, .v2-schedule-row { grid-template-columns: 1fr; }
  .v2-client-search-row button, .v2-add-procedure-row button, .v2-schedule-row button { width: 100%; }
  .v2-date-navigation { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2-date-calendar-button { grid-column: 1 / -1; }
  .v2-procedure-card { grid-template-columns: auto 1fr; align-items: start; }
  .v2-procedure-card label, .v2-procedure-actions { grid-column: 1 / -1; }
  .v2-procedure-actions { justify-content: flex-end; }
  .v2-selected-client { align-items: stretch; flex-direction: column; }
  .v2-selected-client-actions { width: 100%; }
  .v2-selected-client-actions button { flex: 1; }
  .v2-summary-totals { grid-template-columns: 1fr; }
  .v2-estimate, .legacy-flow-notice { align-items: stretch; flex-direction: column; }
  .v2-create-action button { width: 100%; min-width: 0; }
  .card-whatsapp-actions .card-action-button { width: 100%; flex-basis: 100%; }
  .finance-filters button { width: 100%; }
  .commissions-filter-actions { flex-direction: column; }
  .commissions-filter-actions button { width: 100%; }
  .app-toast { top: auto; right: 50%; bottom: 1rem; width: min(92vw, 390px); transform: translateX(50%); animation: toast-in-mobile .18s ease-out; }
  .working-period { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .working-period-remove { grid-column: 1 / -1; width: 100%; }
  .working-hours-actions button { width: 100%; }
}

@keyframes toast-in-mobile { from { transform: translate(50%, 8px); opacity: 0; } to { transform: translate(50%, 0); opacity: 1; } }

@media (max-width: 340px) {
  .finance-card-grid { grid-template-columns: 1fr; }
  .app-topbar { gap: .5rem; }
  .app-topbar .button-secondary { padding: .55rem .7rem; }
  .mobile-data-card { grid-template-columns: 1fr; }
  .compact-card-grid { grid-template-columns: 1fr; }
  .mobile-card-actions { grid-column: auto; }
  .closed-days-grid { grid-template-columns: 1fr; }
}