/* 20-layout.css — Header, content, grid, footer, loading, media queries */
.header { background: linear-gradient(135deg, var(--azul-escuro), var(--azul)); color: white; padding: 24px 20px 20px; text-align: center; }
.header h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.header p { font-size: 13px; opacity: 0.75; }
.header-live { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.15); padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-top: 8px; }
.header-live .dot { width: 8px; height: 8px; border-radius: 50%; background: #4CAF50; animation: pulse 2s infinite; }
.header-dt { font-size: 13px; opacity: .65; margin-top: 4px; }
.header-nav { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.header-nav a { color: white; text-decoration: none; font-size: 12px; font-weight: 600; padding: 5px 16px; border-radius: 20px; background: rgba(255,255,255,0.15); transition: background .2s; }
.header-nav a:hover { background: rgba(255,255,255,0.3); }
.header-nav a.active { background: rgba(255,255,255,0.35); }

.content { max-width: 1200px; margin: 20px auto; padding: 0 12px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}

.loading { text-align:center; padding:60px 20px; color:var(--cinza-500); }
.spinner { display:inline-block; width:28px; height:28px; border:3px solid var(--cinza-300); border-top-color:var(--azul); border-radius:50%; animation:spin .7s linear infinite; margin-bottom:8px; }

.footer { text-align:center; padding:18px; font-size:11px; color:var(--cinza-500); border-top:1px solid var(--cinza-300); background:white; margin-top:30px; }
.footer a { color:var(--azul); text-decoration:none; }
.btn-logout { color: white; font-family: var(--font); font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 20px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.35); cursor: pointer; transition: background .2s; }
.btn-logout:hover { background: rgba(220,50,50,0.55); border-color: transparent; }
.mini-spin { display:inline-block; width:10px; height:10px; border:2px solid rgba(255,255,255,0.3); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; }