/* =====================================================================
   PetIt — tema base (verde-água). Fredoka nos títulos, Nunito no texto.
   ===================================================================== */
:root {
    --verde-50: #EEFBF8;
    --verde-100: #D6F5EE;
    --verde-200: #AEEADD;
    --verde-300: #7DDAC8;
    --verde-400: #4CC6B0;
    --verde-500: #2BB5A0;
    --verde-600: #1E9785;
    --verde-700: #18786B;
    --verde-800: #145F56;
    --verde-900: #0E4440;

    --marinho: #16213A;
    --gradiente: linear-gradient(135deg, #14CDB0 0%, #2F6FE4 55%, #7B4BD8 100%);
    --coracao: #FF5F6D;
    --tinta: #16213A;
    --tinta-2: #3E5B57;
    --apagado: #6F8A86;
    --linha: #DCEDEA;
    --linha-forte: #C3DFDA;
    --fundo: #F4FBF9;
    --cartao: #FFFFFF;

    --coral: #FF8A6B;
    --coral-claro: #FFF0EB;
    --sol: #FFC65C;
    --sol-claro: #FFF6E3;
    --azul: #5B8DEF;
    --azul-claro: #EEF3FE;
    --roxo: #A77BF0;
    --roxo-claro: #F4EEFE;
    --vermelho: #E5484D;
    --vermelho-claro: #FDEDED;

    --raio: 14px;
    --raio-g: 20px;
    --sombra: 0 1px 2px rgba(18, 48, 44, .06), 0 4px 16px rgba(18, 48, 44, .06);
    --sombra-g: 0 12px 40px rgba(18, 48, 44, .14);
    --fonte-titulo: 'Fredoka', 'Nunito', system-ui, sans-serif;
    --fonte: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --lateral: 248px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 var(--fonte); color: var(--tinta); background: var(--fundo); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.2; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: 26px; } h2 { font-size: 20px; } h3 { font-size: 17px; }
p { margin: 0 0 1em; }
a { color: var(--verde-700); text-decoration: none; }
a:hover { color: var(--verde-800); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.so-celular { display: none; }
small, .apagado { color: var(--apagado); }
.nowrap { white-space: nowrap; }
.direita { text-align: right; }
.centro { text-align: center; }
.mt-0 { margin-top: 0 } .mb-0 { margin-bottom: 0 } .mt { margin-top: 16px } .mb { margin-bottom: 16px }

/* ------------------------------------------------------------------ Logo */
.marca { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 26px; color: var(--tinta); letter-spacing: -.02em; }
.marca-simbolo { width: 38px; height: 38px; flex: none; }
.marca b { background: var(--gradiente); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
.marca-clara { color: #fff; }
.marca-clara b { background: linear-gradient(135deg, #5EEBD3, #8FB4FF 55%, #C4A6FF); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ------------------------------------------------------------------ Layout do sistema */
.app { display: flex; min-height: 100vh; }
.lateral { position: fixed; inset: 0 auto 0 0; width: var(--lateral); background: var(--marinho); color: #D9F2EC; display: flex; flex-direction: column; z-index: 40; transition: transform .25s ease; }
.lateral-topo { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px; }
.lateral-fechar { display: none; background: none; border: 0; color: #fff; font-size: 20px; cursor: pointer; }
.loja-cartao { margin: 4px 14px 10px; padding: 10px 12px; border-radius: var(--raio); background: rgba(255, 255, 255, .07); display: flex; align-items: center; gap: 10px; }
.loja-avatar { width: 36px; height: 36px; border-radius: 12px; background: var(--gradiente); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.loja-dados { display: flex; flex-direction: column; min-width: 0; }
.loja-dados strong { font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loja-dados small { color: var(--verde-200); font-size: 12px; }
.menu { flex: 1; overflow-y: auto; padding: 4px 10px 16px; }
.menu-grupo { margin: 14px 12px 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-300); opacity: .8; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: #D9F2EC; font-weight: 600; font-size: 14.5px; position: relative; }
.menu-item i { width: 20px; text-align: center; font-size: 15px; opacity: .9; }
.menu-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.menu-item.ativo { background: var(--verde-500); color: #fff; box-shadow: 0 6px 16px rgba(43, 181, 160, .35); }
.menu-item.sem-plano { opacity: .55; }
.selo-menu { margin-left: auto; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.selo-menu.selo-alerta { background: var(--coral); color: #fff; }
.lateral-rodape { padding: 14px 22px 20px; font-size: 12px; color: var(--verde-300); display: flex; justify-content: space-between; align-items: center; }
.lateral-rodape em { font-style: normal; color: #fff; font-family: var(--fonte-titulo); font-size: 14px; }
.lateral-veu { display: none; }

.principal { flex: 1; margin-left: var(--lateral); min-width: 0; display: flex; flex-direction: column; }
.topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px 28px; background: rgba(244, 251, 249, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.topo-menu { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--linha); background: #fff; font-size: 17px; cursor: pointer; color: var(--tinta); display: grid; place-items: center; flex: none; }
.topo-menu:hover { border-color: var(--verde-300); color: var(--verde-700); }
.topo-titulo { display: flex; flex-direction: column; min-width: 0; }
.topo-titulo small { font-size: 12px; }
.topo-titulo strong { font-family: var(--fonte-titulo); font-weight: 600; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topo-icone { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--linha); background: #fff; display: grid; place-items: center; cursor: pointer; font-size: 16px; color: var(--tinta-2); }
.topo-icone:hover { border-color: var(--verde-300); color: var(--verde-700); }
.topo-icone .contador { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--coracao); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--fundo); }
.conteudo { padding: 24px 28px 48px; flex: 1; width: 100%; max-width: 1400px; }

/* Usuário e dropdowns */
.suspenso { position: relative; }
.usuario-botao { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 4px 12px 4px 4px; cursor: pointer; }
.usuario-botao strong { display: block; font-size: 13.5px; line-height: 1.2; }
.usuario-botao small { font-size: 11.5px; }
.avatar { width: 32px; height: 32px; border-radius: 10px; background: var(--verde-100); color: var(--verde-800); display: grid; place-items: center; font-weight: 800; font-size: 12.5px; flex: none; }
.avatar-g { width: 42px; height: 42px; border-radius: 14px; font-size: 15px; }
.painel-suspenso { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-g); padding: 8px; z-index: 50; }
.painel-cabecalho { display: flex; gap: 10px; align-items: center; padding: 8px 10px 12px; border-bottom: 1px solid var(--linha); margin-bottom: 6px; }
.painel-cabecalho strong { display: block; font-size: 14px; }
.painel-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--tinta); font-size: 14px; }
.painel-item:hover { background: var(--verde-50); color: var(--verde-800); }
.painel-item i { width: 18px; text-align: center; color: var(--apagado); }
.painel-perigo, .painel-perigo i { color: var(--vermelho); }

/* Notificações */
.notificacoes { width: 360px; max-width: calc(100vw - 24px); padding: 0; }
.notificacoes-topo { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--linha); }
.notificacoes-topo strong { font-family: var(--fonte-titulo); font-weight: 600; }
.notificacoes-lista { max-height: 420px; overflow-y: auto; }
.notificacao { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--linha); color: var(--tinta); }
.notificacao:hover { background: var(--verde-50); color: var(--tinta); }
.notificacao.nova { background: #F7FFFD; }
.notificacao.nova::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-500); margin-top: 7px; flex: none; }
.notificacao strong { display: block; font-size: 13.5px; }
.notificacao span { font-size: 12.5px; color: var(--apagado); display: block; }
.notificacoes-vazio { padding: 28px 14px; text-align: center; color: var(--apagado); font-size: 13.5px; }

/* Barra inferior (celular) */
.barra-inferior { display: none; }

/* Faixas */
.faixa { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--raio); margin-bottom: 18px; font-size: 14px; }
.faixa-aviso { background: var(--sol-claro); color: #7A5200; border: 1px solid #FCE3B0; }
.faixa-info { background: var(--verde-50); color: var(--verde-800); border: 1px solid var(--verde-100); }
.faixa-perigo { background: var(--vermelho-claro); color: #9B1C20; border: 1px solid #F8CFD0; }
.faixa .btn { margin-left: auto; }

/* ------------------------------------------------------------------ Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent; font-weight: 700; font-size: 14.5px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .05s, box-shadow .15s; text-decoration: none; line-height: 1.2; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.carregando { opacity: .6; pointer-events: none; }
.btn-primario { background: var(--verde-500); color: #fff; box-shadow: 0 4px 14px rgba(43, 181, 160, .3); }
.btn-primario:hover { background: var(--verde-600); color: #fff; }
.btn-escuro { background: var(--marinho); color: #fff; }
.btn-gradiente { background: var(--gradiente); color: #fff; box-shadow: 0 6px 18px rgba(47, 111, 228, .28); }
.btn-gradiente:hover { color: #fff; filter: brightness(1.05); }
.btn-escuro:hover { background: var(--verde-800); color: #fff; }
.btn-contorno { background: #fff; border-color: var(--linha-forte); color: var(--tinta); }
.btn-contorno:hover { border-color: var(--verde-400); color: var(--verde-700); }
.btn-suave { background: var(--verde-50); color: var(--verde-800); }
.btn-suave:hover { background: var(--verde-100); color: var(--verde-900); }
.btn-perigo { background: var(--vermelho-claro); color: var(--vermelho); }
.btn-perigo:hover { background: #FAD9DA; color: #B4242A; }
.btn-coral { background: var(--coral); color: #fff; }
.btn-fantasma { background: none; color: var(--tinta-2); }
.btn-fantasma:hover { background: var(--verde-50); color: var(--verde-800); }
.btn-pequeno { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.btn-grande { padding: 14px 24px; font-size: 16px; border-radius: 14px; }
.btn-bloco { width: 100%; }
.btn-icone { width: 38px; height: 38px; padding: 0; border-radius: 11px; }
.btn-icone.btn-pequeno { width: 32px; height: 32px; }
.btn-zap { background: #25D366; color: #fff; }
.btn-zap:hover { background: #1EBE5A; color: #fff; }

/* ------------------------------------------------------------------ Cartões e cabeçalho de página */
.cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.cabecalho-pagina h1 { margin: 0; }
.cabecalho-pagina p { margin: 4px 0 0; color: var(--apagado); }
.cabecalho-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio-g); box-shadow: var(--sombra); }
.cartao-corpo { padding: 20px; }
.cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linha); }
.cartao-topo h2, .cartao-topo h3 { margin: 0; font-size: 17px; }
.grade { display: grid; gap: 18px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-lado { grid-template-columns: minmax(0, 1fr) 360px; }

/* Indicadores */
.indicador { padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; }
.indicador-icone { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 18px; flex: none; background: var(--verde-50); color: var(--verde-600); }
.indicador-icone.coral { background: var(--coral-claro); color: var(--coral); }
.indicador-icone.sol { background: var(--sol-claro); color: #D69A1C; }
.indicador-icone.azul { background: var(--azul-claro); color: var(--azul); }
.indicador small { display: block; font-size: 12.5px; font-weight: 700; }
.indicador strong { display: block; font-family: var(--fonte-titulo); font-weight: 600; font-size: 26px; line-height: 1.15; }
.indicador span { font-size: 12.5px; color: var(--apagado); }

/* Barra de ocupação */
.ocupacao { height: 8px; border-radius: 999px; background: var(--verde-50); overflow: hidden; }
.ocupacao > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--verde-400), var(--verde-600)); }
.ocupacao.alta > i { background: linear-gradient(90deg, #FFB25C, var(--coral)); }

/* ------------------------------------------------------------------ Formulários */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.campo-rotulo { font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.campo-ajuda { font-size: 12px; color: var(--apagado); }
.entrada, .campo input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), .campo select, .campo textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: 11px; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; min-height: 42px;
}
.campo textarea { min-height: 80px; resize: vertical; }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--verde-400); box-shadow: 0 0 0 4px rgba(43, 181, 160, .15); }
.campo-caixa { position: relative; display: flex; align-items: center; }
.campo-caixa > i { position: absolute; left: 13px; color: var(--apagado); pointer-events: none; }
.campo-caixa input { padding-left: 38px !important; }
.campo-acao { position: absolute; right: 6px; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--apagado); }
.linha-campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.prefixo { position: relative; }
.prefixo > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--apagado); font-size: 13px; pointer-events: none; }
.prefixo input { padding-left: 34px !important; }
.sufixo { position: relative; }
.sufixo > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--apagado); font-size: 13px; pointer-events: none; }
.alerta { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 14px; }
.alerta-erro { background: var(--vermelho-claro); color: #9B1C20; }
.alerta-sucesso { background: var(--verde-50); color: var(--verde-800); }

/* Interruptor */
.chave { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 6px 0; }
.chave input { position: absolute; opacity: 0; pointer-events: none; }
.chave-trilho { width: 42px; height: 24px; border-radius: 999px; background: var(--linha-forte); position: relative; flex: none; transition: background .2s; margin-top: 1px; }
.chave-trilho::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.chave input:checked + .chave-trilho { background: var(--verde-500); }
.chave input:checked + .chave-trilho::after { transform: translateX(18px); }
.chave input:focus-visible + .chave-trilho { box-shadow: 0 0 0 4px rgba(43, 181, 160, .2); }
.chave-texto strong { display: block; font-size: 14px; }
.chave-texto small { display: block; font-size: 12.5px; }

/* Opções em pílula (porte, rádios) */
.pilulas { display: flex; gap: 8px; flex-wrap: wrap; }
.pilula { position: relative; }
.pilula input { position: absolute; opacity: 0; pointer-events: none; }
.pilula span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linha-forte); background: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all .15s; }
.pilula input:checked + span { background: var(--verde-500); border-color: var(--verde-500); color: #fff; }
.pilula input:focus-visible + span { box-shadow: 0 0 0 4px rgba(43, 181, 160, .2); }

/* Chips de filtro */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--linha); font-size: 13px; font-weight: 700; color: var(--tinta-2); cursor: pointer; }
.chip:hover { border-color: var(--verde-300); color: var(--verde-700); }
.chip.ativo { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.chip b { font-weight: 800; opacity: .7; }

/* Selos */
.selo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--verde-50); color: var(--verde-700); white-space: nowrap; }
.selo-porte { width: 24px; height: 24px; padding: 0; justify-content: center; border-radius: 8px; background: var(--verde-100); color: var(--verde-800); }
.selo.aguardando { background: var(--sol-claro); color: #9A6A00; }
.selo.agendado { background: var(--azul-claro); color: #3463C9; }
.selo.confirmado { background: var(--verde-100); color: var(--verde-800); }
.selo.atendimento { background: var(--roxo-claro); color: #7444C9; }
.selo.concluido { background: #EAF0EF; color: var(--tinta-2); }
.selo.cancelado { background: var(--vermelho-claro); color: var(--vermelho); }
.selo.faltou { background: var(--coral-claro); color: #D2532F; }
.selo.novo { background: var(--azul-claro); color: #3463C9; }
.selo.fiel { background: var(--verde-100); color: var(--verde-800); }
.selo.atrasado { background: var(--sol-claro); color: #9A6A00; }
.selo.sumido { background: var(--coral-claro); color: #D2532F; }

/* Tabelas */
.tabela-caixa { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--apagado); font-weight: 800; padding: 12px 16px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 12px 16px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: #FAFEFD; }
.tabela-link { cursor: pointer; }
.pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pessoa strong { display: block; font-size: 14px; }
.pessoa small { display: block; font-size: 12.5px; }

/* Vazio */
.vazio { text-align: center; padding: 48px 20px; color: var(--apagado); }
.vazio i { font-size: 36px; color: var(--verde-300); margin-bottom: 12px; }
.vazio h3 { color: var(--tinta); }

/* Abas */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 20px; overflow-x: auto; }
.aba { padding: 10px 14px; border: 0; background: none; font-weight: 700; color: var(--apagado); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; font-size: 14.5px; }
.aba:hover { color: var(--tinta); }
.aba.ativa { color: var(--verde-700); border-bottom-color: var(--verde-500); }

/* ------------------------------------------------------------------ Modal e gaveta */
.modal { border: 0; padding: 0; border-radius: var(--raio-g); width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: var(--sombra-g); color: var(--tinta); background: #fff; }
.modal-g { width: min(860px, calc(100vw - 24px)); }
.modal::backdrop { background: rgba(14, 68, 64, .45); backdrop-filter: blur(3px); }
.modal[open] { display: flex; flex-direction: column; animation: subir .2s ease; }
.modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--linha); }
.modal-topo h2 { margin: 0; font-size: 19px; }
.modal-corpo { padding: 20px 22px; overflow-y: auto; flex: 1; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--linha); background: #FBFEFD; border-radius: 0 0 var(--raio-g) var(--raio-g); }
.modal-rodape .esquerda { margin-right: auto; }
.fechar { width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--verde-50); cursor: pointer; color: var(--tinta-2); font-size: 16px; }
.fechar:hover { background: var(--verde-100); }
@keyframes subir { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: #fff; box-shadow: var(--sombra-g); z-index: 60; display: flex; flex-direction: column; transform: translateX(105%); transition: transform .25s ease; }
.gaveta.aberta { transform: none; }
.gaveta-veu { position: fixed; inset: 0; background: rgba(14, 68, 64, .3); z-index: 59; opacity: 0; pointer-events: none; transition: opacity .2s; }
.gaveta-veu.aberto { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------------ Toasts */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.toast { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--marinho); color: #fff; box-shadow: var(--sombra-g); animation: subir .25s ease; font-size: 14px; }
.toast i { margin-top: 2px; font-size: 16px; }
.toast strong { display: block; }
.toast.sucesso i { color: var(--verde-300); }
.toast.erro { background: #5E1518; }
.toast.erro i { color: #FF9A9D; }
.toast.aviso i { color: var(--sol); }
.toast.saindo { opacity: 0; transform: translateY(8px); transition: all .25s; }

/* Bloqueado por plano */
.bloqueado { max-width: 560px; margin: 40px auto; text-align: center; padding: 40px 28px; }
.bloqueado-icone { width: 76px; height: 76px; border-radius: 24px; background: var(--verde-50); color: var(--verde-600); display: grid; place-items: center; font-size: 32px; margin: 0 auto 18px; }

/* ------------------------------------------------------------------ Menu recolhido (computador) */
@media (min-width: 901px) {
    .lateral, .principal { transition: width .2s ease, margin-left .2s ease; }
    .menu-recolhido { --lateral: 76px; }
    .menu-recolhido .lateral-topo { justify-content: center; padding: 18px 0 10px; }
    .menu-recolhido .marca > span, .menu-recolhido .loja-dados, .menu-recolhido .menu-rotulo, .menu-recolhido .lateral-rodape em { display: none; }
    .menu-recolhido .loja-cartao { justify-content: center; padding: 8px 0; margin: 4px 12px 10px; background: none; }
    .menu-recolhido .menu { padding: 4px 12px 16px; }
    .menu-recolhido .menu-grupo { font-size: 0; height: 1px; margin: 12px 8px; background: rgba(255, 255, 255, .12); }
    .menu-recolhido .menu-item { justify-content: center; padding: 11px 0; }
    .menu-recolhido .menu-item i { font-size: 17px; }
    .menu-recolhido .selo-menu { position: absolute; top: 3px; right: 3px; padding: 0 5px; font-size: 10px; }
    .menu-recolhido .lateral-rodape { justify-content: center; padding: 14px 0 20px; }
}

/* ------------------------------------------------------------------ Celular */
@media (max-width: 1100px) {
    .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grade-lado { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .lateral { transform: translateX(-100%); }
    .lateral.aberta { transform: none; box-shadow: var(--sombra-g); }
    .lateral-fechar { display: block; }
    .lateral-veu { display: block; position: fixed; inset: 0; background: rgba(14, 68, 64, .4); z-index: 39; opacity: 0; pointer-events: none; transition: opacity .2s; }
    .lateral-veu.aberto { opacity: 1; pointer-events: auto; }
    .principal { margin-left: 0; }
    .topo { padding: 10px 16px; }
    .conteudo { padding: 18px 16px 96px; }
    .so-desktop { display: none !important; }
    .so-celular { display: initial; }
    .grade-2, .grade-3 { grid-template-columns: 1fr; }
    .barra-inferior { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: #fff; border-top: 1px solid var(--linha); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; align-items: center; }
    .barra-item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--apagado); background: none; border: 0; padding: 6px 10px; cursor: pointer; }
    .barra-item i { font-size: 18px; }
    .barra-item.ativo { color: var(--verde-600); }
    .barra-novo { width: 52px; height: 52px; border-radius: 18px; background: var(--verde-500); color: #fff; display: grid; place-items: center; font-size: 20px; margin-top: -24px; box-shadow: 0 8px 20px rgba(43, 181, 160, .4); }
    .barra-novo:hover { color: #fff; }
    .toasts { bottom: 84px; right: 16px; }
    .modal { max-height: calc(100vh - 16px); }
}
@media (max-width: 560px) {
    .grade-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
    .indicador { padding: 14px; gap: 10px; flex-direction: column; }
    .indicador strong { font-size: 22px; }
    h1 { font-size: 22px; }
    .tabela th, .tabela td { padding: 10px 12px; }
    .esconde-celular { display: none; }
}

/* ---------------------------------------------------------------- Status do robô (topo) */
.topo-robo { position: relative; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--linha); background: #fff; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.topo-robo:hover { border-color: var(--verde-300); color: var(--verde-700); }
.robo-ponto { width: 9px; height: 9px; border-radius: 50%; background: #9AA5B1; flex-shrink: 0; }
.robo-ok .robo-ponto { background: #22A06B; box-shadow: 0 0 0 3px rgba(34, 160, 107, .18); }
.robo-erro .robo-ponto { background: var(--vermelho); box-shadow: 0 0 0 3px rgba(229, 72, 77, .2); animation: robo-pisca 1.4s infinite; }
.topo-robo.robo-erro { border-color: #F8CFD0; color: #9B1C20; background: var(--vermelho-claro); }
@keyframes robo-pisca { 50% { opacity: .35; } }
.robo-painel { width: min(340px, calc(100vw - 24px)); padding: 12px; }
.robo-cabeca { display: flex; align-items: center; gap: 9px; font-size: 15px; padding: 2px 2px 8px; }
.robo-texto { margin: 0 2px 10px; font-size: 13px; color: var(--tinta-2); line-height: 1.45; }
.robo-lista { list-style: none; margin: 0 0 10px; padding: 0; border-top: 1px solid var(--linha); }
.robo-lista li { display: grid; grid-template-columns: 18px 1fr; gap: 2px 8px; padding: 8px 2px; border-bottom: 1px solid var(--linha); font-size: 13px; }
.robo-lista li i { color: var(--apagado); padding-top: 2px; grid-row: span 2; }
.robo-lista li span { color: var(--apagado); font-size: 12px; }
.robo-lista li b { font-weight: 700; color: var(--tinta); }
.robo-rodape { display: block; color: var(--apagado); font-size: 11.5px; line-height: 1.4; margin: 0 2px 8px; }
.robo-cartao .robo-lista { border-top: 0; }
.ag-sem-zap { color: var(--apagado); }
.det-confirmacao-alerta { color: #9B1C20; font-weight: 700; }
@media (max-width: 760px) {
    .topo-robo { width: 40px; padding: 0; justify-content: center; }
    .topo-robo .robo-ponto { position: absolute; top: 6px; right: 6px; }
    .robo-painel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-height: calc(100dvh - 140px); overflow-y: auto; }
}

/* ---------------------------------------------------------------- Barra inferior moderna (celular)
   Barra flutuante com cantos arredondados e vidro; item ativo ganha uma "pílula"; o botão do meio
   sobe em destaque. Para o CAIXA ele é maior, em coral, com o rótulo "Venda" (abre a venda). */
@media (max-width: 760px) {
    .barra-inferior {
        left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 6px 6px;
        border: 1px solid rgba(255, 255, 255, .6); border-radius: 24px;
        background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
        box-shadow: 0 10px 30px rgba(14, 68, 64, .18), 0 2px 6px rgba(14, 68, 64, .08);
        justify-content: space-between; gap: 2px;
    }
    .barra-item { flex: 1; min-width: 0; padding: 7px 2px 5px; border-radius: 16px; gap: 3px; font-size: 10.5px; letter-spacing: .1px; transition: color .15s, background .15s; position: relative; }
    .barra-item i { font-size: 19px; transition: transform .15s; }
    .barra-item .menu-rotulo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .barra-item.ativo { color: var(--verde-700); background: var(--verde-50); }
    .barra-item.ativo i { transform: translateY(-1px) scale(1.06); }
    .barra-item .selo-menu { position: absolute; top: 2px; right: calc(50% - 20px); }
    .barra-novo {
        flex: 0 0 auto; width: 56px; height: 56px; margin: -26px 4px 0; border-radius: 20px; border: 4px solid var(--fundo, #F4FBF9);
        background: linear-gradient(150deg, var(--verde-400), var(--verde-600)); color: #fff; display: grid; place-items: center; font-size: 21px;
        box-shadow: 0 10px 22px rgba(30, 151, 133, .45); transition: transform .15s;
    }
    .barra-novo:active { transform: scale(.94); }
    .barra-novo-venda {
        width: 66px; height: 66px; margin-top: -34px; border-radius: 24px; grid-template-rows: auto auto; align-content: center; gap: 1px;
        background: linear-gradient(150deg, #FF9E7F, #F2643E); box-shadow: 0 12px 26px rgba(242, 100, 62, .45); font-size: 22px;
    }
    .barra-novo-venda span { font-size: 10.5px; font-weight: 800; line-height: 1; letter-spacing: .2px; }
    .barra-novo-venda.ativo { outline: 3px solid rgba(242, 100, 62, .25); }
    .conteudo { padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; }
    .toasts { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* Avisos dentro de uma janela aberta (petit.js põe o #toasts no dialog): mesma posição na tela */
dialog > .toasts { position: fixed; z-index: 5; }