:root{
  --cor-primaria:#8D2C30;
  --cor-primaria-escura:#6e2124;
  --cor-primaria-clara:#a8383d;
  --cor-destaque:#FFF212;
  --cor-destaque-escura:#e6da00;
  --bg:#faf7f2;
  --bg-card:#ffffff;
  --texto:#211416;
  --texto-suave:#7a6a6c;
  --borda:#eee1e0;
  --sombra:0 8px 24px rgba(141,44,48,.10);
  --sombra-forte:0 16px 40px rgba(141,44,48,.20);
  --radius:18px;
  --radius-sm:12px;
  font-synthesis:none;
}
*{box-sizing:border-box}
svg{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.w-4{width:16px!important;height:16px!important}
.w-5{width:20px!important;height:20px!important}
.w-8{width:32px!important;height:32px!important}
.h-4{height:16px!important}
.h-5{height:20px!important}
.h-8{height:32px!important}
html,body{margin:0;padding:0}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:
    radial-gradient(circle at 10% -10%, rgba(141,44,48,.08), transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(255,242,18,.10), transparent 35%),
    var(--bg);
  color:var(--texto);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
::selection{background:var(--cor-destaque);color:var(--texto)}

.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:999px;border:none;font-weight:600;font-size:15px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-primario{background:linear-gradient(135deg,var(--cor-primaria),var(--cor-primaria-escura));color:#fff;box-shadow:var(--sombra)}
.btn-primario:hover{box-shadow:var(--sombra-forte);transform:translateY(-1px)}
.btn-destaque{background:linear-gradient(135deg,var(--cor-destaque),#ffe75e);color:var(--texto);box-shadow:0 8px 24px rgba(255,242,18,.35)}
.btn-destaque:hover{transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--cor-primaria);border:1.5px solid var(--borda)}
.btn-ghost:hover{border-color:var(--cor-primaria)}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-block{width:100%}
.btn-icon{width:40px;height:40px;padding:0;border-radius:50%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}

/* ---------- Loading ---------- */
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.spinner-dark{border:2.5px solid rgba(141,44,48,.2);border-top-color:var(--cor-primaria)}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%);background-size:400% 100%;animation:skel 1.4s ease infinite;border-radius:var(--radius-sm)}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}

.page-loader{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .3s ease}
.page-loader.oculto{opacity:0;pointer-events:none}
.page-loader .logo-pulse{width:120px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.75}}

/* ---------- Toast / modal (substitui alert/confirm nativos) ---------- */
.toast-wrap{
  position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0));z-index:10000;
  display:flex;flex-direction:column-reverse;gap:10px;align-items:center;pointer-events:none;
}
@media(min-width:640px){.toast-wrap{left:0;right:0;max-width:380px;margin:0 auto}}
.toast{pointer-events:auto;background:#fff;border-radius:var(--radius-sm);box-shadow:var(--sombra-forte);padding:14px 16px;display:flex;gap:10px;align-items:flex-start;width:100%;max-width:380px;border-left:4px solid var(--cor-primaria);animation:toastIn .3s cubic-bezier(.2,.9,.3,1.1)}
.toast.saindo{animation:toastOut .25s ease forwards}
.toast.sucesso{border-color:#1e9e5a}
.toast.erro{border-color:#d13438}
.toast.aviso{border-color:#e0a800}
.toast svg{flex:none;width:20px;height:20px}
.toast .msg{font-size:14px;line-height:1.4}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.97)}}

.modal-overlay{position:fixed;inset:0;background:rgba(33,20,22,.55);backdrop-filter:blur(3px);z-index:9998;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease}
@media(min-width:640px){.modal-overlay{align-items:center}}
.modal-overlay.aberto{opacity:1;pointer-events:auto}
.modal{background:#fff;border-radius:22px 22px 0 0;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:24px;transform:translateY(30px);transition:transform .25s cubic-bezier(.2,.9,.3,1.2);box-shadow:0 -10px 40px rgba(0,0,0,.2)}
.modal.modal-largo{max-width:760px}
@media(min-width:640px){.modal{border-radius:22px;transform:translateY(20px) scale(.97)}}
.modal-overlay.aberto .modal{transform:none}
.modal h3{margin:0 0 6px;font-size:19px}
.modal p{color:var(--texto-suave);font-size:14px;margin:0 0 18px}
.modal .modal-acoes{display:flex;gap:10px;margin-top:20px}
.modal .modal-acoes .btn{flex:1}

/* ---------- Cards ---------- */
.card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--sombra);padding:18px}

/* ---------- Forms ---------- */
.campo{margin-bottom:18px}
.campo label{
  display:block;font-size:12.5px;font-weight:700;margin-bottom:7px;color:var(--texto-suave);
  text-transform:uppercase;letter-spacing:.5px;
}
.campo input,.campo select,.campo textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--borda);
  background:#fff;font-size:15px;color:var(--texto);font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
  box-shadow:inset 0 1px 2px rgba(33,20,22,.03);
}
.campo input::placeholder,.campo textarea::placeholder{color:#b9adae}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:#ddc9c7}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--cor-primaria);box-shadow:0 0 0 4px rgba(141,44,48,.10)}
.campo input:disabled,.campo select:disabled{background:#f3efed;color:var(--texto-suave);cursor:not-allowed}
.campo .erro-campo{color:#d13438;font-size:12px;margin-top:4px}
.linha-campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.linha-campos{grid-template-columns:1fr}}

/* Select: seta customizada, sem aparência nativa datada */
.campo select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6a6c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}

/* Datas: mesma altura/estilo dos demais campos, ícone tingido na cor da marca */
.campo input[type="date"],input[type="date"]{
  padding:11px 14px;font-family:inherit;color-scheme:light;cursor:pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.55;filter:invert(15%) sepia(50%) saturate(2000%) hue-rotate(320deg) brightness(.9);
  transition:opacity .15s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1}

/* Color picker: mantém o quadrado nativo, só ajusta bordas/altura */
.campo input[type="color"]{
  padding:4px;height:44px;width:100%;cursor:pointer;box-shadow:none;
}

/* Toggle switch: todo checkbox do sistema vira um switch moderno (nada de checkbox nativo) */
label:has(> input[type="checkbox"]){display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--texto);cursor:pointer;user-select:none}
input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:42px;height:24px;min-width:42px;border-radius:999px;background:#e4d9d8;position:relative;
  border:1.5px solid var(--borda);cursor:pointer;flex:none;margin:0;
  transition:background .2s ease,border-color .2s ease;vertical-align:middle;
}
input[type="checkbox"]::before{
  content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.3,1.3,.5,1);
}
input[type="checkbox"]:checked{background:linear-gradient(135deg,var(--cor-primaria),var(--cor-primaria-escura));border-color:transparent}
input[type="checkbox"]:checked::before{transform:translateX(18px)}
input[type="checkbox"]:focus-visible{outline:2px solid var(--cor-primaria);outline-offset:2px}
input[type="checkbox"]:disabled{opacity:.5;cursor:not-allowed}

.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}
.badge-recebido{background:#e7edff;color:#3b5bdb}
.badge-em_atendimento{background:#fff4d6;color:#a8710a}
.badge-atendido{background:#e2f6e8;color:#1e9e5a}
.badge-finalizado{background:#e6e6e6;color:#4a4a4a}
.badge-cancelado{background:#fde4e4;color:#d13438}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--borda);border-radius:8px}