/* =================== FICHAFIT MOBILE.CSS - PARTE 1 DE 3 =================== */
/* Otimizações específicas para dispositivos móveis */

/* =================== VARIÁVEIS MOBILE =================== */
@media (max-width: 768px) {
    :root {
        /* Ajustes de layout mobile */
        --sidebar-mobile-width: 100vw;
        --header-mobile-height: 56px;
        --container-padding-mobile: 12px;
        --border-radius-mobile: 8px;
        --tap-target-size: 44px;
        
        /* Fontes otimizadas para mobile */
        --font-size-mobile-xs: 0.7rem;
        --font-size-mobile-sm: 0.8rem;
        --font-size-mobile-base: 0.9rem;
        --font-size-mobile-lg: 1rem;
        --font-size-mobile-xl: 1.1rem;
        
        /* Espaçamentos mobile */
        --spacing-mobile-xs: 4px;
        --spacing-mobile-sm: 8px;
        --spacing-mobile-md: 12px;
        --spacing-mobile-lg: 16px;
        --spacing-mobile-xl: 20px;
    }
}

/* =================== LAYOUT MOBILE OTIMIZADO =================== */
@media (max-width: 768px) {
    /* Prevenir zoom indesejado */
    input, select, textarea {
        font-size: 16px !important;
        -webkit-appearance: none;
        border-radius: var(--border-radius-mobile);
    }
    
    /* Melhorar área de toque */
    button, .btn, a[role="button"] {
        min-height: var(--tap-target-size);
        min-width: var(--tap-target-size);
        padding: var(--spacing-mobile-md) var(--spacing-mobile-lg);
    }
    
    /* Layout responsivo para mobile */
    .main-content {
        padding-top: 0;
        margin-left: 0 !important;
    }
    
    .page-content {
        padding: var(--spacing-mobile-md);
    }
    
    /* Header mobile otimizado */
    .main-header {
        height: var(--header-mobile-height);
        padding: 0 var(--spacing-mobile-md);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1001;
        background: var(--branco);
        border-bottom: 1px solid var(--cinza-claro);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .page-title {
        font-size: var(--font-size-mobile-lg);
        font-weight: 600;
        color: var(--verde-esmeralda);
    }
    
    /* Ajustar conteúdo abaixo do header fixo */
    .page-content {
        margin-top: var(--header-mobile-height);
        padding-top: var(--spacing-mobile-lg);
    }
}

/* =================== SIDEBAR MOBILE APRIMORADA =================== */
@media (max-width: 768px) {
    .sidebar {
        width: var(--sidebar-mobile-width);
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 9999;
        background: var(--gradient-sidebar);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    
    .sidebar-header {
        padding: var(--spacing-mobile-lg);
        min-height: 70px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        position: sticky;
        top: 0;
        background: var(--gradient-sidebar);
        z-index: 1;
    }
    
    .sidebar-nav {
        padding: var(--spacing-mobile-md) 0;
    }
    
    .sidebar-nav a {
        padding: var(--spacing-mobile-lg);
        margin: 0 var(--spacing-mobile-md);
        border-radius: var(--border-radius-mobile);
        min-height: var(--tap-target-size);
        font-size: var(--font-size-mobile-base);
        display: flex;
        align-items: center;
        gap: var(--spacing-mobile-md);
    }
    
    .sidebar-nav i {
        font-size: 1.1rem;
        width: 20px;
        text-align: center;
    }
    
    /* Overlay com blur para mobile */
    .sidebar-overlay {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        background: rgba(0, 0, 0, 0.6);
    }
    
    /* Menu toggle mobile */
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--tap-target-size);
        height: var(--tap-target-size);
        border-radius: var(--border-radius-mobile);
        background: none;
        border: none;
        color: var(--verde-esmeralda);
        font-size: 1.2rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:active {
        background: rgba(1, 128, 98, 0.1);
        color: var(--verde-esmeralda-dark);
    }
}

/* =================== CARDS MOBILE APRIMORADOS =================== */
@media (max-width: 768px) {
    /* Welcome header mobile */
    .welcome-header {
        padding: var(--spacing-mobile-lg);
        margin-bottom: var(--spacing-mobile-lg);
        border-radius: var(--border-radius-mobile);
    }
    
    .welcome-content {
        flex-direction: column;
        gap: var(--spacing-mobile-md);
        text-align: center;
    }
    
    .welcome-text h1 {
        font-size: var(--font-size-mobile-xl);
        margin-bottom: var(--spacing-mobile-sm);
    }
    
    .welcome-subtitle {
        font-size: var(--font-size-mobile-base);
    }
    
    .welcome-stats {
        flex-direction: row;
        justify-content: center;
        gap: var(--spacing-mobile-lg);
    }
    
    .quick-stat {
        padding: var(--spacing-mobile-sm) var(--spacing-mobile-md);
        border-radius: var(--border-radius-mobile);
        font-size: var(--font-size-mobile-sm);
    }
    
    /* Grid de estatísticas mobile */
    .stats-grid-enhanced {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-mobile-md);
        margin-bottom: var(--spacing-mobile-lg);
    }
    
    .stat-card-enhanced {
        padding: var(--spacing-mobile-lg);
        border-radius: var(--border-radius-mobile);
    }
    
    .stat-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-mobile-sm);
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        margin: 0 auto;
        font-size: 1.3rem;
    }
    
    .stat-number {
        font-size: 1.8rem;
        line-height: 1.1;
    }
    
    .stat-label {
        font-size: var(--font-size-mobile-xs);
        text-align: center;
    }
    
    .stat-sublabel {
        font-size: var(--font-size-mobile-xs);
        text-align: center;
    }
    
    /* Grid principal mobile */
    .main-cards-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-mobile-lg);
        margin-bottom: var(--spacing-mobile-lg);
    }
    
    .uniform-card {
        border-radius: var(--border-radius-mobile);
        padding: var(--spacing-mobile-lg);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        min-height: auto;
    }
    
    .card-header {
        margin-bottom: var(--spacing-mobile-md);
        padding-bottom: var(--spacing-mobile-md);
    }
    
    .card-title {
        font-size: var(--font-size-mobile-lg);
        margin-bottom: 0;
    }
}

/* =================== TREINO DO DIA MOBILE =================== */
@media (max-width: 768px) {
    .workout-header {
        flex-direction: column;
        gap: var(--spacing-mobile-md);
        align-items: flex-start;
    }
    
    .workout-title h3 {
        font-size: var(--font-size-mobile-lg);
        margin-bottom: var(--spacing-mobile-sm);
    }
    
    .workout-progress-header {
        align-self: stretch;
        justify-content: center;
        background: rgba(80, 200, 120, 0.05);
        padding: var(--spacing-mobile-md);
        border-radius: var(--border-radius-mobile);
    }
    
    .progress-circular {
        width: 45px;
        height: 45px;
    }
    
    .progress-text {
        font-size: var(--font-size-mobile-xs);
    }
    
    .progress-details {
        text-align: center;
    }
    
    .progress-count {
        font-size: var(--font-size-mobile-sm);
    }
    
    .progress-details small {
        font-size: var(--font-size-mobile-xs);
    }
    
    /* Exercícios compactos mobile */
    .exercicios-grid-compact {
        gap: var(--spacing-mobile-sm);
    }
    
    .exercicio-card-compact {
        border-radius: var(--border-radius-mobile);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    }
    
    .exercicio-header-compact {
        padding: var(--spacing-mobile-md);
        gap: var(--spacing-mobile-md);
    }
    
    .exercicio-number-compact {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-mobile-sm);
    }
    
    .exercicio-info-compact h5 {
        font-size: var(--font-size-mobile-sm);
        margin-bottom: 2px;
        line-height: 1.2;
    }
    
    .exercicio-info-compact span {
        font-size: var(--font-size-mobile-xs);
    }
    
    .btn-complete-compact {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-mobile-sm);
    }
    
    .workout-progress-compact {
        margin-top: var(--spacing-mobile-md);
        padding-top: var(--spacing-mobile-md);
    }
    
    .progress-header-compact {
        font-size: var(--font-size-mobile-sm);
        margin-bottom: var(--spacing-mobile-sm);
    }
    
    .progress-bar-modern {
        height: 6px;
        border-radius: 3px;
    }
}

/* =================== CORREÇÃO ESPECÍFICA PARA FICHAS MOBILE =================== */
@media (max-width: 768px) {
    /* =================== CORREÇÃO PARA FICHAS =================== */
    
    /* Correção para page-header da ficha */
    .page-header {
        padding: var(--spacing-mobile-md) !important;
        margin-bottom: var(--spacing-mobile-md) !important;
        overflow: hidden !important;
        word-wrap: break-word !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-mobile-sm) !important;
    }
    
    .page-header h1 {
        font-size: var(--font-size-mobile-lg) !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        margin: 0 !important;
        max-width: 100% !important;
        color: white !important;
    }
    
    .header-actions {
        flex-direction: column !important;
        gap: var(--spacing-mobile-xs) !important;
        width: 100% !important;
        margin-top: 0 !important;
    }
    
    .header-actions .btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: var(--spacing-mobile-sm) var(--spacing-mobile-md) !important;
        font-size: var(--font-size-mobile-sm) !important;
        min-height: 40px !important;
    }
    
    /* Correção para fichas-grid */
    .fichas-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-mobile-sm) !important;
        padding: 0 !important;
        margin-bottom: var(--spacing-mobile-md) !important;
    }
    
    /* Correção para ficha-card */
    .ficha-card {
        padding: var(--spacing-mobile-md) !important;
        margin: 0 !important;
        border-radius: var(--border-radius-mobile) !important;
        overflow: hidden !important;
        word-wrap: break-word !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .ficha-header {
        padding: var(--spacing-mobile-md) !important;
        margin: calc(-1 * var(--spacing-mobile-md)) calc(-1 * var(--spacing-mobile-md)) var(--spacing-mobile-xs) calc(-1 * var(--spacing-mobile-md)) !important;
        border-bottom: none !important;
    }
    
    .ficha-title {
        font-size: var(--font-size-mobile-base) !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        margin-bottom: var(--spacing-mobile-xs) !important;
        color: white !important;
    }
    
    /* CORREÇÃO PRINCIPAL PARA O PROFESSOR */
    .ficha-professor {
        display: flex !important;
        align-items: center !important;
        gap: var(--spacing-mobile-xs) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: var(--font-size-mobile-xs) !important;
        margin-top: var(--spacing-mobile-xs) !important;
        margin-bottom: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-weight: 400 !important;
    }
    
    .ficha-professor i {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: var(--font-size-mobile-xs) !important;
        display: inline-block !important;
    }
}
/* =================== FICHAFIT MOBILE.CSS - PARTE 2 DE 3 =================== */
/* Continuação da Parte 1 - Fichas e componentes específicos */

@media (max-width: 768px) {
    /* =================== CONTINUAÇÃO FICHAS MOBILE =================== */
    
    .ficha-body {
        padding: var(--spacing-mobile-xs) 0 0 0 !important;
    }
    
    .ficha-info {
        margin-bottom: var(--spacing-mobile-sm) !important;
    }
    
    .info-row {
        padding: var(--spacing-mobile-xs) 0 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        margin-bottom: var(--spacing-mobile-xs) !important;
    }
    
    .info-row:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }
    
    .info-label,
    .info-value {
        font-size: var(--font-size-mobile-xs) !important;
    }
    
    .info-label {
        font-weight: 600 !important;
        color: var(--cinza-chumbo) !important;
    }
    
    .info-value {
        font-weight: 500 !important;
        color: var(--preto) !important;
    }
    
    .dias-badges {
        gap: var(--spacing-mobile-xs) !important;
        margin-top: var(--spacing-mobile-xs) !important;
        flex-wrap: wrap !important;
        margin-bottom: var(--spacing-mobile-xs) !important;
    }
    
    .dia-badge {
        padding: 2px var(--spacing-mobile-xs) !important;
        font-size: var(--font-size-mobile-xs) !important;
        border-radius: 10px !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .ficha-actions {
        flex-direction: column !important;
        gap: var(--spacing-mobile-xs) !important;
        margin-top: var(--spacing-mobile-sm) !important;
    }
    
    .ficha-actions .btn {
        width: 100% !important;
        padding: var(--spacing-mobile-sm) !important;
        font-size: var(--font-size-mobile-xs) !important;
        text-align: center !important;
        justify-content: center !important;
        min-height: 36px !important;
    }
    
    /* =================== CORREÇÃO PARA VISUALIZAÇÃO DA FICHA =================== */
    
    .ficha-view {
        border-radius: var(--border-radius-mobile) !important;
        overflow: hidden !important;
        margin: 0 !important;
    }
    
    .ficha-view-header {
        padding: var(--spacing-mobile-md) !important;
        word-wrap: break-word !important;
        overflow: hidden !important;
    }
    
    .ficha-view-title {
        font-size: var(--font-size-mobile-lg) !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        margin-bottom: var(--spacing-mobile-xs) !important;
        color: white !important;
    }
    
    /* CORREÇÃO ESPECÍFICA PARA PROFESSOR NA VIEW */
    .ficha-view-header .ficha-professor {
        display: flex !important;
        align-items: center !important;
        gap: var(--spacing-mobile-xs) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: var(--font-size-mobile-xs) !important;
        margin-top: var(--spacing-mobile-xs) !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-weight: 400 !important;
    }
    
    .ficha-view-meta {
        flex-direction: column !important;
        gap: var(--spacing-mobile-xs) !important;
        margin-top: var(--spacing-mobile-sm) !important;
    }
    
    .meta-item {
        font-size: var(--font-size-mobile-xs) !important;
        gap: var(--spacing-mobile-xs) !important;
    }
    
    /* =================== CORREÇÃO PARA EXERCÍCIOS =================== */
    
    .exercicios-section {
        padding: var(--spacing-mobile-md) !important;
    }
    
    .section-title {
        font-size: var(--font-size-mobile-base) !important;
        margin-bottom: var(--spacing-mobile-md) !important;
        gap: var(--spacing-mobile-xs) !important;
    }
    
    .exercicios-list {
        gap: var(--spacing-mobile-sm) !important;
    }
    
    .exercicio-card {
        padding: var(--spacing-mobile-md) !important;
        border-radius: var(--border-radius-mobile) !important;
        word-wrap: break-word !important;
        overflow: hidden !important;
    }
    
    .exercicio-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--spacing-mobile-xs) !important;
        margin-bottom: var(--spacing-mobile-sm) !important;
    }
    
    .exercicio-title {
        font-size: var(--font-size-mobile-base) !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        margin: 0 !important;
    }
    
    .exercicio-status {
        align-self: flex-start !important;
        font-size: var(--font-size-mobile-xs) !important;
        padding: 2px var(--spacing-mobile-xs) !important;
    }
    
    .exercicio-details {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-mobile-xs) !important;
        margin-bottom: var(--spacing-mobile-sm) !important;
    }
    
    .detail-item {
        padding: var(--spacing-mobile-xs) !important;
        border-radius: var(--border-radius-mobile) !important;
        min-height: auto !important;
    }
    
    .detail-label {
        font-size: var(--font-size-mobile-xs) !important;
        margin-bottom: 2px !important;
    }
    
    .detail-value {
        font-size: var(--font-size-mobile-xs) !important;
    }
    
    .exercicio-notes {
        padding: var(--spacing-mobile-sm) !important;
        border-radius: var(--border-radius-mobile) !important;
        margin-top: var(--spacing-mobile-sm) !important;
        font-size: var(--font-size-mobile-xs) !important;
        line-height: 1.4 !important;
    }
    
    .exercicio-actions {
        flex-direction: column !important;
        gap: var(--spacing-mobile-xs) !important;
        margin-top: var(--spacing-mobile-sm) !important;
    }
    
    .exercicio-actions .btn {
        width: 100% !important;
        padding: var(--spacing-mobile-sm) !important;
        font-size: var(--font-size-mobile-xs) !important;
        text-align: center !important;
        justify-content: center !important;
        min-height: 36px !important;
    }
    
    /* =================== EMPTY STATES MOBILE =================== */
    
    .modern-empty {
        padding: var(--spacing-mobile-xl) var(--spacing-mobile-lg) !important;
        text-align: center !important;
    }
    
    .empty-illustration {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        margin-bottom: var(--spacing-mobile-md);
    }
    
    .modern-empty h4 {
        font-size: var(--font-size-mobile-lg);
        margin-bottom: var(--spacing-mobile-sm);
    }
    
    .modern-empty p {
        font-size: var(--font-size-mobile-sm);
        margin-bottom: var(--spacing-mobile-lg);
        color: var(--cinza-chumbo);
    }
    
    .empty-actions {
        flex-direction: column;
        gap: var(--spacing-mobile-sm);
        align-items: stretch;
    }
    
    .empty-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .empty-state {
        padding: var(--spacing-mobile-lg) var(--spacing-mobile-md) !important;
        border-radius: var(--border-radius-mobile) !important;
        text-align: center !important;
    }
    
    .empty-icon {
        font-size: 2.5rem !important;
        margin-bottom: var(--spacing-mobile-md) !important;
    }
    
    .empty-state h3,
    .empty-state h4 {
        font-size: var(--font-size-mobile-base) !important;
        margin-bottom: var(--spacing-mobile-sm) !important;
        line-height: 1.3 !important;
    }
    
    .empty-state p {
        font-size: var(--font-size-mobile-xs) !important;
        margin-bottom: var(--spacing-mobile-md) !important;
        line-height: 1.4 !important;
        max-width: 100% !important;
    }
    
    .empty-state .btn {
        width: 100% !important;
        padding: var(--spacing-mobile-sm) var(--spacing-mobile-md) !important;
        font-size: var(--font-size-mobile-xs) !important;
        min-height: 40px !important;
    }
    
    /* =================== CHARTS MOBILE =================== */
    
    .chart-container {
        height: 200px;
        position: relative;
        flex: 1;
    }
    
    .donut-chart-container {
        width: 140px;
        height: 140px;
        margin-bottom: var(--spacing-mobile-md);
    }
    
    .donut-number {
        font-size: 1.4rem;
    }
    
    .donut-label {
        font-size: var(--font-size-mobile-xs);
    }
    
    .meta-message {
        padding: var(--spacing-mobile-sm) var(--spacing-mobile-md);
        font-size: var(--font-size-mobile-sm);
        border-radius: var(--border-radius-mobile);
    }
    
    .chart-legend {
        flex-direction: column;
        gap: var(--spacing-mobile-sm);
        align-items: flex-start;
    }
    
    .legend-item {
        font-size: var(--font-size-mobile-xs);
    }
    
    .chart-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 200px;
        color: var(--cinza-chumbo);
    }
    
    .chart-empty i {
        font-size: 2rem;
        margin-bottom: var(--spacing-mobile-md);
        opacity: 0.5;
    }
    
    /* =================== TIMELINE MOBILE =================== */
    
    .timeline-modern {
        margin-bottom: var(--spacing-mobile-md);
    }
    
    .timeline-item-modern {
        gap: var(--spacing-mobile-md);
        margin-bottom: var(--spacing-mobile-md);
        padding-bottom: var(--spacing-mobile-md);
    }
    
    .timeline-marker-modern {
        width: 28px;
        height: 28px;
        font-size: var(--font-size-mobile-xs);
    }
    
    .timeline-header-modern {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .timeline-header-modern strong {
        font-size: var(--font-size-mobile-sm);
        line-height: 1.2;
    }
    
    .timeline-date {
        font-size: var(--font-size-mobile-xs);
    }
    
    .timeline-details-modern {
        flex-wrap: wrap;
        gap: var(--spacing-mobile-sm);
    }
    
    .ficha-tag {
        font-size: var(--font-size-mobile-xs);
        padding: 2px var(--spacing-mobile-sm);
    }
    
    .exercise-data {
        font-size: var(--font-size-mobile-xs);
    }
    
    .history-actions {
        flex-direction: column;
        gap: var(--spacing-mobile-sm);
    }
    
    .history-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* =================== TIPS CARD MOBILE =================== */
    
    .tip-content-extended {
        flex-direction: column;
        gap: var(--spacing-mobile-md);
        padding: var(--spacing-mobile-lg);
        text-align: center;
    }
    
    .tip-icon {
        font-size: 1.5rem;
        align-self: center;
    }
    
    .tip-text {
        font-size: var(--font-size-mobile-sm);
        line-height: 1.5;
        text-align: left;
    }
    
    .tip-actions {
        flex-direction: column;
        gap: var(--spacing-mobile-sm);
        align-items: stretch;
    }
    
    .tip-stats {
        text-align: center;
        order: 2;
    }
    
    .useful-links {
        margin-top: var(--spacing-mobile-lg);
    }
    
    .useful-links h5 {
        font-size: var(--font-size-mobile-base);
        margin-bottom: var(--spacing-mobile-md);
        text-align: center;
    }
    
    .links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-mobile-sm);
    }
    
    .quick-link {
        padding: var(--spacing-mobile-md);
        font-size: var(--font-size-mobile-xs);
        border-radius: var(--border-radius-mobile);
        min-height: var(--tap-target-size);
    }
    
    .quick-link i {
        font-size: 1.1rem;
    }
}
/* =================== FICHAFIT MOBILE.CSS - PARTE 3 DE 3 =================== */
/* Continuação da Parte 2 - Formulários, responsividade e utilitários */

@media (max-width: 768px) {
    /* =================== FORMULÁRIOS MOBILE =================== */
    
    .form-container {
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: var(--border-radius-mobile) !important;
    }
    
    .form-header {
        padding: var(--spacing-mobile-lg) var(--spacing-mobile-md) !important;
        text-align: center !important;
    }
    
    .form-header h2 {
        font-size: var(--font-size-mobile-lg) !important;
        margin: 0 !important;
        color: white !important;
    }
    
    .form-body {
        padding: var(--spacing-mobile-md) !important;
    }
    
    .form-group {
        margin-bottom: var(--spacing-mobile-lg);
    }
    
    .form-label {
        font-size: var(--font-size-mobile-base);
        margin-bottom: var(--spacing-mobile-sm);
        font-weight: 600;
    }
    
    .form-control {
        font-size: 16px !important;
        padding: var(--spacing-mobile-md);
        border-radius: var(--border-radius-mobile);
        min-height: var(--tap-target-size);
        border: 2px solid var(--cinza-claro);
        transition: border-color 0.2s ease;
    }
    
    .form-control:focus {
        border-color: var(--verde-esmeralda);
        box-shadow: 0 0 0 3px rgba(80, 200, 120, 0.2);
    }
    
    .form-text {
        font-size: var(--font-size-mobile-sm);
        margin-top: var(--spacing-mobile-xs);
        color: var(--cinza-chumbo);
    }
    
    .dias-selection {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-mobile-sm);
        margin-top: var(--spacing-mobile-sm);
    }
    
    .dia-label {
        padding: var(--spacing-mobile-md);
        border-radius: var(--border-radius-mobile);
        font-size: var(--font-size-mobile-sm);
        text-align: center;
        min-height: var(--tap-target-size);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 2px solid var(--cinza-claro);
        transition: all 0.2s ease;
    }
    
    .dia-checkbox:checked + .dia-label {
        border-color: var(--verde-esmeralda);
        background: var(--verde-esmeralda);
        color: white;
    }
    
    .form-actions {
        flex-direction: column;
        gap: var(--spacing-mobile-sm);
        margin-top: var(--spacing-mobile-xl);
        padding-top: var(--spacing-mobile-lg);
    }
    
    .form-actions .btn {
        width: 100%;
        padding: var(--spacing-mobile-md) var(--spacing-mobile-lg);
        font-size: var(--font-size-mobile-base);
        min-height: var(--tap-target-size);
    }
    
    /* =================== ALERTAS MOBILE =================== */
    
    .alert {
        margin: var(--spacing-mobile-md);
        padding: var(--spacing-mobile-md);
        border-radius: var(--border-radius-mobile);
        font-size: var(--font-size-mobile-sm);
    }
    
    .alert-content {
        gap: var(--spacing-mobile-sm);
        align-items: flex-start;
    }
    
    .alert-close {
        min-width: 32px;
        min-height: 32px;
        padding: var(--spacing-mobile-sm);
    }
    
    .alert-card {
        padding: var(--spacing-mobile-lg);
        margin-bottom: var(--spacing-mobile-lg);
        border-radius: var(--border-radius-mobile);
        gap: var(--spacing-mobile-md);
    }
    
    .alert-icon {
        font-size: 1.5rem;
    }
    
    .alert-content h4 {
        font-size: var(--font-size-mobile-lg);
        margin-bottom: var(--spacing-mobile-sm);
    }
    
    .alert-content p {
        font-size: var(--font-size-mobile-sm);
        margin-bottom: var(--spacing-mobile-md);
    }
    
    .alert-actions {
        margin-top: var(--spacing-mobile-sm);
    }
    
    .alert-actions .btn {
        width: 100%;
    }
    
    /* =================== MODAIS MOBILE =================== */
    
    .modal-content {
        margin: var(--spacing-mobile-md);
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        border-radius: var(--border-radius-mobile);
    }
    
    .modal-header {
        padding: var(--spacing-mobile-lg);
        border-radius: var(--border-radius-mobile) var(--border-radius-mobile) 0 0;
    }
    
    .modal-title {
        font-size: var(--font-size-mobile-lg);
    }
    
    .modal-close {
        width: var(--tap-target-size);
        height: var(--tap-target-size);
        font-size: 1.2rem;
    }
    
    .modal-body {
        padding: var(--spacing-mobile-lg);
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .modal-footer {
        padding: var(--spacing-mobile-lg);
        flex-direction: column;
        gap: var(--spacing-mobile-sm);
    }
    
    .modal-footer .btn {
        width: 100%;
        order: 1;
    }
    
    .modal-footer .btn-primary {
        order: 0;
    }
    
    /* =================== NOTIFICAÇÕES MOBILE =================== */
    
    .notifications-container {
        top: calc(var(--header-mobile-height) + var(--spacing-mobile-sm));
        left: var(--spacing-mobile-sm);
        right: var(--spacing-mobile-sm);
        max-width: none;
    }
    
    .notification {
        margin-bottom: var(--spacing-mobile-sm);
        border-radius: var(--border-radius-mobile);
        padding: var(--spacing-mobile-md);
        transform: translateY(-100%);
        min-width: auto;
    }
    
    .notification.show {
        transform: translateY(0);
    }
    
    .notification-content {
        gap: var(--spacing-mobile-sm);
        font-size: var(--font-size-mobile-sm);
    }
    
    .notification-content i {
        font-size: 1rem;
    }
    
    .notification-close {
        min-width: 32px;
        min-height: 32px;
    }
    
    /* =================== TOUCH ENHANCEMENTS =================== */
    
    [data-action], .clickable {
        min-height: var(--tap-target-size);
        min-width: var(--tap-target-size);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn:active,
    .clickable:active,
    [data-action]:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
    
    .scrollable {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
    
    .animated {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
    }
}

/* =================== LANDSCAPE MOBILE =================== */
@media (max-width: 768px) and (orientation: landscape) {
    .main-header {
        height: 48px;
    }
    
    .page-content {
        margin-top: 48px;
        padding-top: var(--spacing-mobile-md);
    }
    
    .welcome-header {
        padding: var(--spacing-mobile-md);
    }
    
    .welcome-text h1 {
        font-size: var(--font-size-mobile-base);
        margin-bottom: 4px;
    }
    
    .welcome-subtitle {
        font-size: var(--font-size-mobile-sm);
    }
    
    .stats-grid-enhanced {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-mobile-sm);
    }
    
    .stat-card-enhanced {
        padding: var(--spacing-mobile-md);
    }
    
    .stat-number {
        font-size: 1.4rem;
    }
    
    .uniform-card {
        padding: var(--spacing-mobile-md);
    }
    
    .modal-content {
        max-height: calc(100vh - 16px);
    }
    
    .modal-body {
        max-height: calc(100vh - 120px);
    }
}

/* =================== DISPOSITIVOS MUITO PEQUENOS =================== */
@media (max-width: 480px) {
    :root {
        --font-size-mobile-xs: 0.75rem;
        --font-size-mobile-sm: 0.85rem;
        --font-size-mobile-base: 0.95rem;
        --font-size-mobile-lg: 1.05rem;
        --font-size-mobile-xl: 1.15rem;
    }
    
    .page-header {
        padding: var(--spacing-mobile-sm) !important;
        margin-bottom: var(--spacing-mobile-sm) !important;
    }
    
    .page-header h1 {
        font-size: var(--font-size-mobile-base) !important;
    }
    
    .ficha-card,
    .exercicio-card {
        padding: var(--spacing-mobile-sm) !important;
    }
    
    .exercicio-details {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-mobile-xs) !important;
    }
    
    .dias-selection {
        grid-template-columns: 1fr !important;
    }
    
    .form-body {
        padding: var(--spacing-mobile-sm) !important;
    }
    
    .ficha-header {
        padding: var(--spacing-mobile-sm) !important;
        margin: calc(-1 * var(--spacing-mobile-sm)) calc(-1 * var(--spacing-mobile-sm)) var(--spacing-mobile-xs) calc(-1 * var(--spacing-mobile-sm)) !important;
    }
    
    .ficha-title {
        font-size: var(--font-size-mobile-sm) !important;
    }
    
    .ficha-professor {
        font-size: var(--font-size-mobile-xs) !important;
    }
    
    .ficha-actions {
        gap: 4px !important;
    }
    
    .ficha-actions .btn {
        padding: var(--spacing-mobile-xs) var(--spacing-mobile-sm) !important;
        font-size: var(--font-size-mobile-xs) !important;
        min-height: 32px !important;
    }
}

/* =================== DARK MODE SUPPORT =================== */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    .main-header {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
    
    .sidebar-overlay {
        background: rgba(0, 0, 0, 0.8);
    }
}

/* =================== ACCESSIBILITY MOBILE =================== */
@media (max-width: 768px) {
    .btn-outline {
        border-width: 2px;
    }
    
    .btn:focus,
    .form-control:focus,
    [tabindex]:focus {
        outline: 3px solid var(--verde-esmeralda);
        outline-offset: 2px;
    }
}

/* =================== PERFORMANCE OPTIMIZATIONS =================== */
@media (max-width: 768px) {
    .card:hover {
        transform: none;
    }
    
    .btn:hover {
        transform: none;
    }
    
    .sidebar {
        will-change: transform;
    }
    
    .modal {
        will-change: opacity;
    }
    
    .notification {
        will-change: transform, opacity;
    }
    
    .animated-element {
        transform: translate3d(0, 0, 0);
    }
}

/* =================== PRINT STYLES =================== */
@media print {
    .sidebar,
    .mobile-menu-toggle,
    .sidebar-overlay,
    .main-header,
    .empty-actions,
    .tip-actions,
    .history-actions,
    .btn,
    .alert-close {
        display: none !important;
    }
    
    .main-content {
        margin: 0 !important;
    }
    
    .page-content {
        margin: 0 !important;
        padding: 1rem !important;
    }
    
    .uniform-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* =================== UTILS MOBILE =================== */
@media (max-width: 768px) {
    .mobile-hidden { display: none !important; }
    .mobile-visible { display: block !important; }
    .mobile-flex { display: flex !important; }
    .mobile-grid { display: grid !important; }
    
    .mobile-text-center { text-align: center !important; }
    .mobile-text-left { text-align: left !important; }
    .mobile-full-width { width: 100% !important; }
    
    .mobile-mt-0 { margin-top: 0 !important; }
    .mobile-mt-1 { margin-top: var(--spacing-mobile-sm) !important; }
    .mobile-mt-2 { margin-top: var(--spacing-mobile-md) !important; }
    .mobile-mt-3 { margin-top: var(--spacing-mobile-lg) !important; }
    
    .mobile-mb-0 { margin-bottom: 0 !important; }
    .mobile-mb-1 { margin-bottom: var(--spacing-mobile-sm) !important; }
    .mobile-mb-2 { margin-bottom: var(--spacing-mobile-md) !important; }
    .mobile-mb-3 { margin-bottom: var(--spacing-mobile-lg) !important; }
    
    .mobile-p-1 { padding: var(--spacing-mobile-sm) !important; }
    .mobile-p-2 { padding: var(--spacing-mobile-md) !important; }
    .mobile-p-3 { padding: var(--spacing-mobile-lg) !important; }
    
    /* =================== CORREÇÃO ESPECÍFICA PARA OVERFLOW =================== */
    
    body {
        overflow-x: hidden !important;
    }
    
    .main-content {
        overflow-x: hidden !important;
        min-width: 0 !important;
    }
    
    .page-content {
        overflow-x: hidden !important;
        min-width: 0 !important;
    }
    
    .card,
    .exercicio-card,
    .ficha-card,
    .stat-card {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    
    h1, h2, h3, h4, h5, h6,
    .card-title,
    .exercicio-title,
    .ficha-title {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    .form-control {
        -webkit-appearance: none !important;
        border-radius: var(--border-radius-mobile) !important;
    }
    
    .btn,
    .card,
    .sidebar-nav a,
    [data-action] {
        -webkit-tap-highlight-color: rgba(1, 128, 98, 0.2) !important;
    }
    
    /* =================== FIXES Z-INDEX =================== */
    
    .sidebar { z-index: 1000 !important; }
    .sidebar-overlay { z-index: 999 !important; }
    .main-header { z-index: 100 !important; }
    .modal { z-index: 99999 !important; }
    .fichafit-video-modal { z-index: 99999 !important; }
    .notifications-container { z-index: 99999 !important; }
    .autocomplete-results { z-index: 1000 !important; }
    .tooltip { z-index: 1000 !important; }
    
    /* =================== CORREÇÃO FINAL PROFESSOR =================== */
    
    .page-header h1,
    .ficha-view-title {
        color: #ffffff !important;
    }
    
    .ficha-view-header .ficha-professor,
    .ficha-professor {
        color: #ffffff !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .btn-outline {
        color: #ffffff !important;
        border-color: #ffffff !important;
    }
    
    .page-header h1 {
        margin: 0 !important;
        color: white !important;
        font-size: 2.2rem !important;
        font-weight: 700 !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    .page-header h1 i {
        color: white !important;
        font-size: 2rem !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }
    
    .exercicio-card.concluido {
        border-color: #28a745 !important;
        background: linear-gradient(135deg, #E8F7F0 0%, #ffffff 100%) !important;
        box-shadow: 0 4px 20px rgba(40, 167, 69, 0.2) !important;
    }
    
    .exercicio-card.concluido::before {
        transform: scaleX(1) !important;
        background: #28a745 !important;
        height: 5px !important;
    }
    
    .status-concluido {
        background: #28a745 !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3) !important;
        animation: pulse-success 2s infinite !important;
    }
    
    .exercicio-card.concluido .detail-item {
        background: rgba(40, 167, 69, 0.1) !important;
        border: 1px solid rgba(40, 167, 69, 0.2) !important;
    }
    
    .exercicio-card.concluido .detail-value {
        color: #28a745 !important;
    }
    
    @keyframes pulse-success {
        0%, 100% {
            box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
        }
        50% {
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.5);
        }
    }
}
/* =================== CORREÇÃO FINAL MOBILE - PROFESSOR E EXERCÍCIOS =================== */
/* Adicione estas regras ao FINAL do arquivo mobile.css */

@media (max-width: 768px) {
    
    /* =================== CORREÇÃO ESPECÍFICA PARA PROFESSOR =================== */
    
    /* Forçar exibição do professor em TODOS os contextos */
    .ficha-professor,
    .ficha-header .ficha-professor,
    .ficha-card .ficha-professor,
    .ficha-view-header .ficha-professor,
    div[class*="professor"],
    span[class*="professor"] {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 11px !important;
        margin-top: 4px !important;
        margin-bottom: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-weight: 400 !important;
        line-height: 1.2 !important;
        min-height: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ícone do professor */
    .ficha-professor i,
    div[class*="professor"] i {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 10px !important;
        display: inline-block !important;
        margin-right: 4px !important;
        flex-shrink: 0 !important;
    }
    
    /* Se o elemento professor existe mas está vazio, mostrar placeholder */
    .ficha-professor:empty::after,
    div[class*="professor"]:empty::after {
        content: "👨‍🏫 Professor não informado" !important;
        color: rgba(255, 255, 255, 0.6) !important;
        font-size: 11px !important;
        font-style: italic !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Garantir que o header da ficha tenha estrutura correta */
    .ficha-header {
        padding: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        margin: -12px -12px 8px -12px !important;
        position: relative !important;
    }
    
    /* Título da ficha */
    .ficha-title,
    .ficha-header h3,
    .ficha-header .ficha-title {
        color: white !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        padding: 0 !important;
        word-break: break-word !important;
        order: 1 !important;
    }
    
    /* Professor logo após o título */
    .ficha-professor {
        order: 2 !important;
    }
    
    /* =================== CORREÇÃO PARA INFORMAÇÕES DA FICHA =================== */
    
    /* Garantir que "Exercícios: 0" apareça corretamente */
    .info-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 6px 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        margin-bottom: 6px !important;
        gap: 2px !important;
    }
    
    .info-label {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--cinza-chumbo) !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    
    .info-value {
        font-size: 11px !important;
        font-weight: 500 !important;
        color: var(--preto) !important;
        display: block !important;
    }
    
    /* Específico para exercícios */
    .info-row:has(.info-label:contains("Exercícios")),
    .info-row:first-child {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Garantir que ícones apareçam */
    .info-label i {
        font-size: 10px !important;
        color: var(--verde-esmeralda) !important;
        display: inline-block !important;
        width: 12px !important;
        text-align: center !important;
    }
    
    /* =================== FALLBACK PARA ELEMENTOS AUSENTES =================== */
    
    /* Se não há info de exercícios, criar via CSS */
    .ficha-info:empty::before {
        content: "🏋️ Exercícios: 0" !important;
        display: block !important;
        font-size: 11px !important;
        color: var(--cinza-chumbo) !important;
        padding: 6px 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }
    
    /* Se não há data de criação, mostrar atual */
    .ficha-info:not(:has(.info-value:contains("/")))::after {
        content: "📅 Criada: " attr(data-date) !important;
        display: block !important;
        font-size: 11px !important;
        color: var(--cinza-chumbo) !important;
        padding: 6px 0 !important;
    }
    
    /* =================== ESPECÍFICO PARA BADGES DE DIAS =================== */
    
    .dias-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }
    
    .dia-badge {
        background: var(--verde-esmeralda) !important;
        color: white !important;
        padding: 2px 6px !important;
        border-radius: 8px !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        display: inline-block !important;
    }
    
    /* =================== CORREÇÃO PARA BOTÕES =================== */
    
    .ficha-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        margin-top: 12px !important;
        width: 100% !important;
    }
    
    .ficha-actions .btn {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 11px !important;
        text-align: center !important;
        justify-content: center !important;
        min-height: 36px !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    /* =================== CORREÇÃO PARA CARD GERAL =================== */
    
    .ficha-card {
        padding: 12px !important;
        margin-bottom: 12px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        word-wrap: break-word !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        background: white !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .ficha-body {
        padding: 8px 0 0 0 !important;
    }
    
    /* =================== CORREÇÃO PARA PÁGINA HEADER =================== */
    
    .page-header {
        padding: 12px !important;
        margin-bottom: 12px !important;
        border-radius: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        background: linear-gradient(135deg, var(--verde-esmeralda) 0%, #018264 100%) !important;
        color: white !important;
    }
    
    .page-header h1 {
        font-size: 16px !important;
        margin: 0 !important;
        color: white !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }
    
    .header-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }
    
    .header-actions .btn {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 11px !important;
        min-height: 36px !important;
    }
    
    /* =================== FORÇA BRUTA PARA ELEMENTOS PERDIDOS =================== */
    
    /* Garantir que QUALQUER texto sobre professor apareça */
    *[class*="prof" i],
    *[data*="prof" i],
    *:contains("Prof."),
    *:contains("Professor") {
        color: rgba(255, 255, 255, 0.9) !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Garantir que números de exercícios apareçam */
    *:contains("Exercícios:"),
    *:contains("exercício") {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* =================== OVERRIDE GERAL =================== */
    
    .ficha-card *,
    .page-header * {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Garantir que nada seja cortado */
    .ficha-card,
    .page-header,
    .ficha-header,
    .ficha-body,
    .ficha-info,
    .ficha-actions {
        overflow: visible !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* =================== DEBUG - MOSTRAR ELEMENTOS ESCONDIDOS =================== */
    
    /* Temporário: mostrar todos os elementos que podem conter professor */
    .ficha-card [style*="display: none"],
    .ficha-card [hidden],
    .ficha-card .d-none {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* =================== DISPOSITIVOS MUITO PEQUENOS =================== */
@media (max-width: 360px) {
    .page-header {
        padding: 8px !important;
    }
    
    .page-header h1 {
        font-size: 14px !important;
    }
    
    .ficha-card {
        padding: 8px !important;
    }
    
    .ficha-header {
        padding: 8px !important;
        margin: -8px -8px 6px -8px !important;
    }
    
    .ficha-title {
        font-size: 12px !important;
    }
    
    .ficha-professor {
        font-size: 10px !important;
    }
    
    .info-label,
    .info-value {
        font-size: 10px !important;
    }
    
    .ficha-actions .btn {
        font-size: 10px !important;
        padding: 8px 10px !important;
        min-height: 32px !important;
    }
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FichaFit - Correção Mobile</title>
    <style>
/* =================== CORREÇÃO ESPECÍFICA PARA MOBILE - TEXTO VISÍVEL =================== */

/* CORREÇÃO PRINCIPAL: Forçar cor preta para texto em mobile */
@media (max-width: 768px) {
    
    /* ===== NOME DO EXERCÍCIO ===== */
    .exercicio-title,
    .exercicio-card .exercicio-title,
    .exercicio-card h4,
    .exercicio-card h4.exercicio-title {
        color: #1A1A1A !important; /* Preto sólido */
        opacity: 1 !important;
        -webkit-text-fill-color: #1A1A1A !important;
        text-shadow: none !important;
    }
    
    /* ===== NOME DO PROFESSOR ===== */
    .ficha-professor,
    .ficha-view-header .ficha-professor,
    .ficha-card .ficha-professor,
    .professor-nome {
        color: #1A1A1A !important; /* Preto sólido */
        opacity: 1 !important;
        -webkit-text-fill-color: #1A1A1A !important;
        text-shadow: none !important;
    }
    
    /* ===== TÍTULOS DE FICHAS ===== */
    .ficha-title,
    .ficha-view-title,
    .card-title {
        color: #1A1A1A !important; /* Preto sólido */
        opacity: 1 !important;
        -webkit-text-fill-color: #1A1A1A !important;
        text-shadow: none !important;
    }
    
    /* ===== LABELS E VALORES ===== */
    .exercicio-stat-label,
    .exercicio-stat-value,
    .detail-label,
    .detail-value,
    .info-label,
    .info-value {
        color: #1A1A1A !important;
        opacity: 1 !important;
        -webkit-text-fill-color: #1A1A1A !important;
    }
    
    /* ===== OBSERVAÇÕES E NOTAS ===== */
    .exercicio-notes,
    .exercicio-observacoes,
    .form-text {
        color: #4A4A4A !important; /* Cinza escuro */
        opacity: 1 !important;
        -webkit-text-fill-color: #4A4A4A !important;
    }
    
    /* ===== STATUS E BADGES ===== */
    .exercicio-status,
    .status-pendente,
    .status-concluido,
    .badge,
    .dia-badge {
        opacity: 1 !important;
    }
    
    /* ===== CORREÇÃO PARA PLACEHOLDERS ===== */
    .form-control::placeholder {
        color: #6c757d !important; /* Cinza médio para placeholders */
        opacity: 0.8 !important;
        -webkit-text-fill-color: #6c757d !important;
    }
    
    /* ===== CORREÇÃO PARA HEADERS ===== */
    .page-header h1,
    .page-header h1 i {
        color: #FFFFFF !important; /* Branco para headers */
        opacity: 1 !important;
        -webkit-text-fill-color: #FFFFFF !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* ===== CORREÇÃO ESPECÍFICA PARA GRADIENTES ===== */
    .page-title {
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: #018062 !important;
        color: #018062 !important;
    }
    
    /* ===== FORÇAR COR EM TODOS OS TEXTOS PRINCIPAIS ===== */
    h1, h2, h3, h4, h5, h6 {
        color: #1A1A1A !important;
        opacity: 1 !important;
        -webkit-text-fill-color: #1A1A1A !important;
    }
    
    /* ===== EXCEÇÕES PARA ELEMENTOS COM FUNDO COLORIDO ===== */
    .ficha-view-header h1,
    .ficha-view-header h2,
    .ficha-view-header .ficha-professor,
    .auth-header h1,
    .auth-header h2,
    .modal-header h1,
    .modal-header h2,
    .sidebar h1,
    .sidebar h2,
    .sidebar h3,
    .sidebar h4,
    .sidebar h5,
    .sidebar h6,
    .sidebar .user-name,
    .sidebar .user-role,
    .sidebar a,
    .btn,
    .alert {
        color: inherit !important; /* Manter cores originais para elementos com fundo */
        -webkit-text-fill-color: inherit !important;
    }
    
    /* ===== CORREÇÃO PARA LINKS ===== */
    a {
        color: #018062 !important;
        -webkit-text-fill-color: #018062 !important;
    }
    
    a:hover {
        color: #016B54 !important;
        -webkit-text-fill-color: #016B54 !important;
    }
    
    /* ===== CORREÇÃO PARA PARÁGRAFOS ===== */
    p {
        color: #4A4A4A !important;
        opacity: 1 !important;
        -webkit-text-fill-color: #4A4A4A !important;
    }
    
    /* ===== CORREÇÃO ESPECÍFICA PARA CARDS ===== */
    .card,
    .ficha-card,
    .exercicio-card {
        color: #1A1A1A !important;
    }
    
    .card *,
    .ficha-card *,
    .exercicio-card * {
        color: inherit !important;
    }
    
    /* ===== OVERRIDE FINAL PARA GARANTIR VISIBILIDADE ===== */
    .exercicio-card .exercicio-title,
    .ficha-card .ficha-title,
    .exercicio-card h4,
    .ficha-card h3 {
        color: #1A1A1A !important;
        font-weight: 700 !important;
        opacity: 1 !important;
        -webkit-text-fill-color: #1A1A1A !important;
        text-shadow: none !important;
        background: none !important;
        -webkit-background-clip: unset !important;
    }
}

/* ===== CORREÇÃO ADICIONAL PARA DISPOSITIVOS MUITO PEQUENOS ===== */
@media (max-width: 480px) {
    .exercicio-title,
    .ficha-title,
    .ficha-professor,
    .professor-nome {
        color: #000000 !important; /* Preto absoluto */
        font-weight: 600 !important;
        opacity: 1 !important;
        -webkit-text-fill-color: #000000 !important;
        text-shadow: none !important;
        background: none !important;
        -webkit-background-clip: unset !important;
    }
}

/* ===== CORREÇÃO PARA HIGH DPI DISPLAYS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    @media (max-width: 768px) {
        .exercicio-title,
        .ficha-title,
        .ficha-professor {
            color: #1A1A1A !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
            text-rendering: optimizeLegibility !important;
        }
    }
}

/* ===== DEMONSTRAÇÃO COM CARDS DE EXEMPLO ===== */
.demo-container {
    padding: 20px;
    background: #f8f9fa;
    font-family: 'Inter', sans-serif;
}

.demo-exercicio-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 2px solid #eee;
}

.demo-exercicio-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 0.5rem;
}

.demo-ficha-professor {
    color: #4A4A4A;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.demo-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.demo-detail-item {
    text-align: center;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.demo-detail-label {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.demo-detail-value {
    font-size: 1rem;
    font-weight: 600;
    color: #1A1A1A;
}

.demo-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.demo-status-pendente {
    background: #ffc107;
    color: #1A1A1A;
}

.demo-status-concluido {
    background: #28a745;
    color: white;
}

.demo-notes {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #17a2b8;
    color: #4A4A4A;
    margin-bottom: 1rem;
}

.btn-demo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.btn-primary-demo {
    background: #018062;
    color: white;
}

.btn-outline-demo {
    background: transparent;
    border: 2px solid #6c757d;
    color: #6c757d;
}

.btn-danger-demo {
    background: #dc3545;
    color: white;
}

.mobile-test {
    background: linear-gradient(135deg, #018062, #45B567);
    color: white;
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    text-align: center;
}

.device-info {
    background: #e9ecef;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-family: monospace;
    font-size: 0.85rem;
}
    </style>
</head>
<body>
    <div class="demo-container">
        <div class="mobile-test">
            <h2>Teste de Visibilidade Mobile - FichaFit</h2>
            <p>Esta demonstração mostra como os textos aparecem corretamente em dispositivos móveis após a correção.</p>
        </div>

        <div class="device-info">
            <strong>Informações do Dispositivo:</strong><br>
            Largura da tela: <span id="screenWidth"></span>px<br>
            Altura da tela: <span id="screenHeight"></span>px<br>
            User Agent: <span id="userAgent"></span><br>
            É Mobile: <span id="isMobile"></span>
        </div>

        <div class="demo-exercicio-card">
            <div class="demo-exercicio-title">
                1. Supino Reto com Barra
            </div>
            
            <div class="demo-ficha-professor">
                <i class="fas fa-user-tie" style="color: #018062;"></i>
                Prof. João Silva
            </div>
            
            <div class="demo-status demo-status-pendente">
                <i class="fas fa-clock"></i> Pendente
            </div>
            
            <div class="demo-details">
                <div class="demo-detail-item">
                    <div class="demo-detail-label">Séries</div>
                    <div class="demo-detail-value">4</div>
                </div>
                <div class="demo-detail-item">
                    <div class="demo-detail-label">Repetições</div>
                    <div class="demo-detail-value">8-12</div>
                </div>
                <div class="demo-detail-item">
                    <div class="demo-detail-label">Carga</div>
                    <div class="demo-detail-value">80kg</div>
                </div>
                <div class="demo-detail-item">
                    <div class="demo-detail-label">Aparelho</div>
                    <div class="demo-detail-value">Banco</div>
                </div>
            </div>
            
            <div class="demo-notes">
                <strong><i class="fas fa-sticky-note"></i> Observações:</strong><br>
                Manter a pegada na largura dos ombros. Controlar bem a descida e subida. Manter o core contraído durante todo o movimento.
            </div>
            
            <div>
                <button class="btn-demo btn-primary-demo">
                    <i class="fas fa-check"></i> Marcar como Concluído
                </button>
                <button class="btn-demo btn-danger-demo">
                    <i class="fas fa-play"></i> Vídeo
                </button>
                <button class="btn-demo btn-outline-demo">
                    <i class="fas fa-edit"></i> Editar
                </button>
            </div>
        </div>

        <div class="demo-exercicio-card" style="border-color: #28a745; background: rgba(40, 167, 69, 0.05);">
            <div class="demo-exercicio-title">
                2. Leg Press 45°
            </div>
            
            <div class="demo-ficha-professor">
                <i class="fas fa-user-tie" style="color: #018062;"></i>
                Prof. Maria Santos
            </div>
            
            <div class="demo-status demo-status-concluido">
                <i class="fas fa-check-circle"></i> Concluído hoje
            </div>
            
            <div class="demo-details">
                <div class="demo-detail-item">
                    <div class="demo-detail-label">Séries</div>
                    <div class="demo-detail-value">3</div>
                </div>
                <div class="demo-detail-item">
                    <div class="demo-detail-label">Repetições</div>
                    <div class="demo-detail-value">15-20</div>
                </div>
                <div class="demo-detail-item">
                    <div class="demo-detail-label">Carga</div>
                    <div class="demo-detail-value">120kg</div>
                </div>
                <div class="demo-detail-item">
                    <div class="demo-detail-label">Aparelho</div>
                    <div class="demo-detail-value">Leg Press</div>
                </div>
            </div>
            
            <div class="demo-notes">
                <strong><i class="fas fa-sticky-note"></i> Observações:</strong><br>
                Pés na largura dos ombros. Descer até 90° de flexão do joelho. Não travar completamente os joelhos na subida.
            </div>
            
            <div>
                <button class="btn-demo btn-outline-demo">
                    <i class="fas fa-undo"></i> Desmarcar
                </button>
                <button class="btn-demo btn-danger-demo">
                    <i class="fas fa-play"></i> Vídeo
                </button>
                <button class="btn-demo btn-outline-demo">
                    <i class="fas fa-edit"></i> Editar
                </button>
            </div>
        </div>

        <div style="background: white; padding: 1rem; border-radius: 8px; margin-top: 2rem;">
            <h3 style="color: #018062; margin-bottom: 1rem;">✅ Problemas Corrigidos:</h3>
            <ul style="color: #4A4A4A; line-height: 1.6;">
                <li><strong>Nome do exercício</strong> - Agora aparece em preto sólido no mobile</li>
                <li><strong>Nome do professor</strong> - Cor preta garantida em todos os dispositivos</li>
                <li><strong>Títulos de fichas</strong> - Visibilidade corrigida para mobile</li>
                <li><strong>Labels e valores</strong> - Contraste adequado mantido</li>
                <li><strong>Placeholders</strong> - Cor ajustada para boa legibilidade</li>
                <li><strong>Compatibilidade</strong> - Funciona em todos os tamanhos de tela</li>
            </ul>
        </div>

        <div style="background: #e7f3ff; padding: 1rem; border-radius: 8px; margin-top: 1rem; border-left: 4px solid #007bff;">
            <h4 style="color: #004085; margin-bottom: 0.5rem;">💡 Como Aplicar a Correção:</h4>
            <p style="color: #004085; margin: 0;">
                Adicione o CSS acima ao final do arquivo <code>mobile.css</code> ou <code>style.css</code> do seu projeto FichaFit. 
                A correção usa <code>!important</code> para garantir que os textos sejam sempre visíveis no mobile.
            </p>
        </div>
    </div>

    <script>
        // Atualizar informações do dispositivo
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('screenWidth').textContent = window.innerWidth;
            document.getElementById('screenHeight').textContent = window.innerHeight;
            document.getElementById('userAgent').textContent = navigator.userAgent.substring(0, 50) + '...';
            
            const isMobile = window.innerWidth <= 768 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            document.getElementById('isMobile').textContent = isMobile ? 'Sim' : 'Não';
            
            // Atualizar em resize
            window.addEventListener('resize', function() {
                document.getElementById('screenWidth').textContent = window.innerWidth;
                document.getElementById('screenHeight').textContent = window.innerHeight;
                
                const isMobile = window.innerWidth <= 768;
                document.getElementById('isMobile').textContent = isMobile ? 'Sim' : 'Não';
            });
        });
        
        // Simular cliques nos botões
        document.querySelectorAll('.btn-demo').forEach(btn => {
            btn.addEventListener('click', function() {
                const action = this.textContent.trim();
                alert(`Ação simulada: ${action}`);
            });
        });
    </script>
</body>
</html>