/* ====== Ótica Utiaque — estilos próprios (sobre o Pico.css) ====== */
:root {
  --pico-font-size: 100%;
  --cor-marca: #0f6e8c;
  --cor-marca-texto: #0f6e8c;
  --cor-ok: #2e7d32;
  --cor-aviso: #b26a00;
  --cor-erro: #c62828;
  --cor-info: #1565c0;
  --altura-menu-inferior: 64px;
}
:root:not([data-theme="dark"]) { --pico-primary: var(--cor-marca); --pico-primary-background: var(--cor-marca); --pico-primary-border: var(--cor-marca); --pico-primary-hover-background: #0b5670; --pico-primary-hover: #0b5670; }

body { padding-bottom: calc(var(--altura-menu-inferior) + 16px); }
main.container { padding-top: 1rem; }
h1 { font-size: 1.6rem; margin-bottom: .75rem; }
h2 { font-size: 1.25rem; margin-bottom: .6rem; }
h3 { font-size: 1.08rem; margin-bottom: .5rem; }
small.muted, .muted { color: var(--pico-muted-color); }
.nowrap { white-space: nowrap; }
.direita { text-align: right; }
.centro { text-align: center; }
.oculto { display: none !important; }
.mt { margin-top: 1rem; }
.sem-margem { margin: 0; }

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: 20; background: var(--pico-background-color); border-bottom: 1px solid var(--pico-muted-border-color); }
.topo .barra { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; }
.topo .marca { display: flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 700; color: var(--cor-marca-texto); white-space: nowrap; }
.topo .marca img { height: 34px; width: auto; }
.topo form.busca-global { flex: 1; margin: 0; }
.topo form.busca-global input { margin: 0; height: 2.4rem; padding-top: .3rem; padding-bottom: .3rem; }
.topo nav.menu-topo { display: none; gap: .25rem; }
.topo nav.menu-topo a { padding: .4rem .6rem; border-radius: 6px; text-decoration: none; white-space: nowrap; }
.topo nav.menu-topo a.ativo { background: var(--pico-primary-focus); }
.topo details.dropdown { margin: 0; }
.topo details.dropdown summary { height: 2.4rem; padding: .3rem .7rem; }
@media (min-width: 1024px) {
  .topo nav.menu-topo { display: flex; }
  body { padding-bottom: 1rem; }
  .menu-inferior { display: none !important; }
}
@media (max-width: 600px) { .topo .marca span { display: none; } }

/* ---------- Menu inferior (celular/tablet) ---------- */
.menu-inferior { position: fixed; left: 0; right: 0; bottom: 0; height: var(--altura-menu-inferior); z-index: 30;
  display: flex; background: var(--pico-background-color); border-top: 1px solid var(--pico-muted-border-color); box-shadow: 0 -2px 8px rgba(0,0,0,.06); }
.menu-inferior a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; font-size: .75rem; color: var(--pico-muted-color); }
.menu-inferior a .ico { font-size: 1.35rem; line-height: 1; }
.menu-inferior a.ativo { color: var(--cor-marca-texto); font-weight: 600; }
.menu-inferior a.destaque .ico { background: var(--cor-marca); color: #fff; border-radius: 50%; width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center; }

/* ---------- Mensagens ---------- */
.mensagens { display: grid; gap: .5rem; margin-bottom: 1rem; }
.msg { padding: .7rem 1rem; border-radius: 8px; border-left: 5px solid; background: var(--pico-card-background-color); box-shadow: var(--pico-card-box-shadow); }
.msg.sucesso { border-color: var(--cor-ok); }
.msg.erro { border-color: var(--cor-erro); }
.msg.aviso { border-color: var(--cor-aviso); }
.msg.info { border-color: var(--cor-info); }

/* ---------- Cabeçalho de página ---------- */
.cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.cabecalho h1 { margin: 0; }
.acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.acoes > *, .acoes form button { margin: 0; width: auto; }
.acoes form { margin: 0; }
a[role="button"], button { white-space: nowrap; }
.btn-pequeno { padding: .3rem .65rem !important; font-size: .85rem; }
button.perigo, a.perigo[role="button"] { --pico-background-color: var(--cor-erro); --pico-border-color: var(--cor-erro); }
button.outline.perigo { --pico-color: var(--cor-erro); background: transparent; }
.btn-whatsapp { --pico-background-color: #25d366; --pico-border-color: #25d366; --pico-color: #fff; }
.voltar { display: inline-block; margin-bottom: .5rem; text-decoration: none; }

/* botões grandes para toque */
@media (max-width: 1023px) { .acoes a[role="button"], .acoes button { padding: .65rem 1rem; } }

/* ---------- Cartões / grade ---------- */
.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grade-2 { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
.grade-3 { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
.grade-4 { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) {
  .grade-2 { grid-template-columns: 1fr 1fr; }
  .grade-3 { grid-template-columns: repeat(3, 1fr); }
  .grade-4 { grid-template-columns: repeat(4, 1fr); }
}
article { margin-bottom: 1rem; padding: 1rem 1.1rem; }
article > header { padding: .6rem 1.1rem; margin: -1rem -1.1rem 1rem; }
.cartao-resumo { margin: 0; }
.cartao-resumo .rotulo { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--pico-muted-color); }
.cartao-resumo .valor { font-size: 1.35rem; font-weight: 700; margin: .15rem 0; }
.cartao-resumo.alerta { border-left: 5px solid var(--cor-aviso); }
.cartao-resumo.perigo { border-left: 5px solid var(--cor-erro); }
.cartao-resumo.ok { border-left: 5px solid var(--cor-ok); }
.atalhos { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1.25rem; }
.atalhos a[role="button"] { padding: 1rem; font-size: 1.05rem; }

/* ---------- Etiquetas de status ---------- */
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: #e0e0e0; color: #333; }
.badge.aberta { background: #e3f2fd; color: #0d47a1; }
.badge.aguardando_lab { background: #fff3e0; color: #8a4b00; }
.badge.pronta { background: #e8f5e9; color: #1b5e20; }
.badge.entregue { background: #eceff1; color: #37474f; }
.badge.cancelada { background: #ffebee; color: #b71c1c; text-decoration: line-through; }
.badge.atrasada { background: #ffebee; color: #b71c1c; }
.badge.aviso { background: #fff3e0; color: #8a4b00; }
.badge.inativo { background: #eceff1; color: #616161; }
.saldo-devedor { color: var(--cor-erro); font-weight: 700; }
.saldo-ok { color: var(--cor-ok); font-weight: 700; }

/* ---------- Tabelas ---------- */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { margin-bottom: .5rem; }
table td, table th { padding: .55rem .5rem; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--pico-primary-focus); }
/* Lista em cartões no celular */
@media (max-width: 700px) {
  table.responsiva thead { display: none; }
  table.responsiva, table.responsiva tbody, table.responsiva tr, table.responsiva td { display: block; width: 100%; }
  table.responsiva tr { border: 1px solid var(--pico-muted-border-color); border-radius: 8px; margin-bottom: .6rem; padding: .35rem .6rem; }
  table.responsiva td { border: none; padding: .2rem 0; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  table.responsiva td::before { content: attr(data-label); font-weight: 600; color: var(--pico-muted-color); text-align: left; }
  table.responsiva td[data-label=""]::before { content: none; }
}

/* ---------- Tabela de graus ---------- */
table.graus { text-align: center; }
table.graus th, table.graus td { text-align: center; padding: .4rem .3rem; }
table.graus th:first-child, table.graus td:first-child { text-align: left; font-weight: 700; }
table.graus select, table.graus input { margin: 0; padding: .45rem .3rem; min-width: 4.6rem; text-align: center; background-position: right .2rem center; padding-right: 1.1rem; }
table.graus input { padding-right: .3rem; }
.graus-form { overflow-x: auto; }

/* ---------- Formulários ---------- */
form .erros-form { color: var(--cor-erro); }
label .obrigatorio { color: var(--cor-erro); }
.campo-erro { color: var(--cor-erro); display: block; margin-top: -.6rem; margin-bottom: .6rem; font-size: .85rem; }
fieldset.grupo { min-width: 0; min-inline-size: 0; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: .75rem 1rem 0; margin-bottom: 1rem; }
fieldset.grupo legend { padding: 0 .4rem; font-weight: 600; }
.cep-status { display: block; margin-top: -.6rem; margin-bottom: .6rem; font-size: .85rem; min-height: 1em; }
.cep-status .ok { color: var(--cor-ok); }
.cep-status .erro { color: var(--cor-aviso); }
.barra-salvar { position: sticky; bottom: calc(var(--altura-menu-inferior)); background: var(--pico-background-color); padding: .75rem 0; border-top: 1px solid var(--pico-muted-border-color); display: flex; gap: .5rem; flex-wrap: wrap; z-index: 5; }
.barra-salvar > * { margin: 0; width: auto; flex: 1 1 auto; }
@media (min-width: 1024px) { .barra-salvar { bottom: 0; } .barra-salvar > * { flex: 0 0 auto; } }
.form-inline { display: grid; gap: 0 .6rem; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 700px) {
  .form-item { grid-template-columns: 2fr 2fr .7fr 1fr auto; }
  .form-pagamento { grid-template-columns: 1fr 1fr 1.2fr .7fr auto; }
  .form-desconto { grid-template-columns: 1fr 1fr auto; max-width: 480px; }
}
.form-inline button { margin-bottom: var(--pico-spacing); }

/* ---------- Autocomplete ---------- */
.autocomplete { position: relative; }
.autocomplete-lista { position: absolute; left: 0; right: 0; top: calc(100% - var(--pico-spacing)); z-index: 15; background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color); border-radius: 8px; box-shadow: var(--pico-card-box-shadow); max-height: 260px; overflow-y: auto; }
.autocomplete-lista:empty { display: none; }
.autocomplete-lista button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--pico-color); padding: .6rem .8rem; border-radius: 0; margin: 0; }
.autocomplete-lista button:hover { background: var(--pico-primary-focus); }
.selecionado { display: flex; align-items: center; gap: .5rem; margin-bottom: var(--pico-spacing); }

/* ---------- Abas (ficha do cliente) ---------- */
.abas { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 2px solid var(--pico-muted-border-color); margin-bottom: 1rem; }
.abas button { background: none; border: none; color: var(--pico-muted-color); border-bottom: 3px solid transparent; border-radius: 0; margin: 0 0 -2px; padding: .6rem .9rem; }
.abas button.ativa { color: var(--cor-marca-texto); border-bottom-color: var(--cor-marca-texto); font-weight: 600; }
.painel-aba { display: none; }
.painel-aba.ativa { display: block; }
@media (min-width: 1024px) {
  .abas.so-mobile { display: none; }
  .paineis-desktop .painel-aba { display: block; margin-bottom: 1.5rem; }
}
.painel-aba > h2.titulo-desktop { display: none; }
@media (min-width: 1024px) { .paineis-desktop .painel-aba > h2.titulo-desktop { display: block; } }

/* ---------- Anexos ---------- */
.anexos { display: flex; flex-wrap: wrap; gap: .6rem; }
.anexo { width: 110px; text-align: center; font-size: .75rem; word-break: break-all; }
.anexo a.miniatura { display: flex; align-items: center; justify-content: center; width: 110px; height: 110px; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; overflow: hidden; background: var(--pico-card-sectioning-background-color); text-decoration: none; font-size: 2rem; }
.anexo img { max-width: 100%; max-height: 100%; object-fit: cover; }
.upload-botoes { display: flex; gap: .75rem; flex-wrap: wrap; }
.upload-botoes label { flex: 1 1 200px; }
.upload-botoes input[type=file] { margin-bottom: .3rem; }
.upload-lista { font-size: .85rem; color: var(--pico-muted-color); }

/* ---------- Configurações ---------- */
.subnav { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.subnav a { padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--pico-muted-border-color); text-decoration: none; }
.subnav a.ativo { background: var(--cor-marca); color: #fff; border-color: var(--cor-marca); }

/* ---------- Totais da OS ---------- */
.totais { margin-left: auto; max-width: 360px; min-width: 280px; }
.totais div { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.totais .total { font-size: 1.2rem; font-weight: 700; border-top: 1px solid var(--pico-muted-border-color); padding-top: .4rem; }
.auditoria { font-size: .8rem; color: var(--pico-muted-color); margin-top: 1.5rem; }
.linha-tempo { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.linha-tempo li { padding: .3rem 0; border-bottom: 1px dashed var(--pico-muted-border-color); list-style: none; }

/* ---------- Login ---------- */
.pagina-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.pagina-login article { width: 100%; max-width: 400px; }
.pagina-login .logo-login { text-align: center; margin-bottom: 1rem; }
.pagina-login .logo-login img { max-height: 80px; }

/* ---------- Paginação ---------- */
.paginacao { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: 1rem; }

/* ---------- Agenda ---------- */
.nav-dia { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.nav-dia > * { margin: 0 !important; width: auto; }
.nav-dia input[type=date] { margin: 0; width: auto; }
.titulo-dia { }
.agenda-layout { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .agenda-layout { grid-template-columns: 1fr 320px; } }
.resumo-dia { grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.resumo-dia article { padding: .6rem .8rem; }
.resumo-dia .valor { font-size: 1.15rem; }
.linhas-agenda { border: 1px solid var(--pico-muted-border-color); border-radius: 10px; overflow: hidden; background: var(--pico-card-background-color); }
.linha-agenda { display: flex; gap: .75rem; align-items: stretch; border-bottom: 1px solid var(--pico-muted-border-color); min-height: 3rem; }
.linha-agenda:last-child { border-bottom: none; }
.linha-agenda .ag-hora { width: 4rem; flex: 0 0 4rem; padding: .7rem .6rem; font-weight: 700; background: var(--pico-card-sectioning-background-color); }
.linha-agenda .ag-conteudo { flex: 1; padding: .45rem .5rem; display: flex; flex-direction: column; gap: .35rem; justify-content: center; }
.linha-agenda.livre .ag-hora { color: var(--cor-ok); }
.linha-agenda.passado, .linha-agenda.feriado, .linha-agenda.bloqueado { opacity: .7; }
.linha-agenda.bloqueado .ag-conteudo { background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0,0,0,.035) 6px, rgba(0,0,0,.035) 12px); }
.linha-agenda.intervalo { min-height: 2rem; background: var(--pico-card-sectioning-background-color); }
.linha-agenda.intervalo .ag-hora { padding: .35rem .6rem; font-weight: 400; color: var(--pico-muted-color); }
.ag-livre { text-decoration: none; color: var(--cor-ok); font-weight: 600; }
.ag-cartao { display: block; text-decoration: none; color: var(--pico-color); border-left: 4px solid var(--cor-marca); padding: .3rem .6rem; border-radius: 4px; background: var(--pico-primary-focus); }
.ag-item { display: flex; gap: .8rem; text-decoration: none; color: var(--pico-color); padding: .5rem 0; border-bottom: 1px dashed var(--pico-muted-border-color); }
.ag-item:last-child { border-bottom: none; }
.ag-item .ag-hora { font-weight: 700; min-width: 3.2rem; }
.badge.ag-agendado { background: #e3f2fd; color: #0d47a1; }
.badge.ag-confirmado { background: #e8f5e9; color: #1b5e20; }
.badge.ag-atendido { background: #eceff1; color: #37474f; }
.badge.ag-nao_compareceu { background: #fff3e0; color: #8a4b00; }
.badge.ag-cancelado { background: #ffebee; color: #b71c1c; text-decoration: line-through; }
.badge.online { background: #ede7f6; color: #4527a0; }
.lista-lembretes { list-style: none; padding: 0; margin: 0; }
.lista-lembretes li { list-style: none; padding: .45rem 0; border-bottom: 1px dashed var(--pico-muted-border-color); }
.lista-lembretes li button { margin-top: .3rem; }
.pre-consulta { background: #f1f8e9; border-left: 4px solid var(--cor-ok); padding: .6rem .8rem; border-radius: 6px; }
.faixa-agendamento { background: #e3f2fd; border-left: 5px solid var(--cor-info); padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.destaque-whatsapp { border-left: 5px solid #25d366; }
.destaque-alerta { border-left: 5px solid var(--cor-aviso); }
.qr-bloco { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.qr-bloco img { border: 1px solid var(--pico-muted-border-color); border-radius: 8px; }
table.grade-semanal input { margin: 0; padding: .35rem; min-width: 6.5rem; }
table.grade-semanal input[type=checkbox] { min-width: 0; }
details.grupo { border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: .5rem 1rem; margin-bottom: 1rem; }

/* Ajustes: botões em grupos de ação não esticam; botões vazados de perigo legíveis */
.acoes > button, .acoes > button[type=submit], button.btn-pequeno, .acoes form > button { width: auto; }
a.outline.perigo[role="button"], button.outline.perigo { --pico-background-color: transparent; --pico-color: var(--cor-erro); --pico-border-color: var(--cor-erro); background: transparent; color: var(--cor-erro); }
a.outline.perigo[role="button"]:hover, button.outline.perigo:hover { background: #ffebee; }


/* ---------- Seletor de tema ---------- */
.seletor-tema { display: flex; gap: .25rem; }
.seletor-tema button { flex: 1; margin: 0; padding: .35rem .5rem; font-size: .85rem; width: auto;
  background: transparent; color: var(--pico-color); border: 1px solid var(--pico-muted-border-color); }
.seletor-tema button.ativo { background: var(--cor-marca); border-color: var(--cor-marca); color: #fff; }
.topo details.dropdown ul li .seletor-tema { min-width: 15rem; }
.botao-tema { background: transparent; border: 1px solid var(--pico-muted-border-color); color: inherit; width: auto;
  margin: 0; padding: .3rem .55rem; line-height: 1.2; font-size: 1.1rem; border-radius: 8px; }
.tema-flutuante { position: fixed; top: .6rem; right: .6rem; z-index: 40; }

/* ---------- Tema escuro ---------- */
[data-theme="dark"] {
  --cor-marca-texto: #5cc3e4;
  --cor-ok: #66bb6a;
  --cor-aviso: #ffa726;
  --cor-erro: #ef5350;
  --cor-info: #64b5f6;
  --pico-primary: #5cc3e4;
  --pico-primary-hover: #8ad6ee;
  --pico-primary-background: #0f7fa1;
  --pico-primary-border: #0f7fa1;
  --pico-primary-hover-background: #1593b9;
  --pico-primary-hover-border: #1593b9;
  --pico-primary-underline: rgba(92, 195, 228, .5);
  --pico-primary-focus: rgba(92, 195, 228, .18);
  --pico-primary-inverse: #fff;
}
[data-theme="dark"] .badge { background: #2f3540; color: #d6dbe1; }
[data-theme="dark"] .badge.aberta, [data-theme="dark"] .badge.ag-agendado { background: rgba(100, 181, 246, .18); color: #90caf9; }
[data-theme="dark"] .badge.aguardando_lab, [data-theme="dark"] .badge.aviso, [data-theme="dark"] .badge.ag-nao_compareceu { background: rgba(255, 167, 38, .18); color: #ffcc80; }
[data-theme="dark"] .badge.pronta, [data-theme="dark"] .badge.ag-confirmado { background: rgba(102, 187, 106, .18); color: #a5d6a7; }
[data-theme="dark"] .badge.entregue, [data-theme="dark"] .badge.ag-atendido, [data-theme="dark"] .badge.inativo { background: #2f3540; color: #b0bac5; }
[data-theme="dark"] .badge.cancelada, [data-theme="dark"] .badge.atrasada, [data-theme="dark"] .badge.ag-cancelado { background: rgba(239, 83, 80, .2); color: #ef9a9a; }
[data-theme="dark"] .badge.online { background: rgba(179, 157, 219, .2); color: #d1c4e9; }
[data-theme="dark"] .pre-consulta { background: rgba(102, 187, 106, .1); }
[data-theme="dark"] .faixa-agendamento { background: rgba(100, 181, 246, .1); }
[data-theme="dark"] a.outline.perigo[role="button"]:hover, [data-theme="dark"] button.outline.perigo:hover { background: rgba(239, 83, 80, .12); }
[data-theme="dark"] .menu-inferior { box-shadow: 0 -2px 8px rgba(0, 0, 0, .4); }
[data-theme="dark"] .linha-agenda.bloqueado .ag-conteudo { background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(255,255,255,.04) 6px, rgba(255,255,255,.04) 12px); }
[data-theme="dark"] .anexo img { background: #fff; }