/* Cartões ao vivo: três telinhas que mostram como a SOL acompanha a empresa.
   Cada cartão tem uma tela rebaixada em cima, uma faixa de etiqueta e o texto embaixo.
   As animações rodam só com o cartão na tela (assets/js/cartoes.js). */

.live-cards{padding-block:clamp(4.5rem,9vw,7rem)}

/* Cabeçalho: título à esquerda, texto de apoio à direita */
.live-cards .live-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.live-cards .live-head>div{display:grid;gap:4px;max-width:34rem}
.live-cards .live-eyebrow{color:var(--d-gold-2,#e8b92a)!important}
.live-cards .section-title{color:var(--d-text,#eef4f6)!important}
.live-cards .live-head .section-subtitle{max-width:40ch;color:var(--d-muted,#adc1c9)!important}

.live-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}

/* Cartão */
.live-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--d-surface,#0e2a35);
  border:1px solid var(--d-line,rgba(205,228,236,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 50px -30px rgba(0,0,0,.85);
  transition:transform .25s ease,border-color .25s ease}
.live-card:hover{transform:translateY(-3px);border-color:rgba(232,185,42,.4)}
.live-plate{margin:12px 12px 0;padding:6px;height:21rem;border-radius:12px;background:rgba(238,244,246,.03);border:1px dashed rgba(205,228,236,.14);overflow:hidden}
.live-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--d-line,rgba(205,228,236,.12));
  font:600 .8rem/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--d-muted,#adc1c9)}
.live-dot{display:inline-flex;align-items:center;gap:7px;letter-spacing:.08em}
.live-dot i{width:7px;height:7px;border-radius:50%;background:#e8b92a;animation:lw-pulse 2.4s ease-out infinite}
@keyframes lw-pulse{0%{box-shadow:0 0 0 0 rgba(232,185,42,.55)}100%{box-shadow:0 0 0 7px rgba(232,185,42,0)}}
.live-card-body{display:grid;gap:10px;padding:22px 20px 26px}
.live-card-body h3{margin:0;font:600 1.45rem/1.2 var(--font-heading);color:var(--d-text,#eef4f6)}
.live-card-body p{margin:0;font-size:1.02rem;line-height:1.6;color:var(--d-muted,#adc1c9)}
.live-note{margin:22px 0 0;font-size:.85rem;color:var(--d-faint,#7f99a3)}

/* Janela dentro da tela */
.lw{height:100%;display:flex;flex-direction:column;overflow:hidden;background:none;border:0;
  font:400 .86rem/1.35 var(--font-body);color:#e3ecef}
.lw-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#0f2a35;border-bottom:1px solid rgba(205,228,236,.07);font-size:.8rem;color:#b8cad1}
.lw-bar>span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-tag{flex:none;display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;background:rgba(205,228,236,.08);color:#dbe6ea;font-size:.74rem;font-weight:600}
.lw-tag--live i{width:6px;height:6px;border-radius:50%;background:#6fd39a}
.lw-tag--warn{background:rgba(255,190,90,.16);color:#ffcf7d}
.lw-lbl{display:block;margin-bottom:4px;font:600 .7rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:#8ea6af}
.lw-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-top:1px solid rgba(205,228,236,.07);font-size:.78rem;color:#9fb5bd}
.lw-foot b{color:#fff;font-weight:600}

/* Cartão 1: o PGR se monta etapa por etapa */
.lw-goal{padding:10px 12px 6px}
.lw-goal p{margin:0;padding:7px 10px;border-radius:7px;background:#071a22;border:1px solid rgba(205,228,236,.1);color:#fff;font-weight:600}
.lw-caret{display:inline-block;width:1.5px;height:.95em;margin-left:2px;background:#e8b92a;vertical-align:-.12em;animation:lw-blink 1s steps(1) infinite}
@keyframes lw-blink{50%{opacity:0}}
.lw-steps{list-style:none;margin:0;padding:2px 12px 8px;display:grid;gap:3px}
.lw-steps li{display:flex;align-items:center;gap:9px;padding:5px 7px;border-radius:7px;opacity:.2;transform:translateX(-6px);transition:opacity .35s ease,transform .35s ease,background .35s ease}
.lw-steps li.in{opacity:1;transform:none}
.lw-steps li.now{background:rgba(232,185,42,.09)}
.lw-steps b{display:grid;place-items:center;width:1.3rem;height:1.3rem;flex:none;border-radius:50%;background:#173a47;color:#d5e2e7;font-size:.72rem;font-weight:700}
.lw-steps li.in b{background:#e8b92a;color:#06161d}
.lw-steps span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-steps em{flex:none;font:600 .74rem/1 var(--font-heading);font-style:normal;letter-spacing:.03em;padding:4px 8px;border-radius:999px;background:rgba(205,228,236,.08);color:#c9d8dd}
.lw-steps .is-gate em{background:rgba(255,190,90,.16);color:#ffcf7d}
.lw-go{flex:none;padding:5px 11px;border-radius:999px;background:#1d3c48;color:#9fb5bd;font-weight:700;transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.lw-go.ready{background:#e8b92a;color:#06161d;box-shadow:0 0 0 4px rgba(232,185,42,.18)}

/* Cartão 2: a fila de exames entra nas salas */
.lw-queue{padding:10px 12px 6px}
.lw-q{display:flex;gap:6px;height:1.9rem;align-items:center;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
.lw-chip{flex:none;padding:4px 10px;border-radius:999px;background:#173a47;border:1px solid rgba(205,228,236,.1);font-size:.76rem;white-space:nowrap;color:#e3ecef;animation:lw-chip-in .4s ease both;transition:opacity .35s ease,transform .35s ease}
.lw-chip.out{opacity:0;transform:translateY(10px) scale(.92)}
@keyframes lw-chip-in{from{opacity:0;transform:translateX(14px)}}
.lw-rooms{list-style:none;margin:0;padding:4px 12px 12px;display:grid;gap:6px}
.lw-rooms li{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:9px;background:#0f2a35;transition:background .4s ease,box-shadow .4s ease}
.lw-rooms li.hit{background:#163845;box-shadow:inset 2px 0 0 #e8b92a}
.lw-rooms li>div{flex:1;min-width:0;display:grid}
.lw-rooms b{font-weight:600;font-size:.86rem;color:#fff}
.lw-rooms small{font-size:.76rem;color:#9fb5bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-av{display:grid;place-items:center;width:1.9rem;height:1.9rem;flex:none;border-radius:50%;background:rgba(232,185,42,.14)}
.lw-av .sol-icon{width:1.05rem;height:1.05rem;color:#fff!important}
.lw-load{width:3.2rem;height:5px;flex:none;border-radius:999px;background:#173a47;overflow:hidden}
.lw-load i{display:block;height:100%;width:calc(var(--l) * 100%);border-radius:inherit;background:#e8b92a;transition:width .6s ease}

/* Cartão 3: prazos que se renovam */
.lw-dues{list-style:none;margin:0;padding:10px 12px;display:grid;gap:6px}
.lw-dues li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;background:#0f2a35;border:1px solid transparent;animation:lw-row .45s ease both;animation-delay:calc(var(--i) * 90ms)}
.lw-dues li>div{flex:1;min-width:0;display:grid}
.lw-dues b{font-weight:600;font-size:.86rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-dues small{font-size:.74rem;color:#9fb5bd}
.lw-dues .st{flex:none;padding:4px 9px;border-radius:999px;font:600 .74rem/1 var(--font-heading);letter-spacing:.03em}
.lw-dues .warn{border-color:rgba(255,190,90,.35);background:rgba(255,190,90,.07)}
.lw-dues .warn .st{background:#ffc35a;color:#06161d}
.lw-dues .soon .st{background:rgba(255,190,90,.16);color:#ffcf7d}
.lw-dues .ok .st{background:rgba(111,211,154,.16);color:#8ee2b0}
.lw-dues .done{border-color:rgba(111,211,154,.4);background:rgba(111,211,154,.07)}
.lw-dues .done .st{background:#6fd39a;color:#06161d}
@keyframes lw-row{from{opacity:0;transform:translateX(-8px)}}
.lw-due-note{color:#8ee2b0;opacity:0;transition:opacity .4s ease}
.lw-due-note.on{opacity:1}

@media (max-width:1100px){
  .live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .live-grid{grid-template-columns:minmax(0,1fr)}
  .live-plate{height:auto}
  .lw{height:auto}
}
@media (prefers-reduced-motion:reduce){
  .live-card,.lw-steps li,.lw-chip,.lw-dues li,.lw-load i,.lw-rooms li{transition:none;animation:none}
  .live-dot i,.lw-caret{animation:none}
  .live-card:hover{transform:none}
}
.lw-lbl--pad{padding:10px 12px 0}
.lw-goal p{padding:0;background:none;border:0;font:600 1.05rem/1.3 var(--font-heading)}