/* =========================================================
   ui.css — Parte 1: controles (redesign)
   Depende de tokens.css. Carregar DEPOIS do Bootstrap.
   Cards, modais e badges ficam em ui-surfaces.css.
   ========================================================= */

/* ---------- Base mínima ---------- */
body {
    font-family: var(--font-sans);
    background: var(--bg-page);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---------- Botões: base (.btn) ---------- */
.btn {
    --bs-btn-font-family: var(--font-sans);
    --bs-btn-font-size: var(--fs-callout);
    --bs-btn-font-weight: var(--fw-callout);
    --bs-btn-line-height: var(--lh-callout);
    --bs-btn-padding-x: 20px;
    --bs-btn-padding-y: 0;
    --bs-btn-border-width: 0;
    --bs-btn-border-radius: var(--radius-pill);
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: var(--focus-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap);
    border: 0;
    border-radius: var(--radius-pill);
    letter-spacing: var(--ls-callout);
    text-decoration: none;
    transition: transform var(--dur-press) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.btn:active,
.btn.active:active {
    transform: scale(var(--press-scale));
}
.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---------- Botão primário (accent sólido) ---------- */
.btn-primary {
    --bs-btn-color: var(--bg-surface);
    --bs-btn-bg: var(--accent);
    --bs-btn-hover-color: var(--bg-surface);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-active-color: var(--bg-surface);
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-disabled-color: var(--bg-surface);
    --bs-btn-disabled-bg: var(--accent);
    background: var(--accent);
    color: var(--bg-surface);
}
.btn-primary:hover { background: var(--accent-hover); color: var(--bg-surface); }

/* ---------- Botão secundário (fill-control) + outline-* mapeados ---------- */
.btn-secondary,
.btn-light,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-light,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-success {
    --bs-btn-color: var(--text);
    --bs-btn-bg: var(--fill-control);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: var(--fill-control-hover);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: var(--fill-control-hover);
    --bs-btn-disabled-color: var(--text-tertiary);
    --bs-btn-disabled-bg: var(--fill-control);
    background: var(--fill-control);
    color: var(--text);
}
.btn-secondary:hover,
.btn-light:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-outline-light:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-success:hover {
    background: var(--fill-control-hover);
    color: var(--text);
}
/* Outline-primary mantém o texto em accent para seguir legível como "ação" */
.btn-outline-primary,
.btn-outline-primary:hover { color: var(--accent-text); }
.btn-outline-success,
.btn-outline-success:hover { color: var(--success); }
/* Estado selecionado de grupos .btn-check + .btn-outline-* */
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary,
.btn-check:checked + .btn-outline-dark,
.btn-outline-primary.active,
.btn-outline-secondary.active,
.btn-outline-dark.active {
    background: var(--text);
    color: var(--bg-surface);
}

/* ---------- Botão terciário (só texto accent) ---------- */
.btn-link,
.btn-tertiary {
    --bs-btn-color: var(--accent-text);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--accent-hover);
    --bs-btn-active-color: var(--accent-hover);
    --bs-btn-padding-x: var(--space-2);
    background: transparent;
    color: var(--accent-text);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    text-decoration: none;
}
.btn-link:hover,
.btn-tertiary:hover {
    background: transparent;
    color: var(--accent-hover);
    text-decoration: underline;
}

/* ---------- Botão WhatsApp (verde) ---------- */
.btn-whatsapp {
    --bs-btn-color: var(--bg-surface);
    --bs-btn-bg: var(--whatsapp);
    --bs-btn-hover-color: var(--bg-surface);
    --bs-btn-hover-bg: var(--whatsapp-hover);
    --bs-btn-active-color: var(--bg-surface);
    --bs-btn-active-bg: var(--whatsapp-hover);
    background: var(--whatsapp);
    color: var(--bg-surface);
}
.btn-whatsapp:hover { background: var(--whatsapp-hover); color: var(--bg-surface); }

/* ---------- Botões destrutivos ---------- */
.btn-danger {
    --bs-btn-color: var(--bg-surface);
    --bs-btn-bg: var(--danger);
    --bs-btn-hover-color: var(--bg-surface);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-active-color: var(--bg-surface);
    --bs-btn-active-bg: var(--danger);
    background: var(--danger);
    color: var(--bg-surface);
}
.btn-danger:hover { background: var(--danger); color: var(--bg-surface); filter: brightness(.92); }

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-bg: var(--danger-tint);
    --bs-btn-hover-color: var(--bg-surface);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-active-color: var(--bg-surface);
    --bs-btn-active-bg: var(--danger);
    background: var(--danger-tint);
    color: var(--danger);
}
.btn-outline-danger:hover { background: var(--danger); color: var(--bg-surface); }

/* ---------- Tamanhos de botão ---------- */
.btn-sm {
    --bs-btn-font-size: var(--fs-footnote);
    --bs-btn-padding-x: var(--space-4);
    --bs-btn-border-radius: var(--radius-pill);
    font-size: var(--fs-footnote);
    min-height: 32px;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    border-radius: var(--radius-pill);
}
/* .btn-sm continua com alvo de toque de 44px em telas de toque */
@media (pointer: coarse) {
    .btn-sm { min-height: var(--tap); }
}
.btn-lg {
    --bs-btn-font-size: var(--fs-body);
    --bs-btn-padding-x: 28px;
    --bs-btn-border-radius: var(--radius-pill);
    font-size: var(--fs-body);
    letter-spacing: var(--ls-body);
    min-height: 52px;
    padding-left: 28px;
    padding-right: 28px;
    border-radius: var(--radius-pill);
}

/* ---------- Botão só ícone (44x44 redondo) ---------- */
.btn-icon {
    --bs-btn-padding-x: 0;
    width: var(--tap);
    height: var(--tap);
    min-height: var(--tap);
    padding: 0;
    border-radius: 50%;
    flex: 0 0 auto;
}
.btn-icon.btn-sm { width: 32px; height: 32px; min-height: 32px; }

/* ---------- Campos: input / select / textarea ---------- */
.form-control,
.form-select {
    font-family: var(--font-sans);
    font-size: var(--fs-callout);
    letter-spacing: var(--ls-callout);
    color: var(--text);
    background-color: var(--fill-control);
    border: 0;
    border-radius: var(--radius-field);
    min-height: var(--tap);
    padding-left: 14px;
    box-shadow: none;
    transition: box-shadow var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}
/* iOS amplia a página ao focar campo < 16px: em tela de toque, 17px */
@media (pointer: coarse) {
    .form-control, .form-select { font-size: var(--fs-body); letter-spacing: var(--ls-body); }
}
.form-control { padding-right: 14px; }
.form-select { padding-right: 40px; }
.form-control::placeholder { color: var(--text-tertiary); opacity: 1; }
.form-control:focus,
.form-select:focus {
    color: var(--text);
    background-color: var(--fill-control);
    border: 0;
    outline: none;
    box-shadow: var(--focus-ring);
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--fill-control);
    color: var(--text-tertiary);
}
textarea.form-control {
    min-height: calc(var(--tap) * 2);
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: var(--lh-body);
    resize: vertical;
}
.form-control-sm,
.form-select-sm {
    font-size: var(--fs-callout);
    min-height: 36px;
    border-radius: var(--radius-control);
}
.form-control-lg,
.form-select-lg {
    font-size: var(--fs-body);
    min-height: 52px;
    border-radius: var(--radius-field);
}

/* ---------- Rótulo e texto de ajuda ---------- */
.form-label {
    display: block;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    font-weight: var(--fw-caption);
    letter-spacing: var(--ls-caption);
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.form-text {
    font-size: var(--fs-footnote);
    line-height: var(--lh-footnote);
    color: var(--text-secondary);
    margin-top: 6px;
}

/* ---------- Input group (prefixo/sufixo no mesmo fundo) ---------- */
.input-group-text {
    font-size: var(--fs-callout);
    color: var(--text-secondary);
    background-color: var(--fill-control);
    border: 0;
    border-radius: var(--radius-field);
    padding-left: 14px;
    padding-right: 14px;
    min-height: var(--tap);
}
.input-group > .form-control,
.input-group > .form-select { border: 0; }
.input-group:focus-within {
    border-radius: var(--radius-field);
    box-shadow: var(--focus-ring);
}
.input-group:focus-within > .form-control:focus,
.input-group:focus-within > .form-select:focus { box-shadow: none; }
.input-group > .form-control + .input-group-text,
.input-group > .input-group-text + .form-control { margin-left: 0; }
.input-group > .input-group-text:first-child { padding-right: var(--space-1); }
.input-group > .input-group-text:last-child { padding-left: var(--space-1); }

/* ---------- Validação ---------- */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border: 0;
    background-color: var(--danger-tint);
    box-shadow: inset 0 0 0 1px var(--danger);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: inset 0 0 0 1px var(--danger), var(--focus-ring);
}
.invalid-feedback {
    font-size: var(--fs-footnote);
    line-height: var(--lh-footnote);
    color: var(--danger);
    margin-top: 6px;
}

/* ---------- Segmented control ----------
   <div class="segmented" role="radiogroup" aria-label="Período">
     <input type="radio" class="btn-check" name="p" id="p1" checked>
     <label class="segmented-item" for="p1">Hoje</label> ...
   </div>
   Também aceita <button class="segmented-item" aria-pressed="true"> ou .active */
.segmented {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 2px;
    background: var(--fill-control);
    border-radius: var(--radius-control);
    position: relative;
}
.segmented-item {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin: 0;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: calc(var(--radius-control) - 2px);
    background: transparent;
    font: inherit;
    font-size: var(--fs-footnote);
    font-weight: 500;
    color: var(--text);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur-fast) var(--ease-spring),
                box-shadow var(--dur-fast) var(--ease-spring),
                transform var(--dur-press) var(--ease-out);
}
.segmented-item:hover { color: var(--text); }
.segmented-item:active { transform: scale(var(--press-scale)); }
.segmented .btn-check:checked + .segmented-item,
.segmented-item.active,
.segmented-item[aria-pressed="true"],
.segmented-item[aria-selected="true"],
.segmented-item[aria-checked="true"] {
    background: var(--bg-surface);
    box-shadow: var(--shadow-segment);
    font-weight: 600;
}
.segmented .btn-check:focus-visible + .segmented-item,
.segmented-item:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.segmented .btn-check:disabled + .segmented-item {
    color: var(--text-tertiary);
    cursor: default;
}
@media (pointer: coarse) {
    .segmented-item { min-height: 40px; }
}

/* ---------- Pílulas de filtro ---------- */
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--fill-control);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-footnote);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-press) var(--ease-out);
}
.filter-pill:hover { background: var(--fill-control-hover); color: var(--text); }
.filter-pill:active { transform: scale(var(--press-scale)); }
.filter-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.filter-pill.active,
.filter-pill[aria-pressed="true"],
.filter-pill[aria-current]:not([aria-current="false"]) {
    background: var(--text);
    color: var(--bg-surface);
}
.filter-pill-check {
    display: none;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}
.filter-pill.active .filter-pill-check,
.filter-pill[aria-pressed="true"] .filter-pill-check,
.filter-pill[aria-current]:not([aria-current="false"]) .filter-pill-check {
    display: inline-block;
}
.filter-pill-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-secondary);
}
.filter-pill.active .filter-pill-count,
.filter-pill[aria-pressed="true"] .filter-pill-count,
.filter-pill[aria-current]:not([aria-current="false"]) .filter-pill-count {
    color: var(--dark-text-secondary);
}
@media (pointer: coarse) {
    .filter-pill { min-height: 36px; }
}

/* ---------- Stepper numérico (− valor +) ----------
   <div class="stepper">
     <button type="button" class="stepper-btn" aria-label="Diminuir">−</button>
     <input type="number" class="stepper-input" name="qtd" value="1" aria-label="Quantidade">
     <button type="button" class="stepper-btn" aria-label="Aumentar">+</button>
   </div> */
.stepper {
    display: inline-flex;
    align-items: center;
    height: var(--tap);
    background: var(--fill-control);
    border-radius: var(--radius-control);
}
.stepper:focus-within { box-shadow: var(--focus-ring); }
.stepper-btn {
    width: var(--tap);
    height: var(--tap);
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--fs-headline);
    line-height: 1;
    cursor: pointer;
    transition: transform var(--dur-press) var(--ease-out);
}
.stepper-btn:active { transform: scale(.9); }
.stepper-btn:focus-visible { box-shadow: none; outline: none; }
.stepper-btn:disabled { color: var(--text-tertiary); cursor: default; }
.stepper-input,
.stepper-value {
    width: 3.5ch;
    min-width: 32px;
    height: var(--tap);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--fs-callout);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: var(--tap);
    -moz-appearance: textfield;
    appearance: textfield;
}
.stepper-input:focus { outline: none; box-shadow: none; }
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------- Etapas do wizard (.steps) ----------
   <nav class="steps" aria-label="Etapas">
     <button type="button" class="step-item is-done"><span class="step-dot">1</span>Modelo</button>
     <span class="step-sep" aria-hidden="true"></span>
     <button type="button" class="step-item is-current" aria-current="step"><span class="step-dot">2</span>Medidas</button>
   </nav> */
.steps {
    display: flex;
    align-items: center;
    gap: 10px;
}
.step-sep {
    flex: 1 1 auto;
    min-width: var(--space-3);
    height: 1px;
    background: var(--separator);
}
.step-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding: 6px var(--space-1);
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-footnote);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--dur-press) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.step-item:active { transform: scale(var(--press-scale)); }
.step-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.step-item:disabled,
.step-item[aria-disabled="true"] { cursor: default; }
.step-dot {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--fill-control);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--dur-fast) var(--ease-spring),
                color var(--dur-fast) var(--ease-spring);
}
.step-item.is-done,
.step-item.is-current,
.step-item[aria-current="step"] { color: var(--text); }
.step-item.is-current,
.step-item[aria-current="step"] { font-weight: 600; }
.step-item.is-done .step-dot {
    background: var(--accent-tint);
    color: var(--accent-text);
}
.step-item.is-current .step-dot,
.step-item[aria-current="step"] .step-dot {
    background: var(--accent);
    color: var(--bg-surface);
}
@media (max-width: 480px) {
    .step-item .step-label { display: none; }
    .step-item.is-current .step-label,
    .step-item[aria-current="step"] .step-label { display: inline; }
}

/* ---------- Checkbox e rádio (accent) ---------- */
.form-check-input {
    width: 20px;
    height: 20px;
    margin-top: .15em;
    border: 1.5px solid var(--text-tertiary);
    background-color: var(--bg-surface);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.form-check-input[type="checkbox"] { border-radius: 6px; }
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--accent);
    border-color: var(--accent);
}
.form-check-input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: var(--focus-ring);
}
.form-check-input:focus:not(:focus-visible) { box-shadow: none; }
.form-check-label {
    font-size: var(--fs-callout);
    color: var(--text);
    cursor: pointer;
}
.form-check { min-height: 24px; }

/* ---------- Switch iOS (.form-switch) ---------- */
.form-switch { padding-left: 0; display: flex; align-items: center; gap: var(--space-3); }
.form-switch .form-check-input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 51px;
    height: 31px;
    margin: 0;
    float: none;
    border: 0;
    border-radius: var(--radius-pill);
    background-color: var(--fill-control-hover);
    background-image: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}
.form-switch .form-check-input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--bg-surface);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    transition: transform var(--dur-move) var(--ease-spring);
}
.form-switch .form-check-input:checked {
    background-color: var(--success);
    background-image: none;
}
.form-switch .form-check-input:checked::after { transform: translateX(20px); }
.form-switch .form-check-input:focus { background-image: none; }
.form-switch .form-check-input:focus-visible { box-shadow: var(--focus-ring); }
.form-switch .form-check-input:active::after { transform: scale(var(--press-scale)); }
.form-switch .form-check-input:checked:active::after { transform: translateX(20px) scale(var(--press-scale)); }
.form-switch .form-check-label { margin: 0; }

/* ---------- Lista de rádio estilo iOS ----------
   <div class="radio-list" role="radiogroup">
     <label class="radio-row">
       <input type="radio" name="vidro" value="temp8" checked>
       <span class="radio-row-body"><span class="radio-row-title">Temperado 8mm</span>
         <span class="radio-row-desc">Mais usado</span></span>
       <span class="radio-row-check" aria-hidden="true">✓ ou svg</span>
     </label>
   </div> */
.radio-list {
    background: var(--bg-surface);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.radio-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    margin: 0;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}
.radio-row + .radio-row { box-shadow: inset 0 1px 0 var(--separator); }
.radio-row:hover { background: var(--bg-grouped); }
.radio-row:active { background: var(--fill-control); }
.radio-row > input[type="radio"],
.radio-row > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.radio-row-body { flex: 1 1 auto; min-width: 0; }
.radio-row-title {
    display: block;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    color: var(--text);
}
.radio-row-desc {
    display: block;
    font-size: var(--fs-footnote);
    line-height: var(--lh-footnote);
    color: var(--text-secondary);
}
.radio-row-check {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--accent-text);
    font-weight: 600;
    opacity: 0;
    transform: scale(.8);
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-spring);
}
.radio-row > input:checked ~ .radio-row-check,
.radio-row.is-selected .radio-row-check {
    opacity: 1;
    transform: none;
}
/* Foco: anel interno (a lista tem overflow hidden) */
.radio-row:has(> input:focus-visible) {
    box-shadow: inset 0 0 0 2px var(--accent);
}
.radio-row > input:disabled ~ .radio-row-body { opacity: .4; }