/* =========================================================
   COTA FÁCIL - MELHORIAS VISUAIS E DE EXPERIÊNCIA
   Carregado depois do app.css. Só acrescenta/ajusta estilos.
   Paleta: verde escuro #007A2F / #06402B, verde claro #AAF45A
   ========================================================= */

:root {
    --verde-escuro: #06402B;
    --verde: #007A2F;
    --verde-claro: #AAF45A;
    --erro: #b42318;
    --erro-fundo: #fef3f2;
    --sombra-suave: 0 6px 20px rgba(6, 64, 43, .08);
    --raio: 14px;
}

html { -webkit-text-size-adjust: 100%; }

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---------- foco visível (teclado) ---------- */
:focus-visible {
    outline: 3px solid rgba(0, 122, 47, .45);
    outline-offset: 2px;
}

[tabindex="-1"]:focus { outline: none; }

/* ---------- cabeçalho de etapa ---------- */
.content-wrapper h3 {
    letter-spacing: -.2px;
}

/* ---------- campos ---------- */
.form-input,
.form-select,
.form-textarea {
    height: 54px;
    border-radius: var(--raio);
    background: #fff;
    border-color: #d5dae1;
    font-weight: 500;
}

.form-input:read-only {
    background: #f3f5f7;
    color: #374151;
}

.form-label {
    font-size: 13px;
    letter-spacing: .1px;
}

select.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    text-overflow: ellipsis;
}

.mini-card {
    border-radius: var(--raio);
    border-color: #d5dae1;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.mini-card:focus-within {
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(0, 122, 47, .10);
}

.mini-card-label,
.mini-card > label {
    letter-spacing: .6px;
}

/* ---------- campo com erro ---------- */
.campo-erro,
.campo-erro .ts-control {
    border-color: var(--erro) !important;
    background-color: var(--erro-fundo) !important;
    animation: tremer .35s ease;
}

.form-input.campo-erro,
.form-select.campo-erro {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .12) !important;
}

.mini-card.campo-erro {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .12);
}

@keyframes tremer {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ---------- aviso (substitui alert) ---------- */
.toast-aviso {
    position: fixed;
    left: 50%;
    top: max(14px, env(safe-area-inset-top));
    transform: translate(-50%, -140%);
    width: calc(100% - 32px);
    max-width: 420px;
    padding: 14px 18px 14px 50px;
    border-radius: 14px;
    background: var(--verde-escuro);
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
    z-index: 2000000;
    opacity: 0;
    pointer-events: none;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}

.toast-aviso::before {
    content: "!";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    color: var(--erro);
    font-weight: 900;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-aviso.erro { background: #7a1c13; }
.toast-aviso.ok { background: var(--verde-escuro); }
.toast-aviso.ok::before { content: "✓"; color: var(--verde); }

.toast-aviso.show {
    transform: translate(-50%, 0);
    opacity: 1;
}

/* ---------- botões ---------- */
.btn-primary,
.btn-secondary {
    min-height: 54px;
    font-family: 'Sora', sans-serif;
    border-radius: var(--raio) !important;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

.btn-primary:active,
.btn-secondary:active { transform: scale(.98); }

.btn-primary:disabled,
.btn-primary.is-loading,
#btnAcessar:disabled {
    opacity: .75;
    cursor: wait;
}

.is-loading::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -2px;
    animation: girar .7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- login ---------- */
#loginCard {
    border: 1px solid rgba(6, 64, 43, .06);
}

#loginCard input:focus {
    border-color: var(--verde) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 47, .12) !important;
}

#toggleSenha {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    cursor: pointer;
}

#toggleSenha.ativo { color: var(--verde); }
#toggleSenha svg, #toggleSenha i { width: 18px; height: 18px; pointer-events: none; }

@media (max-width: 480px) {
    /* troca o "scale(.85)" por tamanhos reais, sem desfocar nem cortar */
    #loginCard {
        transform: none !important;
        padding: 34px 20px 28px !important;
        border-radius: 24px !important;
    }

    #loginCard input {
        height: 54px !important;
        font-size: 16px !important;
    }

    #loginCard button#btnAcessar {
        height: 56px !important;
        font-size: 17px !important;
    }
}

/* ---------- planos ---------- */
.plano-card {
    position: relative;
    border: 1.5px solid #d5dae1;
    border-radius: 16px;
    padding: 16px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease, background .2s ease;
}

.plano-card:hover {
    border-color: var(--verde);
    box-shadow: var(--sombra-suave);
}

.plano-card:active { transform: scale(.99); }

.plano-card.selected {
    border: 2px solid var(--verde);
    background: #f7fdf3;
    box-shadow: 0 10px 26px rgba(0, 122, 47, .14);
}

.plano-header span {
    background: var(--verde-claro);
    color: var(--verde-escuro);   /* contraste: antes era branco sobre verde claro */
    letter-spacing: .3px;
    white-space: nowrap;
}

.plano-header { flex-wrap: wrap; }

.plano-valor {
    min-width: 112px;
    font-variant-numeric: tabular-nums;
}

.plano-valor strong {
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.1;
    word-break: keep-all;
}

.plano-valor p { font-weight: 600; }

.plano-radio { transition: border .15s ease; }

/* carregamento dos valores */
body.calculando .plano-valor strong,
body.calculando .plano-valor p {
    color: transparent !important;
    background: linear-gradient(90deg, #e9edf0 25%, #f6f8f9 50%, #e9edf0 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: brilho 1.2s ease-in-out infinite;
    user-select: none;
}

@keyframes brilho {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* guincho / RCF */
.guincho-selector,
.rcf-selector,
#screen4 .btn-guincho {
    font-family: 'Sora', sans-serif;
}

.btn-guincho { min-height: 42px; }

.rcf-select {
    font-size: 14px !important;
    padding: 0 28px 0 10px !important;
    background-position: right 10px center !important;
    min-width: 0;
}

/* ---------- sucesso ---------- */
.success-icon { animation: pop .5s cubic-bezier(.2, 1.4, .4, 1); }

@keyframes pop {
    from { transform: scale(.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.desconto-comissao-btn {
    min-height: 44px;
}

.btn-imprimir-cotacao {
    border-radius: var(--raio);
    font-family: 'Sora', sans-serif;
}

/* ---------- barra de ações fixa no celular ---------- */
@media (max-width: 600px) {
    #screen2 .content-wrapper,
    #screen3 .content-wrapper,
    #screen4 .content-wrapper {
        padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
    }
}

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- Zero KM: Sim / Não como botões ---------- */
.zero-km-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 2px 0 0;
}

.option-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1.5px solid #d5dae1;
    border-radius: 12px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.option-card input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.option-card:has(input:checked) {
    border-color: var(--verde);
    background: #f1fbe8;
    color: var(--verde-escuro);
}

.option-card:has(input:focus-visible) {
    outline: 3px solid rgba(0, 122, 47, .45);
    outline-offset: 2px;
}