web/src/assets/main.css

Rama main · réplica de lectura del repositorio original.

/* ActaLog Main Styles */

/* Reset and base styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent horizontal overflow at the root level */
  overflow-x: hidden;
  /* Use dvh for proper mobile viewport handling */
  height: 100%;
}

body {
  /* Use 100% height instead of 100vh to work better with mobile browsers */
  min-height: 100%;
  height: 100%;
  color: var(--v-theme-on-background);
  background-color: var(--v-theme-background);
  transition: color 0.3s, background-color 0.3s;
  line-height: 1.6;
  /* Prevent horizontal overflow */
  overflow-x: hidden;
  /* Handle safe areas for notched devices */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Typography */
h1 { font-size: 2rem; font-weight: 500; }
h2 { font-size: 1.75rem; font-weight: 500; }
h3 { font-size: 1.5rem; font-weight: 500; }
h4 { font-size: 1.25rem; font-weight: 500; }
h5 { font-size: 1.125rem; font-weight: 500; }
h6 { font-size: 1rem; font-weight: 500; }

/* Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }

/* Custom card styling - removed borders for cleaner modern look */
/* Cards now rely on elevation/shadow and background contrast */

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(var(--v-theme-on-surface), 0.05);
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--v-theme-on-surface), 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--v-theme-on-surface), 0.5);
}

/* Bottom navigation spacing fix for mobile */
.v-bottom-navigation {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================
   Mobile PWA View Wrapper Styles
   ============================================ */

/* Standard view wrapper - use this class on the root div of each view */
.mobile-view-wrapper {
  background: rgb(var(--v-theme-background));
  min-height: 100%;
  /* Let the wrapper fill available space but not overflow */
  max-width: 100vw;
  overflow-x: hidden;
}

/* Content container inside view wrapper */
.mobile-content {
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  max-width: 100%;
  overflow-x: hidden;
}

/* Prevent text overflow globally */
.v-card,
.v-list-item,
.v-chip,
.text-body-1,
.text-body-2,
.text-caption,
.text-subtitle-1,
.text-subtitle-2 {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Handle pre-formatted text that might overflow */
pre,
code,
.pre-wrap {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow-x: auto;
}

/* ============================================
   Mobile Data Table Fixes
   ============================================ */

/* Make data tables scrollable on mobile */
.v-data-table {
  max-width: 100%;
}

.v-data-table__wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ensure table cells don't force width */
.v-data-table th,
.v-data-table td {
  white-space: nowrap;
}

/* Allow text wrapping in specific columns */
.v-data-table .wrap-text {
  white-space: normal;
  word-break: break-word;
}

/* Mobile-friendly table on small screens */
@media (max-width: 600px) {
  /* Reduce table padding on mobile */
  .v-data-table th,
  .v-data-table td {
    padding: 8px 12px !important;
  }

  /* Make v-container use less padding on mobile */
  .v-container {
    padding: 12px !important;
  }

  /* Reduce card padding on mobile */
  .v-card-text {
    padding: 12px !important;
  }

  .v-card-title {
    padding: 12px !important;
    font-size: 1rem !important;
  }

  /* Stack buttons on mobile if needed */
  .mobile-stack-buttons {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .mobile-stack-buttons > * {
    width: 100% !important;
    min-width: unset !important;
  }
}

/* Fade transition */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* Loading spinner */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

/* ============================================
   Accessibility Fixes
   ============================================ */

/* Fix color contrast for Vuetify form labels (WCAG 2.1 AA requires 4.5:1)
   Default Vuetify label colors have insufficient contrast, #666666 has 5.74:1 */

/* Override Vuetify's label opacity to ensure full contrast */
.v-label {
  opacity: 1 !important;
  color: #666666 !important;
}

.v-field-label {
  opacity: 1 !important;
  color: #666666 !important;
}

/* Target all field variants with high specificity */
.v-application .v-field .v-field-label,
.v-application .v-input .v-label,
.v-theme--light .v-field-label,
.v-theme--light .v-label {
  opacity: 1 !important;
  color: #666666 !important;
}

/* Dark theme labels also need sufficient contrast */
.v-theme--dark .v-field-label,
.v-theme--dark .v-label {
  opacity: 1 !important;
  color: #b3b3b3 !important;
}

/* Ensure placeholder text also has sufficient contrast */
.v-field input::placeholder,
.v-field textarea::placeholder {
  color: #666666 !important;
  opacity: 1;
}

/* Fix touch target size for icon buttons (WCAG 2.2 requires 24x24px minimum)
   Password toggle and other appended icons */
.v-field__append-inner .v-icon,
.v-field__prepend-inner .v-icon,
.v-input__append .v-icon,
.v-input__prepend .v-icon {
  min-width: 24px !important;
  min-height: 24px !important;
  font-size: 24px !important;
}

/* Ensure clickable icons have adequate touch area */
.v-field__append-inner,
.v-field__prepend-inner {
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}