/* ============================================================================
   aurora-units.css — Aurora Premium · tela "Selecionar unidade" (#view-units)
   Escopado 100% em #view-units. Usa o kit de aurora-core.css (.glass/.chip/.st/...).
   Substitui: css/16/04.css:519-692 (bloco uv2-*) e o <style id="units-aurora-skin">
   que vivia inline em views/units.html.
   ============================================================================ */

#view-units{ background:transparent; }

/* ---- topo ---- */
#view-units .u-mark img{ width:26px; height:26px; object-fit:contain; display:block }
#view-units .u-kicker{
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--brand2); margin-bottom:1px;
}

/* ---- faixa de contexto + indicadores ---- */
#view-units .u-strip{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 20px; flex-wrap:wrap;
}
/* stats no cabecalho (topbar) ficam compactos, sem esticar */
#view-units .topbar .u-stats{ flex:0 1 auto; justify-content:center }
#view-units .u-intro{ display:flex; align-items:center; gap:13px; min-width:260px; flex:1 }
#view-units .u-intro-ico{
  flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--brand),#64793f); box-shadow:0 10px 22px -8px rgba(78,98,44,.6);
}
#view-units .u-intro-txt{ display:flex; flex-direction:column; gap:2px; min-width:0 }
#view-units .u-intro-txt strong{ font-size:14.5px; font-weight:700; letter-spacing:-.01em }
#view-units .u-intro-txt span{ font-size:12px; color:var(--ink-soft) }

#view-units .u-stats{ display:flex; gap:10px; flex-wrap:wrap }
#view-units .u-stat{
  min-width:74px; display:flex; flex-direction:column; gap:0; align-items:flex-start;
  padding:5px 10px; border-radius:10px; background:rgba(92,111,58,.08); border:1px solid var(--line);
}
body.theme-dark #view-units .u-stat{ background:rgba(147,185,80,.1) }
#view-units .u-stat .k-val{ font-size:15px; line-height:1.15 }
#view-units .u-stat .k-tag{ font-size:8px; letter-spacing:.03em }
#view-units .u-stat .k-sub{ font-size:9px }
#view-units .u-stat-ok .k-val{ color:#2f8659 }
body.theme-dark #view-units .u-stat-ok .k-val{ color:#77e0a5 }
#view-units .u-stat-alert .k-val{ color:#d02f5c }
body.theme-dark #view-units .u-stat-alert .k-val{ color:#ff86a6 }

/* ---- grade de unidades ---- */
#view-units .u-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:16px; align-items:stretch;
}

#view-units .u-card{
  position:relative; display:flex; flex-direction:column; gap:7px; align-items:stretch;
  padding:17px 17px 15px; text-align:left; cursor:pointer;
  font-family:inherit; color:var(--ink); transition:transform .18s, box-shadow .18s;
}
#view-units .u-card:hover:not(:disabled){ transform:translateY(-3px) }
#view-units .u-card:focus-visible{ outline:2px solid var(--brand2); outline-offset:2px }
#view-units .u-card:disabled,
#view-units .u-card.unit-card-disabled{ opacity:.45; cursor:not-allowed; transform:none }
#view-units .u-card.is-current{ box-shadow:var(--shadow), inset 0 0 0 1.5px var(--brand2) }
/* Escuro: superfície do cartão em oliva mais sólida — não deixa o gradiente escuro do
   fundo vazar por baixo do vidro (era isso que deixava os cartões pesados/escuros). */
body.theme-dark #view-units .u-card{ background:rgba(60,70,46,.92); border-color:rgba(146,181,87,.24); }

#view-units .u-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:2px }
#view-units .u-ico{ flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center }
#view-units .u-cnes{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; color:var(--ink-soft);
  background:rgba(92,111,58,.1); border-radius:20px; padding:4px 10px; white-space:nowrap;
}
body.theme-dark #view-units .u-cnes{ background:rgba(147,185,80,.14) }

#view-units .u-cur{
  position:absolute; top:12px; right:12px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:800; letter-spacing:.07em; color:#fff;
  background:linear-gradient(135deg,var(--brand),#64793f); border-radius:20px; padding:4px 9px;
  box-shadow:0 8px 18px -8px rgba(78,98,44,.7);
}

#view-units .u-name{ font-size:14.5px; font-weight:700; letter-spacing:-.02em; line-height:1.25 }
#view-units .u-type{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--brand2) }
#view-units .u-desc{ font-size:12px; color:var(--ink-soft); line-height:1.45 }
#view-units .u-local{
  display:flex; align-items:flex-start; gap:6px; font-size:12px; color:var(--ink-soft); line-height:1.4; margin-top:2px;
}
#view-units .u-local svg{ flex:none; margin-top:2px }

#view-units .u-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
}
#view-units .u-enter{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:700; color:var(--brand2); white-space:nowrap;
}
#view-units .u-card:hover:not(:disabled) .u-enter{ gap:8px }

/* ---- responsivo ---- */
@media (max-width:720px){
  #view-units .u-strip{ align-items:flex-start }
  #view-units .u-stats{ width:100% }
  #view-units .u-stat{ flex:1; min-width:66px }
  #view-units .u-grid{ grid-template-columns:1fr }
}