/* =========================================================
   Bento UI · Central de Gestão Hospitalar & Monitoramento
   Hospital Municipal Prefeito Afonso Costa · Passagem Franca - MA
   ========================================================= */

:root {
  --fundo: #0b0b0f;
  --bloco: #151519;
  --bloco-2: #1d1d23;
  --bloco-3: #26262e;
  --linha: rgba(255, 255, 255, 0.07);
  --linha-forte: rgba(255, 255, 255, 0.14);
  --txt: #f5f5f7;
  --txt-2: #a8a8b3;
  --txt-3: #71717f;
  --escuro: #0d0d10;

  --menta: #34d399;     --menta-esc: #04241a;
  --ciano: #22d3ee;     --ciano-esc: #042a31;
  --violeta: #a78bfa;   --violeta-esc: #1b0f3a;
  --azul: #60a5fa;      --azul-esc: #04204a;
  --lima: #bef264;      --lima-esc: #1a2306;
  --ambar: #fbbf24;     --ambar-esc: #2a1c00;
  --laranja: #fb923c;   --laranja-esc: #2a1200;
  --coral: #ff5c7c;     --coral-esc: #33040f;
  --rosa: #f472b6;      --rosa-esc: #330a20;
  --turquesa: #2dd4bf;  --turquesa-esc: #032b26;

  --status: var(--menta);
  --status-esc: var(--menta-esc);
  --r-g: 24px; --r-m: 16px; --r-p: 12px;
  --num: 'Space Grotesk', ui-monospace, monospace;
  --rapida: 140ms cubic-bezier(.2, .8, .3, 1);
  --suave: 420ms cubic-bezier(.2, .8, .3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--txt);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: -20% -20% auto -20%;
  height: 60vh;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(45% 60% at 30% 0%, var(--status), transparent 70%),
              radial-gradient(40% 55% at 78% 8%, var(--violeta), transparent 72%);
  opacity: .16;
  filter: blur(20px);
  transition: background var(--suave);
}

button, input, select {
  font-family: inherit;
  font-size: 14px;
  color: inherit;
}

svg.ic {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg.ic.g { width: 22px; height: 22px; }
svg.ic.gg { width: 30px; height: 30px; stroke-width: 1.6; }
svg.ic.xl { width: 44px; height: 44px; stroke-width: 1.4; }
svg.ic.xxl { width: 76px; height: 76px; stroke-width: 1.2; }

:focus-visible {
  outline: 3px solid var(--ciano);
  outline-offset: 2px;
}

.mono {
  font-family: var(--num);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ===== Tela de Acesso / Login ===== */
#login {
  position: fixed;
  inset: 0;
  background: var(--fundo);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 80;
}
#login .caixa {
  background: var(--bloco);
  width: 100%;
  max-width: 420px;
  padding: 36px 32px;
  border-radius: var(--r-g);
  border: 1px solid var(--linha);
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
#login .fundo {
  position: absolute;
  right: -30px;
  bottom: -34px;
  color: var(--ciano);
  opacity: .16;
  pointer-events: none;
}
#login .marca {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: linear-gradient(140deg, var(--ciano), var(--violeta));
  color: var(--escuro);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
#login h1 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
}
#login p {
  margin: 0 0 28px;
  color: var(--txt-3);
  font-size: 13px;
}
#login label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--txt-2);
  margin-bottom: 8px;
}
#login input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-m);
  background: var(--bloco-2);
  color: var(--txt);
  font-size: 16px;
  transition: border-color var(--rapida);
}
#login input:focus {
  outline: none;
  border-color: var(--ciano);
}
#login button {
  width: 100%;
  margin-top: 16px;
  height: 52px;
  border: 0;
  border-radius: var(--r-m);
  background: linear-gradient(120deg, var(--ciano), var(--menta));
  color: var(--escuro);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: filter var(--rapida), transform var(--rapida);
}
#login button:hover { filter: brightness(1.08); }
#login button:active { transform: scale(.98); }
#login .erro {
  color: var(--coral);
  font-size: 12px;
  margin-top: 12px;
  min-height: 16px;
  font-weight: 600;
}
#login .dica {
  margin-top: 14px;
  font-size: 11px;
  color: var(--txt-3);
  text-align: center;
}

/* ===== Topo do Painel ===== */
#app {
  display: none;
  position: relative;
  z-index: 1;
}

.topo {
  max-width: 1420px;
  margin: 0 auto;
  padding: 18px 16px 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.topo .logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--ciano), var(--violeta));
  color: var(--escuro);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.topo h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.topo h1 span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--txt-3);
  letter-spacing: 0;
}
.topo .dir {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.pilula {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bloco-2);
  border: 1px solid var(--linha);
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-2);
  white-space: nowrap;
}
.pilula .pt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--menta);
  position: relative;
}
.pilula .pt::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--menta);
  opacity: .6;
  animation: pulso 2s ease-out infinite;
}
.pilula.alerta {
  color: var(--ambar);
  border-color: rgba(251, 191, 36, .3);
}
.pilula.alerta .pt, .pilula.alerta .pt::after {
  background: var(--ambar);
  border-color: var(--ambar);
}
@media(max-width: 640px) { .pilula.some { display: none; } }
@keyframes pulso {
  0% { transform: scale(.6); opacity: .8; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ===== Abas de Navegação ===== */
nav.abas {
  max-width: 1420px;
  margin: 0 auto;
  padding: 10px 16px 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
nav.abas::-webkit-scrollbar { display: none; }
nav.abas button {
  border: 1px solid var(--linha);
  background: var(--bloco);
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--txt-2);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--rapida), color var(--rapida), transform var(--rapida);
}
nav.abas button:hover {
  background: var(--bloco-2);
  color: var(--txt);
}
nav.abas button.ativa {
  background: var(--txt);
  color: var(--escuro);
  border-color: transparent;
}
@media(max-width: 520px) {
  nav.abas button span { display: none; }
  nav.abas button { padding: 0 18px; }
}

main {
  max-width: 1420px;
  margin: 0 auto;
  padding: 10px 16px calc(64px + env(safe-area-inset-bottom));
}
section.tela { display: none; }
section.tela.ativa { display: block; }

/* ===== Grade Bento ===== */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.b3 { grid-column: span 6; }
.b4 { grid-column: span 12; }
.b5 { grid-column: span 12; }
.b6 { grid-column: span 12; }
.b7 { grid-column: span 12; }
.b8 { grid-column: span 12; }
.b12 { grid-column: span 12; }
.alto { grid-row: span 2; }

@media(min-width: 780px) {
  .b4 { grid-column: span 6; }
  .b5 { grid-column: span 6; }
  .b6 { grid-column: span 6; }
  .b7 { grid-column: span 6; }
  .b8 { grid-column: span 6; }
}
@media(min-width: 1080px) {
  .b3 { grid-column: span 3; }
  .b4 { grid-column: span 4; }
  .b5 { grid-column: span 5; }
  .b6 { grid-column: span 6; }
  .b7 { grid-column: span 7; }
  .b8 { grid-column: span 8; }
}

.tile {
  background: var(--bloco);
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
  padding: 20px;
  min-width: 0;
  position: relative;
  overflow: hidden;
  transition: border-color var(--rapida), transform var(--rapida);
}
.tile:hover { border-color: var(--linha-forte); }
.tile .agua {
  position: absolute;
  right: -16px;
  bottom: -20px;
  opacity: .12;
  pointer-events: none;
}
.tile .cab {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.tile .cab .ic-cx {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--acento);
  color: var(--acento-esc);
  flex: none;
}
.tile .cab h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.tile .cab .aux {
  margin-left: auto;
  font-family: var(--num);
  font-weight: 700;
  font-size: 14px;
  color: var(--acento);
  background: rgba(255, 255, 255, .06);
  padding: 5px 12px;
  border-radius: 999px;
}

/* ===== Bloco de Estado Geral ===== */
.estado {
  border-radius: var(--r-g);
  padding: 24px;
  background: linear-gradient(145deg, var(--status), color-mix(in srgb, var(--status) 55%, #000));
  color: var(--status-esc);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
  transition: background var(--suave);
}
.estado .agua {
  position: absolute;
  right: -24px;
  top: -16px;
  opacity: .2;
}
.estado .agua svg { width: 170px; height: 170px; }
.estado .cima {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}
.estado .selo {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.estado .selo svg { width: 34px; height: 34px; stroke-width: 2.2; }
.estado h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.estado .sub {
  font-size: 13px;
  font-weight: 600;
  opacity: .72;
  margin-top: 2px;
}
.estado .marcas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
}
.estado .marcas span {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .2);
  font-family: var(--num);
  font-weight: 700;
  font-size: 15px;
}
.estado .rodape {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  position: relative;
  flex-wrap: wrap;
}
.estado .relogio {
  font-family: var(--num);
  font-weight: 700;
  font-size: 46px;
  letter-spacing: -.04em;
  line-height: 1;
}
.estado .relogio small {
  font-size: 14px;
  font-weight: 600;
  opacity: .7;
  display: block;
  letter-spacing: 0;
}
.estado .prog {
  flex: 1;
  min-width: 140px;
}
.estado .prog .trilho {
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .24);
  overflow: hidden;
}
.estado .prog .trilho i {
  display: block;
  height: 100%;
  background: var(--status-esc);
  opacity: .85;
  border-radius: 999px;
  transition: width var(--suave);
}
.estado .prog .leg {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  opacity: .72;
  margin-top: 7px;
}

/* ===== KPIs ===== */
.kpi {
  border-radius: var(--r-g);
  padding: 20px;
  background: var(--acento);
  color: var(--acento-esc);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 150px;
  transition: transform var(--rapida);
}
.kpi:hover { transform: translateY(-3px); }
.kpi .agua {
  position: absolute;
  right: -14px;
  bottom: -18px;
  opacity: .22;
}
.kpi .rot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  opacity: .78;
  position: relative;
}
.kpi .val {
  font-family: var(--num);
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -.04em;
  position: relative;
  margin-top: 2px;
}
.kpi .val small { font-size: 20px; opacity: .55; }
.kpi .sub {
  font-size: 12px;
  font-weight: 600;
  opacity: .72;
  position: relative;
  margin-top: auto;
}

/* ===== Alertas ===== */
.alertas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.alerta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  background: var(--acento);
  color: var(--acento-esc);
  animation: sobe .3s ease both;
}
.alerta b { font-family: var(--num); font-size: 15px; }
@keyframes sobe {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ===== Cards de Função (No Hospital Agora) ===== */
.funcoes {
  columns: 250px;
  column-gap: 14px;
}
.fn {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 14px;
  display: flow-root;
  border-radius: var(--r-g);
  background: var(--acento);
  color: var(--acento-esc);
  position: relative;
  overflow: hidden;
  transition: transform var(--rapida);
}
.fn:hover { transform: translateY(-3px); }
.fn .agua {
  position: absolute;
  right: -18px;
  top: -14px;
  opacity: .2;
  pointer-events: none;
}
.fn .top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
  position: relative;
}
.fn .top .cx {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.fn .top .nm {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fn .top .sit {
  font-size: 12px;
  font-weight: 600;
  opacity: .7;
}
.fn .top .cnt {
  margin-left: auto;
  font-family: var(--num);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.03em;
  flex: none;
}
.fn .lista {
  padding: 0 10px 10px;
  position: relative;
  display: grid;
  gap: 6px;
}
.pes {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--r-p);
  background: rgba(255, 255, 255, .28);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--rapida), transform var(--rapida);
}
.pes:hover { background: rgba(255, 255, 255, .45); }
.pes:active { transform: scale(.98); }
.pes.presente {
  background: rgba(255, 255, 255, .92);
  color: #0f172a;
}
.pes .luz {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: .5;
  flex: none;
  transition: all var(--rapida);
}
.pes.presente .luz {
  background: #15803d;
  border-color: #15803d;
  opacity: 1;
}
.pes .txt { min-width: 0; flex: 1; }
.pes .txt .n {
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.pes .txt .p {
  font-size: 11px;
  font-weight: 600;
  opacity: .66;
}
.pes .hr {
  font-family: var(--num);
  font-weight: 700;
  font-size: 11px;
  color: #15803d;
  flex: none;
}
.vaga {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 14px;
  border-radius: var(--r-p);
  border: 2px dashed rgba(0, 0, 0, .3);
  font-size: 12px;
  font-weight: 700;
  opacity: .8;
}

/* ===== Frota de Ambulâncias ===== */
.tiles {
  columns: 230px;
  column-gap: 14px;
}
.amb {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 14px;
  display: flow-root;
  border-radius: var(--r-g);
  background: var(--acento);
  color: var(--acento-esc);
  position: relative;
  overflow: hidden;
  transition: transform var(--rapida);
}
.amb:hover { transform: translateY(-3px); }
.amb .agua {
  position: absolute;
  right: -20px;
  top: -16px;
  opacity: .2;
}
.amb .cima {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px 12px;
  position: relative;
}
.amb .cx {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  position: relative;
}
.amb.rodando .cx::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 2px solid currentColor;
  opacity: .45;
  animation: pulso 1.9s ease-out infinite;
}
.amb .cod {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amb .placa {
  font-family: var(--num);
  font-weight: 500;
  font-size: 12px;
  opacity: .66;
}
.amb .obs {
  margin: 0 12px 12px;
  padding: 10px 14px;
  border-radius: var(--r-p);
  background: rgba(0, 0, 0, .18);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  line-height: 1.35;
  position: relative;
}
.amb .faixa {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, .22);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  position: relative;
}

/* ===== Leitos ===== */
.leitos-caixa {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.camas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  flex: 1;
  min-width: min(100%, 210px);
}
.cama {
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt-3);
  background: var(--bloco-2);
  transition: background var(--rapida), color var(--rapida), transform var(--rapida);
}
.cama svg { width: 58%; height: 58%; }
.cama.ocupada { background: var(--acento); color: var(--acento-esc); }
.cama.excedente { background: var(--coral); color: var(--coral-esc); }
.cama:hover { transform: scale(1.08); }

.medidor {
  position: relative;
  width: 172px;
  height: 172px;
  flex: none;
}
.medidor svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}
.medidor circle {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
}
.medidor .trilho { stroke: var(--bloco-3); }
.medidor .arco {
  transition: stroke-dashoffset var(--suave), stroke var(--suave);
}
.medidor .meio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.medidor .meio b {
  font-family: var(--num);
  font-weight: 700;
  font-size: 42px;
  letter-spacing: -.04em;
  line-height: 1;
}
.medidor .meio span {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-3);
}

.fluxo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
.fluxo div {
  border-radius: var(--r-m);
  padding: 14px 16px;
  background: var(--acento);
  color: var(--acento-esc);
  position: relative;
  overflow: hidden;
}
.fluxo div .agua {
  position: absolute;
  right: -12px;
  bottom: -16px;
  opacity: .22;
}
.fluxo div .r {
  font-size: 11px;
  font-weight: 700;
  opacity: .75;
  display: flex;
  align-items: center;
  gap: 7px;
}
.fluxo div .v {
  font-family: var(--num);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -.03em;
  line-height: 1.1;
  position: relative;
}

/* ===== Gráfico de Barras SVG (14 dias) ===== */
.barras {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 190px;
}
.barras .col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  gap: 7px;
  align-items: center;
  min-width: 0;
}
.barras .v {
  font-family: var(--num);
  font-weight: 700;
  font-size: 11px;
  color: var(--txt-2);
}
.barras .b {
  width: 100%;
  border-radius: 8px;
  transition: height var(--suave);
  min-height: 5px;
}
.barras .col:hover .b { filter: brightness(1.2); }
.barras .d {
  font-size: 10px;
  font-weight: 600;
  color: var(--txt-3);
}

/* ===== Stream de Eventos (Últimos Registros) ===== */
.ev {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: var(--r-m);
  background: var(--bloco-2);
  margin-bottom: 8px;
}
.ev:last-child { margin-bottom: 0; }
.ev .pin {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--acento);
  color: var(--acento-esc);
}
.ev .t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--txt-2);
  font-size: 13px;
}
.ev .t b { font-weight: 700; color: var(--txt); }
.ev .h {
  margin-left: auto;
  font-family: var(--num);
  font-weight: 500;
  font-size: 11px;
  color: var(--txt-3);
  white-space: nowrap;
}
.stream {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}
.stream::-webkit-scrollbar { width: 8px; }
.stream::-webkit-scrollbar-thumb {
  background: var(--bloco-3);
  border-radius: 999px;
}

/* ===== Formulários e Controles ===== */
.campo {
  margin-bottom: 14px;
  min-width: 0;
}
.campo label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--txt-2);
  margin-bottom: 8px;
}
input[type=text], input[type=date], input[type=month], input[type=number], input[type=password], select {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-m);
  background: var(--bloco-2);
  color: var(--txt);
  font-size: 15px;
  font-weight: 500;
  transition: border-color var(--rapida);
}
input:focus, select:focus {
  outline: none;
  border-color: var(--ciano);
}
input:disabled, select:disabled { opacity: .45; }
.linha-campos {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.btn {
  border: 1px solid var(--linha-forte);
  background: var(--bloco-2);
  color: var(--txt);
  height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  transition: background var(--rapida), transform var(--rapida);
}
.btn:hover { background: var(--bloco-3); }
.btn:active { transform: scale(.97); }
.btn.principal {
  background: linear-gradient(120deg, var(--ciano), var(--menta));
  color: var(--escuro);
  border-color: transparent;
}
.btn.verde {
  background: var(--menta);
  color: var(--menta-esc);
  border-color: transparent;
}
.btn.amarelo {
  background: var(--ambar);
  color: var(--ambar-esc);
  border-color: transparent;
}
.btn.perigo {
  background: var(--coral);
  color: var(--coral-esc);
  border-color: transparent;
}
.btn.pequeno {
  height: 38px;
  padding: 0 14px;
  font-size: 12px;
  gap: 7px;
}
.btn.icone { width: 38px; padding: 0; }

/* ===== Listas e Itens ===== */
.item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: var(--r-m);
  background: var(--bloco-2);
  border-left: 5px solid var(--acento);
}
.item .info {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.item .info .cx {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--acento);
  color: var(--acento-esc);
}
.item .info b {
  font-weight: 700;
  font-size: 15px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item .info span {
  display: block;
  font-size: 12px;
  color: var(--txt-3);
  margin-top: 1px;
  font-weight: 500;
}
.item .acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.sub-tit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sub-tit .risco {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: .25;
}
.sub-tit:first-child { margin-top: 0; }

/* ===== Tabelas ===== */
.rolagem { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  font-size: 13px;
  min-width: 340px;
}
th {
  text-align: left;
  padding: 0 14px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--txt-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
td {
  padding: 12px 14px;
  background: var(--bloco-2);
  vertical-align: middle;
}
td:first-child { border-radius: var(--r-p) 0 0 var(--r-p); }
td:last-child { border-radius: 0 var(--r-p) var(--r-p) 0; }
td.n, th.n { text-align: right; font-family: var(--num); font-weight: 700; }
.mini-barra {
  height: 10px;
  border-radius: 999px;
  background: var(--bloco-3);
  overflow: hidden;
  min-width: 60px;
}
.mini-barra i { display: block; height: 100%; border-radius: 999px; }

.vazio {
  color: var(--txt-3);
  font-size: 13px;
  padding: 28px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  font-weight: 600;
}
.vazio svg { width: 52px; height: 52px; opacity: .35; }
.nota {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-2);
  margin-top: 16px;
  display: flex;
  gap: 12px;
  background: var(--bloco-2);
  border-radius: var(--r-m);
  padding: 14px;
  border-left: 5px solid var(--azul);
}
.nota svg { flex: none; color: var(--azul); }
.legenda {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-3);
}
.legenda span { display: flex; align-items: center; gap: 8px; }
.legenda i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--txt-3);
  display: block;
}
.legenda i.p { background: var(--menta); border-color: var(--menta); }
.legenda i.l { border-style: dashed; border-radius: 4px; }

/* ===== Estilos do Espelho de Ponto & RH ===== */
.badge-ponto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.badge-cumprido { background: rgba(52, 211, 153, .18); color: var(--menta); }
.badge-falta { background: rgba(255, 92, 124, .18); color: var(--coral); }
.badge-folga { background: rgba(255, 255, 255, .08); color: var(--txt-3); }
.badge-aberto { background: rgba(251, 191, 36, .18); color: var(--ambar); }

.espelho-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.espelho-resumo .cx-resumo {
  background: var(--bloco-2);
  padding: 16px;
  border-radius: var(--r-m);
  border: 1px solid var(--linha);
}
.espelho-resumo .cx-resumo .rot {
  font-size: 11px;
  font-weight: 700;
  color: var(--txt-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.espelho-resumo .cx-resumo .val {
  font-family: var(--num);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(14px);
  background: var(--txt);
  color: var(--escuro);
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--rapida), transform var(--rapida);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
#toast.ver { opacity: 1; transform: translateX(-50%) translateY(0); }

@media(prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Modo de Impressão do Espelho de Ponto */
@media print {
  body { background: #ffffff !important; color: #000000 !important; }
  body::before, .topo, nav.abas, .btn, #login, #toast, .alertas { display: none !important; }
  #app, main, section.tela.ativa { display: block !important; padding: 0 !important; }
  .tile { background: #ffffff !important; border: 1px solid #cccccc !important; color: #000000 !important; }
  td { background: #f9f9f9 !important; color: #000000 !important; border-bottom: 1px solid #eeeeee; }
  th { color: #555555 !important; }
}