@media (max-width: 768px) {
  .action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .action-bar .input-search {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
            .layout { grid-template-columns: 1fr; padding: 10px; }
            .sidebar { display: none; }
            .user-card {
                grid-template-columns: auto 1fr;
                grid-template-rows: auto auto;
                padding-bottom: 50px; 
            }
            .user-details {
                grid-row: 1 / 2;
                grid-column: 2 / 3;
            }
            .user-status-tasks {
                grid-row: 2 / 3;
                grid-column: 1 / 3;
                align-items: flex-start;
                flex-direction: row;
                gap: 10px;
                margin-top: 5px;
            }
            .user-actions {
                position: absolute;
                bottom: 10px;
                right: 15px;
                display: flex;
                gap: 5px;
            }
        }

@media (max-width: 768px) {
      .layout { grid-template-columns: 1fr; padding: 10px; }
      .sidebar { display: none; }
    }

@media (max-width: 768px) {
      .layout { grid-template-columns: 1fr; padding: 10px; }
      .sidebar { display: none; }
    }

@media (max-width: 768px) {
      .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

@media (max-width: 768px) {
      .layout { grid-template-columns: 1fr; padding: 10px; }
      .sidebar { display: none; }
    }

@media (max-width: 768px) {
      .layout { grid-template-columns: 1fr; padding: 10px; }
      .sidebar { display: none; }
      .material-card {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 10px;
      }
      .material-actions {
        grid-column: 1 / 3;
        justify-content: flex-end;
      }
    }

@media print {
        .sidebar, .app-header, .logout-btn, .btn-outline, .mobile-bottom-nav { display: none !important; }
        .layout { display: block !important; }
        .report-container { box-shadow: none; border: none; padding: 0; }
    }

@media (max-width: 768px) {
      .layout { grid-template-columns: 1fr; padding: 10px; }
      .sidebar { display: none; }
      .user-card {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        padding-bottom: 50px; /* Espacio para el botón */
      }
      .user-details {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
      }
      .user-role-status {
        grid-row: 2 / 3;
        grid-column: 1 / 3;
        align-items: flex-start;
        flex-direction: row;
        gap: 10px;
        margin-top: 5px;
      }
      .user-role-status .role-tag {
        border-right: 1px solid var(--border);
        padding-right: 10px;
      }
      .user-actions {
        position: absolute;
        bottom: 10px;
        right: 15px;
      }
    }

@media (max-width: 768px) {
      .layout { grid-template-columns: 1fr; padding: 10px; }
      .sidebar { display: none; }
      .profile-grid { grid-template-columns: 1fr; }
    }

@media (max-width: 768px) {
        .details-grid { grid-template-columns: 1fr; }
    }

@media (max-width: 768px) {
      .layout { grid-template-columns: 1fr; padding: 10px; }
      .sidebar { display: none; }
    }

@media (max-width: 640px) {
  .layout {
    grid-template-columns: 1fr;
    padding: 16px 16px 28px;
    gap: 16px;
  }
  .content { padding: 18px; }
}

@media (max-width: 480px) {
  .app-header { padding: 10px 14px; }
  .logout-btn .label { display: none; }
  .user-info { display: none; }
}

@media (max-width: 380px) {
  .app-header { padding: 8px 12px; }
  .layout { padding: 12px 12px 24px; }
  .content { padding: 14px; }
  .grid-3 { grid-template-columns: 1fr; }
}