/* HOVEXA Cirúrgico — layout no padrão AdminLTE 2 (skin azul), mesmo arranjo do sistema de referência.
   As cores ficam todas nas variáveis abaixo, para trocar pela paleta definitiva sem mexer nas telas. */
@font-face { font-family: "Source Sans Pro"; font-weight: 300; font-display: swap; src: url(/vendor/fonts/ssp-300.woff2) format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 400; font-display: swap; src: url(/vendor/fonts/ssp-400.woff2) format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 600; font-display: swap; src: url(/vendor/fonts/ssp-600.woff2) format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 700; font-display: swap; src: url(/vendor/fonts/ssp-700.woff2) format("woff2"); }

:root {
  /* papéis de cor (trocar aqui) */
  --primario: #3c8dbc; --primario-escuro: #367fa9; --primario-claro: #e8f2f8;
  --barra-lateral: #222d32; --barra-lateral-2: #1e282c; --fundo: #ecf0f5; --caixa: #ffffff; --borda-caixa: #d2d6de;
  --verde: #00a65a; --amarelo: #f39c12; --vermelho: #dd4b39; --aqua: #00c0ef; --roxo: #605ca8; --cinza: #d2d6de;
  /* nomes usados nas telas */
  --teal: var(--primario); --teal-600: var(--primario-escuro); --navy: var(--primario-escuro); --navy-700: #2b6a8f; --navy-300: #b8c7ce; --navy-500: #5b7f95;
  --cyan: var(--aqua); --cyan-100: var(--primario-claro); --cyan-200: #c4dff0; --ice: #f4f4f4; --white: var(--fundo); --ink: #333333;
  --muted: #777777; --line: #e5e8ec; --card: var(--caixa);
  --danger: var(--vermelho); --danger-bg: #fbe3e0; --warn: #c87f0a; --warn-bg: #fdf1dc; --ok: #008d4c; --ok-bg: #dff3e8;
  --font: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body, .content-wrapper, .main-footer { font-family: var(--font); font-size: 14px; color: var(--ink); }
.content-wrapper { background: var(--fundo); }
h1, h2, h3, h4 { font-family: var(--font); color: var(--ink); margin: 0; }
h1 { font-size: 24px; font-weight: 500; } h2 { font-size: 18px; font-weight: 400; } h3 { font-size: 16px; font-weight: 600; }
a { color: var(--primario); }
.overline { font-size: 12px; color: var(--muted); }
.overline a { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }

/* ---------- Moldura (AdminLTE) ---------- */
.skin-blue .main-header .navbar, .skin-blue .main-header .navbar .sidebar-toggle:hover { background-color: var(--primario); }
.skin-blue .main-header .logo, .skin-blue .main-header .logo:hover { background-color: var(--primario-escuro); }
.skin-blue .main-sidebar, .skin-blue .left-side, .skin-blue .wrapper { background-color: var(--barra-lateral); }
.skin-blue .sidebar-menu > li.active > a, .skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li.menu-open > a { border-left-color: var(--primario); background: var(--barra-lateral-2); }
.main-header .logo { font-family: var(--font); }
.main-header .logo .logo-lg { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.main-header .logo .logo-lg b .x, .main-header .logo .x { color: #bfe6f5; }
.main-header .logo .logo-mini { display: flex; align-items: center; justify-content: center; height: 50px; }
.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini { display: flex; }
.main-header .navbar-custom-menu .nav > li > a { font-size: 12px; font-weight: 600; }
.user-menu .user-header { height: auto !important; padding: 16px 10px !important; }
.avatar-grande { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 28px; font-weight: 600; display: grid; place-items: center; margin: 0 auto 6px; }
.content { padding: 15px; min-height: 250px; }
.content.full { max-width: none; }
.main-footer { font-size: 12px; padding: 10px 15px; color: var(--muted); }

/* Cabeçalho de cada tela (equivale ao content-header) */
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 15px; }
.cabecalho h1 { font-size: 24px; font-weight: 500; line-height: 1.2; }
.cabecalho .titulo p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.cabecalho .acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; }
.cabecalho .acoes form { margin: 0; }

/* ---------- Caixas (box) ---------- */
.card { position: relative; background: var(--caixa); border-top: 3px solid var(--primario); border-radius: 3px; box-shadow: 0 1px 1px rgba(0,0,0,.1); margin-bottom: 20px; }
.card + .card { margin-top: 0; }
.card-h { padding: 10px; border-bottom: 1px solid #f4f4f4; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-h h2, .card-h h3 { font-size: 18px; font-weight: 400; }
.card-b { padding: 10px; }
.card-b.p0 { padding: 0; }
.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .sall { grid-column: 1 / -1; }

/* Indicadores (info-box) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 15px; margin-bottom: 15px; }
.kpi { display: block; background: #fff; min-height: 70px; border-radius: 2px; box-shadow: 0 1px 1px rgba(0,0,0,.1); padding: 10px 12px; border-left: 4px solid var(--primario); color: inherit; }
.kpi:hover { text-decoration: none; }
.kpi .overline { text-transform: uppercase; font-size: 13px; color: #333; }
.kpi .v { font-size: 22px; font-weight: 700; margin-top: 2px; line-height: 1.2; }
.kpi .d { font-size: 12px; color: var(--muted); }
.kpi.destaque { background: var(--primario); border-left-color: var(--primario-escuro); color: #fff; }
.kpi.destaque .overline, .kpi.destaque .d, .kpi.destaque .v { color: #fff; }
.info-box { display: flex; min-height: 90px; background: #fff; width: 100%; box-shadow: 0 1px 1px rgba(0,0,0,.1); border-radius: 2px; margin-bottom: 15px; color: inherit; }
a.info-box:hover { text-decoration: none; }
.info-box-icon { float: none; width: 90px; flex: 0 0 90px; height: auto; line-height: 1; min-height: 90px; display: grid; place-items: center; font-size: 42px; color: #fff; border-radius: 2px 0 0 2px; }
.info-box-content { padding: 6px 10px; flex: 1; min-width: 0; margin-left: 0 !important; }
.info-box-text { display: block; font-size: 14px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-box-number { display: block; font-weight: 700; font-size: 20px; }
.info-box .progress { background: rgba(0,0,0,.2); margin: 5px -10px 5px -10px; height: 2px; }
.info-box .progress .progress-bar { background: #fff; }
.info-box.cheio { color: #fff; }
.info-box.cheio .info-box-icon { background: rgba(0,0,0,.2); }
.bg-azul { background: var(--primario) !important; } .bg-verde { background: var(--verde) !important; } .bg-amarelo { background: var(--amarelo) !important; } .bg-vermelho { background: var(--vermelho) !important; } .bg-aqua2 { background: var(--aqua) !important; } .bg-roxo { background: var(--roxo) !important; }

/* Acesso rápido (botões grandes) */
.atalhos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 10px; }
.atalho { background: var(--primario); color: #fff !important; border-radius: 3px; min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 16px; font-weight: 600; text-decoration: none !important; transition: background .15s; }
.atalho:hover { background: var(--primario-escuro); }
.atalho .fa { font-size: 32px; }

/* ---------- Botões (34px, cantos 3px) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 6px 12px; border-radius: 3px; border: 1px solid transparent; font: 400 14px var(--font); cursor: pointer; white-space: nowrap; box-shadow: none; text-decoration: none !important; }
.btn-primario { background: var(--primario); border-color: var(--primario-escuro); color: #fff !important; }
.btn-primario:hover, .btn-primario:focus { background: var(--primario-escuro); color: #fff; }
.btn-navy { background: var(--primario-escuro); border-color: #2e6d92; color: #fff !important; }
.btn-sec { background: #f4f4f4; border-color: #ddd; color: #444 !important; }
.btn-sec:hover { background: #e7e7e7; }
.btn-perigo { background: var(--vermelho); border-color: #d73925; color: #fff !important; }
.btn-perigo:hover { background: #d73925; }
.btn-sucesso { background: var(--verde); border-color: #008d4c; color: #fff !important; }
.btn-sm { height: 30px; padding: 5px 10px; font-size: 12px; }
.btn-icone { width: 34px; padding: 0; }
.btn-sm.btn-icone { width: 30px; }
.btn[disabled] { opacity: .65; cursor: not-allowed; }

/* ---------- Formulários ---------- */
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo label, .filtros label { font-size: 13px; font-weight: 700; color: #333; margin: 0; }
.campo label .obr { color: var(--vermelho); }
.campo .ajuda { font-size: 12px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], input[type=tel], input[type=month], select, textarea {
  height: 34px; width: 100%; border: 1px solid var(--borda-caixa); border-radius: 0; background: #fff; padding: 6px 10px; font: 400 14px var(--font); color: #555; box-shadow: none; }
select { padding: 4px 8px; }
textarea { height: auto; min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primario); box-shadow: none; }
input[readonly] { background: #eee; }
.campo.erro input, .campo.erro select, .campo.erro textarea { border-color: var(--vermelho); }
.campo .msg-erro { color: var(--vermelho); font-size: 12px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 400; cursor: pointer; margin: 0; }
.check input { width: 15px; height: 15px; margin: 0; }
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 10px; }
.filtros .campo { width: 170px; }
.filtros .campo.largo { width: 250px; }
.card.filtros { padding: 10px; }
.secao-form { border-top: 1px solid #f4f4f4; padding: 12px 10px; }
.secao-form:first-child { border-top: 0; }
.secao-form > h3 { font-size: 16px; font-weight: 600; color: #444; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #f4f4f4; }
.secao-form > h3 .fa { color: var(--primario); margin-right: 6px; }

/* ---------- Abas (nav-tabs-custom) ---------- */
.abas { display: flex; gap: 0; border-bottom: 1px solid #f4f4f4; padding: 0; overflow-x: auto; background: #fff; }
.abas button { background: none; border: 0; border-top: 3px solid transparent; margin-bottom: -1px; padding: 10px 15px; font: 400 14px var(--font); color: #444; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.abas button:hover { color: #999; }
.abas button .n { background: var(--primario); color: #fff; border-radius: .25em; font-size: 11px; font-weight: 700; padding: 1px 6px; }
.abas button.ativa { border-top-color: var(--primario); color: #444; background: #fff; border-left: 1px solid #f4f4f4; border-right: 1px solid #f4f4f4; }
.aba { display: none; }
.aba.ativa { display: block; }

/* ---------- Tabelas ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.tabela th { text-align: left; font-weight: 700; color: #333; padding: 8px; border-bottom: 2px solid #f4f4f4; white-space: nowrap; background: #fff; }
.tabela td { padding: 8px; border-top: 1px solid #f4f4f4; vertical-align: middle; }
.tabela tbody tr:nth-child(odd) { background: #f9f9f9; }
.tabela tbody tr:hover { background: #f0f6fa; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tfoot td { border-top: 2px solid #f4f4f4; }
.tabela .acoes-td { text-align: right; white-space: nowrap; }
.tabela .acoes-td form { display: inline; }
.vazio { padding: 30px; text-align: center; color: var(--muted); }

/* ---------- Selos (label) ---------- */
.selo { display: inline-block; padding: .25em .6em; font-size: 11px; font-weight: 700; line-height: 1.2; color: #fff; background: #777; border-radius: .25em; white-space: nowrap; }
.selo .p { display: none; }
.selo-fase { color: #fff; }
.selo-ok { background: var(--verde); } .selo-alerta { background: var(--amarelo); } .selo-perigo { background: var(--vermelho); } .selo-neutro { background: #d2d6de; color: #444; }
a.selo:hover { color: #fff; text-decoration: none; opacity: .9; }

/* ---------- Avisos (callout/alert) ---------- */
.aviso { border-radius: 3px; padding: 10px 15px; font-size: 14px; margin-bottom: 15px; border-left: 5px solid; }
.aviso-ok { background: var(--verde); border-color: #00733e; color: #fff; }
.aviso-erro { background: var(--vermelho); border-color: #c23321; color: #fff; }
.aviso-info { background: #fff; border-color: var(--aqua); color: #333; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.aviso a { color: inherit; text-decoration: underline; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 2000; background: #333; color: #fff; padding: 12px 16px; border-radius: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.25); font-size: 14px; max-width: 380px; }
.toast.erro { background: var(--vermelho); }

/* ---------- Janelas (modal) ---------- */
.modal-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1050; display: none; align-items: flex-start; justify-content: center; padding: 30px 15px; overflow-y: auto; }
.modal-fundo.aberto { display: flex; }
.modal-fundo .modal { display: block; position: relative; inset: auto; overflow: visible; z-index: auto; background: #fff; border-radius: 0; width: 100%; max-width: 600px; box-shadow: 0 5px 15px rgba(0,0,0,.5); }
.modal-fundo .modal.largo { max-width: 900px; }
.modal-h { padding: 15px; border-bottom: 1px solid #f4f4f4; display: flex; justify-content: space-between; align-items: center; }
.modal-h h2 { font-size: 18px; }
.modal-b { padding: 15px; }
.modal-r { padding: 12px 15px; border-top: 1px solid #f4f4f4; display: flex; justify-content: flex-end; gap: 6px; }
.fechar { background: none; border: 0; font-size: 21px; font-weight: 700; line-height: 1; cursor: pointer; color: #000; opacity: .2; }
.fechar:hover { opacity: .5; }

/* ---------- Login (login-page) ---------- */
.login-page { background: var(--fundo); }
.login-box { width: 380px; margin: 8% auto; }
.login-logo { text-align: center; font-size: 32px; margin-bottom: 20px; color: #444; display: flex; align-items: center; justify-content: center; gap: 10px; }
.login-logo b span { color: var(--primario); }
.login-box-body { background: #fff; padding: 22px; border-top: 3px solid var(--primario); box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.login-box-msg { text-align: center; margin: 0 0 16px; color: #666; }

/* ---------- Pedido ---------- */
.pedido-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 15px; align-items: start; }
.resumo-fixo { position: sticky; top: 65px; }
.resumo-fixo dl { margin: 0; display: grid; gap: 8px; font-size: 13px; }
.resumo-fixo dt { font-weight: 700; color: #333; }
.resumo-fixo dd { margin: 0; color: #555; }
.lista-itens { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.lista-itens td, .lista-itens th { padding: 6px 8px; border-top: 1px solid #f4f4f4; text-align: left; }
.lista-itens th { font-weight: 700; border-bottom: 2px solid #f4f4f4; border-top: 0; }
.add-linha { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.add-linha .campo { flex: 1; min-width: 150px; }
.add-linha .campo.curto { flex: 0 0 80px; min-width: 80px; }
.busca-res { position: absolute; z-index: 30; background: #fff; border: 1px solid var(--borda-caixa); box-shadow: 0 6px 12px rgba(0,0,0,.175); max-height: 260px; overflow-y: auto; width: 100%; top: 100%; }
.busca-res div { padding: 6px 10px; cursor: pointer; font-size: 13px; }
.busca-res div:hover, .busca-res div.foco { background: var(--primario); color: #fff; }
.busca-res div:hover .muted, .busca-res div.foco .muted { color: #e8f2f8; }
.rel { position: relative; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.linha-tempo li { position: relative; padding: 0 0 14px 26px; font-size: 13px; }
.linha-tempo li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--primario); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--primario); }
.linha-tempo li::after { content: ""; position: absolute; left: 9px; top: 18px; bottom: 0; width: 2px; background: #ddd; }
.linha-tempo li:last-child::after { display: none; }
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; padding: 4px; }
.chat .msg { background: #d2d6de; border-radius: 5px; padding: 6px 10px; font-size: 13px; max-width: 85%; color: #444; }
.chat .msg.minha { background: var(--primario); color: #fff; align-self: flex-end; }
.chat .msg.minha small { color: #e8f2f8; }
.chat .msg.nota { background: #fcf8e3; color: #8a6d3b; }
.chat .msg small { display: block; color: #777; font-size: 11px; margin-bottom: 2px; }

/* ---------- Mapa cirúrgico ---------- */
.mapa-wrap { overflow-x: auto; }
.mapa { position: relative; min-width: 100%; }
.mapa-cab, .mapa-linha { display: grid; grid-template-columns: 150px 1fr; }
.mapa-cab { position: sticky; top: 0; background: #fff; z-index: 3; border-bottom: 1px solid #ddd; }
.mapa-cab .sala-col, .mapa-linha .sala-col { padding: 0 10px; display: flex; align-items: center; font-size: 13px; font-weight: 700; border-right: 1px solid #ddd; background: #fff; position: sticky; left: 0; z-index: 2; }
.mapa-cab .horas { position: relative; height: 30px; }
.mapa-cab .horas span { position: absolute; top: 7px; font-size: 12px; color: #333; font-weight: 700; transform: translateX(-50%); }
.mapa-linha { border-bottom: 1px solid #eee; min-height: 56px; }
.mapa-linha .trilho { position: relative; height: 56px; background-image: linear-gradient(to right, #e3e3e3 1px, transparent 1px); }
.mapa-linha .trilho:hover { background-color: #fafafa; }
.bloco-cir { position: absolute; top: 3px; bottom: 3px; border-radius: 2px; color: #fff; padding: 3px 6px; font-size: 11.5px; line-height: 1.25; overflow: hidden; cursor: pointer; box-shadow: 0 1px 1px rgba(0,0,0,.2); }
.bloco-cir:hover { filter: brightness(1.08); z-index: 4; }
.bloco-cir b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.bloco-cir .lin { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloco-cir .ic { position: absolute; right: 3px; top: 3px; display: flex; gap: 2px; }
.bloco-cir .ic i { width: 14px; height: 14px; border-radius: 2px; background: rgba(255,255,255,.92); color: #333; font-style: normal; font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.bloco-cir.suspenso { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.2) 0 6px, transparent 6px 12px); }
.bloqueio-faixa { position: absolute; top: 0; bottom: 0; background: #f2dede; border-left: 2px solid var(--vermelho); border-right: 2px solid var(--vermelho); font-size: 11px; color: #a94442; font-weight: 700; padding: 3px 6px; overflow: hidden; }
.reserva-faixa { position: absolute; top: 0; bottom: 0; background: #d9edf7; border-top: 2px dashed var(--aqua); font-size: 11px; color: #31708f; font-weight: 700; padding: 3px 6px; overflow: hidden; }
.agora { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--vermelho); z-index: 3; pointer-events: none; }
.agora::before { content: ""; position: absolute; top: -1px; left: -5px; border: 6px solid transparent; border-top-color: var(--vermelho); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 10px; font-size: 12px; color: #333; align-items: center; border-top: 1px solid #f4f4f4; }
.legenda .ic-l { display: inline-flex; align-items: center; gap: 4px; }
.legenda .ic-l i { width: 16px; height: 16px; border-radius: 2px; background: #eee; color: #333; font-style: normal; font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.menu-ctx { position: fixed; z-index: 1060; background: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: 3px; box-shadow: 0 6px 12px rgba(0,0,0,.175); min-width: 220px; padding: 5px 0; display: none; }
.menu-ctx.aberto { display: block; }
.menu-ctx .ctx-cab { padding: 6px 15px 8px; border-bottom: 1px solid #e5e5e5; margin-bottom: 4px; font-size: 13px; }
.menu-ctx button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 5px 15px; font: 400 13px var(--font); color: #333; cursor: pointer; }
.menu-ctx button:hover { background: #e1e3e9; }
.menu-ctx button.perigo { color: var(--vermelho); }
.menu-ctx hr { border: 0; border-top: 1px solid #e5e5e5; margin: 4px 0; }

/* ---------- Calendário (escolher horário) ---------- */
.cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dias .dia { border: 1px solid #ddd; padding: 5px; min-height: 58px; font-size: 12px; cursor: pointer; background: #fff; }
.cal-dias .dia:hover { border-color: var(--primario); }
.cal-dias .dia.fora { opacity: .4; cursor: default; }
.cal-dias .dia.sel { border-color: var(--primario); background: var(--primario-claro); }
.cal-dias .dia .barra { height: 5px; background: #eee; margin-top: 6px; overflow: hidden; }
.cal-dias .dia .barra span { display: block; height: 100%; background: var(--primario); }
.slots { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.slots button { height: 30px; padding: 0 10px; border-radius: 3px; border: 1px solid #ddd; background: #f4f4f4; font: 400 13px var(--font); cursor: pointer; color: #333; }
.slots button:hover { background: var(--primario); border-color: var(--primario-escuro); color: #fff; }

/* ---------- Kanban (Painel por fase) ---------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.kanban .coluna { background: #fff; border-top: 3px solid; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.kanban .coluna-h { padding: 8px 10px; display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; border-bottom: 1px solid #f4f4f4; }
.kanban .coluna-h .total { font-size: 22px; font-weight: 700; }
.kanban .itens { padding: 6px; max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.kanban .item { border: 1px solid #eee; padding: 6px 8px; font-size: 12px; color: inherit; display: block; background: #fafafa; }
.kanban .item:hover { background: var(--primario-claro); text-decoration: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .pedido-layout, .g-2-1 { grid-template-columns: 1fr; }
  .resumo-fixo { position: static; }
  .g4, .g6, .atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .g2, .g3, .g4, .g6, .atalhos { grid-template-columns: 1fr; }
  .s2, .s3, .s4 { grid-column: auto; }
  .filtros .campo, .filtros .campo.largo { width: 100%; }
  .login-box { width: 92%; }
  .tabela.responsiva thead { display: none; }
  .tabela.responsiva tr { display: block; border-top: 1px solid #f4f4f4; padding: 8px 10px; }
  .tabela.responsiva td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; text-align: right; }
  .tabela.responsiva td::before { content: attr(data-l); font-weight: 700; color: #333; font-size: 12px; text-align: left; }
  .tabela.responsiva .acoes-td { justify-content: flex-end; }
}
@media print {
  .main-header, .main-sidebar, .main-footer, .nao-imprimir { display: none !important; }
  .content-wrapper { margin: 0 !important; padding: 0 !important; background: #fff; }
  .card { box-shadow: none; }
}

/* ---------- Pedido no arranjo do sistema de referência ---------- */
.pedido-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 12px 10px; }
.abas.pilulas { border: 0; gap: 4px; padding: 10px 0; background: transparent; flex-wrap: wrap; overflow: visible; }
.abas.pilulas button { border: 0; border-radius: 15px; padding: 10px 15px; margin: 0; color: #555; background: transparent; }
.abas.pilulas button:hover { background: #eee; color: #333; }
.abas.pilulas button.ativa { background: #337ab7; color: #fff; font-weight: 600; border: 0; }
.abas.pilulas button .n { background: rgba(0,0,0,.15); }
.resumo-topo { background: #d9edf7; border-radius: 15px; padding: 14px 20px; font-size: 13px; width: 46%; min-width: 300px; }
.resumo-topo dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 3px 10px; }
.resumo-topo dl > div { display: contents; }
.resumo-topo dt { font-weight: 700; color: #333; }
.resumo-topo dd { margin: 0; color: #555; }
.resumo-topo #r-conflito-box { display: block; grid-column: 1 / -1; }
.resumo-topo #r-conflito-box.hide { display: none !important; }

/* Seções em caixa com barra de título azul-clara */
.secao-form { border: 1px solid #e6e6e6; border-top: 0; margin: 0 10px 15px; padding: 0 10px 12px; border-radius: 3px; background: #fff; }
.secao-form:first-child { border-top: 0; }
.secao-form > h3 { background: #d9edf7; margin: 0 -10px 12px; padding: 10px; font-size: 18px; font-weight: 400; color: #444; border: 0; border-radius: 3px 3px 0 0; }
.secao-form > h3 .fa { color: #444; margin-right: 6px; font-size: 16px; }
.aba > .modal-r, .card > .modal-r { border-top: 0; }
@media (max-width: 1100px) { .pedido-topo { flex-direction: column; } .resumo-topo { width: 100%; } }

/* Menu "Ferramentas" do pedido */
.ferramentas { min-width: 250px; font-size: 13px; }
.ferramentas > li > a { padding: 6px 15px; }
.ferramentas > li > a .fa { width: 18px; color: #777; }
.ferramentas .dropdown-header { font-weight: 700; color: #333; }
.text-red, .ferramentas a.text-red .fa { color: var(--vermelho) !important; }