diff --git a/src/pages/style/Agendamento.css b/src/pages/style/Agendamento.css index 0487c756..eac69387 100644 --- a/src/pages/style/Agendamento.css +++ b/src/pages/style/Agendamento.css @@ -136,95 +136,17 @@ .nav-buttons { display: flex; gap: 8px; } .nav-buttons button { padding: 8px 12px; border-radius: 6px; border: 1px solid #CBD5E0; background-color: #fff; font-weight: 600; cursor: pointer; transition: all 0.2s; } .nav-buttons button:hover { background-color: #EDF2F7; } +.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } -.calendar-grid { - display: grid; - grid-template-columns: repeat(7, minmax(0, 1fr)); - gap: 2px; - width: 100%; -} - -.day-cell { - aspect-ratio: 1; - min-height: 36px; - position: relative; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - padding: 2px; - border-radius: 4px; - cursor: pointer; - transition: all 0.2s ease; - overflow: hidden; - text-align: center; - border: 1px solid #e2e8f0; -} - -.day-cell > span { - font-size: 14px; - font-weight: 600; - line-height: 1; - width: 100%; - text-align: center; - display: block; -} - -.day-header { - font-size: 11px; - font-weight: 600; - text-align: center; - padding: 6px 0; - color: #64748b; - text-transform: uppercase; - letter-spacing: 0.3px; - white-space: nowrap; -} - -.appointments-indicator { - font-size: 9px; - min-width: 16px; - height: 16px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - background-color: #3b82f6; - color: white; - position: absolute; - bottom: 2px; - right: 2px; -} - -.day-cell.current-month { - background-color: #ffffff; - color: #1e293b; -} - -.day-cell.other-month { - background-color: #f8fafc; - color: #94a3b8; - opacity: 0.7; -} - -.day-cell.today { - background-color: #eff6ff; - color: #1d4ed8; - font-weight: bold; - border: 2px solid #3b82f6; -} - -.day-cell.selected { - background-color: #3b82f6; - color: white; - box-shadow: 0 0 0 2px #93c5fd; - border: 1px solid #3b82f6; -} - -.day-cell:hover:not(.selected) { - background-color: #f1f5f9; - transform: translateY(-1px); -} +.day-header { font-weight: 600; color: #718096; text-align: center; padding: 8px 0; font-size: 0.875rem; } +.day-cell { min-height: 110px; border-radius: 8px; border: 1px solid #E2E8F0; padding: 8px; transition: background-color 0.2s, border-color 0.2s; cursor: pointer; position: relative; } +.day-cell span { font-weight: 600; color: #4A5568; } +.day-cell:hover { background-color: #EDF2F7; border-color: #BEE3F8; } +.day-cell.other-month { background-color: #F7FAFC; } +.day-cell.other-month span { color: #A0AEC0; } +.day-cell.today span { background-color: #4299E1; color: #fff; border-radius: 50%; padding: 2px 6px; display: inline-block; } +.day-cell.selected { background-color: #BEE3F8; border-color: #4299E1; } +.appointments-indicator { background-color: #4299E1; color: white; font-size: 0.7rem; font-weight: bold; border-radius: 50%; width: 18px; height: 18px; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 8px; right: 8px; } .calendar-legend { display: flex; @@ -304,269 +226,17 @@ background-color: #C53030; } -.btn-adicionar-consulta { - background-color: #2a67e2; - color: #fff; - padding: 10px 24px; - border-radius: 8px; - border: none; - font-weight: 600; - font-size: 1rem; - display: flex; - align-items: center; - gap: 8px; - cursor: pointer; - transition: background 0.2s; -} -.btn-adicionar-consulta:hover { - background-color: #1d4ed8; -} -.btn-adicionar-consulta i { - font-size: 1.2em; - vertical-align: middle; -} -.btn-adicionar-consulta i { - font-size: 1.2em; - vertical-align: middle; - display: flex; - align-items: center; - justify-content: center; -} -.container-btns-agenda-fila_esepera { - display: flex; - justify-content: space-between; - align-items: center; - margin: 15px 0 20px; -} - -.tabs-agenda-fila { - display: flex; - gap: 10px; -} - -.btns-gerenciamento-e-consulta { - display: flex; - gap: 10px; - flex-wrap: wrap; -} -.container-btns-agenda-fila_esepera { - display: flex; - justify-content: space-between; - align-items: center; - margin: 0 0 8px; -} - -.calendario-ou-filaespera { - margin-top: 0; - padding-top: 0; -} - -.calendar-wrapper { - margin-top: 0; -} -.calendar-legend { - display: flex; - gap: 8px; - margin-top: 12px; -} - -.calendar-header-filter-container { - margin-bottom: 15px; -} - -.calendar-header-filter-responsive { - display: flex; - flex-direction: column; - gap: 10px; -} - -.filter-row { - width: 100%; -} - -.doctor-suggestions-dropdown { - position: absolute; - top: 100%; - left: 0; - right: 0; - z-index: 1000; - background-color: white; - border: 1px solid #dee2e6; - border-top: none; - border-radius: 0 0 4px 4px; - max-height: 200px; - overflow-y: auto; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); -} - -.doctor-suggestion-item { - width: 100%; - padding: 8px 12px; - border: none; - background: none; - text-align: left; - font-size: 0.9rem; - color: #333; - cursor: pointer; - transition: background-color 0.2s; -} - -.doctor-suggestion-item:hover { - background-color: #f8f9fa; -} - -.calendar-controls-compact { - display: flex; - flex-wrap: wrap; - gap: 10px; - align-items: center; - justify-content: space-between; - padding: 10px; - background-color: #f8f9fa; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.date-display-compact { - display: flex; - flex-direction: column; - align-items: center; - min-width: 60px; -} - -.month-display { - font-size: 1.2rem; - font-weight: 600; - color: #0d6efd; - text-transform: uppercase; -} - -.year-display { - font-size: 0.9rem; - color: #6c757d; -} - -.nav-buttons-compact { - display: flex; - gap: 5px; - align-items: center; -} - -.nav-btn-compact { - padding: 6px 10px; - border: 1px solid #dee2e6; - background-color: white; - border-radius: 4px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.2s; -} - -.nav-btn-compact:hover { - background-color: #f8f9fa; - border-color: #0d6efd; -} - -.today-btn-compact { - min-width: 60px; - font-weight: 500; -} - -.quick-jump-compact { - display: flex; - gap: 5px; - align-items: center; - flex-wrap: wrap; -} - -.form-select-compact { - padding: 6px 10px; - border: 1px solid #dee2e6; - border-radius: 4px; - font-size: 0.85rem; - min-width: 100px; -} - -.jump-btn-compact { - padding: 6px 12px; - background-color: #0d6efd; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - font-size: 0.85rem; - transition: background-color 0.2s; -} - -.jump-btn-compact:hover:not(:disabled) { - background-color: #0b5ed7; -} - -.jump-btn-compact:disabled { - background-color: #6c757d; - cursor: not-allowed; -} - -.calendar-grid-scroll-wrapper { +.table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; - border-radius: 8px; - border: 1px solid #e9ecef; - background: white; - margin-top: 15px; - padding: 0; } -.calendar-grid-scroll-wrapper::-webkit-scrollbar { - height: 8px; -} -.calendar-grid-scroll-wrapper::-webkit-scrollbar-track { - background: #f1f5f9; - border-radius: 4px; -} - -.calendar-grid-scroll-wrapper::-webkit-scrollbar-thumb { - background: #cbd5e1; - border-radius: 4px; -} - -.calendar-grid-scroll-wrapper::-webkit-scrollbar-thumb:hover { - background: #94a3b8; -} - -.calendar-grid-scrollable { - min-width: 700px; - padding: 10px; -} - -.scroll-hint { - text-align: center; - color: #64748b; - font-size: 0.85rem; - margin-top: 8px; - display: flex; - align-items: center; - justify-content: center; - gap: 5px; - opacity: 0.7; -} - -.scroll-hint i { - font-size: 1rem; - animation: bounce-horizontal 2s infinite; -} - -@keyframes bounce-horizontal { - 0%, 100% { - transform: translateX(0); - } - 50% { - transform: translateX(5px); - } +table { + width: 100%; + border-collapse: collapse; + min-width: 600px; } @media (max-width: 768px) { @@ -595,6 +265,12 @@ text-align: center; } + .unidade-selecionarprofissional { + flex-direction: column; + align-items: stretch; + gap: 12px; + } + .calendar-wrapper { flex-direction: column; padding: 16px; @@ -607,198 +283,47 @@ padding-bottom: 16px; } - .unidade-selecionarprofissional { - flex-direction: column; - align-items: stretch; - gap: 12px; - } - - .calendar-controls-compact { - flex-direction: column; - align-items: stretch; - gap: 15px; - } - - .date-display-compact { - flex-direction: row; - justify-content: center; - gap: 8px; - } - - .month-display { - font-size: 1.1rem; - } - - .nav-buttons-compact { - justify-content: center; - } - - .quick-jump-compact { - justify-content: center; - } - - .form-select-compact { - flex: 1; - min-width: auto; - } - - .calendar-main { - padding: 0; - overflow: visible; - } - - .calendar-grid-scrollable { - min-width: 650px; - } - - .calendar-controls-compact { - margin-bottom: 15px; - flex-wrap: nowrap; - overflow-x: auto; - padding-bottom: 5px; - } - - .calendar-controls-compact::-webkit-scrollbar { - height: 4px; - } - - .calendar-controls { - flex-direction: column; - align-items: flex-start; - gap: 8px; - } - - .calendar-grid { - gap: 1px; - } - - .day-cell { - min-height: 32px; - padding: 1px; - } - - .day-header { - padding: 4px 0; - font-size: 10px; - } + .calendar-grid { grid-template-columns: repeat(4, 1fr); } + .calendar-controls { flex-direction: column; align-items: flex-start; gap: 8px; } } - @media (max-width: 576px) { - .calendar-grid-scrollable { - min-width: 600px; + .calendar-grid { grid-template-columns: 1fr; } + .date-indicator h2 { font-size: 1.25rem; } + .legend-item { font-size: 0.75rem; padding: 4px 8px; } + .appointment-item { flex-direction: column; align-items: stretch; gap: 8px; } + .appointment-actions { width: 100%; } + .btn-action { width: 100%; } +} + +@media (max-width: 425px) { + .calendar-main { + overflow-x: auto; } - - .day-cell { - min-height: 30px; - } - - .day-header { - min-width: 30px; - } - .calendar-grid { - grid-template-columns: repeat(7, minmax(0, 1fr)); + min-width: 400px; + grid-template-columns: repeat(7, 1fr); } - - .date-indicator h2 { - font-size: 1.25rem; - } - - .legend-item { - font-size: 0.75rem; - padding: 4px 8px; - } - - .appointment-item { - flex-direction: column; - align-items: stretch; - gap: 8px; - } - - .appointment-actions { - width: 100%; - } - - .btn-action { - width: 100%; - } -} - -@media (max-width: 480px) { - .calendar-header-filter-responsive { - padding: 0 5px; - } - - .doctor-suggestion-item { - padding: 6px 10px; - font-size: 0.85rem; - } - - .nav-btn-compact { - padding: 5px 8px; - } - - .form-select-compact { - font-size: 0.8rem; - padding: 5px 8px; - } - - .jump-btn-compact { - padding: 5px 10px; - font-size: 0.8rem; - } - - .calendar-grid-scrollable { - min-width: 550px; - } - .day-cell { - min-height: 28px; + min-height: 80px; } - .day-header { - min-width: 28px; - font-size: 9px; + + .table-wrapper { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + border: 1px solid #E2E8F0; + border-radius: 8px; + margin-bottom: 16px; } - .day-cell > span { - font-size: 12px; + table { + min-width: 600px; + font-size: 0.875rem; } - .appointments-indicator { - min-width: 14px; - height: 14px; - font-size: 8px; - bottom: 1px; - right: 1px; - } + table th, + table td { + padding: 8px; + white-space: nowrap; } - -@media (max-width: 375px) { - .calendar-grid-scrollable { - min-width: 500px; - } - - .day-cell { - min-height: 26px; - } - - .day-header { - min-width: 26px; - font-size: 8px; - } -} - -@media (max-width: 320px) { - .calendar-grid-scrollable { - min-width: 450px; - } - - .day-cell { - min-height: 24px; - } - - .day-header { - min-width: 24px; - } } \ No newline at end of file