/* Componentes reutilizaveis — glass, buttons, inputs, badges, avatar, cards */

.glass{
  background:rgba(255,255,255,0.05);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--glass-border);border-radius:var(--radius-xl);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,0.06);
  position:relative;overflow:hidden;
}
.glass::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);z-index:1;
}

/* Buttons */
.btn{border:none;border-radius:var(--radius-lg);padding:0.875rem 1.5rem;font-weight:700;font-size:var(--text-base);cursor:pointer;width:100%;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--touch-min)}
.btn:active{transform:scale(0.97)}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;box-shadow:0 4px 20px rgba(99,102,241,0.4)}
.btn-outline{background:transparent;border:1.5px solid var(--primary);color:var(--primary)}
.btn-ghost{background:transparent;color:var(--primary);padding:0.625rem var(--sp-4)}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:0.5rem var(--sp-4);font-size:var(--text-xs);min-height:2.25rem}
.btn-auto{width:auto}

/* Inputs */
.input-group{margin-bottom:var(--sp-4)}
.input-group label{display:block;font-size:0.6875rem;font-weight:700;color:var(--text3);margin-bottom:var(--sp-2);text-transform:uppercase;letter-spacing:0.5px}
.input-wrap{position:relative}
.input-wrap input,.input-wrap textarea,.input-wrap select{width:100%;padding:0.875rem var(--sp-4);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-md);color:var(--text);outline:none;transition:var(--transition);min-height:var(--touch-min)}
.input-wrap input:focus,.input-wrap textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,0.15)}
.input-wrap input::placeholder{color:var(--text3)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--text-xs);font-weight:700;padding:0.1875rem 0.625rem;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:0.5px}
.badge-default{background:rgba(255,255,255,0.06);color:var(--text3)}
.badge-success{background:rgba(34,197,94,0.15);color:var(--success)}
.badge-warning{background:rgba(245,158,11,0.15);color:var(--warning)}
.badge-danger{background:rgba(239,68,68,0.15);color:var(--danger)}
.badge-info{background:rgba(99,102,241,0.15);color:var(--primary-light)}

/* Avatar */
.avatar{display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);font-weight:700;color:#fff;flex-shrink:0;background:linear-gradient(135deg,var(--primary),var(--accent))}
.avatar-sm{width:1.75rem;height:1.75rem;font-size:0.6875rem}
.avatar-md{width:2.5rem;height:2.5rem;font-size:0.9375rem}
.avatar-lg{width:3.5rem;height:3.5rem;font-size:1.375rem}
.avatar-xl{width:5rem;height:5rem;font-size:2rem}
.avatar img{width:100%;height:100%;border-radius:inherit;object-fit:cover;aspect-ratio:1/1}

/* Cards */
.card{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:var(--sp-4);transition:var(--transition)}
.card-clickable{cursor:pointer}
.card-clickable:hover{border-color:var(--primary)}
.card-clickable:active{transform:scale(0.98)}

/* Empty state */
.empty-state{text-align:center;padding:var(--sp-12) var(--sp-6)}
.empty-state .icon{font-size:var(--text-3xl);margin-bottom:var(--sp-4)}
.empty-state h3{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--sp-2)}
.empty-state p{font-size:var(--text-base);color:var(--text2);margin-bottom:var(--sp-6)}

/* Skeleton */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.04) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* FAB */
.fab{position:fixed;bottom:80px;right:20px;width:56px;height:56px;border-radius:28px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;cursor:pointer;box-shadow:0 4px 20px rgba(99,102,241,0.5);transition:var(--transition);z-index:30}
.fab:active{transform:scale(0.92)}

/* Botão "+" no cabeçalho — substitui o FAB flutuante (que colidia com o SOS).
   Vai como 2º filho do .screen-header (flex + space-between o alinha à direita). */
.header-add{flex:none;width:38px;height:38px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(37,99,235,0.35);transition:var(--transition)}
.header-add:hover{filter:brightness(1.08)}
.header-add:active{transform:scale(0.92)}

/* Item de menu que ainda não tem tela/conexão — selo "Em breve".
   Honestidade de UI: o usuário vê o que falta em vez de clicar e nada acontecer. */
.leaf.soon{display:flex;align-items:center;gap:8px;opacity:.6;cursor:default}
.leaf.soon::after{content:'Em breve';font-size:9px;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:999px;background:var(--bg3);color:var(--text3);margin-left:auto;flex:none;white-space:nowrap}
.leaf.soon:hover{background:transparent}

/* Neon bar */
.neon-bar{height:6px;border-radius:3px;background:rgba(255,255,255,0.06);overflow:hidden}
.neon-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#22c55e,#4ade80);box-shadow:0 0 12px rgba(34,197,94,0.5);transition:width 0.5s ease}