/* Agentes Nerón shares its design tokens and control styles with Web and MAUI.
   This bridge keeps the booking and compact TPV layouts on that same palette. */
html[data-theme] {
    --bg: var(--ui-page);
    --surface: var(--ui-surface);
    --ink: var(--ui-text);
    --muted: var(--ui-text-muted);
    --line: var(--ui-border);
    --purple: var(--ui-accent);
    --purple-light: var(--ui-accent-surface);
    --green: var(--ui-success);
    --radius: var(--ui-panel-radius);
    font-family: var(--ui-font-sans);
    color: var(--ui-text);
}
body, .public-page, .login-screen { background: var(--ui-page); color: var(--ui-text); font-family: var(--ui-font-sans); }
button, input, select, textarea { font-family: var(--ui-font-sans); }
:is(h1,h2,h3,h4) { color: var(--ui-text); }
/* Navigation focuses the page heading; interactive controls keep their focus ring. */
:is(h1,h2,h3)[tabindex="-1"]:focus, h1:focus { outline: none; }
:is(.eyebrow,.title-dot,.small-icon,.subtle-link,.public-card a,.service-bottom>span) { color: var(--ui-accent); }
:is(.muted,small,.help,.entity-card p,.booking-summary p,.booking-footer,.public-header>span,.steps li,.nav-caption,.brand small,.salon-label,.topbar,.topbar strong,.legend,.calendar-footer,.time-label,.time-header,.report-detail) { color: var(--ui-text-muted); }
:is(.sidebar,.topbar,.stat,.agenda-card,.entity-card,.table-wrap,.booking-panel,.service-card,.success-card,.public-header,.login-card,.editor-panel,.report-metrics article,.report-panel,.client-suggestions) {
    background: var(--ui-surface);
    color: var(--ui-text);
    border-color: var(--ui-border);
}
:is(.agenda-card,.entity-card,.table-wrap,.booking-panel,.service-card,.success-card,.report-panel,.report-metrics article) { border-radius: var(--ui-panel-radius); box-shadow: var(--ui-panel-shadow); }
.editor-panel, dialog { border-color: var(--ui-floating-border); background: var(--ui-floating-surface); color: var(--ui-text); box-shadow: var(--ui-shadow-lg); }
.modal-backdrop, dialog::backdrop { background: var(--ui-overlay); }
.modal-header { background: var(--ui-surface); }
.modal-footer, .reservation-touch-editor>.modal-footer { background: var(--ui-surface-subtle); border-color: var(--ui-border); }
.notice, #blazor-error-ui { color: var(--ui-warning); border-color: var(--ui-warning-border); background: var(--ui-warning-soft); }
.form-error { color: var(--ui-danger); }
.toast { background: var(--ui-tooltip-surface); color: var(--ui-tooltip-text); box-shadow: var(--ui-shadow); }
.empty { color: var(--ui-text-muted); }
.empty strong { color: var(--ui-text-secondary); }
.brand-preview { border-color: var(--ui-border); background: var(--ui-surface-subtle); }
.public-card, .booking-summary { background: var(--ui-accent-surface); border-color: var(--ui-accent-border); }
.tag, .avatar, .success-card .reference { color: var(--ui-badge-accent); background: var(--ui-badge-accent-soft); }
.neron-badge.tag { padding: 4px 8px; font-size: 10px; }
.success-icon, .stat:nth-child(2) .stat-icon { background: var(--ui-success-soft); color: var(--ui-success); }
.stat-icon { background: var(--ui-accent-soft); color: var(--ui-accent); }
.stat:nth-child(3) .stat-icon { background: var(--ui-warning-soft); color: var(--ui-warning); }
.stat:nth-child(4) .stat-icon { background: var(--ui-info-soft); color: var(--ui-info); }
.online-dot, .live-label i, .legend-dot.green { background: var(--ui-success); }
.legend-dot.purple { background: var(--ui-accent); }
.legend-dot.gray { background: var(--ui-border-strong); }
.breadcrumb { color: var(--ui-border-strong); }

/* Standalone controls share the Agentes border without adding extra DOM. */
input.neron-input-element.neron-control:not([type=checkbox]):not([type=color]),
select.neron-input-element.neron-control,
textarea.neron-input-element.neron-control,
.neron-standalone-input {
    min-height: var(--ui-control-height);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-control-radius);
    background: var(--ui-surface);
    color: var(--ui-text);
    padding: 0.6rem 0.78rem;
    font-size: inherit;
    outline: none;
    transition: border-color 130ms ease, box-shadow 130ms ease;
}
:is(input,select,textarea).neron-control:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px var(--ui-accent-soft);
    outline: none;
}
:is(input,textarea).neron-control::placeholder { color: var(--ui-text-disabled); }
:is(input,select,textarea).neron-control:disabled { color: var(--ui-text-disabled); background: var(--ui-surface-muted); }
input[type=color].neron-control { border: 1px solid var(--ui-border-strong); background: var(--ui-surface); border-radius: var(--ui-control-radius); }
.neron-field, .neronField { min-width: 0; color: var(--ui-text-secondary); }
.neron-input.check-label, .workday label.neron-input, .salon-hours-row label.neron-input { display: flex; flex-direction: row; align-items: center; }
.neron-input.search-box { display: flex; width: auto; }
.search-box { border-color: var(--ui-border-strong); background: var(--ui-surface); color: var(--ui-text-muted); }
.search-box input.neron-control { background: transparent; border: 0; border-radius: 0; box-shadow: none; min-height: 0; }
.search-box:focus-within { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }

/* Use Agentes button variants with compact sizes where the TPV needs them. */
.neron-button.primary, .neron-button.danger, .neron-button.outline { border-radius: var(--ui-control-radius); }
.neron-button.primary { color: var(--neron-button-foreground); background: var(--neron-button-color); border-color: var(--neron-button-color); }
.neron-button.primary:hover:not(:disabled) { background: color-mix(in srgb,var(--neron-button-color) 88%,var(--neron-button-foreground)); }
.neron-button.outline { color: var(--ui-accent); border-color: var(--ui-accent-border); background: transparent; }
.neron-button.outline:hover:not(:disabled) { color: var(--ui-accent); background: var(--ui-accent-soft); }
.neron-button.danger { color: var(--ui-destructive-action-foreground); background: var(--ui-destructive-action); border-color: var(--ui-destructive-action); }
.neron-button:is(.small,.icon-button,.menu-toggle) { min-height: 32px; padding: 7px 10px; font-size: 11px; }
.neron-button.icon-button { min-width: 30px; width: 30px; height: 32px; padding: 0; font-size: 21px; color: var(--ui-text-secondary); border-color: var(--ui-border-strong); background: var(--ui-surface); }
.neron-button:is(.subtle-link,.nav-item,.client-suggestion,.service-card,.appointment,.time-slot) { text-transform: none; letter-spacing: normal; white-space: normal; box-shadow: none; min-width: 0; }
.neron-button.subtle-link { border: 0; min-height: 32px; padding: 5px 0; color: var(--ui-accent); background: transparent; font-size: 11px; font-weight: 600; }
.neron-button.nav-item { justify-content: flex-start; min-height: 42px; text-align: left; color: var(--ui-text-secondary); border-color: transparent; background: transparent; font-size: 13px; font-weight: 600; }
.neron-button.nav-item:is(:hover,.active) { background: var(--ui-accent-surface); color: var(--ui-accent); }
.neron-button.nav-item.active { border-color: var(--ui-accent-border); }
.neron-button.client-suggestion { justify-content: space-between; text-align: left; border: 0; border-bottom: 1px solid var(--ui-border); border-radius: 0; color: var(--ui-text); background: transparent; font-size: 12px; }
.client-suggestion:hover, .client-suggestion:focus-visible { background: var(--ui-accent-surface); }
.neron-button.service-card { display: block; padding: 23px; text-align: left; color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); line-height: normal; font-weight: 400; }
.neron-button.service-card:hover:not(:disabled) { border-color: var(--ui-accent-border); background: var(--ui-accent-surface); }
.neron-button.service-card :is(h3,strong) { font-weight: 700; }
.neron-button.time-slot { color: var(--ui-accent); border-color: var(--ui-accent-border); background: var(--ui-surface); min-height: 42px; padding: 12px 4px; font-size: 12px; }
.time-slot.partial, .booking-legend .partial { background: var(--ui-surface-muted); border-color: var(--ui-border-strong); }
.neron-button.time-slot:disabled, .booking-legend .busy { background: var(--ui-border-strong); border-color: var(--ui-border-strong); color: var(--ui-text-muted); opacity: 1; }
.neron-button.time-slot:not(:disabled):hover { background: var(--ui-accent); color: var(--ui-on-accent); border-color: var(--ui-accent); }
.booking-legend { color: var(--ui-text-muted); }
.booking-legend i { border-color: var(--ui-accent-border); }
.steps b { border-color: var(--ui-border-strong); }
.steps .active { color: var(--ui-accent); }
.steps .active b { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-on-accent); }

/* Preserve sticky time labels and individual operator / treatment colors. */
.calendar-grid .time-column, .calendar-grid .time-header, th { background: var(--ui-surface-subtle); color: var(--ui-text-muted); }
.calendar-grid .time-column, .calendar-grid .time-header { box-shadow: 2px 0 3px rgb(var(--ui-shadow-rgb) / 8%); }
.calendar-grid .operator-header { background: color-mix(in srgb,var(--operator-color,var(--ui-accent)) 16%,var(--ui-surface)); }
.calendar-grid .operator-column { background: color-mix(in srgb,var(--operator-color,var(--ui-accent)) 7%,var(--ui-surface)); }
.calendar-grid .operator-column .slot-cell:not(.closed):hover { background: color-mix(in srgb,var(--operator-color,var(--ui-accent)) 17%,var(--ui-surface)); }
.slot-cell { border-top-color: var(--ui-border); }
.slot-cell.hour { border-top-color: var(--ui-border-strong); }
.slot-cell.closed { background: repeating-linear-gradient(135deg,var(--ui-surface-subtle),var(--ui-surface-subtle) 4px,var(--ui-surface-muted) 4px,var(--ui-surface-muted) 5px); }
.slot-cell.drop-target { background: var(--ui-accent-surface-strong) !important; }
.appointment, .neron-button.appointment { color: var(--ui-text); background: color-mix(in srgb,var(--event) 16%,var(--ui-surface)); border: 0; border-left: 3px solid var(--event); text-align: left; line-height: normal; border-radius: 7px; min-height: 0; padding: 7px 6px; display: block; justify-content: normal; font-weight: 400; }
.appointment:hover, .neron-button.appointment:hover { background: color-mix(in srgb,var(--event) 22%,var(--ui-surface)); box-shadow: var(--ui-shadow-sm); transform: none; }
.appointment.completed, .neron-button.appointment.completed { background: var(--ui-success-soft); border-left-color: var(--ui-success); }
.appointment .event-top { color: color-mix(in srgb,var(--event) 78%,var(--ui-text)); }
.appointment :is(.event-treatment,.event-phone) { color: var(--ui-text-secondary); }
.appointment.compact, .neron-button.appointment.compact { display: flex; align-items: center; padding: 4px 6px; }
.report-bar-track { background: var(--ui-accent-soft); }
.report-bar-fill { background: var(--ui-accent); }
.report-tabs .neron-button[aria-pressed=true] { color: var(--ui-on-accent); border-color: var(--ui-accent); background: var(--ui-accent); }

html[data-theme] .reservation-keyboard { background: var(--ui-surface-muted); }
html[data-theme] .touch-keyboard-row button, html[data-theme] .touch-keyboard-bar button { border-color: var(--ui-border-strong); background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 2px 0 var(--ui-border-strong); text-transform: none; letter-spacing: normal; }
html[data-theme] .touch-keyboard-row button:active, html[data-theme] .touch-keyboard-row button[aria-pressed=true], html[data-theme] .touch-keyboard-actions button:last-child { background: var(--ui-primary-action); color: var(--ui-primary-action-foreground); }
.touch-keyboard-row button:focus-visible, .touch-keyboard-bar button:focus-visible { outline-color: var(--ui-accent); }
.touch-keyboard-bar button { box-shadow: none; }
.reservation-touch-editor>.modal-footer .neron-button { min-height: 44px; }
html[data-theme] .report-metrics article, html[data-theme] .report-panel, html[data-theme] .client-suggestions { background: var(--ui-surface); }
html[data-theme] .client-suggestion:hover, html[data-theme] .client-suggestion:focus-visible { background: var(--ui-accent-surface); }

.appearance-switch { position: fixed; right: 16px; bottom: 14px; z-index: 18; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; padding: 5px; max-width: 250px; border: var(--ui-panel-border); border-radius: var(--ui-control-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.appearance-switch .neron-button { min-height: 32px; padding: 6px 8px; font-size: 10px; text-transform: none; letter-spacing: normal; border-color: transparent; background: transparent; color: var(--ui-text-muted); box-shadow: none; }
.appearance-switch .neron-button.selected { background: var(--ui-primary-action); border-color: var(--ui-accent-border); color: var(--ui-primary-action-foreground); }
.appearance-switch .neron-button:hover { background: var(--ui-accent-soft); color: var(--ui-accent); }
.sidebar-theme .appearance-switch { position: static; width: 100%; max-width: none; box-shadow: none; }
.booking-footer { padding-bottom: 76px; }
@media(max-width:760px) {
    .appearance-switch { right: 10px; bottom: 10px; }
    .sidebar-theme .appearance-switch { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .neron-button.nav-item { min-height: 34px; font-size: 10px; }
    .neron-button.service-card { padding: 18px; }
}
@media(min-width:900px) and (max-height:800px) {
    .reservation-backdrop .modal-body :is(input,select).neron-control { min-height: 36px; height: 36px; padding: 6px 9px; }
    .reservation-backdrop .modal-body textarea.neron-control { min-height: 38px; height: 38px; padding: 6px 9px; }
    .reservation-backdrop .touch-keyboard-bar .neron-button { min-height: 32px; padding: 4px 10px; }
}
@container(max-width:850px) {
    .appointment.compact, .neron-button.appointment.compact { display: block; }
}
@media(prefers-reduced-motion:reduce) {
    :is(input,select,textarea).neron-control { transition: none; }
}
/* Search is one compact control; its text field uses the surrounding border. */
.search-box.neron-input { display:flex;flex-direction:row;align-items:center;width:auto;gap:5px; }
.search-box input.neron-input-element.neron-control:not([type=checkbox]):not([type=color]) {
    border:0;background:transparent;border-radius:0;box-shadow:none;min-height:0;height:auto;
    padding:8px 0;font-size:11px;line-height:1.4;min-width:0;width:155px;max-width:100%;
}

/* Compact public booking: natural page flow, with no empty space for a fixed theme switch. */
.booking-page { display:flex;flex-direction:column;min-height:100dvh; }
.booking-page .booking-main { width:100%;margin:18px auto 0;padding:0 24px 18px; }
.booking-page .public-header { padding:12px 24px; }
.booking-page .public-header .salon-logo { height:40px; }
.booking-page .booking-heading { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px; }
.booking-page .booking-center-title { font-size:22px;line-height:1.3;letter-spacing:normal;margin:0; }
.booking-page .booking-main>.muted { margin:10px 0; }
.booking-page .steps { margin:16px 0 18px; }
.booking-page .booking-footer { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;margin:18px 0 0;padding:0; }
.booking-page .appearance-switch { position:static;display:flex;flex-wrap:wrap;max-width:none;width:auto;box-shadow:none; }
.booking-page .form-error:empty { display:none; }
@media(max-width:760px) {
 .booking-page .booking-main { margin-top:14px;padding:0 16px 16px; }
 .booking-page .public-header { padding:12px 16px; }
 .booking-page .booking-center-title { font-size:19px; }
 .booking-page .booking-footer { justify-content:center;text-align:center; }
}