batistta/anycoder-d955816f
0
1<!DOCTYPE html>2<html lang="pt-BR">3 4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">7 <title>SINDAUTO - Calendário de Aulas</title>8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">9 <style>10 :root {11 --primary: #96271b;12 --primary-dark: #7a1f15;13 --primary-light: #b83425;14 --primary-bg: rgba(150, 39, 27, 0.08);15 --success: #10b981;16 --warning: #f59e0b;17 --danger: #ef4444;18 --info: #3b82f6;19 --white: #ffffff;20 --gray-50: #f9fafb;21 --gray-100: #f3f4f6;22 --gray-200: #e5e7eb;23 --gray-300: #d1d5db;24 --gray-400: #9ca3af;25 --gray-500: #6b7280;26 --gray-600: #4b5563;27 --gray-700: #374151;28 --gray-800: #1f2937;29 --gray-900: #111827;30 --radius-sm: 0.375rem;31 --radius-md: 0.5rem;32 --radius-lg: 0.75rem;33 --radius-xl: 1rem;34 --radius-2xl: 1.25rem;35 --radius-full: 9999px;36 --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);37 --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);38 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);39 --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);40 --transition-default: all 0.2s ease;41 --safe-top: env(safe-area-inset-top, 0px);42 --safe-bottom: env(safe-area-inset-bottom, 0px);43 }44 45 *, *::before, *::after {46 margin: 0;47 padding: 0;48 box-sizing: border-box;49 }50 51 html {52 -webkit-text-size-adjust: 100%;53 -webkit-tap-highlight-color: transparent;54 scroll-behavior: smooth;55 }56 57 body {58 font-family: 'Segoe UI', 'Roboto', system-ui, -apple-system, sans-serif;59 background: var(--gray-100);60 color: var(--gray-800);61 min-height: 100dvh;62 overflow-x: hidden;63 -webkit-font-smoothing: antialiased;64 }65 66 .app {67 display: flex;68 flex-direction: column;69 min-height: 100dvh;70 }71 72 /* ========== TOP BAR ========== */73 .top-bar {74 position: sticky;75 top: 0;76 z-index: 100;77 background: var(--primary);78 color: var(--white);79 padding: calc(var(--safe-top) + 0.75rem) 1rem 0.75rem;80 display: flex;81 align-items: center;82 justify-content: space-between;83 gap: 0.5rem;84 box-shadow: var(--shadow-lg);85 }86 87 .top-bar-brand {88 display: flex;89 align-items: center;90 gap: 0.5rem;91 }92 93 .top-bar-brand i {94 font-size: 1.25rem;95 }96 97 .top-bar-brand h1 {98 font-size: 1rem;99 font-weight: 700;100 letter-spacing: -0.01em;101 white-space: nowrap;102 }103 104 .top-bar-actions {105 display: flex;106 gap: 0.375rem;107 align-items: center;108 }109 110 .top-bar-btn {111 width: 36px;112 height: 36px;113 border-radius: var(--radius-full);114 border: none;115 background: rgba(255, 255, 255, 0.15);116 color: var(--white);117 cursor: pointer;118 display: flex;119 align-items: center;120 justify-content: center;121 font-size: 0.875rem;122 transition: var(--transition-default);123 -webkit-tap-highlight-color: transparent;124 }125 126 .top-bar-btn:active {127 transform: scale(0.92);128 background: rgba(255, 255, 255, 0.25);129 }130 131 .top-bar-btn.active-filter {132 background: rgba(255, 255, 255, 0.35);133 }134 135 .built-with {136 font-size: 0.6rem;137 opacity: 0.7;138 color: var(--white);139 text-decoration: none;140 white-space: nowrap;141 transition: opacity 0.2s;142 }143 144 .built-with:hover {145 opacity: 1;146 }147 148 /* ========== SEARCH BAR ========== */149 .search-bar {150 background: var(--primary-dark);151 padding: 0;152 max-height: 0;153 overflow: hidden;154 transition: max-height 0.3s ease, padding 0.3s ease;155 }156 157 .search-bar.open {158 max-height: 60px;159 padding: 0.5rem 1rem;160 }161 162 .search-input-wrap {163 display: flex;164 align-items: center;165 gap: 0.5rem;166 background: rgba(255, 255, 255, 0.15);167 border-radius: var(--radius-full);168 padding: 0 0.875rem;169 }170 171 .search-input-wrap i {172 color: rgba(255, 255, 255, 0.6);173 font-size: 0.8rem;174 }175 176 .search-input-wrap input {177 flex: 1;178 background: none;179 border: none;180 outline: none;181 color: var(--white);182 font-size: 0.85rem;183 padding: 0.625rem 0;184 font-family: inherit;185 }186 187 .search-input-wrap input::placeholder {188 color: rgba(255, 255, 255, 0.5);189 }190 191 /* ========== FILTER PANEL ========== */192 .filter-panel {193 background: var(--white);194 border-bottom: 1px solid var(--gray-200);195 padding: 0;196 max-height: 0;197 overflow: hidden;198 transition: max-height 0.3s ease, padding 0.3s ease;199 }200 201 .filter-panel.open {202 max-height: 200px;203 padding: 0.875rem;204 }205 206 .filter-group {207 display: flex;208 flex-wrap: wrap;209 gap: 0.5rem;210 }211 212 .filter-chip {213 display: inline-flex;214 align-items: center;215 gap: 0.375rem;216 padding: 0.375rem 0.75rem;217 border-radius: var(--radius-full);218 border: 1.5px solid var(--gray-200);219 background: var(--white);220 font-size: 0.7rem;221 font-weight: 600;222 cursor: pointer;223 transition: var(--transition-default);224 -webkit-tap-highlight-color: transparent;225 color: var(--gray-600);226 }227 228 .filter-chip:active {229 transform: scale(0.95);230 }231 232 .filter-chip.active {233 border-color: var(--primary);234 background: var(--primary-bg);235 color: var(--primary);236 }237 238 .filter-chip .chip-dot {239 width: 8px;240 height: 8px;241 border-radius: var(--radius-full);242 }243 244 .filter-chip .chip-dot.theory { background: #3b82f6; }245 .filter-chip .chip-dot.practice { background: #10b981; }246 .filter-chip .chip-dot.exam { background: #f59e0b; }247 .filter-chip .chip-dot.canceled { background: #ef4444; }248 249 /* ========== CALENDAR CONTAINER ========== */250 .calendar-container {251 flex: 1;252 display: flex;253 flex-direction: column;254 background: var(--white);255 margin: 0.5rem;256 border-radius: var(--radius-xl);257 box-shadow: var(--shadow-md);258 overflow: hidden;259 margin-bottom: calc(var(--safe-bottom) + 0.5rem);260 }261 262 /* ========== CALENDAR HEADER ========== */263 .calendar-header {264 display: flex;265 flex-direction: column;266 gap: 0.625rem;267 padding: 0.875rem;268 background: var(--white);269 border-bottom: 1px solid var(--gray-200);270 }271 272 .calendar-header-row {273 display: flex;274 align-items: center;275 justify-content: space-between;276 gap: 0.5rem;277 }278 279 .calendar-nav {280 display: flex;281 gap: 0.375rem;282 align-items: center;283 }284 285 .calendar-nav-btn {286 width: 40px;287 height: 40px;288 border-radius: var(--radius-lg);289 border: 1px solid var(--gray-200);290 background: var(--white);291 cursor: pointer;292 transition: var(--transition-default);293 display: flex;294 align-items: center;295 justify-content: center;296 color: var(--gray-700);297 font-size: 0.875rem;298 -webkit-tap-highlight-color: transparent;299 }300 301 .calendar-nav-btn:active {302 transform: scale(0.92);303 background: var(--gray-100);304 }305 306 .calendar-nav-btn.today-btn {307 background: var(--primary-bg);308 border-color: var(--primary);309 color: var(--primary);310 font-size: 0.75rem;311 width: auto;312 padding: 0 0.75rem;313 font-weight: 600;314 }315 316 .calendar-nav-btn.today-btn:active {317 background: var(--primary);318 color: var(--white);319 }320 321 .calendar-title {322 font-size: 1.05rem;323 font-weight: 700;324 color: var(--gray-800);325 text-align: center;326 letter-spacing: -0.02em;327 }328 329 .calendar-view-buttons {330 display: flex;331 gap: 0;332 background: var(--gray-100);333 padding: 0.25rem;334 border-radius: var(--radius-lg);335 width: 100%;336 }337 338 .view-btn {339 flex: 1;340 padding: 0.5rem 0.75rem;341 border: none;342 background: transparent;343 border-radius: var(--radius-md);344 font-size: 0.8rem;345 font-weight: 600;346 cursor: pointer;347 transition: var(--transition-default);348 color: var(--gray-500);349 -webkit-tap-highlight-color: transparent;350 }351 352 .view-btn.active {353 background: var(--primary);354 color: var(--white);355 box-shadow: var(--shadow-sm);356 }357 358 .view-btn:not(.active):active {359 background: var(--gray-200);360 }361 362 /* ========== LEGEND ========== */363 .calendar-legend {364 display: flex;365 gap: 0.75rem;366 padding: 0.625rem 0.875rem;367 background: var(--gray-50);368 border-bottom: 1px solid var(--gray-200);369 overflow-x: auto;370 -webkit-overflow-scrolling: touch;371 scrollbar-width: none;372 }373 374 .calendar-legend::-webkit-scrollbar { display: none; }375 376 .legend-item {377 display: flex;378 align-items: center;379 gap: 0.375rem;380 font-size: 0.65rem;381 color: var(--gray-600);382 white-space: nowrap;383 }384 385 .legend-dot {386 width: 8px;387 height: 8px;388 border-radius: var(--radius-full);389 flex-shrink: 0;390 }391 392 .legend-dot.theory { background: #3b82f6; }393 .legend-dot.practice { background: #10b981; }394 .legend-dot.exam { background: #f59e0b; }395 .legend-dot.canceled { background: #ef4444; }396 397 /* ========== WEEKDAY HEADERS ========== */398 .calendar-weekdays {399 display: grid;400 grid-template-columns: repeat(7, 1fr);401 background: var(--gray-50);402 border-bottom: 1px solid var(--gray-200);403 }404 405 .calendar-weekday {406 text-align: center;407 padding: 0.625rem 0;408 font-size: 0.65rem;409 font-weight: 700;410 color: var(--gray-400);411 text-transform: uppercase;412 letter-spacing: 0.05em;413 }414 415 /* ========== MONTH GRID ========== */416 .calendar-grid {417 display: grid;418 grid-template-columns: repeat(7, 1fr);419 }420 421 .calendar-day {422 min-height: 64px;423 border-right: 1px solid var(--gray-100);424 border-bottom: 1px solid var(--gray-100);425 padding: 0.25rem;426 transition: var(--transition-default);427 cursor: pointer;428 position: relative;429 -webkit-tap-highlight-color: transparent;430 }431 432 .calendar-day:nth-child(7n) { border-right: none; }433 434 .calendar-day:active { background: var(--gray-100); }435 436 .calendar-day.other-month { background: var(--gray-50); }437 .calendar-day.other-month .day-number { color: var(--gray-300); }438 439 .calendar-day.today { background: var(--primary-bg); }440 441 .calendar-day.has-events {442 background: linear-gradient(180deg, var(--white) 0%, rgba(150, 39, 27, 0.04) 100%);443 }444 445 .calendar-day.has-events.today {446 background: linear-gradient(180deg, var(--primary-bg) 0%, rgba(150, 39, 27, 0.12) 100%);447 }448 449 .calendar-day.selected {450 outline: 2px solid var(--primary);451 outline-offset: -2px;452 background: rgba(150, 39, 27, 0.06);453 }454 455 .day-number {456 font-size: 0.75rem;457 font-weight: 500;458 color: var(--gray-700);459 display: flex;460 align-items: center;461 justify-content: center;462 width: 24px;463 height: 24px;464 border-radius: var(--radius-full);465 margin-bottom: 0.125rem;466 }467 468 .calendar-day.today .day-number {469 background: var(--primary);470 color: var(--white);471 font-weight: 700;472 }473 474 .calendar-day.weekend .day-number { color: var(--gray-400); }475 476 .calendar-events {477 display: flex;478 flex-direction: column;479 gap: 0.125rem;480 }481 482 .calendar-event {483 font-size: 0.55rem;484 padding: 0.1rem 0.25rem;485 border-radius: 0.25rem;486 white-space: nowrap;487 overflow: hidden;488 text-overflow: ellipsis;489 cursor: pointer;490 transition: var(--transition-default);491 line-height: 1.4;492 -webkit-tap-highlight-color: transparent;493 }494 495 .calendar-event i { font-size: 0.5rem; }496 497 .event-theory { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }498 .event-practice { background: rgba(16, 185, 129, 0.12); color: #10b981; }499 .event-exam { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }500 .event-canceled { background: rgba(239, 68, 68, 0.12); color: #ef4444; text-decoration: line-through; }501 502 .event-more {503 font-size: 0.5rem;504 color: var(--gray-500);505 font-weight: 600;506 text-align: center;507 padding: 0.1rem;508 }509 510 .event-indicator {511 position: absolute;512 bottom: 3px;513 left: 50%;514 transform: translateX(-50%);515 width: 16px;516 height: 3px;517 background: var(--primary);518 border-radius: var(--radius-full);519 opacity: 0.6;520 }521 522 /* ========== WEEK VIEW ========== */523 .week-view {524 overflow-x: auto;525 -webkit-overflow-scrolling: touch;526 scrollbar-width: none;527 }528 529 .week-view::-webkit-scrollbar { display: none; }530 531 .week-grid {532 min-width: 640px;533 display: grid;534 grid-template-columns: 52px repeat(7, 1fr);535 }536 537 .week-header-cell {538 padding: 0.5rem 0.25rem;539 font-size: 0.6rem;540 font-weight: 700;541 color: var(--gray-500);542 text-align: center;543 background: var(--gray-50);544 border-bottom: 1px solid var(--gray-200);545 border-right: 1px solid var(--gray-100);546 text-transform: uppercase;547 }548 549 .week-header-cell.today-col {550 color: var(--primary);551 background: var(--primary-bg);552 }553 554 .week-header-day {555 font-size: 1rem;556 font-weight: 800;557 color: var(--gray-800);558 display: block;559 }560 561 .week-header-cell.today-col .week-header-day { color: var(--primary); }562 563 .week-hour-label {564 padding: 0.5rem 0.25rem;565 font-size: 0.6rem;566 color: var(--gray-400);567 border-bottom: 1px solid var(--gray-100);568 background: var(--gray-50);569 text-align: right;570 font-weight: 500;571 }572 573 .week-cell {574 border-right: 1px solid var(--gray-100);575 border-bottom: 1px solid var(--gray-100);576 min-height: 52px;577 padding: 0.125rem;578 cursor: pointer;579 transition: var(--transition-default);580 -webkit-tap-highlight-color: transparent;581 }582 583 .week-cell:active { background: var(--gray-50); }584 .week-cell.occupied { background: rgba(16, 185, 129, 0.04); }585 586 .week-cell .calendar-event {587 font-size: 0.55rem;588 padding: 0.15rem 0.25rem;589 margin-bottom: 0.0625rem;590 }591 592 /* ========== DAY VIEW ========== */593 .day-view {594 overflow-y: auto;595 -webkit-overflow-scrolling: touch;596 }597 598 .day-grid {599 display: flex;600 flex-direction: column;601 }602 603 .day-hour-row {604 display: flex;605 border-bottom: 1px solid var(--gray-100);606 min-height: 56px;607 }608 609 .hour-label {610 width: 56px;611 padding: 0.5rem 0.375rem;612 font-size: 0.65rem;613 color: var(--gray-400);614 background: var(--gray-50);615 font-weight: 600;616 display: flex;617 align-items: flex-start;618 justify-content: flex-end;619 border-right: 1px solid var(--gray-100);620 flex-shrink: 0;621 }622 623 .hour-content {624 flex: 1;625 padding: 0.375rem;626 display: flex;627 flex-direction: column;628 gap: 0.25rem;629 }630 631 .hour-content.occupied { background: rgba(16, 185, 129, 0.03); }632 633 .hour-available {634 font-size: 0.6rem;635 color: var(--gray-300);636 text-align: center;637 padding: 0.5rem;638 }639 640 .day-event-card {641 border-radius: var(--radius-sm);642 padding: 0.375rem 0.5rem;643 cursor: pointer;644 transition: var(--transition-default);645 -webkit-tap-highlight-color: transparent;646 }647 648 .day-event-card:active { transform: scale(0.98); }649 650 .day-event-card.theory { background: rgba(59, 130, 246, 0.1); border-left: 3px solid #3b82f6; }651 .day-event-card.practice { background: rgba(16, 185, 129, 0.1); border-left: 3px solid #10b981; }652 .day-event-card.exam { background: rgba(245, 158, 11, 0.1); border-left: 3px solid #f59e0b; }653 .day-event-card.canceled { background: rgba(239, 68, 68, 0.1); border-left: 3px solid #ef4444; }654 655 .day-event-title {656 font-size: 0.7rem;657 font-weight: 600;658 color: var(--gray-800);659 }660 661 .day-event-meta {662 font-size: 0.6rem;663 color: var(--gray-500);664 margin-top: 0.125rem;665 }666 667 /* ========== DAY DETAILS PANEL ========== */668 .day-details-panel {669 background: var(--gray-50);670 border-top: 1px solid var(--gray-200);671 max-height: 0;672 overflow: hidden;673 transition: max-height 0.35s ease, padding 0.35s ease;674 }675 676 .day-details-panel.open {677 max-height: 600px;678 padding: 0.875rem;679 overflow-y: auto;680 }681 682 .day-details-header {683 display: flex;684 justify-content: space-between;685 align-items: center;686 margin-bottom: 0.75rem;687 }688 689 .day-details-title {690 font-size: 0.85rem;691 font-weight: 700;692 color: var(--gray-800);693 }694 695 .day-details-count {696 font-size: 0.65rem;697 color: var(--gray-500);698 font-weight: 400;699 margin-left: 0.375rem;700 }701 702 .close-details {703 width: 32px;704 height: 32px;705 border-radius: var(--radius-full);706 border: none;707 background: var(--gray-200);708 cursor: pointer;709 display: flex;710 align-items: center;711 justify-content: center;712 color: var(--gray-600);713 font-size: 0.875rem;714 transition: var(--transition-default);715 -webkit-tap-highlight-color: transparent;716 }717 718 .close-details:active {719 background: var(--gray-300);720 transform: scale(0.92);721 }722 723 .slots-list {724 display: flex;725 flex-direction: column;726 gap: 0.5rem;727 }728 729 .slot-item {730 background: var(--white);731 border-radius: var(--radius-md);732 padding: 0.75rem;733 border-left: 3px solid var(--primary);734 cursor: pointer;735 transition: var(--transition-default);736 box-shadow: var(--shadow-sm);737 -webkit-tap-highlight-color: transparent;738 }739 740 .slot-item:active {741 transform: scale(0.98);742 background: var(--gray-100);743 }744 745 .slot-item.empty { border-left-color: var(--gray-300); }746 747 .slot-time {748 font-size: 0.75rem;749 font-weight: 700;750 color: var(--primary);751 }752 753 .slot-item.empty .slot-time { color: var(--gray-400); }754 755 .slot-title {756 font-size: 0.7rem;757 font-weight: 600;758 color: var(--gray-800);759 margin-top: 0.25rem;760 }761 762 .slot-item.empty .slot-title { color: var(--gray-400); }763 764 .slot-details {765 font-size: 0.625rem;766 color: var(--gray-500);767 margin-top: 0.375rem;768 display: flex;769 flex-wrap: wrap;770 gap: 0.5rem;771 }772 773 .slot-details i { width: 14px; text-align: center; }774 775 .slot-type-badge {776 display: inline-flex;777 align-items: center;778 gap: 0.25rem;779 font-size: 0.55rem;780 font-weight: 700;781 padding: 0.125rem 0.375rem;782 border-radius: var(--radius-full);783 text-transform: uppercase;784 letter-spacing: 0.03em;785 }786 787 .slot-type-badge.theory { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }788 .slot-type-badge.practice { background: rgba(16, 185, 129, 0.1); color: #10b981; }789 .slot-type-badge.exam { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }790 .slot-type-badge.canceled { background: rgba(239, 68, 68, 0.1); color: #ef4444; }791 792 /* ========== EVENT MODAL ========== */793 .event-modal {794 position: fixed;795 top: 0;796 left: 0;797 right: 0;798 bottom: 0;799 background: rgba(0, 0, 0, 0.5);800 backdrop-filter: blur(4px);801 -webkit-backdrop-filter: blur(4px);802 z-index: 10000;803 display: flex;804 align-items: flex-end;805 justify-content: center;806 opacity: 0;807 visibility: hidden;808 transition: all 0.3s ease;809 }810 811 .event-modal.open {812 opacity: 1;813 visibility: visible;814 }815 816 .event-modal-content {817 background: var(--white);818 width: 100%;819 max-width: 480px;820 border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;821 transform: translateY(100%);822 transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);823 max-height: 85dvh;824 overflow-y: auto;825 -webkit-overflow-scrolling: touch;826 }827 828 .event-modal.open .event-modal-content {829 transform: translateY(0);830 }831 832 .modal-handle {833 display: flex;834 justify-content: center;835 padding: 0.75rem 0 0;836 }837 838 .modal-handle-bar {839 width: 36px;840 height: 4px;841 background: var(--gray-300);842 border-radius: var(--radius-full);843 }844 845 .event-modal-header {846 padding: 0.5rem 1.25rem 0.75rem;847 display: flex;848 justify-content: space-between;849 align-items: flex-start;850 gap: 0.5rem;851 }852 853 .modal-event-type {854 display: inline-flex;855 align-items: center;856 gap: 0.375rem;857 font-size: 0.65rem;858 font-weight: 700;859 padding: 0.25rem 0.625rem;860 border-radius: var(--radius-full);861 text-transform: uppercase;862 letter-spacing: 0.04em;863 margin-bottom: 0.375rem;864 }865 866 .modal-event-type.theory { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }867 .modal-event-type.practice { background: rgba(16, 185, 129, 0.1); color: #10b981; }868 .modal-event-type.exam { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }869 .modal-event-type.canceled { background: rgba(239, 68, 68, 0.1); color: #ef4444; }870 871 .modal-title {872 font-size: 1rem;873 font-weight: 700;874 color: var(--gray-800);875 line-height: 1.3;876 }877 878 .modal-close-btn {879 width: 32px;880 height: 32px;881 border-radius: var(--radius-full);882 border: none;883 background: var(--gray-100);884 cursor: pointer;885 display: flex;886 align-items: center;887 justify-content: center;888 color: var(--gray-500);889 flex-shrink: 0;890 transition: var(--transition-default);891 -webkit-tap-highlight-color: transparent;892 }893 894 .modal-close-btn:active {895 background: var(--gray-200);896 transform: scale(0.92);897 }898 899 .event-modal-body {900 padding: 0 1.25rem 1rem;901 }902 903 .event-detail-item {904 display: flex;905 align-items: flex-start;906 gap: 0.75rem;907 padding: 0.75rem 0;908 border-bottom: 1px solid var(--gray-100);909 }910 911 .event-detail-item:last-child { border-bottom: none; }912 913 .event-detail-icon {914 width: 36px;915 height: 36px;916 border-radius: var(--radius-md);917 background: var(--primary-bg);918 color: var(--primary);919 display: flex;920 align-items: center;921 justify-content: center;922 font-size: 0.8rem;923 flex-shrink: 0;924 }925 926 .event-detail-content {927 flex: 1;928 min-width: 0;929 }930 931 .event-detail-label {932 font-size: 0.625rem;933 color: var(--gray-400);934 text-transform: uppercase;935 letter-spacing: 0.05em;936 font-weight: 600;937 margin-bottom: 0.125rem;938 }939 940 .event-detail-value {941 font-size: 0.85rem;942 color: var(--gray-800);943 font-weight: 500;944 word-break: break-word;945 }946 947 .status-badge {948 display: inline-flex;949 align-items: center;950 gap: 0.25rem;951 font-size: 0.7rem;952 font-weight: 600;953 padding: 0.125rem 0.5rem;954 border-radius: var(--radius-full);955 }956 957 .status-badge.confirmado { background: rgba(16, 185, 129, 0.1); color: var(--success); }958 .status-badge.pendente { background: rgba(245, 158, 11, 0.1); color: var(--warning); }959 .status-badge.cancelado { background: rgba(239, 68, 68, 0.1); color: var(--danger); }960 961 .event-modal-footer {962 padding: 0.75rem 1.25rem;963 padding-bottom: calc(0.75rem + var(--safe-bottom));964 border-top: 1px solid var(--gray-200);965 display: flex;966 gap: 0.625rem;967 background: var(--white);968 position: sticky;969 bottom: 0;970 }971 972 .btn-modal {973 flex: 1;974 padding: 0.75rem;975 border-radius: var(--radius-lg);976 border: none;977 font-weight: 600;978 font-size: 0.85rem;979 cursor: pointer;980 transition: var(--transition-default);981 -webkit-tap-highlight-color: transparent;982 }983 984 .btn-modal:active { transform: scale(0.97); }985 986 .btn-primary { background: var(--primary); color: white; }987 .btn-primary:active { background: var(--primary-dark); }988 989 .btn-secondary { background: var(--gray-100); color: var(--gray-700); }990 .btn-secondary:active { background: var(--gray-200); }991 992 /* ========== TOAST ========== */993 .toast {994 position: fixed;995 bottom: calc(var(--safe-bottom) + 1.5rem);996 left: 50%;997 transform: translateX(-50%) translateY(100px);998 background: var(--gray-800);999 color: var(--white);1000 padding: 0.75rem 1.25rem;1001 border-radius: var(--radius-full);1002 font-size: 0.8rem;1003 font-weight: 500;1004 z-index: 20000;1005 opacity: 0;1006 transition: all 0.35s cubic-bezier(0.32, 0.72, 0, 1);1007 box-shadow: var(--shadow-xl);1008 white-space: nowrap;1009 max-width: 90vw;1010 text-align: center;1011 }1012 1013 .toast.show {1014 opacity: 1;1015 transform: translateX(-50%) translateY(0);1016 }1017 1018 /* ========== EMPTY STATE ========== */1019 .empty-state {1020 text-align: center;1021 padding: 2rem 1rem;1022 color: var(--gray-400);1023 }1024 1025 .empty-state i {1026 font-size: 2rem;1027 margin-bottom: 0.5rem;1028 display: block;1029 }1030 1031 .empty-state p { font-size: 0.8rem; }1032 1033 /* ========== SWIPE HINT ========== */1034 .swipe-hint {1035 text-align: center;1036 padding: 0.5rem;1037 font-size: 0.6rem;1038 color: var(--gray-400);1039 background: var(--gray-50);1040 border-bottom: 1px solid var(--gray-100);1041 }1042 1043 .swipe-hint i { margin-right: 0.25rem; }1044 1045 /* ========== STATS BAR ========== */1046 .stats-bar {1047 display: flex;1048 gap: 0.5rem;1049 padding: 0.625rem 0.875rem;1050 background: var(--gray-50);1051 border-bottom: 1px solid var(--gray-200);1052 overflow-x: auto;1053 scrollbar-width: none;1054 }1055 1056 .stats-bar::-webkit-scrollbar { display: none; }1057 1058 .stat-chip {1059 display: flex;1060 align-items: center;1061 gap: 0.375rem;1062 padding: 0.375rem 0.625rem;1063 background: var(--white);1064 border-radius: var(--radius-full);1065 font-size: 0.65rem;1066 font-weight: 600;1067 color: var(--gray-600);1068 white-space: nowrap;1069 box-shadow: var(--shadow-sm);1070 border: 1px solid var(--gray-200);1071 }1072 1073 .stat-chip .stat-num {1074 font-weight: 800;1075 color: var(--primary);1076 }1077 1078 /* ========== RESPONSIVE ========== */1079 @media (min-width: 640px) {1080 .calendar-container { margin: 1rem; }1081 1082 .calendar-header {1083 flex-direction: row;1084 flex-wrap: wrap;1085 align-items: center;1086 gap: 0.75rem;1087 padding: 1rem;1088 }1089 1090 .calendar-header-row { flex: 0; }1091 .calendar-view-buttons { width: auto; }1092 1093 .calendar-day {1094 min-height: 90px;1095 padding: 0.375rem;1096 }1097 1098 .calendar-event {1099 font-size: 0.6rem;1100 padding: 0.125rem 0.375rem;1101 }1102 1103 .day-number { font-size: 0.8rem; }1104 1105 .event-modal { align-items: center; }1106 1107 .event-modal-content {1108 border-radius: var(--radius-2xl);1109 transform: scale(0.9) translateY(20px);1110 max-height: 80dvh;1111 }1112 1113 .event-modal.open .event-modal-content {1114 transform: scale(1) translateY(0);1115 }1116 }1117 1118 @media (min-width: 768px) {1119 .top-bar { padding: 0.875rem 1.5rem; }1120 .top-bar-brand h1 { font-size: 1.125rem; }1121 1122 .calendar-container {1123 margin: 1.5rem auto;1124 max-width: 900px;1125 }1126 1127 .calendar-day { min-height: 100px; }1128 .calendar-event:hover { opacity: 0.85; }1129 }1130 1131 @media (min-width: 1024px) {1132 .calendar-container { max-width: 1100px; }1133 1134 .calendar-day {1135 min-height: 110px;1136 padding: 0.5rem;1137 }1138 1139 .calendar-event { font-size: 0.65rem; }1140 }1141 1142 /* ========== ANIMATIONS ========== */1143 @keyframes fadeInUp {1144 from { opacity: 0; transform: translateY(8px); }1145 to { opacity: 1; transform: translateY(0); }1146 }1147 1148 .animate-in {1149 animation: fadeInUp 0.3s ease forwards;1150 }1151 1152 @keyframes pulseGlow {1153 0%, 100% { box-shadow: 0 0 0 0 rgba(150, 39, 27, 0.3); }1154 50% { box-shadow: 0 0 0 6px rgba(150, 39, 27, 0); }1155 }1156 1157 .calendar-day.today .day-number {1158 animation: pulseGlow 2.5s ease-in-out infinite;1159 }1160 1161 @media (prefers-reduced-motion: reduce) {1162 *, *::before, *::after {1163 animation-duration: 0.01ms !important;1164 transition-duration: 0.01ms !important;1165 }1166 }1167 </style>1168</head>1169 1170<body>1171 <div class="app">1172 <!-- Top Bar -->1173 <header class="top-bar">1174 <div class="top-bar-brand">1175 <i class="fas fa-calendar-alt"></i>1176 <h1>SINDAUTO</h1>1177 </div>1178 <div class="top-bar-actions">1179 <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a>1180 <button class="top-bar-btn" id="btnSearch" title="Buscar">1181 <i class="fas fa-search"></i>1182 </button>1183 <button class="top-bar-btn" id="btnFilter" title="Filtrar">1184 <i class="fas fa-filter"></i>1185 </button>1186 </div>1187 </header>1188 1189 <!-- Search Bar -->1190 <div class="search-bar" id="searchBar">1191 <div class="search-input-wrap">1192 <i class="fas fa-search"></i>1193 <input type="text" id="searchInput" placeholder="Buscar aulas, instrutores, alunos...">1194 </div>1195 </div>1196 1197 <!-- Filter Panel -->1198 <div class="filter-panel" id="filterPanel">1199 <div class="filter-group">1200 <button class="filter-chip active" data-filter="all">