/* =========================================
   Plantão Pizzattolog — Visual Claro PRO
   ========================================= */

:root{
  /* Paleta base */
  --base:#dbd9d9;
  --brand:#ec4319;
  --ink:#201e1c;
  --muted:#858484;
  --accent:#f5a928;

  /* UI */
  --glass:#fffffff0;                 /* cartões quase sólidos p/ legibilidade */
  --border:#201e1c33;
  --shadow-1:0 12px 28px rgba(32,30,28,.18);
  --shadow-2:0 10px 24px rgba(32,30,28,.16);

  /* Status (ativo/inativo) */
  --on-bg:#e9ffd6;                   /* verde claro legível */
  --on-ink:#174d00;
  --on-bar:#33c24d;

  --off-bg:#fff3ee;                  /* laranja claro */
  --off-ink:#a33b1e;
  --off-bar:#ec4319;

  /* Dimensões */
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:none; position:relative; z-index:0;
}

/* ===== Fundo com imagem + overlay claro ===== */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    linear-gradient(90deg, rgba(219,217,217,.98) 0%, rgba(219,217,217,.96) 45%, rgba(245,169,40,.10) 75%, rgba(236,67,25,.08) 100%),
    url("assets/bg-plantao.jpg") 80% center / cover no-repeat;
  filter:saturate(.9) contrast(.95) brightness(1.02);
}
body::after{
  content:""; position:fixed; inset:-2%; z-index:-1; pointer-events:none;
  background: radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,.06), transparent 60%);
}

/* ===== Shell ===== */
.container{ width:min(1100px,92vw); margin:44px auto 28px; }

/* ===== Header ===== */
.header{
  display:grid; grid-template-columns:auto 1fr; grid-auto-rows:auto;
  align-items:center; gap:22px; margin-bottom:10px;
}
.logo{ height:96px; width:auto; object-fit:contain; filter:drop-shadow(0 1px 0 rgba(0,0,0,.06)); }
h1{
  margin:0; font-weight:900; letter-spacing:-.02em; font-size:clamp(48px,6.5vw,72px);
  background:linear-gradient(90deg,var(--brand),#ff6a2e 35%,var(--accent) 85%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Horários — centralizado no topo */
.hours{
  grid-column:1 / -1; justify-self:center; text-align:center; margin-top:-4px;
  display:inline-block; padding:18px 22px; min-width:360px;
  border-radius:20px; background:var(--glass); border:1px solid var(--border);
  box-shadow:0 8px 20px rgba(0,0,0,.10); color:var(--ink);
}
.hours small{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; background:#201e1c; color:#fff; padding:4px 10px;
  border-radius:999px; margin-bottom:8px;
}
.hours div{white-space:nowrap; font-size:15px}
.hours strong{color:#000}

/* ===== Status ===== */
.status{
  margin-top:56px; margin-bottom:18px; padding:22px 24px;
  border-radius:var(--radius); background:var(--on-bg); color:var(--on-ink);
  border:1px solid #cfe7b8; box-shadow:var(--shadow-1);
  position:relative; overflow:hidden;
}
.status::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:8px;
  background:var(--on-bar); border-top-left-radius:inherit; border-bottom-left-radius:inherit;
}
.status .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.status .title{ font-weight:800; font-size:18px; letter-spacing:.02em; }
.status .now{ color:#5b5b5b; font-size:13px }

/* Sem mudança de cor no hover */
.status:hover{ background:var(--on-bg); }
.status.off{ background:var(--off-bg); color:var(--off-ink); border-color:#f1c0b3; }
.status.off::before{ background:var(--off-bar); }
.status.off:hover{ background:var(--off-bg); }

/* ===== Card ===== */
.grid{ display:grid; grid-template-columns:1fr; gap:0; }
.card{
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 16px; box-shadow:var(--shadow-2);
  position:relative;
}
.card h3{ margin:0 0 12px; font-size:18px; color:#3a3a3a; letter-spacing:.02em }
.badge{ background:#201e1c; color:#fff; font-size:12px; border-radius:999px; padding:4px 9px; }

/* Nome do plantonista — MAIOR e estável */
.card .name{
  font-size:clamp(20px, 2.2vw, 24px);
  font-weight:900; letter-spacing:-0.01em; line-height:1.2;
  min-height:28px; display:block;
}

/* Ações */
.actions{
  display:flex; gap:12px; align-items:center; margin-top:12px;
  flex-wrap:wrap; justify-content:flex-start;
}

/* ===== Botões ===== */
.btn, .tel{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px; border-radius:12px; text-decoration:none;
  border:1px solid #00000012; color:#201e1c; font-weight:800;
  background:linear-gradient(180deg,#ffffff,#f3efee);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, filter .12s ease;
  box-shadow:0 12px 24px -14px rgba(32,30,28,.20);
}

/* CTA WhatsApp (primário) */
.btn{
  min-width:190px; color:#fff;
  background:linear-gradient(180deg,#ff9f7f,var(--brand));
  border-color:#ec4319cc; box-shadow:0 14px 26px -14px #ec431980;
  animation:pulseSoft 10s ease-in-out infinite;
}
.btn:hover{ filter:brightness(1.05); background:linear-gradient(180deg,#ff9f7f,var(--brand)); border-color:#ec4319cc; }
.btn:active{ transform:translateY(0); }

/* Telefone (secundário) */
.tel{ min-width:220px; text-align:center; color:#201e1c; background:#fff; }
.tel:hover{ background:#fff; border-color:#0000002b; transform:translateY(-1px); }
.tel:active{ transform:translateY(0); }

/* ===== Footer ===== */
footer{ color:var(--muted); font-size:12px; margin:28px 0 12px; text-align:center; }

/* ===== Acessibilidade ===== */
:focus-visible{ outline:2px solid #201e1c55; outline-offset:2px; border-radius:10px; }

/* Link técnico do WhatsApp (oculto) */
#oncall{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

/* ===== Microanimação do CTA ===== */
@keyframes pulseSoft{
  0%,100%{ transform:none; box-shadow:0 12px 24px -14px rgba(32,30,28,.20); }
  50%{ transform:translateY(-1px); box-shadow:0 16px 28px -14px rgba(32,30,28,.25); }
}

/* ===== Responsivo ===== */
@media (max-width:900px){
  .header{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:14px; }
  .logo{ height:84px; }
  .hours{ min-width:unset; width:100%; max-width:560px; }
  .status{ padding:18px; }
  .card{ padding:16px; }
  .actions{ flex-wrap:wrap; }
}

/* --- NÃO mudar a cor no hover (status, cards e botões) --- */

/* Status: mantém a mesma cor ON/OFF no hover */
.status.on:hover  { background: var(--on-bg);  border-color: #cfe7b8; }
.status.off:hover { background: var(--off-bg); border-color: #f1c0b3; }

/* Card: não clarear nem subir no hover */
.card:hover {
  background: var(--glass);
  transform: none;
  box-shadow: var(--shadow-2);
}

/* Botão primário (WhatsApp): mantém o gradiente e a cor do texto */
.btn {
  background: linear-gradient(180deg, #ff9f7f, var(--brand));
  color: #fff;
  border-color: #ec4319cc;
  box-shadow: 0 14px 26px -14px #ec431980;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; /* sem filter */
}
.btn:hover,
.btn:focus,
.btn:active {
  background: linear-gradient(180deg, #ff9f7f, var(--brand));
  color: #fff;
  border-color: #ec4319cc;
  transform: none;            /* não “sobe” */
  box-shadow: 0 14px 26px -14px #ec431980;
}

/* Botão secundário (Ligar): mantém mesma cor */
.tel,
.actions .btn.tel {
  background: #fff;           /* se você usa branco aqui */
  color: #201e1c;
  border-color: #00000012;
}
.tel:hover,
.tel:focus,
.tel:active,
.actions .btn.tel:hover,
.actions .btn.tel:focus,
.actions .btn.tel:active {
  background: #fff;
  color: #201e1c;
  border-color: #00000012;
  transform: none;
  box-shadow: 0 12px 24px -14px rgba(32,30,28,.20);
}

/* Links genéricos: não “ficar branco” no hover */
a:hover, a:focus { color: inherit; }


/* opção: botão Ligar com cor neutra */
.tel, .actions .btn.tel {
  background: #f4f4f5;
  color: #1f2937;
  border-color: #e4e4e7;
}
.tel:hover,
.actions .btn.tel:hover {
  background: #f4f4f5;  /* permanece igual */
  color: #1f2937;
  border-color: #e4e4e7;
}


/* ==== LOCK DE CORES (cola no FINAL do CSS) ==== */

/* Status: não muda no hover */
.status.on,
.status.on:hover {
  background: var(--on-bg) !important;
  border-color: #cfe7b8 !important;
  color: var(--on-ink) !important;
}
.status.off,
.status.off:hover {
  background: var(--off-bg) !important;
  border-color: #f1c0b3 !important;
  color: var(--off-ink) !important;
}

/* Card: não clarear no hover */
.card,
.card:hover {
  background: var(--glass) !important;
  box-shadow: var(--shadow-2) !important;
  transform: none !important;
}

/* CTA WhatsApp (classe .btn): mantém gradiente SEM ficar branco */
.actions .btn,
.actions .btn:hover,
.actions .btn:focus,
.actions .btn:active {
  background-image: linear-gradient(180deg, #ff9f7f, var(--brand)) !important;
  background-color: transparent !important;
  color: #fff !important;
  border-color: #ec4319cc !important;
  box-shadow: 0 14px 26px -14px #ec431980 !important;
  transform: none !important;
  filter: none !important;
}

/* Botão Ligar (classe .tel): mantém neutro */
.actions .tel,
.actions .tel:hover,
.actions .tel:focus,
.actions .tel:active {
  background: #f4f4f5 !important;
  color: #1f2937 !important;
  border-color: #e4e4e7 !important;
  box-shadow: 0 12px 24px -14px rgba(32,30,28,.20) !important;
  transform: none !important;
}

/* Anula regras genéricas agressivas que possam vir antes */
a:hover, a:focus, button:hover, button:focus {
  color: inherit !important;
  background: inherit !important;
  filter: none !important;
  box-shadow: inherit !important;
}

/* Evita que qualquer utilitário .btn global sobrescreva */
.btn:hover { background: inherit !important; }






/* === CARD DO PLANTONISTA (maior) === */
.card.plantonista{
  padding: 28px 24px !important;     /* mais “corpo” no card */
  border-width: 500px !important;
}

/* Nome do plantonista — bem maior */
.card.plantonista .name{
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.012em !important;
}

/* Recado de atenção — maior e destacado
   (vale para .attention, .recado ou .alert, use o que tiver no seu HTML) */
.card.plantonista .attention,
.card.plantonista .recado,
.card.plantonista .alert{
  font-size: clamp(18px, 2.4vw, 24px) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

/* Mobile: mantém tudo grande sem quebrar */
@media (max-width: 900px){
  .card.plantonista{ padding: 24px 20px !important; }
  .card.plantonista .name{ font-size: clamp(26px, 6.2vw, 36px) !important; }
  .card.plantonista .attention,
  .card.plantonista .recado,
  .card.plantonista .alert{ font-size: clamp(16px, 4.6vw, 20px) !important; }
}


/* Aumenta qualquer parágrafo do card que começa com <strong> (ex: "Atenção:") */
.card p:has(> strong:first-child){
  font-size: clamp(18px, 2.6vw, 28px) !important;  /* ← ajuste aqui p/ maior */
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

/* Dá mais ênfase só ao "Atenção:" */
.card p:has(> strong:first-child) > strong:first-child{
  font-size: 1.12em !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* === Card e Nome do plantonista — maiores === */
.card{
  padding: 24px 20px;              /* antes 16px */
  border-width: 1.5px;
  border-radius: 14px;
}
.card .name{
  font-size: 1.75rem;              /* ~28px */
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.012em;
}
@media (min-width: 768px){
  .card .name{ font-size: 2rem; }  /* ~32px */
}

/* === “Atenção” (call-notice) — maior, legível e cross-browser === */
.card .call-notice{
  display: flex;
  gap: 12px;
  align-items: flex-start;

  margin-top: 14px;
  padding: 14px 16px;              /* ↑ mais respiro */
  border-radius: 12px;

  background: #fff8db;             /* amarelo claro */
  border: 1px solid #f2e5a2;
  color: #6b4e00;

  font-size: 1.125rem;             /* ~18px base 16 */
  line-height: 1.45;
  font-weight: 700;
}
.card .call-notice .ico{
  font-size: 1.2em;                /* ícone acompanha o texto */
  line-height: 1;
  margin-top: 2px;
}
.card .call-notice strong{
  font-weight: 900;
}
.card .call-notice strong:first-child{
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Escalonar em telas maiores */
@media (min-width: 768px){
  .card .call-notice{ font-size: 1.25rem; }   /* ~20px */
}
@media (min-width: 1024px){
  .card .call-notice{ font-size: 1.375rem; }  /* ~22px */
}

/* Nome do plantonista — grande e responsivo (ignora inline com !important) */
.card .name{
  font-size: clamp(28px, 3.8vw, 40px) !important;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.012em;
}

/* Em telas bem pequenas, evita estourar */
@media (max-width: 480px){
  .card .name{ font-size: clamp(22px, 6vw, 28px) !important; }
}


/* ==== OVERRIDES FINAIS — Plantonista e Atenção (cross-browser) ==== */

/* Card: ajuste sutil no padding e correção do border */
.card{
  padding: 22px 18px !important;      /* sutilmente maior */
  border-width: 1.5px !important;     /* corrige 500px acidental */
  border-radius: var(--radius) !important;
}

/* Nome do plantonista: um pouco maior e alinhado */
.card .name{
  font-size: clamp(26px, 3.5vw, 34px) !important;  /* crescimento moderado */
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: -0.012em !important;
  margin-top: 2px !important;
}

/* “Atenção” (seu .call-notice): maior, legível e elegante */
.card .call-notice{
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;

  margin-top: 14px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;

  background: #fff8db !important;     /* amarelo claro */
  border: 1px solid #f2e5a2 !important;
  color: #6b4e00 !important;

  font-size: 1.125rem !important;     /* ~18px */
  line-height: 1.45 !important;
  font-weight: 700 !important;
}
.card .call-notice .ico{              /* ícone acompanha o texto */
  font-size: 1.2em !important;
  line-height: 1 !important;
  margin-top: 2px !important;
}
.card .call-notice strong{
  font-weight: 900 !important;
}
.card .call-notice strong:first-child{
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}

/* Escalonar tipografia em telas maiores (sem exagero) */
@media (min-width: 768px){
  .card .name{ font-size: clamp(28px, 3vw, 36px) !important; }
  .card .call-notice{ font-size: 1.25rem !important; }   /* ~20px */
}
@media (min-width: 1024px){
  .card .call-notice{ font-size: 1.3125rem !important; } /* ~21px sutil */
}

/* Observação: evitamos :has() para não haver diferença no Edge.
   Se houver inline style no .name (ex.: font-size:20px), este bloco já vence. */



   /* ==== Ajustes finais: Nome do plantonista + Atenção ==== */

/* Nome do plantonista — maior na medida certa */
.card .name{
  font-size: clamp(26px, 3.4vw, 34px) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: -0.012em !important;
  margin-top: 2px !important;
}

/* “Atenção” (call-notice) — um pouco maior e legível */
.card .call-notice{
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;

  margin-top: 14px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;

  background: #fff8db !important;       /* amarelo claro */
  border: 1px solid #f2e5a2 !important;
  color: #6b4e00 !important;

  font-size: 1.125rem !important;       /* ~18px */
  line-height: 1.45 !important;
  font-weight: 700 !important;
}
.card .call-notice .ico{
  font-size: 1.2em !important;
  line-height: 1 !important;
  margin-top: 2px !important;
}
.card .call-notice strong{
  font-weight: 900 !important;
}
.card .call-notice strong:first-child{
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}

/* Escalonar de leve em telas maiores */
@media (min-width: 768px){
  .card .name{ font-size: clamp(28px, 3vw, 36px) !important; }
  .card .call-notice{ font-size: 1.25rem !important; }   /* ~20px */
}