/* Ajustes comunes para que los portales y las páginas públicas conserven
   jerarquía, lectura y controles cómodos en pantallas pequeñas. */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(.employee-content, .client-content, main, .panel, .employee-card, .report-panel) { min-width: 0; }
:where(img, video, iframe, canvas, svg) { max-width: 100%; }
:where(h1, h2, h3, p, td, th, dd, .employee-topbar, .client-breadcrumb) { overflow-wrap: anywhere; }
:where(input, select, textarea, button) { max-width: 100%; }
:where(.table-scroll, .report-table-scroll, .client-admin-ticket-list, .support-message-list) { max-width: 100%; overscroll-behavior-inline: contain; }
:where(.employee-card-header, .panel-heading, .report-panel-heading, .client-panel-heading) > * { min-width: 0; }

@media (max-width: 1100px) {
  .daily-companies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-admin-metrics, .client-leaderboard-list { min-width: 0; }
  .client-admin-ticket-row { min-width: 0; }
  .client-ticket-filters, .evidence-library-filters, .report-filters { gap: 12px; }
}

@media (max-width: 900px) {
  .employee-shell { font-size: 14px; }
  .employee-sidebar { max-height: min(46vh, 380px); overflow-y: auto; overscroll-behavior: contain; }
  .employee-sidebar nav { min-width: 0; }
  .employee-main { min-width: 0; }
  .employee-content { width: 100%; }
  .employee-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-activity-layout .report-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evidence-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-ticket-layout { grid-template-columns: minmax(0, 1fr); }
  .support-ticket-sidebar { position: static; }
  .contact-requests-grid, .contact-request-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-navigation { max-width: calc(100% - 28px); }
}

@media (max-width: 700px) {
  .employee-sidebar { max-height: none; overflow: visible; margin: 10px; padding: 14px; }
  .employee-sidebar nav { display: flex; flex-wrap: nowrap; gap: 7px; overflow-x: auto; overflow-y: hidden; padding: 2px 1px 8px; scrollbar-width: none; overscroll-behavior-inline: contain; }
  .employee-sidebar nav::-webkit-scrollbar { display: none; }
  .employee-sidebar nav > a, .employee-sidebar nav .sidebar-navigation-group { flex: 0 0 auto; width: auto; }
  .employee-sidebar nav > a { min-height: 42px; white-space: nowrap; }
  .employee-sidebar .sidebar-navigation-group { display: flex; align-items: center; gap: 6px; margin: 0; }
  .employee-sidebar .sidebar-group-heading { display: none; }
  .employee-sidebar .sidebar-navigation-group a { width: auto; }
  .employee-topbar { gap: 10px; min-height: 52px; height: auto; padding: 12px 14px; }
  .employee-content { padding: 20px 12px; }
  .employee-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .employee-heading h1 { font-size: clamp(23px, 6vw, 30px); line-height: 1.2; }
  .employee-heading p, .daily-help, .report-note { font-size: 14px; line-height: 1.55; }
  .employee-metrics, .daily-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .employee-metric, .daily-metrics .employee-card { padding: 16px; }
  .employee-metric strong, .daily-metrics strong { font-size: clamp(20px, 6vw, 27px); overflow-wrap: anywhere; }
  .employee-card, .panel, .report-panel, .report-filter-panel { border-radius: 17px; }
  .employee-card-header { align-items: flex-start; flex-wrap: wrap; padding: 16px; }
  .employee-card-header h2, .daily-panel-heading h2, .report-panel h2 { font-size: 18px; line-height: 1.35; }
  .timer-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }
  .task-fields { min-width: 0; padding: 0 0 16px; border-right: 0; border-bottom: 1px solid #e0e6d7; }
  .timer-controls > strong { font-size: clamp(36px, 12vw, 48px); }
  .timer-controls .actions { flex-wrap: wrap; }
  .employee-card-bottom, .employee-footer { align-items: flex-start; flex-direction: column; gap: 7px; }
  .daily-metrics .employee-card { gap: 8px; }
  .daily-metrics span { line-height: 1.35; }
  .daily-layout { gap: 12px; }
  .daily-layout, .report-activity-layout { grid-template-columns: minmax(0, 1fr); }
  .daily-layout > .employee-card, .daily-companies-panel { padding: 16px; }
  .daily-task { padding: 15px 0; }
  .daily-task dl { gap: 12px 18px; }
  .daily-task footer { align-items: flex-start; flex-direction: column; gap: 7px; }
  .daily-companies { grid-template-columns: minmax(0, 1fr); }
  .daily-employee { padding: 15px; }
  .daily-employee header > strong { margin-left: 0; }
  .weekly-chart { padding: 20px 12px; }
  .weekly-chart-row { grid-template-columns: 58px minmax(30px, 1fr) 60px; gap: 8px; font-size: 12px; }
  .weekly-track { height: 20px; }
  .report-filter-panel, .report-panel { padding: 16px; margin: 14px 0; }
  .report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .report-filters label, .evidence-library-filters label { min-width: 0; }
  .report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .report-metrics article { padding: 14px; }
  .report-metrics strong { font-size: 22px; }
  .report-activity-layout .report-people { grid-template-columns: minmax(0, 1fr); }
  .report-day { grid-template-columns: 66px minmax(24px, 1fr) 65px; gap: 7px; padding-inline: 2px; }
  .report-day b, .report-day > span:last-child { font-size: 12px; }
  .report-table { min-width: 760px; }
  .report-table-scroll, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .evidence-library-filters { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
  .evidence-library-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .evidence-card-content { gap: 10px; padding: 16px; }
  .evidence-detail dl { grid-template-columns: minmax(0, 1fr); }
  .evidence-detail dd { margin: 0 0 10px; }
  .support-conversation-panel, .support-ticket-sidebar { min-width: 0; padding: 16px; }
  .support-reply-footer { align-items: stretch; flex-direction: column; }
  .support-reply-footer .button { width: 100%; }
  .client-admin-metrics, .client-support-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-admin-metric, .client-support-metrics article { min-width: 0; padding: 14px; }
  .client-ticket-filters { grid-template-columns: minmax(0, 1fr); }
  .client-admin-ticket-row { align-items: flex-start; flex-wrap: wrap; }
  .client-admin-ticket-main { flex: 1 1 calc(100% - 70px); min-width: 0; }
  .client-admin-ticket-row > .button { margin-left: 48px; }
  .client-leaderboard-row { grid-template-columns: 32px 36px minmax(0, 1fr) auto; gap: 8px; }
  .client-leaderboard-row .client-rank-meter { grid-column: 3 / -1; width: 100%; }
  .contact-requests-grid, .contact-request-grid { grid-template-columns: minmax(0, 1fr); }
  .inbox-chat.inbox-drawer { max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .site-navigation { max-width: calc(100% - 20px); padding: 10px 12px; }
  .navigation-inner { gap: 8px; }
  .header-actions { gap: 8px; }
  .header-actions .button, .header-actions .text-button { min-height: 40px; }
  .hero h1 { font-size: clamp(35px, 10vw, 48px); line-height: 1.08; }
  .hero-copy p, .section-heading > p, .page-intro > p { font-size: 15px; line-height: 1.65; }
  .button, button, input, select { min-height: 42px; }
  input, select, textarea { font-size: 16px; }
}

@media (max-width: 440px) {
  .employee-content { padding-inline: 8px; }
  .employee-sidebar { margin: 7px; padding: 12px; }
  .employee-sidebar nav > a { padding-inline: 10px; font-size: 11px; }
  .employee-metrics, .daily-metrics { gap: 8px; }
  .employee-metric, .daily-metrics .employee-card { padding: 12px; }
  .report-filters, .report-metrics, .client-admin-metrics, .client-support-metrics { grid-template-columns: minmax(0, 1fr); }
  .client-admin-metric, .client-support-metrics article { min-height: auto; }
  .report-day-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); padding: 15px; }
  .floating-timer { right: 10px; bottom: 10px; max-width: calc(100vw - 20px); }
  .client-pagination { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .responsive-motion, .responsive-motion * { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}