/* Padrao unico das telas de cadastro (Cupons e Combos sao a referencia): modal, chips de status,
   botoes de icone e toggle "Mostrar arquivados". Classes cr-* para nao colidir com CSS de cada tela. */

/* Modal padrao: cabecalho (titulo + X), corpo com campos rotulados, rodape Cancelar/Salvar */
.cr-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9500; align-items: center; justify-content: center; }
.cr-modal > .modal-content { background: var(--fundo); width: 92%; max-width: 520px; max-height: 90vh; max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 12px; margin: 16px; padding: 0; gap: 0; box-shadow: 0 8px 24px rgba(0,0,0,.2); min-width: 0; display: block; }
.cr-modal .modal-header { position: sticky; top: 0; z-index: 3; background: var(--fundo); padding: 16px 20px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
.cr-modal .modal-header h2, .cr-modal .modal-header h3 { color: var(--primaria); margin: 0; font-size: 20px; }
.cr-modal .close-modal { font-size: 28px; line-height: 1; cursor: pointer; color: #999; background: none; border: 0; padding: 0; }
.cr-modal .modal-body { padding: 20px; }
.cr-modal .modal-footer { position: sticky; bottom: 0; z-index: 3; background: var(--fundo); padding: 14px 20px; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: 8px; }
.cr-modal .form-group { margin-bottom: 16px; }
.cr-modal .form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.cr-modal .form-group label small { font-weight: 400; color: #888; }
.cr-modal .cr-check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.cr-modal .cr-check input { width: auto; }
.cr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.cr-input { width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px; border: 1px solid #bbb; border-radius: 8px; font-size: 15px; background: var(--fundo); color: inherit; }
.cr-input:focus { outline: 2px solid var(--secundaria); outline-offset: -1px; }
.cr-modal input[type=file].cr-input { padding: 6px 8px; height: auto; }
body.dark-mode .cr-modal .modal-header { border-color: rgba(255,255,255,.15); }
body.dark-mode .cr-input { border-color: rgba(255,255,255,.25); }
@media (max-width: 520px) { .cr-grid { grid-template-columns: 1fr; } }

/* Interruptor compacto (checkbox vira switch) usado em "Mostrar arquivados" e filtros similares */
.cr-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1; cursor: pointer; user-select: none; white-space: nowrap; margin-bottom: 0; }
.cr-switch input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 36px; height: 20px; min-width: 36px; max-width: 36px; padding: 0; margin: 0; border: 0; border-radius: 999px; background: #bbb; cursor: pointer; transition: background .15s; box-shadow: none; }
.cr-switch input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.cr-switch input[type=checkbox]:checked { background: var(--secundaria); }
.cr-switch input[type=checkbox]:checked::after { transform: translateX(16px); }
.cr-switch input[type=checkbox]:focus-visible { outline: 2px solid var(--secundaria); outline-offset: 2px; }
body.dark-mode .cr-switch input[type=checkbox] { background: #5a6068; }
body.dark-mode .cr-switch input[type=checkbox]:checked { background: var(--secundaria); }

/* Lista: toggle de arquivados, status em chips, acoes em botoes de icone */
.cr-arquivados { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin: 0 0 12px 16px; cursor: pointer; }
.cr-status { flex: 0 0 110px; }
.cr-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.cr-badge.ativo { background: #d4edda; color: #009640; }
.cr-badge.inativo { background: #e2e3e5; color: #495057; }
.cr-badge.arquivado { background: #e2e3e5; color: #6c757d; }
body.dark-mode .cr-badge.ativo { background: #14532D; color: #BBF7D0; }
body.dark-mode .cr-badge.inativo { background: #3a3f45; color: #ced4da; }
body.dark-mode .cr-badge.arquivado { background: #3a3f45; color: #adb5bd; }
.cr-acoes { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
button.cr-btn-icon { width: 34px; height: 34px; border: 1px solid #ccc; border-radius: 8px; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: inherit; padding: 0; }
button.cr-btn-icon:hover { background: rgba(0,0,0,.06); }
.cr-btn-icon.btn-editar { color: #279048; }
.cr-btn-icon.btn-excluir { color: #c0392b; }
.cr-btn-icon.btn-reativar { color: #3498db; }
.cr-btn-icon.btn-extra { color: #6c5ce7; }
body.dark-mode .cr-btn-icon { border-color: rgba(255,255,255,.25); }
body.dark-mode .cr-btn-icon:hover { background: rgba(255,255,255,.1); }
.cr-arquivado-linha { opacity: .65; }
.cr-btn-icon.btn-whatsapp { color: #25D366; }