/**
 * Módulo de Cosméticos — estilos compartilhados pelas páginas
 * cosmeticos.html, cosmetico-form.html, cosmetico-estoque.html, cosmeticos-config.html.
 * Escrito mobile-first: o padrão vale para celular e os @media adicionam o desktop,
 * porque o cadastro é feito majoritariamente pelo telefone.
 *
 * Modo "Operate" (DESIGN.md): aqui escaneabilidade e precisão vêm antes de expressão.
 * A marca aparece em detalhes — o dourado é reservado para o que está selecionado,
 * ativo ou é a ação principal, nunca como decoração de fundo (Regra do Dourado Raro).
 */

/* ═══════════ Layout base ═══════════ */
.cos-page {
    padding: 0 16px 96px;
    width: 100%;
    box-sizing: border-box;
}

.cos-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0 4px;
}
.cos-topbar-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
    line-height: 1.2;
    min-width: 0;
    overflow-wrap: anywhere;
}
.cos-subtitle {
    font-size: 13px;
    color: var(--text-gray);
    margin: 4px 0 0;
}
.cos-count {
    font-size: 13px;
    color: var(--text-gray);
    margin: 14px 0 8px;
    font-weight: 500;
}

/* ═══════════ Botões ═══════════ */
.cos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.cos-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.cos-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.cos-btn-primary {
    background: var(--gold-gradient, linear-gradient(135deg, #F6E27A 0%, #D4AF37 50%, #A57C1B 100%));
    color: #1a1a1a;
}
.cos-btn-primary:hover { box-shadow: 0 0 20px rgba(212,175,55,0.25); transform: translateY(-1px); }
.cos-btn-primary:active { transform: translateY(0) scale(0.98); }

.cos-btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--separator);
}
.cos-btn-outline:hover { background: rgba(212,175,55,0.08); border-color: rgba(212,175,55,0.35); color: var(--gold-dark); }

.cos-btn-danger { background: transparent; color: #c62828; border: 1px solid rgba(198,40,40,0.35); }
.cos-btn-danger:hover { background: #fdecea; border-color: rgba(198,40,40,0.5); }

.cos-btn-full { width: 100%; }

/* Botão pequeno para ações em linha (listas) */
.cos-btn-sm {
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

/* Barra de ações fixa no rodapé — mantém "Salvar" no alcance do polegar */
.cos-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--card-background, #fff);
    border-top: 1px solid var(--separator);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}
.cos-action-bar .cos-btn { flex: 1; }

/* ═══════════ Formulário ═══════════ */
.cos-form-section {
    background: var(--card-background, #fff);
    border: 1px solid var(--separator);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.cos-form-section h2 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--gold-dark);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--separator);
}

.cos-field { margin-bottom: 16px; }
.cos-field:last-child { margin-bottom: 0; }
.cos-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gray);
    margin-bottom: 6px;
}
.cos-field .cos-req { color: #c62828; }

/* 16px evita o zoom automático do iOS ao focar o campo */
.cos-field input[type="text"],
.cos-field input[type="number"],
.cos-field input[type="date"],
.cos-field select,
.cos-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--separator);
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
    background: var(--background);
    color: var(--primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cos-field textarea { min-height: 88px; resize: vertical; }
.cos-field input:focus,
.cos-field select:focus,
.cos-field textarea:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
    background: var(--card-background, #fff);
}
/* Campo de dinheiro com teto: passou do saldo, fica vermelho e trava o botão.
   Declara o shorthand `border` inteiro (e não só `border-color`) porque a regra base
   também usa shorthand. A variante :focus é obrigatória — sem ela a regra de foco
   vence e o vermelho some justamente enquanto a pessoa digita. */
.cos-field input.is-over,
.cos-field input.is-over:focus { border: 1px solid #c62828; box-shadow: 0 0 0 3px rgba(198, 40, 40, .12); }
.cos-field .cos-hint { font-size: 12px; color: var(--text-gray); margin: 6px 0 0; line-height: 1.4; }
.cos-field .cos-hint.error { color: #c62828; }
/* Altura reservada: sem isso o modal pula quando a mensagem de erro aparece. */
.cos-field .cos-hint.cos-hint-reserved { min-height: 18px; }

.cos-field-row { display: grid; grid-template-columns: 1fr; gap: 0; }

/* ===== Editor de variantes (tamanho + preço) — cosmetico-form.html ===== */
.cos-variant-list { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cos-variant-list > .cos-btn { align-self: flex-start; }
.cos-variant-row {
    width: 100%;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 12px 14px 4px;
    background: var(--background, #fafafa);
}
/* Variante desativada continua editável, só sai do catálogo — o cinza sinaliza
   isso sem esconder os campos. */
.cos-variant-row.inactive { opacity: .62; }
.cos-variant-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 2px 0 12px;
}
.cos-variant-meta .cos-hint { margin: 0; font-size: 12px; color: var(--text-gray); }
.cos-variant-meta .cos-btn { margin-left: auto; }

/* Campo com botão ao lado (marca + atalho para gerenciar) */
.cos-field-inline { display: flex; gap: 8px; align-items: stretch; }
.cos-field-inline select,
.cos-field-inline input { flex: 1; min-width: 0; }
.cos-field-inline .cos-btn { flex-shrink: 0; padding: 0 14px; }

.cos-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--primary);
    cursor: pointer;
    min-height: 48px;
}
.cos-check input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--gold-dark); }

/* Chips de aplicação/benefício — o toque em si é o alvo, não uma caixinha minúscula.
   O checkbox nativo vira um indicador circular discreto; o estado real é a borda + fundo dourados. */
.cos-chips-select { display: flex; flex-wrap: wrap; gap: 8px; }
.cos-chip-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    background: var(--background);
    border: 1px solid var(--separator);
    padding: 10px 16px;
    border-radius: 24px;
    cursor: pointer;
    min-height: 44px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.cos-chip-check:hover { border-color: rgba(212,175,55,0.4); }
.cos-chip-check input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 16px; height: 16px; flex-shrink: 0; margin: 0;
    border: 1.5px solid var(--text-gray);
    border-radius: 50%;
    display: inline-block;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.cos-chip-check span { line-height: 1.3; }
.cos-chip-check.selected { border-color: var(--gold); background: rgba(212,175,55,0.1); color: var(--gold-dark); font-weight: 600; }
.cos-chip-check.selected input[type="checkbox"] {
    border-color: var(--gold);
    background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center;
}

/* ═══════════ Uploader de imagem ═══════════ */
.cos-image-field { display: flex; gap: 14px; align-items: flex-start; }
.cos-image-preview {
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--separator);
    background: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* contain (não cover): centraliza sem cortar, já que os produtos vêm em fotos de tamanhos/proporções variados */
.cos-image-preview img { width: 100%; height: 100%; object-fit: contain; }
.cos-image-preview span { font-size: 11px; color: var(--text-gray); text-align: center; padding: 4px; }
.cos-image-actions { flex: 1; min-width: 0; }
.cos-image-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* ═══════════ Navegação entre seções (página de listas) ═══════════ */
.cos-section-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 16px 0 4px;
    -webkit-overflow-scrolling: touch;
}
.cos-section-nav a {
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: 24px;
    border: 1px solid var(--separator);
    background: var(--card-background, #fff);
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.cos-section-nav a:hover { border-color: var(--gold); color: var(--gold-dark); background: rgba(212,175,55,0.06); }
.cos-section-nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Compensa o header fixo ao pular para uma seção via âncora */
.cos-form-section[id] { scroll-margin-top: 80px; }

/* ═══════════ Filtros ═══════════ */
.cos-filters { margin: 14px 0 4px; }
.cos-filters input[type="text"],
.cos-filters select {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--separator);
    font-size: 16px;
    box-sizing: border-box;
    background: var(--card-background, #fff);
    color: var(--primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cos-filters select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666666'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    padding-right: 36px;
}
.cos-filters input:focus, .cos-filters select:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
}
.cos-filters-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

/* ═══════════ Cards da listagem (mobile) ═══════════ */
.cos-cards { display: flex; flex-direction: column; gap: 10px; }

.cos-card {
    display: block;
    background: var(--card-background, #fff);
    border: 1px solid var(--separator);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.cos-card:hover { border-color: rgba(212,175,55,0.35); box-shadow: 0 0 20px rgba(212,175,55,0.12); }
.cos-card:active { transform: scale(0.99); background: var(--background); }
.cos-card-top { display: flex; gap: 12px; align-items: flex-start; }
.cos-card-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    /* contain (não cover): centraliza sem cortar — fotos de produto vêm em proporções variadas */
    object-fit: contain;
    background: var(--background);
    border: 1px solid var(--separator);
}
.cos-card-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-gray);
}
.cos-card-info { flex: 1; min-width: 0; }
.cos-card-name {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.cos-card-sub { font-size: 13px; color: var(--text-gray); margin-top: 2px; overflow-wrap: anywhere; }
.cos-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; }
.cos-card-price { font-weight: 700; color: var(--gold-dark); font-variant-numeric: tabular-nums; }

.cos-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--separator);
}
.cos-card-actions .cos-btn { flex: 1; }

/* ═══════════ Badges ═══════════ */
.cos-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.cos-badge-active { background: #e8f5e9; color: #2e7d32; }
.cos-badge-inactive { background: #f5f5f5; color: #757575; }
.cos-badge-stock-ok { background: #e8f5e9; color: #2e7d32; }
.cos-badge-stock-zero { background: #fdecea; color: #c62828; }
/* 'disponível' com acento — igual ao valor gravado no Firestore */
.cos-badge-disponível { background: #e8f5e9; color: #2e7d32; }
.cos-badge-reservado { background: var(--ds-accent-bg); color: var(--ds-gold-dark); }
.cos-badge-vendido { background: #f5f5f5; color: #757575; }
.cos-badge-terminado { background: #f5f5f5; color: #9e9e9e; }
/* Tamanho da unidade de estoque (400 ml / 1 L do mesmo produto). */
.cos-badge-variant { background: var(--ds-accent-bg, #f3ede1); color: var(--ds-gold-dark, #8a6d3b); margin-left: 6px; }

/* Aplicação (para que serve) em dourado; benefício em verde, para separar à primeira vista.
   Mesmos valores do chip público (cc-chip / cd-chip) — mesma linguagem em toda a base. */
.cos-tag {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
    background: rgba(212,175,55,0.10);
    color: var(--gold-dark);
}
.cos-tag-benefit { background: rgba(46,125,50,0.10); color: #2e7d32; }
.cos-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

/* ═══════════ Listas simples (estoque, marcas, aplicações) ═══════════ */
.cos-list {
    background: var(--card-background, #fff);
    border: 1px solid var(--separator);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.cos-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--separator);
    flex-wrap: wrap;
    transition: background 0.15s ease;
}
.cos-list-row:last-child { border-bottom: none; }
.cos-list-row:hover { background: var(--background); }
.cos-list-row-main { flex: 1; min-width: 0; }
.cos-list-row-title { font-size: 15px; font-weight: 500; color: var(--primary); overflow-wrap: anywhere; }
.cos-list-row-sub { font-size: 12px; color: var(--text-gray); margin-top: 2px; }
.cos-list-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ═══════════ Resumo de estoque ═══════════ */
.cos-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.cos-summary-item {
    background: var(--card-background, #fff);
    border: 1px solid var(--separator);
    border-radius: var(--radius-md);
    padding: 14px 8px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.cos-summary-value {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--gold-dark);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.cos-summary-label { font-size: 11px; color: var(--text-gray); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; display: block; }

/* ═══════════ Estados ═══════════ */
.cos-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-gray);
    font-size: 15px;
}
.cos-empty p { margin: 0 0 16px; }

/* ═══════════ Modal ═══════════
 * Casca única das 4 implementações antigas (pgc-/ces-/mpc-/co-modal).
 * Mobile-first: no celular é bottom sheet — sobe do rodapé, cantos arredondados
 * só no topo, botões no alcance do polegar. A partir de 768px vira diálogo
 * centralizado. Abrir/fechar fica com cosModal (js/components/CosmeticModal.js),
 * que também dá ESC e clique no fundo.
 */
.cos-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgba(0, 0, 0, .45);
}
.cos-modal.open { display: flex; }

.cos-modal-box {
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
    background: var(--ds-card);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .22);
}
.cos-modal-box h2,
.cos-modal-box h3 { margin: 0 0 4px; font-size: 18px; }
.cos-modal-box > p { margin: 0 0 14px; color: var(--ds-text-muted); font-size: 13px; }

/* Link auxiliar dentro do modal ("Criar nova ordem") — atalho para uma tela que
 * resolve o pré-requisito do próprio modal, sem competir com os botões de ação. */
.cos-modal-link {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--ds-gold-dark);
    font-size: 13px;
    font-weight: 700;
}

.cos-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}
/* No celular os botões ocupam a linha toda — alvo de toque maior */
.cos-modal-actions > * { flex: 1; }

/* Campos soltos dentro do modal (sem wrapper .cos-field).
 * Só filhos diretos de propósito: assim o modal ganha campo apresentável de
 * graça, sem competir com .cos-field quando a página usa o wrapper.
 * Referência visual: modal de editar item de /lista-estoque.html. */
.cos-modal-box > label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-gray);
    font-size: 13px;
    font-weight: 600;
}
.cos-modal-box > input,
.cos-modal-box > select,
.cos-modal-box > textarea {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--separator);
    border-radius: var(--radius-sm);
    background: var(--background);
    color: var(--primary);
    font-family: inherit;
    font-size: 16px; /* 16px evita o zoom automático do iOS ao focar */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cos-modal-box > input:focus,
.cos-modal-box > select:focus,
.cos-modal-box > textarea:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
    background: var(--card-background, #fff);
}
/* Botão de modal usa sempre .cos-btn + variante (cos-btn-outline para
 * cancelar, cos-btn-primary para confirmar, cos-btn-danger para destrutivo).
 * Aqui só se reduz a altura: 48px numa fileira de dois fica pesado. */
.cos-modal-actions .cos-btn { min-height: 44px; font-size: 15px; }

/* ═══════════ Combo de filtro (cosFilterCombo) ═══════════
 * Campo de filtro com autocomplete das listagens. O botão de limpar e a caixa
 * de resultados são injetados por js/components/FilterCombo.js — a página só
 * declara o wrapper e o input.
 */
.cos-combo { position: relative; flex: 1; min-width: 0; }
.cos-combo input {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    padding: 0 34px 0 12px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    background: var(--ds-card);
    color: var(--ds-text);
    font: inherit;
}
.cos-combo input:focus {
    border-color: var(--ds-gold);
    outline: none;
    box-shadow: 0 0 0 3px var(--ds-accent-bg);
}
.cos-combo-clear {
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--ds-text-muted);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}
.cos-combo-results {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 230px;
    overflow: auto;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    background: var(--ds-card);
    box-shadow: 0 7px 22px rgba(0, 0, 0, .16);
}
.cos-combo-results button {
    display: block;
    width: 100%;
    padding: 11px 13px;
    border: 0;
    border-bottom: 1px solid var(--ds-border);
    background: transparent;
    color: var(--ds-text);
    text-align: left;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.cos-combo-results button:last-child { border-bottom: 0; }
.cos-combo-results button:hover,
.cos-combo-results button:focus { background: var(--ds-bg-hover); }
.cos-combo-empty { padding: 11px 13px; color: var(--ds-text-muted); font-size: 13px; }

/* ═══════════ Modal de mensagem (cosFeedback) ═══════════
 * Sucesso/erro/aviso/confirmação — markup injetado por
 * js/components/FeedbackModal.js, a página não declara nada.
 */
.cos-feedback-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cos-feedback-head h3 { margin: 0; font-size: 17px; }
.cos-feedback-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
}
.cos-feedback-icon-success { background: rgba(52,199,89,.14); color: #2e7d32; }
.cos-feedback-icon-error   { background: rgba(198,40,40,.12); color: #c62828; }
.cos-feedback-icon-info    { background: rgba(212,175,55,.14); color: var(--gold-dark); }
.cos-feedback-message {
    margin: 0;
    color: var(--text-gray);
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-line; /* mensagens com \n (ex.: aviso extra pós-venda) */
}

/* ═══════════ Desktop ═══════════ */
@media (min-width: 768px) {
    .cos-modal { align-items: center; padding: 16px; }
    .cos-modal-box {
        width: min(440px, 100%);
        padding: 22px;
        border-radius: 10px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, .2);
    }
    .cos-modal-actions > * { flex: 0 0 auto; }

    .cos-page { padding: 0 32px 40px; }
    .cos-topbar-title { font-size: 28px; }
    .cos-field-row { grid-template-columns: 1fr 1fr; gap: 16px; }
    .cos-variant-row .cos-field-row { grid-template-columns: 1.2fr 1fr 1fr; }
    .cos-filters-grid { grid-template-columns: repeat(4, 1fr); }

    /* Em telas maiores o rodapé fixo é desnecessário */
    .cos-action-bar {
        position: static;
        border-top: none;
        box-shadow: none;
        padding: 4px 0 0;
        justify-content: flex-end;
        background: transparent;
    }
    .cos-action-bar .cos-btn { flex: 0 0 auto; min-width: 160px; }
    .cos-page.cos-page-form { padding-bottom: 40px; }

    .cos-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
    .cos-card { display: flex; flex-direction: column; justify-content: space-between; }
}