/* =====================================================================
   Zqueue - Novo layout (UI base) - Fase de reestruturacao
   Folha de estilos autonoma para o novo template partilhado.
   Nao interfere com estilo.css: so e' usada pelas paginas que carregam
   os partials em /layout/.
   ===================================================================== */
:root{
  --navy:#0C3B66; --navy-2:#0F4A80; --blue:#1E6FBF; --blue-050:#EAF2FB;
  --green:#1D9E75; --amber:#E79B25; --red:#C0392B;
  --ink:#1c2733; --muted:#5c6b7a; --line:#e3e9f0; --bg:#f4f7fb; --card:#fff;
  --radius:12px; --sidebar:236px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body.zq-ui{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:14px;line-height:1.5}
.zq-ui a{color:inherit;text-decoration:none}
.zq-ui svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Sidebar ---------- */
.zq-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar);background:var(--navy);color:#dce8f5;display:flex;flex-direction:column;overflow-y:auto;z-index:100}
.zq-brand{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.zq-brand .logo{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.zq-brand b{font-size:17px;color:#fff;font-weight:600;letter-spacing:.3px}
.zq-nav{padding:8px 10px;flex:1}
.zq-nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:#c3d5e8;cursor:pointer;font-size:13.5px;margin:2px 0}
.zq-nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.zq-nav-item.active{background:var(--amber);color:#3a2606;font-weight:600}
.zq-group>.zq-nav-item .chev{margin-left:auto;transition:transform .2s}
.zq-group.open>.zq-nav-item .chev{transform:rotate(90deg)}
.zq-sub{overflow:hidden;max-height:0;transition:max-height .25s ease}
.zq-group.open .zq-sub{max-height:400px}
.zq-sub a{display:block;padding:8px 12px 8px 44px;font-size:13px;color:#a9c1d9;border-radius:8px;margin:1px 6px}
.zq-sub a:hover{background:rgba(255,255,255,.06);color:#fff}
.zq-sub a.active{color:#fff;background:rgba(255,255,255,.10);font-weight:500}
.zq-sidebar-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:#7f97ae}

/* ---------- Main ---------- */
.zq-main{margin-left:var(--sidebar);min-height:100%;display:flex;flex-direction:column}
.zq-topbar{height:60px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:5}
.zq-crumb{font-size:13px;color:var(--muted)}
.zq-crumb b{color:var(--ink);font-size:16px;font-weight:600;display:block;line-height:1.2}
.zq-topbar-right{display:flex;align-items:center;gap:18px}
.zq-search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:7px 12px;color:var(--muted);width:220px}
.zq-search input{border:none;background:none;outline:none;font-size:13px;width:100%;color:var(--ink)}
.zq-clock{font-size:13px;color:var(--muted);text-align:right;line-height:1.15}
.zq-clock b{color:var(--blue);font-size:16px}
.zq-user{display:flex;align-items:center;gap:9px}
.zq-avatar{width:34px;height:34px;border-radius:50%;background:var(--blue-050);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.zq-icon-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer}
.zq-icon-btn:hover{background:var(--bg);color:var(--ink)}
.zq-content{padding:22px;flex:1}

/* ---------- Componentes de conteudo ---------- */
.zq-page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.zq-page-head h1{font-size:20px;margin:0;font-weight:600}
.zq-page-head .sub{color:var(--muted);font-size:13px;margin-top:2px}
.zq-btn{border:none;border-radius:9px;padding:10px 16px;font-size:13.5px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.zq-btn-primary{background:var(--green);color:#fff}
.zq-btn-primary:hover{background:#17845f}
.zq-btn-ghost{background:var(--card);color:var(--blue);border:1px solid var(--line)}
.zq-btn-ghost:hover{background:var(--blue-050)}
.zq-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.zq-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.zq-stat .lbl{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px}
.zq-stat .val{font-size:26px;font-weight:600;margin-top:6px}
.zq-stat .val small{font-size:14px;color:var(--muted);font-weight:400}
.zq-grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.zq-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.zq-panel h3{margin:0 0 14px;font-size:14.5px;font-weight:600}
.zq-table{width:100%;border-collapse:collapse;font-size:13px}
.zq-table th{text-align:left;color:var(--muted);font-weight:500;font-size:12px;padding:0 0 10px;border-bottom:1px solid var(--line)}
.zq-table td{padding:11px 0;border-bottom:1px solid var(--line)}
.zq-table tr:last-child td{border-bottom:none}
.zq-tag{font-size:11.5px;padding:3px 9px;border-radius:20px;font-weight:500}
.zq-tag-blue{background:var(--blue-050);color:var(--blue)}
.zq-tag-green{background:#e3f4ed;color:#0f6e56}
.zq-tag-amber{background:#fbf0da;color:#8a5a10}
.zq-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.zq-row-b{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:8px;margin-bottom:6px}
.zq-row-b:nth-child(odd){background:var(--bg)}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  :root{--sidebar:64px}
  .zq-brand b,.zq-nav-item span,.zq-sub,.zq-nav-item .chev,.zq-sidebar-foot{display:none}
  .zq-nav-item{justify-content:center}
  .zq-cards{grid-template-columns:repeat(2,1fr)}
  .zq-grid2{grid-template-columns:1fr}
  .zq-search{display:none}
}

/* ---------- Compatibilidade: conteudo antigo dentro do novo shell ----------
   Paginas de formulario reaproveitam o markup antigo (ex.: .full_area, que no
   layout antigo tinha padding para reservar espaco ao menu). Aqui neutraliza-se
   esse deslocamento para o conteudo assentar corretamente na area nova. */
.zq-ui .zq-content .full_area{
  padding:0 !important; margin:0 !important; position:static !important;
  left:auto !important; top:auto !important; width:100% !important;
}
.zq-ui .zq-content .form-table-container,
.zq-ui .zq-content .form-flex-container{ width:100% !important; margin:0 !important; }

/* ---------- Moderniza o conteudo antigo dos formularios ----------
   Reveste o markup legado (titulos, tabelas de campos, inputs, botoes) com o
   novo estilo, SEM alterar o HTML. Tudo scoped a .zq-ui .zq-content. */

/* Titulos e descricoes */
.zq-ui .zq-content .form-title{ margin-bottom:18px; }
.zq-ui .zq-content .form-title h2{ font-size:20px !important; font-weight:600 !important; color:var(--navy) !important; margin:0 0 4px !important; }
.zq-ui .zq-content .form-title h3{ font-size:13px !important; font-weight:400 !important; color:var(--muted) !important; margin:0 !important; }
.zq-ui .zq-content .form-extra-desc{ font-size:13px !important; font-weight:400 !important; color:var(--muted) !important; margin-top:6px; }
.zq-ui .zq-content .text-green-light{ color:var(--blue) !important; }
.zq-ui .zq-content .text-gray-dark{ color:var(--muted) !important; }

/* Cartao branco a envolver o formulario */
.zq-ui .zq-content .form-flex-container{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:20px 22px; display:block;
}
.zq-ui .zq-content .form_template_flex_container{ display:block; }
.zq-ui .zq-content .form-flex-container > table,
.zq-ui .zq-content #form_table{ width:100%; border-collapse:separate; border-spacing:0; }

/* Linhas: label a cima, campo a baixo (mais moderno que label a esquerda) */
.zq-ui .zq-content #form_table td.formname_space{
  display:block; width:auto; padding:2px 0 5px; vertical-align:top;
  font-size:12.5px; font-weight:500; color:var(--muted); white-space:normal; text-align:left;
}
.zq-ui .zq-content #form_table td.input_space{
  display:block; width:auto; padding:0 0 14px;
}

/* Campos de texto/select/textarea */
.zq-ui .zq-content input[type="text"],
.zq-ui .zq-content input[type="password"],
.zq-ui .zq-content input[type="email"],
.zq-ui .zq-content input[type="number"],
.zq-ui .zq-content input[type="tel"],
.zq-ui .zq-content input[type="date"],
.zq-ui .zq-content select,
.zq-ui .zq-content textarea{
  width:100%; max-width:420px; box-sizing:border-box;
  padding:9px 12px; border:1px solid #c3d4e6; border-radius:9px;
  font-size:14px; background:#fff; color:var(--ink); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.zq-ui .zq-content input[type="text"]:focus,
.zq-ui .zq-content input[type="password"]:focus,
.zq-ui .zq-content input[type="email"]:focus,
.zq-ui .zq-content input[type="number"]:focus,
.zq-ui .zq-content input[type="tel"]:focus,
.zq-ui .zq-content input[type="date"]:focus,
.zq-ui .zq-content select:focus,
.zq-ui .zq-content textarea:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,111,191,.15);
}
.zq-ui .zq-content textarea{ min-height:90px; resize:vertical; }
.zq-ui .zq-content .error_msg{ color:var(--red); font-size:12px; }

/* Botoes legados -> estilo novo */
.zq-ui .zq-content .button-full-green,
.zq-ui .zq-content .button-thin-green,
.zq-ui .zq-content .button-green{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--green) !important; color:#fff !important; border:none !important;
  border-radius:9px !important; padding:10px 18px !important; font-size:13.5px !important;
  font-weight:500 !important; cursor:pointer; text-decoration:none;
}
.zq-ui .zq-content .button-full-green:hover,
.zq-ui .zq-content .button-thin-green:hover{ background:#17845f !important; }
.zq-ui .zq-content .button-gray{
  background:var(--blue-050) !important; color:var(--blue) !important;
  border:1px solid #b5d4f4 !important; border-radius:9px !important; padding:9px 16px !important; cursor:pointer;
}
.zq-ui .zq-content .form-success-btn-container{ margin-top:16px; }
.zq-ui .zq-content .form-success-btn-container .button a > div{
  background:var(--green); color:#fff; border-radius:9px; padding:10px 20px; display:inline-block; font-weight:500;
}