/* =========================================================
   DODÔ Ponto — responsividade
   ========================================================= */
@media (max-width: 1280px) {
  .hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(330px, .96fr); }
  .punch-stage { width: 224px; height: 224px; }
  .punch-button { width: 172px; height: 172px; }
  .report-grid { grid-template-columns: 305px minmax(0, 1fr); }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-card { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .punch-card { min-height: 360px; }
  .punch-stage { width: 236px; height: 236px; }
  .punch-button { width: 180px; height: 180px; }
  .lower-grid { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: 1fr; }
  .report-builder { position: static; }
  .report-preview { display: grid; grid-template-columns: 1fr 1fr; }
  .report-summary { grid-column: 1 / -1; }
  .report-chart-card { grid-column: 1 / -1; }
  .report-table-card { grid-column: 1 / -1; }
  .team-stats { grid-template-columns: repeat(2, 1fr); }
  .records-summary { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .page-intro { align-items: flex-start; }
  .welcome { grid-template-columns: 1fr; }
  .welcome-copy { padding: 38px; }
  .welcome-visual { min-height: 300px; }
  .welcome-visual::before { width: 340px; height: 340px; }
  .welcome-visual::after { width: 240px; height: 240px; }
  .welcome-mark { width: 220px; }
  .welcome-chip { display: none; }
  .settings-grid { grid-template-columns: 1fr; }
  .company-card { grid-column: auto; }
  .topbar-actions .btn-primary { padding-inline: 13px; }
}

@media (max-width: 720px) {
  .page-intro { flex-direction: column; gap: 12px; }
  .page-intro h2 { font-size: 23px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
  .card-head { gap: 10px; }
  .card-head h2 { font-size: 15.5px; }
  .card-head-actions { gap: 5px; }
  .clock-card { min-height: 318px; padding: 20px; }
  .clock-display { font-size: clamp(48px, 14vw, 68px); }
  .clock-metrics { gap: 7px; padding-top: 16px; }
  .clock-metric strong { font-size: 17px; }
  .clock-metric span { font-size: 6.5px; }
  .clock-metric small { font-size: 7px; }
  .punch-card { padding: 18px 18px 16px; }
  .punch-stage { width: 220px; height: 220px; margin-top: 4px; }
  .punch-button { width: 170px; height: 170px; }
  .punch-button-inner .icon { width: 29px; height: 29px; }
  .punch-button-sub { font-size: 20px; }
  .timeline-card { padding: 18px; }
  .timeline { margin-top: 10px; }
  .timeline::before { top: 15px; }
  .timeline-node { width: 31px; height: 31px; margin-bottom: 7px; }
  .timeline-node .icon { width: 13px; height: 13px; }
  .timeline-step .step-name { font-size: 6.5px; letter-spacing: .02em; }
  .timeline-step .step-time { font-size: 11px; }
  .timeline-note { font-size: 8px; margin: 6px 0 10px; }
  .summary-strip { gap: 5px; padding-top: 12px; }
  .summary-item { padding: 8px; }
  .summary-item span { font-size: 6.5px; }
  .summary-item strong { font-size: 15px; }
  .summary-item small { font-size: 7px; }
  .week-card, .activity-card { padding: 18px; }
  .week-chart { height: 130px; gap: 4px; }
  .week-day { font-size: 7px; }
  .week-value { font-size: 6.5px; }
  .demo-banner { align-items: flex-start; flex-direction: column; gap: 8px; }
  .welcome-copy { padding: 28px 22px; }
  .welcome-copy .brand-logo { width: 170px; margin-bottom: 24px; }
  .welcome h1 { font-size: 37px; }
  .welcome-copy > p { font-size: 11.5px; }
  .welcome-actions { width: 100%; }
  .welcome-actions .btn { flex: 1; }
  .welcome-features { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; padding-top: 16px; }
  .welcome-visual { min-height: 240px; }
  .welcome-mark { width: 180px; }
  .report-summary { grid-template-columns: repeat(2, 1fr); }
  .report-preview { display: flex; }
  .report-chart { height: 140px; }
  .report-stat strong { font-size: 19px; }
  .report-builder { padding: 17px; }
  .table-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .table-totals { gap: 14px; }
  .filter-bar { gap: 8px; padding: 12px; }
  .filter-field { min-width: calc(50% - 4px); flex: 1; }
  .filter-field.grow { min-width: 100%; }
  .filter-bar > .btn { flex: 1; }
  .team-grid { grid-template-columns: 1fr; }
  .team-stats { gap: 7px; }
  .mini-stat, .report-stat { padding: 12px; }
  .mini-stat strong { font-size: 18px; }
  .records-summary { gap: 7px; }
  .settings-card { padding: 17px; }
  .employee-card { padding: 16px; }
  .modal { padding: 20px; border-radius: 20px; }
  .modal-head h2 { font-size: 19px; }
  .form-grid.two, .form-grid.three { grid-template-columns: 1fr; }
  .adjust-summary { gap: 5px; padding: 10px; }
  .adjust-summary strong { font-size: 12px; }
  .modal-actions { gap: 6px; }
  .modal-actions .btn { flex: 1; }
  .modal-actions .spacer { display: none; }
  .modal-actions #adjustDeleteBtn { flex: 1 0 100%; order: 2; }
  .table-footer { flex-direction: column; align-items: flex-start; gap: 4px; }
  .toast-stack { right: 12px; bottom: 88px; left: 12px; width: auto; }
}

@media (max-width: 430px) {
  .topbar-title h1 { font-size: 21px; }
  .employee-picker { padding-right: 26px; }
  .employee-picker select { font-size: 10.5px; }
  .topbar-actions .btn-primary span { display: none; }
  .topbar-actions .btn-primary { width: 40px; min-width: 40px; padding: 0; }
  .clock-display { font-size: 52px; }
  .clock-card { min-height: 300px; }
  .punch-stage { width: 204px; height: 204px; }
  .punch-button { width: 158px; height: 158px; }
  .punch-button-inner .icon { width: 26px; height: 26px; margin-bottom: 5px; }
  .punch-button-sub { font-size: 18px; }
  .punch-button-label { font-size: 7px; }
  .punch-next strong { font-size: 12px; }
  .timeline-step .step-name { font-size: 6px; }
  .timeline-step .step-time { font-size: 10px; }
  .summary-item strong { font-size: 13px; }
  .week-chart { height: 112px; }
  .week-legend { font-size: 7px; gap: 9px; }
  .report-summary { grid-template-columns: 1fr 1fr; }
  .report-stat strong { font-size: 17px; }
  .welcome h1 { font-size: 32px; }
  .welcome-actions { flex-direction: column; }
  .welcome-actions .btn { width: 100%; }
  .page-actions .btn { font-size: 10.5px; padding-inline: 10px; }
  .modal { padding: 17px; }
  .modal-sm .modal-actions .btn { min-width: 0; }
}

@media (max-width: 360px) {
  .clock-display { font-size: 45px; }
  .clock-metrics { grid-template-columns: 1fr 1fr; }
  .clock-metric:last-child { grid-column: 1 / -1; }
  .timeline-step .step-name { font-size: 5.5px; }
  .timeline-step .step-time { font-size: 9px; }
  .summary-strip { grid-template-columns: 1fr; }
  .bottom-nav button { min-width: 48px; padding-inline: 6px; font-size: 7.5px; }
}
